feat: adding refresh function to useDirectusAuth.ts

docs/content/en/usage/useDirectusAuth.md

@@ -28,6 +28,22 @@ const onSubmit = async () => {
 </script>
 ```
 
+### `refresh`
+
+Retrieve token after SSO login. Sets [`user`](/usage/useDirectusUser) and [`token`](/usage/useDirectusToken).
+
+- **Returns:** [`Promise<DirectusAuthResponse>`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts#L9)
+
+```vue
+<script setup lang="ts">
+const { refresh } = useDirectusAuth();
+
+try {
+  await refresh();
+} catch (e) {}
+</script>
+```
+
 ### `logout`
 
 Reset [`user`](/usage/useDirectusUser) and [`token`](/usage/useDirectusToken).

playground/app.vue

@@ -4,6 +4,15 @@
     <button style="margin-top: 25px" @click="onSubmit">
       Login with Directus
     </button>
+    <label for="provider">Provider
+      <input id="provider" v-model="provider" type="text" name="provider">
+    </label>
+    <a :href="provider ? SSOAuth : null" :title="provider ? '' : 'Add a provider'">
+      SSO Login
+    </a>
+    <button style="margin-top: 25px" @click="refresh">
+      Get Token after SSO Login
+    </button>
     <button style="margin-top: 25px" @click="fetchSingleArticle">
       Fetch Single Article
     </button>
@@ -54,13 +63,15 @@
 <script setup lang="ts">
 import { DirectusUserRequest, DirectusUserUpdate } from '../src/runtime/types'
 
-const { login } = useDirectusAuth()
+const { login, refresh } = useDirectusAuth()
+const url = useDirectusUrl()
 const user = useDirectusUser()
 const { getItems, getItemById, createItems, deleteItems } = useDirectusItems()
 const { getCollections } = useDirectusCollections()
 const router = useRouter()
 const fileId = 'da8e7c7b-d115-40cd-a88c-d4aedd7eea6c'
 const { getThumbnail: img } = useDirectusFiles()
+const token = useDirectusToken()
 
 const {
   createUsers,
@@ -92,6 +103,10 @@ const onSubmit = async () => {
   }
 }
 
+const provider = ref('')
+
+const SSOAuth = computed(() => `${url}auth/login/${provider.value}?redirect=http://localhost:3000`)
+
 const logUser = async () => {
   try {
     console.log(user)

src/runtime/composables/useDirectusAuth.ts

@@ -84,6 +84,32 @@ export const useDirectusAuth = () => {
     }
   }
 
+  const refresh = async (
+  ): Promise<DirectusAuthResponse> => {
+    setToken(null)
+
+    const response: { data: DirectusAuthResponse } = await directus(
+      '/auth/refresh',
+      {
+        method: 'POST',
+        body: {
+          mode: 'json'
+        }
+      }
+    )
+
+    if (!response.data.access_token) { throw new Error('Login failed, you need to be connected.') }
+    setToken(response.data.access_token)
+
+    const user = await fetchUser()
+
+    return {
+      user,
+      access_token: response.data.access_token,
+      expires: response.data.expires
+    }
+  }
+
   const createUser = async (
     data: DirectusRegisterCredentials,
     useStaticToken?: boolean
@@ -134,6 +160,7 @@ export const useDirectusAuth = () => {
     setUser,
     fetchUser,
     login,
+    refresh,
     requestPasswordReset,
     resetPassword,
     logout,