feat: Make use session sync, use a plugin based approach for session fetching, add auth middleware, add lastRefreshedAt property to session(#69)

* feat: use more h3 native utilities in nuxt auth handler

* cleanup: move fetch and url helpers to utils, improve some typing

* cleanup: restructure useSession to prepare for sync, move url and navigate utiltiy to urls.ts

* feat: move all state to one composable, resolve empty object todo, start on pplugin

* feat: switch to plugin based approach fully

* cleanup: no more async _fetch as its unused

* cleanup/feat!: rename lastSync to lastRefreshedAt and expose + document it, make useSession data read-only, improve docs by expanding getting started + configuration section + credit @JoaoPedroAS51 + fix type check command, add lastRefrehsedAt to app.vue, add a new example page to the playground that will always be unprotected, remove now() util in favor of a real date, make `getCsrfToken` return the token right away

* fix: use `callWithNuxt` in nested composable calls

* polishing: improve docs feature section, return promise from async function firectly

* refactor: use url based on request event on client

* refactor: only get session if it was not fetched server-side

* refactor: dont make status readonly, return promise directly

* refactor: stop using deprecated utility during module setup

* feat: add note to local middleware docs, a bit better logging by module setup

* polish: take over some env var config from next-auth nuxt example

Author: BracketJohn

README.md

@@ -41,10 +41,7 @@ Done! You can now use all user-related functionality, for example:
 ::code-group
 ```ts [Application side]
 // file: e.g ~/pages/login.vue
-const { status, data, signIn, signOut } = await useSession({
-   // Whether a session is required. If it is, a redirect to the signin page will happen if no active session exists
-   required: true
-})
+const { status, data, signIn, signOut } = useSession()
 
 status.value // Session status: `unauthenticated`, `loading`, `authenticated`
 data.value // Session data, e.g., expiration, user.email, ...

docs/content/1.welcome/1.index.md

@@ -106,7 +106,7 @@ To create your custom sign-in page you can use `signIn` to directly start a prov
 </template>
 
 <script setup lang="ts">
-const { signIn } = await useSession({ required: false })
+const { signIn } = useSession()
 </script>
 ```
 

docs/content/4.usage/0.index.md

@@ -29,6 +29,7 @@
     "@nuxt/kit": "^3.0.0-rc.12",
     "defu": "^6.1.0",
     "next-auth": "^4.14.0",
+    "requrl": "^3.0.2",
     "ufo": "^1.0.0"
   },
   "devDependencies": {

package-lock.json

@@ -4,6 +4,7 @@
     <p>See all available authentication & session information below. Navigate to different sub-pages to test out the app.</p>
     <pre>Status: {{ status }}</pre>
     <pre>Data: {{ data || 'no session data present, are you logged in?' }}</pre>
+    <pre>Last refreshed at: {{ lastRefreshedAt || 'no refresh happened' }}</pre>
     <pre>Decoded JWT token: {{ token || 'no token present, are you logged in?' }}</pre>
     <pre>CSRF Token: {{ csrfToken }}</pre>
     <pre>Providers: {{ providers }}</pre>
@@ -19,12 +20,12 @@
         -> globally protected page
       </nuxt-link>
       <br>
-      <nuxt-link to="/protected/inline">
-        -> inline protected page
+      <nuxt-link to="/protected/locally">
+        -> locally protected page
       </nuxt-link>
       <br>
-      <nuxt-link to="/protected/named">
-        -> named protected page
+      <nuxt-link to="/always-unprotected">
+        -> page that is always unprotected
       </nuxt-link>
       <br>
       <nuxt-link to="/api/protected/inline" external>
@@ -45,7 +46,7 @@
 <script setup lang="ts">
 import { useSession, useRoute, useFetch, useRequestHeaders } from '#imports'
 
-const { data, status, getCsrfToken, getProviders } = await useSession({ required: false })
+const { data, status, lastRefreshedAt, getCsrfToken, getProviders } = useSession()
 
 const providers = await getProviders()
 const csrfToken = await getCsrfToken()

package.json

@@ -2,5 +2,8 @@ import NuxtAuth from '..'
 
 export default defineNuxtConfig({
   // @ts-expect-error See https://github.com/nuxt/framework/issues/8931
-  modules: [NuxtAuth]
+  modules: [NuxtAuth],
+  auth: {
+    enableGlobalAppMiddleware: true
+  }
 })

playground/app.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>I'm a secret! My protection works via an named middleware.</div>
+  <div>I'm always public, even when the global auth middleware is enabled!</div>
 </template>
 
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 
 definePageMeta({
-  middleware: ['auth']
+  auth: false
 })
 </script>