refactor: nuxt type based auth

Author: k2so-dev

nuxt.config.ts

@@ -97,6 +97,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     apiLocal: import.meta.env.API_LOCAL_URL,
     public: {
+      authGuard: import.meta.env.AUTH_GUARD,
       apiBase: import.meta.env.APP_URL,
       apiPrefix: '/api/v1',
       storageBase: import.meta.env.APP_URL + '/storage/',

nuxt/components/auth/Login.vue

@@ -23,7 +23,7 @@ const { refresh: onSubmit, status: loginStatus } = useHttp<any>("login", {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      await auth.fetchUser();
+      await auth.login(response._data.token ?? null);
       await router.push("/");
     }
   }
@@ -34,10 +34,10 @@ const providers = ref<AuthProviders>(config.public.providers);
 async function handleMessage(event: { data: any }): Promise<void> {
   const provider = event.data.provider as string;
 
-  if (Object.keys(providers.value).includes(provider) && event.data.token) {
+  if (Object.keys(providers.value).includes(provider)) {
     providers.value[provider].loading = false;
 
-    await auth.fetchUser();
+    await auth.login(event.data.token ?? null);
     await router.push("/");
   } else if (event.data.message) {
     toast.add({

nuxt/plugins/app.ts

@@ -1,35 +1,27 @@
 import type { NitroFetchRequest } from 'nitropack/types';
 import type { HttpFetchOptions, HttpFetchContext } from '~';
 
-async function callHooks(context, hooks) {
-  if (Array.isArray(hooks)) {
-    for (const hook of hooks) {
-      await hook(context);
-    }
-  } else if (hooks) {
-    await hooks(context);
-  }
-}
-
 export default defineNuxtPlugin((nuxtApp) => {
+  const toast = useToast();
   const config = useRuntimeConfig();
   const requestUrl = useRequestURL();
   const requestHeaders = useRequestHeaders(['cookie', 'x-forwarded-for', 'user-agent']);
-  const toast = useToast();
-  const xsrfToken = useCookie('XSRF-TOKEN');
-
-  function storage(path: string): string {
-    if (!path) return '';
-    return path.startsWith('http://') || path.startsWith('https://')
-      ? path
-      : config.public.storageBase + path;
-  }
+  const xsrf = useCookie('XSRF-TOKEN');
+  const auth = useAuthStore();
 
   function buildHeaders(headers: any): Headers {
+    let authHeaders = {};
+
+    if (config.public.authGuard === 'web') {
+      authHeaders['X-XSRF-TOKEN'] = xsrf.value;
+    } else if (config.public.authGuard === 'api' && auth.token) {
+      authHeaders['Authorization'] = `Bearer ${auth.token}`;
+    }
+
     return {
       Accept: 'application/json',
-      'X-XSRF-TOKEN': xsrfToken.value,
       ...headers,
+      ...authHeaders,
       ...(
         import.meta.server
           ? {
@@ -64,6 +56,16 @@ export default defineNuxtPlugin((nuxtApp) => {
       && !path.startsWith('https://');
   }
 
+  async function callHooks(context, hooks) {
+    if (Array.isArray(hooks)) {
+      for (const hook of hooks) {
+        await hook(context);
+      }
+    } else if (hooks) {
+      await hooks(context);
+    }
+  }
+
   const http = $fetch.create<unknown, NitroFetchRequest>(<HttpFetchOptions>{
     baseURL: '',
     retry: false,
@@ -110,7 +112,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   return {
     provide: {
-      storage,
       http
     }
   }

nuxt/plugins/auth.ts

@@ -2,12 +2,11 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const auth = useAuthStore();
   const config = useRuntimeConfig();
 
-  if (import.meta.client) {
-    $fetch('/sanctum/csrf-cookie', {
-      baseURL: config.public.apiBase,
-      credentials: 'include',
-    });
+  if (config.public.authGuard === 'web' && import.meta.client) {
+    auth.fetchCsrf();
   }
 
-  await auth.fetchUser();
+  if (auth.logged) {
+    await auth.fetchUser();
+  }
 })

nuxt/stores/auth.ts

@@ -12,8 +12,23 @@ export type User = {
 }
 
 export const useAuthStore = defineStore('auth', () => {
+  const config = useRuntimeConfig();
+
+  const tokenCookie = useCookie('token', {
+    path: '/',
+    sameSite: 'strict',
+    secure: config.public.apiBase.startsWith('https://'),
+    maxAge: 60 * 60 * 24 * 365
+  });
+
+  const loggedCookie = useCookie('logged', {
+    path: '/',
+    sameSite: 'strict',
+    secure: config.public.apiBase.startsWith('https://'),
+    maxAge: 60 * 60 * 24 * 365
+  });
+
   const user = ref(<User>{});
-  const logged = computed(() => !!user.value?.ulid);
 
   const { refresh: logout } = useHttp<any>('logout', {
     method: 'POST',
@@ -35,13 +50,45 @@ export const useAuthStore = defineStore('auth', () => {
     }
   });
 
+  function fetchCsrf(): void {
+    $http('/sanctum/csrf-cookie', {
+      baseURL: config.public.apiBase,
+      credentials: 'include',
+      headers: { Accept: 'application/json' }
+    });
+  }
+
+  async function login(token?: string | null): Promise<void> {
+    if (config.public.authGuard === 'api') {
+      tokenCookie.value = token || null;
+    }
+
+    loggedCookie.value = '1';
+    await fetchUser();
+  }
+
   function reset(): void {
+    if (config.public.authGuard === 'api') {
+      tokenCookie.value = null;
+    }
+
+    loggedCookie.value = null;
     user.value = <User>{}
   }
 
   function hasRole(name: string): boolean {
-    return user.value.roles?.includes(name);
+    return (user.value.roles ?? []).includes(name);
   }
 
-  return { user, logged, logout, fetchUser, reset, hasRole }
+  return {
+    user,
+    token: tokenCookie,
+    logged: loggedCookie,
+    login,
+    logout,
+    fetchUser,
+    fetchCsrf,
+    reset,
+    hasRole,
+  }
 })