2 files changed, 31 insertions, 36 deletions

diff --git a/front-end/src/store/socialMfaPlugin.ts b/front-end/src/store/socialMfaPlugin.ts
index 3968cf1..2f78f3a 100644
--- a/front-end/src/store/socialMfaPlugin.ts
+++ b/front-end/src/store/socialMfaPlugin.ts
@@ -1,12 +1,19 @@
 
 import 'pinia'
 import { MaybeRef } from 'vue';
-import { useSocialOauthLogin, useUser, SocialOAuthPortal, fromPortals, useAxios } from '@vnuge/vnlib.browser'
+import {
+    useUser,
+    useOauthLogin,
+    useSocialDefaultLogout, 
+    fetchSocialPortals, 
+    fromSocialPortals,
+    fromSocialConnections,
+} from '@vnuge/vnlib.browser'
 import { get } from '@vueuse/core';
 import { PiniaPluginContext, PiniaPlugin, storeToRefs } from 'pinia'
 import { defer } from 'lodash-es';
 
-type SocialMfaPlugin = ReturnType<typeof useSocialOauthLogin>
+type SocialMfaPlugin = ReturnType<typeof useOauthLogin>
 
 declare module 'pinia' {
     export interface PiniaCustomProperties {
@@ -21,26 +28,16 @@ export const socialMfaPlugin = (portalEndpoint?: MaybeRef<string>): PiniaPlugin
         const { } = storeToRefs(store)
         const { logout } = useUser()
 
-        /**
-         * Override the logout function to default to a social logout,
-         * if the social logout fails, then we will logout the user
-         */
-        const setLogoutMethod = (socialOauth: SocialMfaPlugin) => {
-            const logoutFunc = socialOauth.logout;
-
-            (socialOauth as any).logout = async () => {
-                if (await logoutFunc() === false) {
-                    await logout()
-                }
-            }
-        }
+        //Create social login from available portals
+        const defaultSocial = useSocialDefaultLogout(
+            useOauthLogin([]),
+            logout  //fallback to default logout
+        );
 
         const _loadPromise = new Promise<SocialMfaPlugin>((resolve, _) => {
 
             if (get(portalEndpoint) == null) {
-                const socialOauth = useSocialOauthLogin([])
-                setLogoutMethod(socialOauth)
-                return resolve(socialOauth)
+                return resolve(defaultSocial)
             }
 
             /*
@@ -50,27 +47,25 @@ export const socialMfaPlugin = (portalEndpoint?: MaybeRef<string>): PiniaPlugin
 
             defer(async () => {
 
-                let portals: SocialOAuthPortal[] = []
-
                 try {
-                    //Get axios instance
-                    const axios = useAxios(null)
+                    
+                    const portals = await fetchSocialPortals(get(portalEndpoint)!);
+                    const social = fromSocialPortals(portals);
+                    const methods = fromSocialConnections(social);
 
-                    //Get all enabled portals
-                    const { data, headers } = await axios.get<SocialOAuthPortal[]>(get(portalEndpoint)!);
+                    //Create social login from available portals
+                    const login = useOauthLogin(methods);
                     
-                    if(headers['content-type'] === 'application/json') {
-                        portals = data
-                    }
+                    const socialOauth = useSocialDefaultLogout(login, logout);
+
+                    console.log(login.methods)
+
+                    resolve(socialOauth)
 
                 } catch (error) {
                     //Let failure fall back to default
+                    resolve(defaultSocial)
                 }
-
-                //Create social login from available portals
-                const socialOauth = useSocialOauthLogin(fromPortals(portals));
-                setLogoutMethod(socialOauth);
-                resolve(socialOauth)
             })
         })
 
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 7e92d99..3c93d0e 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -16,11 +16,11 @@ const submitLogin = (method: OAuthMethod) => apiCall(async () => {
 })
 
 const getIcon = (method: OAuthMethod): string[] => {
-    switch (method.Id) {
+    switch (method.id) {
         case 'auth0':
             return ['fa', 'certificate']
         default:
-            return ['fab', method.Id]
+            return ['fab', method.id]
     }
 }
 
@@ -32,7 +32,7 @@ store.socialOauth().then(m => methods.value = m.methods);
 <template>
 
     <div class="flex flex-col gap-3">
-        <div v-for="method in methods" :key="method.Id" class="">
+        <div v-for="method in methods" :key="method.id" class="">
             <button 
             type="submit" 
             class="btn social-button" 
@@ -40,7 +40,7 @@ store.socialOauth().then(m => methods.value = m.methods);
             @click.prevent="submitLogin(method)"
             >
                 <fa-icon :icon="getIcon(method)" size="xl" />
-                Login with {{ capitalize(method.Id) }}
+                Login with {{ capitalize(method.id) }}
             </button>
         </div>
     </div>