Feature: Option to remove server side auth

.github/workflows/ci.yaml

@@ -71,6 +71,11 @@ jobs:
       # Check building
       - run: pnpm build
 
+      # start prod-app and curl from it
+      - run: "timeout 60 pnpm start & (sleep 45 && curl --fail localhost:$PORT)"
+        env:
+          AUTH_ORIGIN: "http://localhost:3001"
+          PORT: 3001
       - name: Run Playwright tests using Vitest
         run: pnpm test:e2e
 
@@ -133,5 +138,5 @@ jobs:
       # start prod-app and curl from it
       - run: "timeout 60 pnpm start & (sleep 45 && curl --fail localhost:$PORT)"
         env:
-          AUTH_ORIGIN: "http://localhost:3001"
-          PORT: 3001
+          AUTH_ORIGIN: "http://localhost:3000"
+          PORT: 3000

docs/content/1.getting-started/4.caching-content.md

@@ -0,0 +1,85 @@
+---
+description: "Learn how to configure your project to support caching"
+---
+
+::alert{type="info"}
+If you are using the following routeRules (`swr`, `isr`, `prerender`), you will need to read this. When prerendering your entire site using `nuxi generate`, this is done automatically.
+::
+
+# Caching Content
+
+Often hosting providers offer caching on the edge. Most websites can experience incredible speeds (and cost savings) by taking advantage of caching. No cold start, no processing requests, no parsing Javascript... just HTML served immediately from a CDN.
+
+By default we send the user's authentication data down to the client in the HTML. This might not be ideal if you're caching your pages. Users may be able to see other user's authentication data if not handled properly.
+
+To add caching to your Nuxt app, follow the [Nuxt documentation on hybrid rendering](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering).
+
+## Configuration
+
+::alert{type="warning"}
+If you find yourself needing to server-rendered auth methods like `getProviders()`, you must set the `baseURL` option on the `auth` object. This applies in development too.
+::
+
+### Page Specific Cache Rules
+
+If only a few of your pages are cached. Head over to the Nuxt config `routeRules`, add the `auth` key to your cached routes. Set `disableServerSideAuth` to `true`.
+
+```ts
+export default defineNuxtConfig({
+    modules: ['@sidebase/nuxt-auth'],
+    auth: {
+        // Optional - Needed for getProviders() method to work server-side
+        baseURL: 'http://localhost:3000',
+    },
+    routeRules: {
+        '/': {
+            swr: 86400000,
+            auth: {
+                disableServerSideAuth: true,
+            },
+        },
+    },
+})
+```
+
+### Module Cache Rules
+
+If all/most pages on your site are cached. Head over to the Nuxt config, add the `auth` key if not already there. Set `disableServerSideAuth` to `true`.
+
+```ts
+export default defineNuxtConfig({
+    modules: ['@sidebase/nuxt-auth'],
+    auth: {
+        disableServerSideAuth: true,
+        // Optional - Needed for getProviders() method to work server-side
+        baseURL: 'http://localhost:3000',
+    },
+})
+```
+
+### Combining Configurations
+
+Route-configured options take precedent over module-configured options. If you disabled server side auth in the module, you may still enable server side auth back by setting `auth.disableServerSideAuth` to `false`.
+
+For example: It may be ideal to add caching to every page besides your profile page.
+
+```ts
+export default defineNuxtConfig({
+    modules: ['@sidebase/nuxt-auth'],
+    auth: {
+        disableServerSideAuth: true,
+    },
+    routeRules: {
+        // Server side auth is disabled on this page because of global setting
+        '/': {
+            swr: 86400000,
+        }
+        // Server side auth is enabled on this page - route rules takes priority.
+        '/profile': {
+            auth: {
+                disableServerSideAuth: false,
+            },
+        },
+    },
+})
+```

docs/content/2.configuration/2.nuxt-config.md

@@ -16,6 +16,14 @@ interface ModuleOptions {
    * Whether the module is enabled at all
    */
   isEnabled?: boolean
+  /**
+   * Forces your server to send a "loading" authentication status on all requests, thus prompting the client to do a fetch. If your website has caching, this prevents the server from caching someone's authentication status.
+   *
+   * This effects the entire site, for route-specific rules, add `disableServerSideAuth` on `routeRules`.
+   *
+   * @default false
+   */
+  disableServerSideAuth?: boolean;
   /**
    * Full url at which the app will run combined with the path to authentication. You can set this differently depending on your selected authentication-provider:
    * - `authjs`: You must set the full URL, with origin and path in production. You can leave this empty in development

docs/content/2.configuration/3.route-config.md

@@ -0,0 +1,14 @@
+# Route Rules
+
+Use the `auth`-key inside the `nuxt.config.ts` `routeRules` to configure page-specific settings.
+
+```ts
+interface RouteOptions {
+  /**
+   * Forces your server to send a "loading" status on a route, prompting the client to fetch on the client. If a specific page has caching, this prevents the server from caching someone's authentication status.
+   *
+   * @default false
+   */
+  disableServerSideAuth: boolean;
+}
+```

playground-authjs/nuxt.config.ts

@@ -6,6 +6,15 @@ export default defineNuxtConfig({
     },
     globalAppMiddleware: {
       isEnabled: true
+    },
+    baseURL: `http://localhost:${process.env.PORT || 3000}`
+  },
+  routeRules: {
+    '/with-caching': {
+      swr: 86400000,
+      auth: {
+        disableServerSideAuth: true
+      }
     }
   }
 })

playground-authjs/pages/index.vue

@@ -26,6 +26,10 @@ definePageMeta({ auth: false })
       -> guest mode
     </nuxt-link>
     <br>
+    <nuxt-link to="/with-caching">
+      -> cached page with swr
+    </nuxt-link>
+    <br>
     <div>select one of the above actions to get started.</div>
   </div>
 </template>

playground-authjs/pages/with-caching.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { definePageMeta, ref, useState } from '#imports'
+
+const clientRenderTime = ref<Date>(new Date())
+
+const serverRenderTime = useState('server-render-date', () => new Date())
+
+definePageMeta({ auth: false })
+</script>
+
+<template>
+  <div>
+    <p>Server Render Time: {{ serverRenderTime?.toISOString() }}</p>
+    <p>Client Render Time: {{ clientRenderTime?.toISOString() }}</p>
+  </div>
+</template>

playground-local/nuxt.config.ts

@@ -27,5 +27,13 @@ export default defineNuxtConfig({
     globalAppMiddleware: {
       isEnabled: true
     }
+  },
+  routeRules: {
+    '/with-caching': {
+      swr: 86400000,
+      auth: {
+        disableServerSideAuth: true
+      }
+    }
   }
 })

playground-local/pages/index.vue

@@ -26,6 +26,10 @@ definePageMeta({ auth: false })
       -> guest mode
     </nuxt-link>
     <br>
+    <nuxt-link to="/with-caching">
+      -> cached page with swr
+    </nuxt-link>
+    <br>
     <div>select one of the above actions to get started.</div>
   </div>
 </template>

playground-local/pages/with-caching.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { definePageMeta, ref, useState } from '#imports'
+
+const clientRenderTime = ref<Date>(new Date())
+
+const serverRenderTime = useState('server-render-date', () => new Date())
+
+definePageMeta({ auth: false })
+</script>
+
+<template>
+  <div>
+    <p>Server Render Time: {{ serverRenderTime?.toISOString() }}</p>
+    <p>Client Render Time: {{ clientRenderTime?.toISOString() }}</p>
+  </div>
+</template>

playground-refresh/nuxt.config.ts

@@ -26,5 +26,13 @@ export default defineNuxtConfig({
     globalAppMiddleware: {
       isEnabled: true
     }
+  },
+  routeRules: {
+    '/with-caching': {
+      swr: 86400000,
+      auth: {
+        disableServerSideAuth: true
+      }
+    }
   }
 })

playground-refresh/pages/index.vue

@@ -25,6 +25,10 @@ definePageMeta({ auth: false })
       -> guest mode
     </nuxt-link>
     <br>
+    <nuxt-link to="/with-caching">
+      -> cached page with swr
+    </nuxt-link>
+    <br>
     <div>select one of the above actions to get started.</div>
   </div>
 </template>

playground-refresh/pages/with-caching.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { definePageMeta, ref, useState } from '#imports'
+
+const clientRenderTime = ref<Date>(new Date())
+
+const serverRenderTime = useState('server-render-date', () => new Date())
+
+definePageMeta({ auth: false })
+</script>
+
+<template>
+  <div>
+    <p>Server Render Time: {{ serverRenderTime?.toISOString() }}</p>
+    <p>Client Render Time: {{ clientRenderTime?.toISOString() }}</p>
+  </div>
+</template>

src/module.ts

@@ -22,6 +22,7 @@ import type {
 
 const topLevelDefaults = {
   isEnabled: true,
+  disableServerSideAuth: false,
   session: {
     enableRefreshPeriodically: false,
     enableRefreshOnWindowFocus: true
@@ -202,7 +203,16 @@ export default defineNuxtModule<ModuleOptions>({
               (options.provider as any).sessionDataType
             )
             : '',
-          '}'
+          '}',
+          "declare module 'nitropack' {",
+          '  interface NitroRouteRules {',
+          `    auth?: import('${resolve('./runtime/types.ts')}').RouteOptions`,
+          '  }',
+          '  interface NitroRouteConfig {',
+          `    auth?: import('${resolve('./runtime/types.ts')}').RouteOptions`,
+          '  }',
+          '}',
+          'export {}'
         ].join('\n')
     })
 

src/runtime/composables/local/useAuth.ts

@@ -4,6 +4,7 @@ import type { CommonUseAuthReturn, SignOutFunc, SignInFunc, GetSessionFunc, Seco
 import { _fetch } from '../../utils/fetch'
 import { jsonPointerGet, useTypedBackendConfig } from '../../helpers'
 import { getRequestURLWN } from '../../utils/callWithNuxt'
+import { formatToken } from '../../utils/local'
 import { useAuthState } from './useAuthState'
 // @ts-expect-error - #auth not defined
 import type { SessionData } from '#auth'
@@ -74,13 +75,18 @@ const getSession: GetSessionFunc<SessionData | null | void> = async (getSessionO
 
   const config = useTypedBackendConfig(useRuntimeConfig(), 'local')
   const { path, method } = config.endpoints.getSession
-  const { data, loading, lastRefreshedAt, token, rawToken } = useAuthState()
+  const { data, loading, lastRefreshedAt, rawToken, token: tokenState, _internal } = useAuthState()
 
-  if (!token.value && !getSessionOptions?.force) {
+  let token = tokenState.value
+  // For cached responses, return the token directly from the cookie
+  token ??= formatToken(_internal.rawTokenCookie.value)
+
+  if (!token && !getSessionOptions?.force) {
+    loading.value = false
     return
   }
 
-  const headers = new Headers(token.value ? { [config.token.headerName]: token.value } as HeadersInit : undefined)
+  const headers = new Headers(token ? { [config.token.headerName]: token } as HeadersInit : undefined)
 
   loading.value = true
   try {

src/runtime/composables/local/useAuthState.ts

@@ -3,7 +3,8 @@ import type { CookieRef } from '#app'
 import { type CommonUseAuthStateReturn } from '../../types'
 import { makeCommonAuthState } from '../commonAuthState'
 import { useTypedBackendConfig } from '../../helpers'
-import { useRuntimeConfig, useCookie, useState } from '#imports'
+import { formatToken } from '../../utils/local'
+import { useRuntimeConfig, useCookie, useState, onMounted } from '#imports'
 // @ts-expect-error - #auth not defined
 import type { SessionData } from '#auth'
 
@@ -12,6 +13,10 @@ interface UseAuthStateReturn extends CommonUseAuthStateReturn<SessionData> {
   rawToken: CookieRef<string | null>,
   setToken: (newToken: string | null) => void
   clearToken: () => void
+  _internal: {
+    baseURL: string,
+    rawTokenCookie: CookieRef<string | null>
+  }
 }
 
 export const useAuthState = (): UseAuthStateReturn => {
@@ -24,12 +29,7 @@ export const useAuthState = (): UseAuthStateReturn => {
   const rawToken = useState('auth:raw-token', () => _rawTokenCookie.value)
   watch(rawToken, () => { _rawTokenCookie.value = rawToken.value })
 
-  const token = computed(() => {
-    if (rawToken.value === null) {
-      return null
-    }
-    return config.token.type.length > 0 ? `${config.token.type} ${rawToken.value}` : rawToken.value
-  })
+  const token = computed(() => formatToken(rawToken.value))
 
   const setToken = (newToken: string | null) => {
     rawToken.value = newToken
@@ -44,11 +44,22 @@ export const useAuthState = (): UseAuthStateReturn => {
     rawToken
   }
 
+  onMounted(() => {
+    // When the page is cached on a server, set the token on the client
+    if (_rawTokenCookie.value && !rawToken.value) {
+      setToken(_rawTokenCookie.value)
+    }
+  })
+
   return {
     ...commonAuthState,
     ...schemeSpecificState,
     setToken,
-    clearToken
+    clearToken,
+    _internal: {
+      ...commonAuthState._internal,
+      rawTokenCookie: _rawTokenCookie
+    }
   }
 }
 export default useAuthState