feat: add support for token authentication mode

Author: manchenkoff

package.json

@@ -59,5 +59,5 @@
     "vitest": "^2.0.5",
     "vue-tsc": "^2.1.2"
   },
-  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

src/module.ts

@@ -6,7 +6,8 @@ import {
   addImportsDir,
 } from '@nuxt/kit'
 import { defu } from 'defu'
-import type { ModuleOptions } from './runtime/types'
+import type { ModuleOptions } from './runtime/types/options'
+import { registerTypeTemplates } from './templates'
 
 const MODULE_NAME = 'nuxt-laravel-echo'
 
@@ -51,6 +52,8 @@ export default defineNuxtModule<ModuleOptions>({
     addPlugin(resolver.resolve('./runtime/plugin.client'))
     addImportsDir(resolver.resolve('./runtime/composables'))
 
+    registerTypeTemplates(resolver)
+
     logger.info('Laravel Echo module initialized!')
   },
 })

src/runtime/composables/useEchoAppConfig.ts

@@ -0,0 +1,6 @@
+import type { EchoAppConfig } from '../types/config'
+import { useAppConfig } from '#app'
+
+export const useEchoAppConfig = (): EchoAppConfig => {
+  return (useAppConfig().echo ?? {}) as EchoAppConfig
+}

src/runtime/composables/useEchoConfig.ts

@@ -1,4 +1,4 @@
-import type { ModuleOptions } from '../types'
+import type { ModuleOptions } from '../types/options'
 import { useRuntimeConfig } from '#imports'
 
 export const useEchoConfig = (): ModuleOptions => {

src/runtime/plugin.client.ts

@@ -4,8 +4,9 @@ import type { ChannelAuthorizationData } from 'pusher-js/types/src/core/auth/opt
 import { type ConsolaInstance, createConsola } from 'consola'
 import type { FetchOptions } from 'ofetch'
 import { useEchoConfig } from './composables/useEchoConfig'
-import type { Authentication, ModuleOptions } from './types'
-import { createError, defineNuxtPlugin, useCookie } from '#app'
+import type { Authentication, ModuleOptions } from './types/options'
+import { useEchoAppConfig } from './composables/useEchoAppConfig'
+import { createError, defineNuxtPlugin, useCookie, updateAppConfig, type NuxtApp } from '#app'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Pusher = (PusherPkg as any).default || PusherPkg
@@ -26,6 +27,7 @@ function createEchoLogger(logLevel: number) {
 const readCsrfCookie = (name: string) => useCookie(name, { readonly: true })
 
 function createFetchClient(
+  app: NuxtApp,
   authentication: Required<Authentication>,
   logger: ConsolaInstance
 ) {
@@ -35,7 +37,6 @@ function createFetchClient(
     retry: false,
 
     async onRequest(context) {
-      // todo: move this to interceptors
       if (authentication.mode === 'cookie') {
         let csrfToken = readCsrfCookie(authentication.csrfCookie)
 
@@ -57,11 +58,21 @@ function createFetchClient(
         context.options.headers.set(authentication.csrfHeader, csrfToken.value)
       }
 
-        // 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)
+        const { tokenStorage } = useEchoAppConfig()
+
+        if (!tokenStorage) {
+          throw createError('Token storage is not defined')
+        }
+
+        const token = await tokenStorage.get(app)
+
+        if (!token) {
+          logger.debug('Authorization token is missing, unable to set header')
+          return
+        }
+
+        context.options.headers.set('Authorization', `Bearer ${token}`)
       }
     },
   }
@@ -70,10 +81,11 @@ function createFetchClient(
 }
 
 function createAuthorizer(
+  app: NuxtApp,
   authentication: Required<Authentication>,
   logger: ConsolaInstance
 ) {
-  const client = createFetchClient(authentication, logger)
+  const client = createFetchClient(app, authentication, logger)
 
   return (channel: Channel, _: Options) => {
     return {
@@ -96,12 +108,13 @@ function createAuthorizer(
   }
 }
 
-function prepareEchoOptions(config: ModuleOptions, logger: ConsolaInstance) {
+function prepareEchoOptions(app: NuxtApp, config: ModuleOptions, logger: ConsolaInstance) {
   const forceTLS = config.scheme === 'https'
   const additionalOptions = config.properties || {}
 
   const authorizer = config.authentication
     ? createAuthorizer(
+      app,
       config.authentication as Required<Authentication>,
       logger
     )
@@ -147,25 +160,24 @@ async function setupDefaultTokenStorage(nuxtApp: NuxtApp, logger: ConsolaInstanc
   nuxtApp.runWithContext(() => {
     updateAppConfig({
       echo: {
-        authentication: {
-          tokenStorage: defaultStorage.cookieTokenStorage,
-        }
+        tokenStorage: defaultStorage.cookieTokenStorage,
       },
     })
   })
 }
 
 export default defineNuxtPlugin(async (_nuxtApp) => {
+  const nuxtApp = _nuxtApp as NuxtApp
   const config = useEchoConfig()
-  const appConfig = useAppConfig()
+  const appConfig = useEchoAppConfig()
   const logger = createEchoLogger(config.logLevel)
 
-  if (config.authentication?.mode === 'token' && !appConfig.echo?.authentication?.tokenStorage) {
-    await setupDefaultTokenStorage(_nuxtApp, logger)
+  if (config.authentication?.mode === 'token' && !appConfig.tokenStorage) {
+    await setupDefaultTokenStorage(nuxtApp, logger)
   }
 
   window.Pusher = Pusher
-  window.Echo = new Echo(prepareEchoOptions(config, logger))
+  window.Echo = new Echo(prepareEchoOptions(nuxtApp, config, logger))
 
   logger.debug('Laravel Echo client initialized')
 

src/runtime/storages/cookieTokenStorage.ts

@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import type { TokenStorage } from '~/src/runtime/types'
+import type { TokenStorage } from '../types/config'
 import { useCookie, type NuxtApp } from '#app'
 
 const cookieTokenKey = 'sanctum.token.cookie'

src/runtime/types/config.ts

@@ -0,0 +1,25 @@
+import type { NuxtApp } from '#app'
+
+/**
+ * Handlers to work with authentication token.
+ */
+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>
+}
+
+/**
+ * Echo configuration for the application side with user-defined handlers.
+ */
+export interface EchoAppConfig {
+  /**
+   * Token storage handlers to be used by the client.
+   */
+  tokenStorage?: TokenStorage
+}

src/runtime/types.ts renamed to src/runtime/types/options.ts

@@ -29,10 +29,6 @@ export interface Authentication {
    * @default 'X-XSRF-TOKEN'
    */
   csrfHeader?: string
-  /**
-   * Token storage handlers to be used by the client.
-   */
-  tokenStorage?: TokenStorage
 }
 
 export interface ModuleOptions {
@@ -95,14 +91,3 @@ 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>
-}

src/templates.ts

@@ -0,0 +1,29 @@
+import { addTypeTemplate, type Resolver } from '@nuxt/kit'
+
+export const registerTypeTemplates = (resolver: Resolver) => {
+  addTypeTemplate({
+    filename: 'types/echo.d.ts',
+    getContents: () => `// Generated by nuxt-laravel-echo module
+import type { EchoAppConfig } from '${resolver.resolve('./runtime/types/config.ts')}';
+
+declare module 'nuxt/schema' {
+    interface AppConfig {
+        echo?: EchoAppConfig;
+    }
+    interface AppConfigInput {
+        echo?: EchoAppConfig;
+    }
+}
+
+declare module '@nuxt/schema' {
+    interface AppConfig {
+        echo?: EchoAppConfig;
+    }
+    interface AppConfigInput {
+        echo?: EchoAppConfig;
+    }
+}
+
+export {};`,
+  })
+}