docs: improve v0.6 session acccess and management docs (sidebase#391)

* cleanup: remove badcopy pasta, write actual docs, merge moredocs into one

* docs: reference knitwork

docs/content/v0.6/3.application-side/2.session-access-and-management.md

@@ -1,10 +1,8 @@
 # Session Access and Management
 
-## Provider: `authjs`
-
 The `useAuth` composable is your main gateway to accessing and manipulating session-state and data. Here's the main methods you can use:
-
-```ts
+::code-group
+```ts [authjs]
 const {
   status,
   data,
@@ -52,24 +50,7 @@ await signOut()
 // Trigger a sign-out and send the user to the sign-out page afterwards
 await signOut({ callbackUrl: '/signout' })
 ```
-
-Session `data.value` has the following interface:
-```ts
-interface DefaultSession {
-  user?: {
-    name?: string | null;
-    email?: string | null;
-    image?: string | null;
-  };
-  expires: ISODateString;
-}
-```
-
-Note that this is only set when the user is logged-in and when the provider used to login the user provides the fields.
-
-## Provider: `local`
-
-```ts
+```ts [local]
 const {
   status,
   data,
@@ -96,48 +77,80 @@ lastRefreshedAt.value
 // Get / Reload the current session from the server, pass `{ required: true }` to force a login if no session exists
 await getSession()
 
-// Trigger a sign-in
-await signIn()
+// Trigger a sign-in, where `credentials` are the credentials your sign-in endpoint expected, e.g. `{ username: 'bernd', password: 'hunter2' }`
+await signIn(credentials)
 
 // Trigger a sign-in with a redirect afterwards
-await signIn(undefined, { callbackUrl: '/protected' })
-
-// Trigger a sign-in via a specific authentication provider with a redirect afterwards
-await signIn('github', { callbackUrl: '/protected' })
-
-// Trigger a sign-in with username and password already passed, e.g., from your own custom-made sign-in form
-await signIn('credentials', { username: 'jsmith', password: 'hunter2' })
+await signIn(credentials, { callbackUrl: '/protected' })
 
 // Trigger a sign-out
 await signOut()
 
 // Trigger a sign-out and send the user to the sign-out page afterwards
 await signOut({ callbackUrl: '/signout' })
 ```
+::
 
-Session `data.value` has the type `Record<string, any` as any kind of data can be returned from your backend. Write a typed getter / composable to validate the return and get improved typing.
+## `SessionData`
 
-Note that this is only set when the user is logged-in and when the backend used to login the user provides the fields.
+As described above you can use:
+```ts
+const { data } = useAuth()
+```
+
+to access the session-data of the currently logged in user. Depending on the provider you use, this data will be typed differently:
+::code-group
+```ts [authjs]
+interface SessionData {
+  user?: {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+  };
+  expires: ISODateString;
+}
+```
+```ts [local]
+// Option A: No explicit configuration
+inferface SessionData { 
+    id: string | number
+}
+
+// Option B: You configured `auth.provider.sessionDataType` to something like ` { id: 'string', email: 'string', name: 'string', role: 'admin | guest | account' }`
+inferface SessionData { 
+  id: string
+  email: string
+  name: string
+  role: 'admin' | 'guest' | 'account'
+}
+```
+::
+
+### About `auth.provider.sessionDataType`
+
+This is a configuration option available to dynamically type the `SessionData` that the `local` provider will return when accessing `data.value`. Read more about this in the [nuxt.config.ts configuration documentation](/nuxt-auth/v0.6/configuration/nuxt-config) of the `local` provider.
+
+`nuxt-auth` uses [unjs/knitwork](https://github.com/unjs/knitwork) to generate the correct typescript interface from the type you provide.
 
 ## Redirects
 
-You can also pass the `callbackUrl` option to both the `signIn`, the `signOut` and the `getSession` method. This allows you to redirect a user to a certain pages, after they've completed the action. This can be useful when a user attempts to open a page (`/protected`) but has to go through external authentication (e.g., via their google account) first.
+You can also pass the `callbackUrl` option to both the `signIn`, the `signOut` and the `getSession` methods. This allows you to redirect a user to a certain pages, after they've completed the action. This can be useful when a user attempts to open a page (`/protected`) but has to go through external authentication (e.g., via their google account) first.
 
 You can use it like:
-```ts
-await signIn({ callbackUrl: '/protected' })
-```
-
-to redirect the user to the protected page they wanted to access _after_ they've been authenticated.
+::code-group
+```ts [authjs]
+await signIn(undefined, { callbackUrl: '/protected' })
 
-You can do the same for signing out the user:
-```ts
 await signOut({ callbackUrl: '/protected' })
+
+await getSession({ callbackUrl: '/protected' })
 ```
+```ts [local]
+const credentials = { username: 'bernd', password: 'hunter2' }
+await signIn(credentials, { callbackUrl: '/protected' })
 
-E.g., to redirect the user away from the already loaded, protected, page after signout (else, you will have to handle the redirect yourself).
+await signOut(credentials, { callbackUrl: '/protected' })
 
-You may also pass specify a callback for the `getSession` utility:
-```ts
-await getSession({ callbackUrl: '/protected' })
+await getSession(credentials, { callbackUrl: '/protected' })
 ```
+::