Login Oauth providers using plugin 'Headless Login for WPGraphQL'

woonuxt_base/app/components/forms/LoginAndRegister.vue

@@ -55,14 +55,19 @@
       {{ $t('messages.account.forgotPassword') }}
     </div>
     <div class="my-8 text-center cursor-pointer" @click="navigate('login')" v-if="formView === 'forgotPassword'">{{ $t('messages.account.backToLogin') }}</div>
+
+    <LoginProviders v-if="formView === 'login' || formView === 'register'" :loginClients="loginClients" />
   </div>
 </template>
 
 <script setup lang="ts">
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const { loginUser, isPending, registerUser, sendResetPasswordEmail } = useAuth();
+const { loginUser, isPending, registerUser, sendResetPasswordEmail, loginClients, getLoginClients } = useAuth();
+
+if (loginClients.value === null) getLoginClients();
+
 const userInfo = ref({ email: '', password: '', username: '' });
 const formView = ref('login');
 const message = ref('');

woonuxt_base/app/components/forms/LoginProviders.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps({
+  loginClients: { type: Object as PropType<LoginClients>, default: [] },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { loginWithProvider } = useAuth();
+
+const { provider, code, state } = route.query as { provider?: string; code?: string; state?: string };
+if (code && state && provider) {
+  loginWithProvider(state, code, provider.toUpperCase())
+    .then(() => {
+      router.replace({ query: {} });
+    })
+    .catch((error) => {
+      console.error('Login failed:', error);
+    });
+}
+
+const getIcon = (provider: any) => {
+  switch (provider) {
+    case 'FACEBOOK':
+      return 'ion:logo-facebook';
+    case 'GITHUB':
+      return 'ion:logo-github';
+    case 'GOOGLE':
+      return 'ion:logo-google';
+    case 'INSTAGRAM':
+      return 'ion:logo-instagram';
+    case 'LINKEDIN':
+      return 'ion:logo-linkedin';
+    default:
+      return 'ion:log-in';
+  }
+};
+</script>
+
+<template>
+  <div class="flex justify-center items-center pt-4">
+    <div v-for="(loginClient, index) in props.loginClients" :key="index">
+      <NuxtLink v-if="loginClient && loginClient?.authorizationUrl" :to="loginClient?.authorizationUrl">
+        <Icon :name="getIcon(loginClient.provider)" size="56" class="mx-6" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+

woonuxt_base/app/composables/useAuth.ts

@@ -1,5 +1,5 @@
-import { GqlLogin, GqlLogout, GqlRegisterCustomer, GqlResetPasswordEmail, GqlGetOrders } from '#gql';
-import type { RegisterCustomerInput, CreateAccountInput } from '#gql';
+import { GqlLogin, GqlLogout, GqlRegisterCustomer, GqlResetPasswordEmail, GqlGetOrders,  } from '#gql';
+import type { RegisterCustomerInput, CreateAccountInput, LoginInput } from '#gql';
 
 export const useAuth = () => {
   const { refreshCart } = useCart();
@@ -11,15 +11,16 @@ export const useAuth = () => {
   const isPending = useState<boolean>('isPending', () => false);
   const orders = useState<Order[] | null>('orders', () => null);
   const downloads = useState<DownloadableItem[] | null>('downloads', () => null);
+  const loginClients = useState<LoginClients | null>('loginClients', () => null);
 
   // Log in the user
   const loginUser = async (credentials: CreateAccountInput): Promise<{ success: boolean; error: any }> => {
     isPending.value = true;
 
     try {
-      const { loginWithCookies } = await GqlLogin(credentials);
+      const { login } = await GqlLogin(credentials);
 
-      if (loginWithCookies?.status === 'SUCCESS') {
+      if (login?.authToken !== null) {
         await refreshCart();
         if (viewer === null) {
           return {
@@ -30,6 +31,40 @@ export const useAuth = () => {
         }
       }
 
+      isPending.value = false;
+      return {
+        success: true,
+        error: null,
+      };
+    } catch (error: any) {
+      logGQLError(error);
+      isPending.value = false;
+
+      return {
+        success: false,
+        error: error?.gqlErrors?.[0]?.message,
+      };
+    }
+  };
+
+  const loginWithProvider = async (state: string, code: string, provider: any): Promise<{ success: boolean; error: any }> => {
+    isPending.value = true;
+
+    try {
+      const input: LoginInput = { oauthResponse: { state, code }, provider }
+      const response = await GqlLoginWithProvider({ input });
+
+      if (response.login?.authToken) {
+        const { viewer } = await refreshCart();
+        if (viewer === null) {
+          return {
+            success: false,
+            error:
+              'Your credentials are correct, but there was an error logging in. This is most likely due to an SSL error. Please try again later. If the problem persists, please contact support.',
+          };
+        }
+      }
+
       return {
         success: true,
         error: null,
@@ -173,6 +208,21 @@ export const useAuth = () => {
     }
   };
 
+  const getLoginClients = async () => {
+    try {
+      const response = await GqlGetLoginClients();
+      if (response.loginClients) {
+        loginClients.value = response.loginClients;
+        return { success: true, error: null };
+      }
+      return { success: false, error: 'There was an error getting your OAuth clients. Please try again later.' };
+    } catch (error: any) {
+      logGQLError(error);
+      const gqlError = error?.gqlErrors?.[0];
+      return { success: false, error: gqlError?.message };
+    }
+  };
+
   const avatar = computed(() => viewer.value?.avatar?.url ?? null);
   const wishlistLink = computed<string>(() => (viewer.value ? '/my-account?tab=wishlist' : '/wishlist'));
 
@@ -185,6 +235,8 @@ export const useAuth = () => {
     avatar,
     wishlistLink,
     loginUser,
+    loginClients,
+    loginWithProvider,
     updateCustomer,
     updateViewer,
     logoutUser,
@@ -193,5 +245,6 @@ export const useAuth = () => {
     resetPasswordWithKey,
     getOrders,
     getDownloads,
+    getLoginClients,
   };
 };

woonuxt_base/app/pages/oauth/login/[provider].vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const route = useRoute();
+const router = useRouter();
+
+const provider = route.params.provider as string;
+
+const code = route.query.code as string;
+const state = route.query.state as string;
+const error = route.query.error as string;
+
+if (code && state && provider && !error) {
+  router.push({ name: 'my-account', query: { ...route.query, provider } });
+} else {
+  router.push('/my-account');
+}
+</script>
+
+<template>
+  <div class="container min-h-[600px]">
+    <div v-if="showLoader" class="flex flex-col min-h-[500px]">
+      <LoadingIcon class="m-auto" />
+    </div>
+  </div>
+</template>

woonuxt_base/app/queries/getLoginClients.gql

@@ -0,0 +1,8 @@
+query getLoginClients {
+  loginClients {
+    name
+    provider
+    isEnabled
+    authorizationUrl
+  }
+}

woonuxt_base/app/queries/login.gql

@@ -1,5 +1,8 @@
 mutation login($username: String!, $password: String!) {
-  loginWithCookies(input: { login: $username, password: $password, rememberMe: true }) {
-    status
+  login(input: { provider: PASSWORD, credentials: { username: $username, password: $password } }) {
+    authToken
+    authTokenExpiration
+    refreshToken
+    wooSessionToken
   }
 }

woonuxt_base/app/queries/loginWithProvider.gql

@@ -0,0 +1,7 @@
+mutation loginWithProvider($input: LoginInput!) {
+  login(input: $input) {
+    authToken
+    refreshToken
+    authTokenExpiration
+  }
+}

woonuxt_base/app/types/index.d.ts

@@ -15,6 +15,7 @@ type Terms = import('#gql').TermsFragment;
 type VariationAttribute = import('#gql').VariationAttributeFragment;
 type Comment = import('#gql').CommentFragment;
 type ProductAttribute = import('#gql').ProductAttributeFragment;
+type LoginClients = import('#gql').GetLoginClientsQuery['loginClients'];
 
 interface ProductAttributeInput {
   attributeName: string;