fix: update google auth

Author: chertik77

src/app/routes/auth/google.callback.tsx

@@ -1,9 +1,10 @@
-import { GoogleCallbackPage } from '@/pages/auth'
 import { createFileRoute } from '@tanstack/react-router'
 
+import { GoogleAuthLoader } from '@/features/session/google'
+
 import { SessionContracts } from '@/entities/session'
 
 export const Route = createFileRoute('/auth/google/callback')({
-  component: GoogleCallbackPage,
+  component: GoogleAuthLoader,
   validateSearch: SessionContracts.GoogleCallbackSearchSchema
 })

src/entities/session/api/contracts.ts

@@ -12,6 +12,10 @@ export const SignupDtoSchema = v.object({
   ...SigninDtoSchema.entries
 })
 
+export const InitiateGoogleResponseDtoSchema = v.object({
+  redirectUrl: v.pipe(v.string(), v.url())
+})
+
 export const GoogleSigninDtoSchema = v.object({
   code: v.pipe(v.string(), v.minLength(1))
 })

src/entities/session/api/endpoints.ts

@@ -5,7 +5,7 @@ class SessionApiEndpoints {
   signin = `${this.baseUrl}/signin`
   refresh = `${this.baseUrl}/refresh`
   logout = `${this.baseUrl}/logout`
-  googleRedirect = `${this.baseUrl}/google/redirect`
+  googleInitiate = `${this.baseUrl}/google/initiate`
   googleCallback = `${this.baseUrl}/google/callback`
 }
 

src/entities/session/api/service.ts

@@ -11,6 +11,7 @@ import { axiosInstance } from '@/shared/api'
 
 import {
   GoogleSigninDtoSchema,
+  InitiateGoogleResponseDtoSchema,
   RefreshTokenDtoSchema,
   SessionResponseDtoSchema,
   SigninDtoSchema,
@@ -47,12 +48,20 @@ export const sessionService = {
     return parsedData
   },
 
+  async initiateGoogleSignin() {
+    const response = await axiosInstance.get(sessionApiEndpoints.googleInitiate)
+
+    const parsedData = parse(InitiateGoogleResponseDtoSchema, response.data)
+
+    return parsedData
+  },
+
   async signinWithGoogle(data: GoogleSigninDto) {
     const googleSigninDto = parse(GoogleSigninDtoSchema, data)
 
-    const response = await axiosInstance.get(
+    const response = await axiosInstance.post(
       sessionApiEndpoints.googleCallback,
-      { params: googleSigninDto }
+      googleSigninDto
     )
 
     const parsedData = parse(SessionResponseDtoSchema, response.data)

src/entities/session/api/types.ts

@@ -1,6 +1,7 @@
 import type { InferOutput } from 'valibot'
 import type {
   GoogleSigninDtoSchema,
+  InitiateGoogleResponseDtoSchema,
   RefreshTokenDtoSchema,
   SessionResponseDtoSchema,
   SigninDtoSchema,
@@ -14,3 +15,6 @@ export type SigninDto = InferOutput<typeof SigninDtoSchema>
 export type SignupDto = InferOutput<typeof SignupDtoSchema>
 export type GoogleSigninDto = InferOutput<typeof GoogleSigninDtoSchema>
 export type RefreshTokenDto = InferOutput<typeof RefreshTokenDtoSchema>
+export type InitiateGoogleResponseDto = InferOutput<
+  typeof InitiateGoogleResponseDtoSchema
+>

src/entities/session/index.ts

@@ -3,5 +3,4 @@ export * as SessionDtoTypes from './api/types'
 export * as SessionContracts from './model/contracts'
 export * as SessionDtoContracts from './api/contracts'
 export { sessionService } from './api/service'
-export { sessionApiEndpoints } from './api/endpoints'
 export { useSessionStore, getSessionStore, sessionActions } from './model/store'

src/features/session/google/api/useGoogleSignin.ts

@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import { useNavigate, useSearch } from '@tanstack/react-router'
 import { toast } from 'sonner'
 
@@ -12,26 +11,17 @@ export const useGoogleSignin = () => {
 
   const navigate = useNavigate()
 
-  const { data, isPending, isSuccess, isError } = useQuery({
-    queryKey: ['auth', 'google', 'callback', code],
-    queryFn: () => sessionService.signinWithGoogle({ code })
-  })
-
-  useEffect(() => {
-    if (isSuccess) {
+  return useMutation({
+    mutationFn: () => sessionService.signinWithGoogle({ code }),
+    onSuccess(data) {
       navigate({ to: '/dashboard' })
       authenticate(data)
-    }
-  }, [authenticate, data, isSuccess, navigate])
-
-  useEffect(() => {
-    if (isError) {
+    },
+    onError() {
       navigate({ to: '/' })
       toast.error(
         'An error occurred during sign-in with Google. Please try again shortly.'
       )
     }
-  }, [isError, navigate])
-
-  return { isPending }
+  })
 }

src/features/session/google/api/useInitiateGoogleSignin.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { sessionService } from '@/entities/session'
+
+export const useInitiateGoogleSignin = () =>
+  useMutation({
+    mutationFn: sessionService.initiateGoogleSignin,
+    onSuccess({ redirectUrl }) {
+      window.location.href = redirectUrl
+    }
+  })

src/features/session/google/index.ts

@@ -1,2 +1,2 @@
 export { ContinueWithGoogleButton } from './ui/ContinueWithGoogleButton'
-export { useGoogleSignin } from './api/useGoogleSignin'
+export { GoogleAuthLoader } from './ui/GoogleAuthLoader'

src/features/session/google/ui/ContinueWithGoogleButton.tsx

@@ -1,25 +1,21 @@
-import { sessionApiEndpoints } from '@/entities/session'
-
-import { env } from '@/shared/config'
 import { Icon } from '@/shared/ui'
 
+import { useInitiateGoogleSignin } from '../api/useInitiateGoogleSignin'
+
 export const ContinueWithGoogleButton = () => {
-  const actionUrl = `${env.VITE_API_BASE_URL}${sessionApiEndpoints.googleRedirect}`
+  const { mutate } = useInitiateGoogleSignin()
 
   return (
-    <form
-      action={actionUrl}
-      method='post'>
-      <button
-        type='submit'
-        className='flex w-84 items-center justify-center gap-2 rounded-lg
-          bg-black py-2.5 text-center text-white'>
-        <Icon
-          name='google'
-          className='size-7'
-        />
-        Continue with Google
-      </button>
-    </form>
+    <button
+      type='button'
+      className='flex w-84 items-center justify-center gap-2 rounded-lg bg-black
+        py-2.5 text-center text-white'
+      onClick={() => mutate()}>
+      <Icon
+        name='google'
+        className='size-7'
+      />
+      Continue with Google
+    </button>
   )
 }