add sanctum token auth

Author: allnightru

src/runtime/plugin.client.ts

@@ -35,24 +35,34 @@ function createFetchClient(
     retry: false,
 
     async onRequest(context) {
-      let csrfToken = readCsrfCookie(authentication.csrfCookie)
-
-      if (!csrfToken.value) {
-        await $fetch(authentication.csrfEndpoint, {
-          baseURL: authentication.baseUrl,
-          credentials: 'include',
-          retry: false,
-        })
-
-        csrfToken = readCsrfCookie(authentication.csrfCookie)
+      // todo: move this to interceptors
+      if (authentication.mode === 'token') {
+        let csrfToken = readCsrfCookie(authentication.csrfCookie)
+
+        if (!csrfToken.value) {
+          await $fetch(authentication.csrfEndpoint, {
+            baseURL: authentication.baseUrl,
+            credentials: 'include',
+            retry: false,
+          })
+
+          csrfToken = readCsrfCookie(authentication.csrfCookie)
+        }
+
+        if (!csrfToken.value) {
+          logger.warn(`${authentication.csrfCookie} cookie is missing, unable to set ${authentication.csrfHeader} header`)
+          return
+        }
+
+        context.options.headers.set(authentication.csrfHeader, csrfToken.value)
       }
 
-      if (!csrfToken.value) {
-        logger.warn(`${authentication.csrfCookie} cookie is missing, unable to set ${authentication.csrfHeader} header`)
-        return
+        // todo: move this to interceptors
+      if (authentication.mode === 'token') {
+        const { tokenStorage } = useAppConfig().echo.authentication
+        const token = await tokenStorage.get()
+        context.options.headers.set('Authorization', 'Bearer ' + token)
       }
-
-      context.options.headers.set(authentication.csrfHeader, csrfToken.value)
     },
   }
 
@@ -127,10 +137,33 @@ function prepareEchoOptions(config: ModuleOptions, logger: ConsolaInstance) {
   }
 }
 
-export default defineNuxtPlugin((_nuxtApp) => {
+async function setupDefaultTokenStorage(nuxtApp: NuxtApp, logger: ConsolaInstance) {
+  logger.debug(
+    'Token storage is not defined, switch to default cookie storage',
+  )
+
+  const defaultStorage = await import('./storages/cookieTokenStorage')
+
+  nuxtApp.runWithContext(() => {
+    updateAppConfig({
+      echo: {
+        authentication: {
+          tokenStorage: defaultStorage.cookieTokenStorage,
+        }
+      },
+    })
+  })
+}
+
+export default defineNuxtPlugin(async (_nuxtApp) => {
   const config = useEchoConfig()
+  const appConfig = useAppConfig()
   const logger = createEchoLogger(config.logLevel)
 
+  if (config.authentication?.mode === 'token' && !appConfig.echo?.authentication?.tokenStorage) {
+    await setupDefaultTokenStorage(_nuxtApp, logger)
+  }
+
   window.Pusher = Pusher
   window.Echo = new Echo(prepareEchoOptions(config, logger))
 

src/runtime/storages/cookieTokenStorage.ts

@@ -0,0 +1,25 @@
+import { unref } from 'vue'
+import type { TokenStorage } from '~/src/runtime/types'
+import { useCookie, type NuxtApp } from '#app'
+
+const cookieTokenKey = 'sanctum.token.cookie'
+
+/**
+ * Token storage using a secure cookie.
+ * Works with both CSR/SSR modes.
+ */
+export const cookieTokenStorage: TokenStorage = {
+  async get(app: NuxtApp) {
+    return app.runWithContext(() => {
+      const cookie = useCookie(cookieTokenKey, { readonly: true })
+      return unref(cookie.value) ?? undefined
+    })
+  },
+
+  async set(app: NuxtApp, token?: string) {
+    await app.runWithContext(() => {
+      const cookie = useCookie(cookieTokenKey, { secure: true })
+      cookie.value = token
+    })
+  },
+}

src/runtime/types.ts

@@ -1,4 +1,9 @@
 export interface Authentication {
+  /**
+   * Authentication mode 'cookie' or 'token'
+   * @default 'cookie'
+   */
+  mode: 'cookie' | 'token'
   /**
    * The base URL of Laravel application.
    * @default 'http://localhost:80'
@@ -86,3 +91,14 @@ export interface ModuleOptions {
    */
   properties?: object
 }
+
+export interface TokenStorage {
+  /**
+   * Function to load a token from the storage.
+   */
+  get: (app: NuxtApp) => Promise<string | undefined>
+  /**
+   * Function to save a token to the storage.
+   */
+  set: (app: NuxtApp, token?: string) => Promise<void>
+}