feat: adds config file and AuthTokenStorage

package.json

@@ -63,4 +63,4 @@
     "vue-tsc": "^1.8.26"
   },
   "packageManager": "[email protected]"
-}
+}

playground/nuxt.config.ts

@@ -8,7 +8,6 @@ export default defineNuxtConfig({
     runtimeConfig: {
         public: {
             sanctum: {
-                baseUrl: 'http://localhost:80',
                 userStateKey: 'sanctum.user.identity',
             },
         },

playground/sanctum.config.ts

@@ -0,0 +1,3 @@
+export default {
+    baseUrl: 'http://localhost:80',
+};

src/index.d.ts

@@ -2,6 +2,6 @@ import { SanctumModuleOptions } from './types';
 
 declare module 'nuxt/schema' {
     interface PublicRuntimeConfig {
-        sanctum: Partial<SanctumModuleOptions>;
+        sanctum: SanctumModuleOptions;
     }
 }

src/module.ts

@@ -1,12 +1,14 @@
+import { existsSync } from 'node:fs';
+import type { SanctumModuleOptions } from './types';
 import {
     defineNuxtModule,
     addPlugin,
     createResolver,
     addImportsDir,
     addRouteMiddleware,
+    addPluginTemplate,
 } from '@nuxt/kit';
-import { defu } from 'defu';
-import type { SanctumModuleOptions } from './types';
+import defu from 'defu';
 
 export default defineNuxtModule<Partial<SanctumModuleOptions>>({
     meta: {
@@ -45,13 +47,29 @@ export default defineNuxtModule<Partial<SanctumModuleOptions>>({
     setup(options, nuxt) {
         const resolver = createResolver(import.meta.url);
 
-        const publicConfig = nuxt.options.runtimeConfig.public;
-        const userModuleConfig = publicConfig.sanctum;
+        addPlugin(resolver.resolve('./runtime/plugin'));
+
+        addPluginTemplate({
+            filename: 'sanctum-plugin.mjs',
+            async getContents() {
+                const configPath = await resolver.resolvePath(
+                    resolver.resolve(nuxt.options.rootDir, 'sanctum.config')
+                );
+                const configPathExists = existsSync(configPath);
 
-        nuxt.options.runtimeConfig.public.sanctum = defu(
-            userModuleConfig as any,
-            options
-        );
+                return `
+                    import { defineNuxtPlugin } from '#imports';
+                    ${configPathExists ? "import defu from 'defu';" : ''}
+                    ${configPathExists ? `import sanctumConfig from '${configPath}';` : ''}
+
+                    export default defineNuxtPlugin((nuxtApp) => {
+                        const defaultConfig = ${JSON.stringify(defu(nuxt.options.runtimeConfig.public.sanctum, options))};
+                        const config = ${configPathExists ? `defu(typeof sanctumConfig === 'function' ? sanctumConfig() : sanctumConfig, defaultConfig)` : `defaultConfig`};
+                        nuxtApp.provide('sanctumConfig', config);
+                    });
+                `;
+            },
+        });
 
         addImportsDir(resolver.resolve('./runtime/composables'));
 
@@ -63,7 +81,5 @@ export default defineNuxtModule<Partial<SanctumModuleOptions>>({
             name: 'sanctum:guest',
             path: resolver.resolve('./runtime/middleware/sanctum.guest'),
         });
-
-        addPlugin(resolver.resolve('./runtime/plugin'));
     },
 });

src/runtime/composables/useSanctumAuth.ts

@@ -1,8 +1,8 @@
 import { type Ref, computed } from 'vue';
 import { useSanctumClient } from './useSanctumClient';
 import { useSanctumUser } from './useSanctumUser';
-import { navigateTo, useNuxtApp, useRoute, useRuntimeConfig } from '#app';
-import type { SanctumModuleOptions } from '../../types';
+import { useSanctumConfig } from './useSanctumConfig';
+import { navigateTo, useNuxtApp, useRoute } from '#app';
 
 export interface SanctumAuth<T> {
     user: Ref<T | null>;
@@ -22,14 +22,14 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
 
     const user = useSanctumUser<T>();
     const client = useSanctumClient();
-    const options = useRuntimeConfig().public.sanctum as SanctumModuleOptions;
+    const config = useSanctumConfig();
 
     const isAuthenticated = computed(() => {
         return user.value !== null;
     });
 
     async function refreshIdentity() {
-        user.value = await client<T>(options.endpoints.user);
+        user.value = await client<T>(config.endpoints.user);
     }
 
     /**
@@ -39,27 +39,30 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
      */
     async function login(credentials: Record<string, any>) {
         if (isAuthenticated.value === true) {
-            if (options.redirectIfAuthenticated === false) {
+            if (config.redirectIfAuthenticated === false) {
                 throw new Error('User is already authenticated');
             }
 
-            if (options.redirect.onLogin === false) {
+            if (config.redirect.onLogin === false) {
                 return;
             }
 
-            const redirect = options.redirect.onLogin as string;
+            const redirect = config.redirect.onLogin as string;
 
             await nuxtApp.runWithContext(() => navigateTo(redirect));
         }
 
-        await client(options.endpoints.login, {
+        const endpointResult = await client(config.endpoints.login, {
             method: 'post',
             body: credentials,
         });
 
+        if (config.authTokenStorage)
+            config.authTokenStorage.add(endpointResult);
+
         await refreshIdentity();
 
-        if (options.redirect.keepRequestedRoute) {
+        if (config.redirect.keepRequestedRoute) {
             const route = useRoute();
             const requestedRoute = route.query.redirect as string | undefined;
             if (requestedRoute) {
@@ -68,8 +71,8 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
             }
         }
 
-        if (options.redirect.onLogin) {
-            const redirect = options.redirect.onLogin as string;
+        if (config.redirect.onLogin) {
+            const redirect = config.redirect.onLogin as string;
             await nuxtApp.runWithContext(() => navigateTo(redirect));
         }
     }
@@ -82,12 +85,14 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
             throw new Error('User is not authenticated');
         }
 
-        await client(options.endpoints.logout, { method: 'post' });
+        await client(config.endpoints.logout, { method: 'post' });
+
+        if (config.authTokenStorage) config.authTokenStorage.delete();
 
         user.value = null;
 
-        if (options.redirect.onLogout) {
-            const redirect = options.redirect.onLogout as string;
+        if (config.redirect.onLogout) {
+            const redirect = config.redirect.onLogout as string;
 
             await nuxtApp.runWithContext(() => navigateTo(redirect));
         }

src/runtime/composables/useSanctumConfig.ts

@@ -0,0 +1,8 @@
+import type { SanctumConfigOptions } from '../../types';
+import { useNuxtApp } from '#app';
+
+export const useSanctumConfig = () => {
+    const { $sanctumConfig } = useNuxtApp();
+
+    return $sanctumConfig as Readonly<Required<SanctumConfigOptions>>;
+};

src/runtime/composables/useSanctumUser.ts

@@ -1,15 +1,15 @@
-import { useState, useRuntimeConfig } from '#app';
+import { useState } from '#app';
+import { useSanctumConfig } from './useSanctumConfig';
 import { type Ref } from 'vue';
-import type { SanctumModuleOptions } from '../../types';
 
 /**
  * Returns a current authenticated user information.
  * @returns Reference to the user state as T.
  */
 export const useSanctumUser = <T>(): Ref<T | null> => {
-    const options = useRuntimeConfig().public.sanctum as SanctumModuleOptions;
+    const config = useSanctumConfig();
 
-    const user = useState<T | null>(options.userStateKey, () => null);
+    const user = useState<T | null>(config.userStateKey, () => null);
 
     return user;
 };

src/runtime/httpFactory.ts

@@ -3,18 +3,17 @@ import {
     useCookie,
     useRequestEvent,
     useRequestHeaders,
-    useRuntimeConfig,
     navigateTo,
     useNuxtApp,
 } from '#app';
-import type { SanctumModuleOptions } from '../types';
 import { useSanctumUser } from './composables/useSanctumUser';
+import { useSanctumConfig } from './composables/useSanctumConfig';
 import { useRequestURL } from 'nuxt/app';
 
 export const SECURE_METHODS = new Set(['post', 'delete', 'put', 'patch']);
 
 export function createHttpClient(): $Fetch {
-    const options = useRuntimeConfig().public.sanctum as SanctumModuleOptions;
+    const config = useSanctumConfig();
     const event = useRequestEvent();
     const user = useSanctumUser();
     const nuxtApp = useNuxtApp();
@@ -27,18 +26,18 @@ export function createHttpClient(): $Fetch {
     async function buildClientHeaders(
         headers: HeadersInit | undefined
     ): Promise<HeadersInit> {
-        await $fetch(options.endpoints.csrf, {
-            baseURL: options.baseUrl,
+        await $fetch(config.endpoints.csrf, {
+            baseURL: config.baseUrl,
             credentials: 'include',
         });
 
-        const csrfToken = useCookie(options.csrf.cookie, {
+        const csrfToken = useCookie(config.csrf.cookie, {
             readonly: true,
         }).value;
 
         return {
             ...headers,
-            ...(csrfToken && { [options.csrf.header]: csrfToken }),
+            ...(csrfToken && { [config.csrf.header]: csrfToken }),
         };
     }
 
@@ -48,26 +47,26 @@ export function createHttpClient(): $Fetch {
      * @returns { HeadersInit }
      */
     function buildServerHeaders(headers: HeadersInit | undefined): HeadersInit {
-        const csrfToken = useCookie(options.csrf.cookie, {
+        const csrfToken = useCookie(config.csrf.cookie, {
             readonly: true,
         }).value;
         const clientCookies = useRequestHeaders(['cookie']);
-        const origin = options.origin ?? useRequestURL().origin;
+        const origin = config.origin ?? useRequestURL().origin;
 
         return {
             ...headers,
             // use the origin from the request headers if not set
             Referer: origin,
             ...(clientCookies.cookie && clientCookies),
-            ...(csrfToken && { [options.csrf.header]: csrfToken }),
+            ...(csrfToken && { [config.csrf.header]: csrfToken }),
         };
     }
 
     const httpOptions: FetchOptions = {
-        baseURL: options.baseUrl,
+        baseURL: config.baseUrl,
         credentials: 'include',
         redirect: 'manual',
-        retry: options.client.retry,
+        retry: config.client.retry,
 
         async onRequest({ options }): Promise<void> {
             const method = options.method?.toLowerCase() ?? 'get';
@@ -77,6 +76,15 @@ export function createHttpClient(): $Fetch {
                 ...options.headers,
             };
 
+            if (config.authTokenStorage) {
+                const authToken = await config.authTokenStorage.get();
+                if (authToken)
+                    options.headers = {
+                        ...options.headers,
+                        Authorization: `Bearer ${authToken}`,
+                    };
+            }
+
             // https://laravel.com/docs/10.x/routing#form-method-spoofing
             if (options.body instanceof FormData && method === 'put') {
                 options.method = 'POST';
@@ -119,15 +127,15 @@ export function createHttpClient(): $Fetch {
             if (response.status === 401) {
                 // do not redirect when requesting the user endpoint
                 // this prevents an infinite loop (ERR_TOO_MANY_REDIRECTS)
-                if (request.toString().endsWith(options.endpoints.user)) {
+                if (request.toString().endsWith(config.endpoints.user)) {
                     return;
                 }
 
                 user.value = null;
 
-                if (options.redirect.onLogout) {
+                if (config.redirect.onLogout) {
                     await nuxtApp.runWithContext(() =>
-                        navigateTo(options.redirect.onLogout as string)
+                        navigateTo(config.redirect.onLogout as string)
                     );
                 }
             }

src/runtime/middleware/sanctum.auth.ts

@@ -1,32 +1,27 @@
-import {
-    defineNuxtRouteMiddleware,
-    navigateTo,
-    useRuntimeConfig,
-    createError,
-} from '#app';
+import { defineNuxtRouteMiddleware, navigateTo, createError } from '#app';
 import type { RouteLocationRaw } from 'vue-router';
 import { useSanctumUser } from '../composables/useSanctumUser';
-import type { SanctumModuleOptions } from '../../types';
+import { useSanctumConfig } from '../composables/useSanctumConfig';
 
 export default defineNuxtRouteMiddleware((to) => {
     const user = useSanctumUser();
-    const options = useRuntimeConfig().public.sanctum as SanctumModuleOptions;
+    const config = useSanctumConfig();
 
     const isAuthenticated = user.value !== null;
 
     if (isAuthenticated === true) {
         return;
     }
 
-    const endpoint = options.redirect.onAuthOnly;
+    const endpoint = config.redirect.onAuthOnly;
 
     if (endpoint === false) {
         throw createError({ statusCode: 403 });
     }
 
     const redirect: RouteLocationRaw = { path: endpoint };
 
-    if (options.redirect.keepRequestedRoute) {
+    if (config.redirect.keepRequestedRoute) {
         redirect.query = { redirect: to.fullPath };
     }
 

src/runtime/middleware/sanctum.guest.ts

@@ -1,23 +1,18 @@
-import {
-    defineNuxtRouteMiddleware,
-    navigateTo,
-    useRuntimeConfig,
-    createError,
-} from '#app';
-import type { SanctumModuleOptions } from '../../types';
+import { defineNuxtRouteMiddleware, navigateTo, createError } from '#app';
 import { useSanctumUser } from '../composables/useSanctumUser';
+import { useSanctumConfig } from '../composables/useSanctumConfig';
 
 export default defineNuxtRouteMiddleware(() => {
     const user = useSanctumUser();
-    const options = useRuntimeConfig().public.sanctum as SanctumModuleOptions;
+    const config = useSanctumConfig();
 
     const isAuthenticated = user.value !== null;
 
     if (isAuthenticated === false) {
         return;
     }
 
-    const endpoint = options.redirect.onGuestOnly;
+    const endpoint = config.redirect.onGuestOnly;
 
     if (endpoint === false) {
         throw createError({ statusCode: 403 });