diff --git a/woonuxt_base/app/components/forms/LoginAndRegister.vue b/woonuxt_base/app/components/forms/LoginAndRegister.vue
index 35ae0af7..f00087b7 100644
--- a/woonuxt_base/app/components/forms/LoginAndRegister.vue
+++ b/woonuxt_base/app/components/forms/LoginAndRegister.vue
@@ -55,6 +55,8 @@
       {{ $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>
 
@@ -62,7 +64,10 @@
 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('');
diff --git a/woonuxt_base/app/components/forms/LoginProviders.vue b/woonuxt_base/app/components/forms/LoginProviders.vue
new file mode 100644
index 00000000..4443daf5
--- /dev/null
+++ b/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>
+  
diff --git a/woonuxt_base/app/composables/useAuth.ts b/woonuxt_base/app/composables/useAuth.ts
index 6bf9f4ef..7377a77e 100644
--- a/woonuxt_base/app/composables/useAuth.ts
+++ b/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,
   };
 };
diff --git a/woonuxt_base/app/pages/oauth/login/[provider].vue b/woonuxt_base/app/pages/oauth/login/[provider].vue
new file mode 100644
index 00000000..c6748f19
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/woonuxt_base/app/queries/getLoginClients.gql b/woonuxt_base/app/queries/getLoginClients.gql
new file mode 100644
index 00000000..f4d86213
--- /dev/null
+++ b/woonuxt_base/app/queries/getLoginClients.gql
@@ -0,0 +1,8 @@
+query getLoginClients {
+  loginClients {
+    name
+    provider
+    isEnabled
+    authorizationUrl
+  }
+}
\ No newline at end of file
diff --git a/woonuxt_base/app/queries/login.gql b/woonuxt_base/app/queries/login.gql
index 441c808d..51587d43 100644
--- a/woonuxt_base/app/queries/login.gql
+++ b/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
   }
 }
diff --git a/woonuxt_base/app/queries/loginWithProvider.gql b/woonuxt_base/app/queries/loginWithProvider.gql
new file mode 100644
index 00000000..ba700cb5
--- /dev/null
+++ b/woonuxt_base/app/queries/loginWithProvider.gql
@@ -0,0 +1,7 @@
+mutation loginWithProvider($input: LoginInput!) {
+  login(input: $input) {
+    authToken
+    refreshToken
+    authTokenExpiration
+  }
+}
diff --git a/woonuxt_base/app/types/index.d.ts b/woonuxt_base/app/types/index.d.ts
index aca425bf..8b0dfdf8 100644
--- a/woonuxt_base/app/types/index.d.ts
+++ b/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;