feat: add useAuthFetch for auto access token refresh

README.md

@@ -10,6 +10,7 @@ A Nuxt 3 module to handle authentication
 - Route middleware auth protection
 - Database agnostic (Prisma based)
 - Auth operations through `useAuth` composable
+- Auto refresh of access token through `useAuthFetch` composable
 - Typescript support
 
 ## Demo
@@ -154,24 +155,6 @@ definePageMeta({ middleware: "auth" }); // Redirects to login path when not logg
 definePageMeta({ middleware: "guest" }); // Redirects to home path when loggedIn
 ```
 
-<br>
-
-For handling refresh of access token you can use `prefetch` method
-
-```javascript
-const { prefetch, useAccessToken } = useAuth();
-const accessToken = useAccessToken();
-
-const { data, error } = await useFetch("/api/protected", {
-  async onRequest({ request, options }) {
-    await prefetch();
-    if (accessToken) {
-      options.headers = { Authorization: "Bearer " + accessToken };
-    }
-  },
-});
-```
-
 ## Appendix
 
 ![workflow](https://github.com/becem-gharbi/nuxt-auth/blob/beta/workflow.png)

playground/pages/home.vue

@@ -7,9 +7,18 @@
 </template>
 
 <script setup lang="ts">
+import { User } from '.prisma/client';
+
 definePageMeta({ middleware: "auth" })
 
-const { logout, fetchUser } = useAuth()
+const { logout } = useAuth()
+
+async function fetchUser() {
+    const data = await useAuthFetch<User>("/api/auth/me")
+
+    console.log(data)
+}
+
 
 async function handleLogout() {
     await logout()

src/runtime/composables/useAuthFetch.ts

@@ -0,0 +1,25 @@
+import useAuth from "./useAuth";
+import { defu } from "defu";
+import type { FetchOptions } from "ohmyfetch";
+
+export default async function <DataT>(
+  path: string,
+  fetchOptions: FetchOptions = {}
+): Promise<DataT> {
+  const { useAccessToken, prefetch } = useAuth();
+
+  const accessToken = useAccessToken();
+
+  await prefetch();
+
+  if (accessToken.value) {
+    fetchOptions.headers = defu(
+      {
+        Authorization: "Bearer " + accessToken.value,
+      },
+      fetchOptions.headers
+    );
+  }
+
+  return $fetch<DataT>(path, fetchOptions);
+}