feat: login with provider.

Intevel · Apr 27, 2023 · 50370f7 · 50370f7
1 parent 570fbdf
commit 50370f7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -4,6 +4,12 @@
     <button style="margin-top: 25px" @click="onSubmit">
       Login with Directus
     </button>
+    <button style="margin-top: 25px" @click="loginWithProvider('discord')">
+      Login with OAuth
+    </button>
+    <button style="margin-top: 25px" @click="logout">
+      Logout
+    </button>
     <button style="margin-top: 25px" @click="fetchSingleArticle">
       Fetch Single Article
     </button>
@@ -47,7 +53,7 @@
 <script setup lang="ts">
 import { DirectusUserRequest, DirectusUserUpdate } from '../src/runtime/types'
 
-const { login } = useDirectusAuth()
+const { login, loginWithProvider, logout } = useDirectusAuth()
 const user = useDirectusUser()
 const { getItems, getItemById, createItems, deleteItems } = useDirectusItems()
 const { getCollections } = useDirectusCollections()

diff --git a/src/module.ts b/src/module.ts
@@ -52,6 +52,12 @@ export interface ModuleOptions {
    * @default 'directus_refresh_token'
    */
   cookieNameRefreshToken?: string;
+
+  /**
+   * Where to redirect after logging in with an OAuth Provider.
+   * @type string
+   */
+  redirectOnLogin?: string;
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -81,6 +87,7 @@ export default defineNuxtModule<ModuleOptions>({
           autoFetch: options.autoFetch,
           autoRefresh: options.autoRefresh,
           fetchUserParams: options.fetchUserParams,
+          redirectOnLogin: options.redirectOnLogin,
           token: options.token,
           devtools: options.devtools,
           cookieNameToken: options.cookieNameToken,
@@ -96,6 +103,7 @@ export default defineNuxtModule<ModuleOptions>({
       autoFetch: options.autoFetch,
       autoRefresh: options.autoRefresh,
       fetchUserParams: options.fetchUserParams,
+      redirectOnLogin: options.redirectOnLogin,
       token: options.token,
       devtools: options.devtools,
       cookieNameToken: options.cookieNameToken,

diff --git a/src/runtime/composables/useDirectusAuth.ts b/src/runtime/composables/useDirectusAuth.ts
@@ -17,6 +17,7 @@ export const useDirectusAuth = () => {
   const directus = useDirectus()
   const baseUrl = useDirectusUrl()
   const user = useDirectusUser()
+  const route = useRoute();
   const { token, refreshToken, expires } = useDirectusToken()
 
   const setAuthCookies = (_token: string, _refreshToken: string, _expires: number) => {
@@ -89,6 +90,14 @@ export const useDirectusAuth = () => {
     }
   }
 
+  const loginWithProvider = async (
+    provider: string,
+  ) => {
+    removeTokens()
+    const redirect = `${window.location.origin}${config.public.directus.redirectOnLogin ?? route.fullPath}`;
+    await navigateTo(`${baseUrl}/auth/login/${provider}?redirect=${encodeURIComponent(redirect)}`, { external: true })
+  }
+
   const createUser = async (
     data: DirectusRegisterCredentials,
     useStaticToken?: boolean
@@ -148,6 +157,7 @@ export const useDirectusAuth = () => {
     resetPassword,
     logout,
     createUser,
-    register
+    register,
+    loginWithProvider
   }
 }