feat: Add a composable to make authenticated requests

docs/content/3.application-side/2.session-access-and-management.md

@@ -62,6 +62,7 @@ const {
   signUp,
   signIn,
   signOut,
+  authFetch,
 } = useAuth()
 
 // Session status, either `unauthenticated`, `loading`, `authenticated`
@@ -108,6 +109,9 @@ await signOut()
 
 // Trigger a sign-out and send the user to the sign-out page afterwards
 await signOut({ callbackUrl: '/signout' })
+
+// Make an authenticated fetch that passes the token in request headers (options is a NitroFetchOptions object https://nuxt.com/docs/api/composables/use-fetch#params)
+await authFetch(path, options)
 ```
 ```ts [refresh]
 const {

playground-local/app.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { useAuth } from '#imports'
 
-const { signIn, token, data, status, lastRefreshedAt, signOut, getSession } = useAuth()
+const { signIn, token, data, status, lastRefreshedAt, signOut, getSession, authFetch } = useAuth()
 
 const username = ref('')
 const password = ref('')
@@ -32,6 +32,10 @@ const password = ref('')
       sign out
     </button>
     <br>
+    <button data-testid="auth-fetch" @click="authFetch('/user', { method: 'get' })">
+      manual authenticated fetch
+    </button>
+    <br>
     <button data-testid="refresh-required-false" @click="getSession({ required: false })">
       refresh session (required: false)
     </button>

playground-local/tests/local.spec.ts

@@ -11,14 +11,15 @@ describe('Local Provider', async () => {
     browser: true
   })
 
-  test('load, sign in, reload, refresh, sign out', async () => {
+  test('load, sign in, reload, refresh, auth fetch, sign out', async () => {
     const page = await createPage('/')
     const [
       usernameInput,
       passwordInput,
       submitButton,
       status,
       signoutButton,
+      authFetchButton,
       refreshRequiredFalseButton,
       refreshRequiredTrueButton
     ] = await Promise.all([
@@ -27,6 +28,7 @@ describe('Local Provider', async () => {
       page.getByTestId('submit'),
       page.getByTestId('status'),
       page.getByTestId('signout'),
+      page.getByTestId('auth-fetch'),
       page.getByTestId('refresh-required-false'),
       page.getByTestId('refresh-required-true')
     ])
@@ -47,6 +49,11 @@ describe('Local Provider', async () => {
     await page.reload()
     await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)
 
+    // Ensure that a manual authenticated fetch is successful while authenticated
+    const authFetchResponse = page.waitForResponse(/\/api\/auth\/user/)
+    await authFetchButton.click()
+    await playwrightExpect((await authFetchResponse).status()).toBe(200)
+
     // Refresh (required: false), status should not change
     await refreshRequiredFalseButton.click()
     await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)

src/runtime/composables/local/useAuth.ts

@@ -135,9 +135,32 @@ const signUp = async (credentials: Credentials, signInOptions?: SecondarySignInO
   return signIn(credentials, signInOptions)
 }
 
+const authFetch = async (path: string, options: Parameters<typeof $fetch>[1]) => {
+  const nuxt = useNuxtApp()
+
+  const config = useTypedBackendConfig(useRuntimeConfig(), 'local')
+
+  const { token: tokenState, _internal } = useAuthState()
+  let token = tokenState.value
+  token ??= formatToken(_internal.rawTokenCookie.value)
+
+  if (path) {
+    const headers = {
+      ...options?.headers,
+      ...(token ? { [config.token.headerName]: token } : {}) // append auth token if it exists
+    }
+    try {
+      return await _fetch(nuxt, path, { ...options, headers })
+    } catch (err) {
+      console.error(`Error during authenticated fetch:, ${(err as Error).message}`)
+    }
+  }
+}
+
 interface UseAuthReturn extends CommonUseAuthReturn<typeof signIn, typeof signOut, typeof getSession, SessionData> {
   signUp: typeof signUp
-  token: Readonly<Ref<string | null>>
+  authFetch: typeof authFetch
+  token: Readonly<Ref<string | null>>,
 }
 export const useAuth = (): UseAuthReturn => {
   const {
@@ -156,6 +179,7 @@ export const useAuth = (): UseAuthReturn => {
     signIn,
     signOut,
     signUp,
+    authFetch,
     refresh: getSession
   }
 }