Merge pull request #8 from Dialogue-Bot/DIAL-12-Feat-Login-with-google

DIAL-12-Feat-Login-with-google

Author: hi02102002

client/package-lock.json

@@ -50,6 +50,7 @@
       "cmdk": "^0.2.1",
       "date-fns": "^3.3.1",
       "embla-carousel-react": "^8.0.0-rc23",
+      "firebase": "^10.8.0",
       "i18next": "^23.9.0",
       "i18next-browser-languagedetector": "^7.2.0",
       "i18next-chained-backend": "^4.6.2",

client/package.json

@@ -10,6 +10,7 @@ class Auth {
    login(data: TLogin): Promise<TBaseResponse<TToken>> {
       return http_client.post(ENDPOINTS.AUTH.LOGIN, data);
    }
+
    // TODO: SHOULD BE CHANGE TYPE ANY TO TYPE USER
    register(data: TRegister): Promise<TBaseResponse<any>> {
       return http_client.post(ENDPOINTS.AUTH.REGISTER, data);
@@ -31,6 +32,10 @@ class Auth {
    refreshToken(): Promise<TBaseResponse<TToken>> {
       return http_client.post(ENDPOINTS.AUTH.REFRESH_TOKEN);
    }
+
+   loginWithIdToken(idToken: string): Promise<TBaseResponse<TToken>> {
+      return http_client.post(ENDPOINTS.AUTH.WITH_ID_TOKEN, { idToken });
+   }
 }
 
 export const auth = new Auth();

client/src/apis/auth.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 import { Loader2 } from 'lucide-react';
@@ -40,6 +40,7 @@ export interface ButtonProps
       VariantProps<typeof buttonVariants> {
    asChild?: boolean;
    loading?: boolean;
+   leftIcon?: React.ReactNode;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -52,6 +53,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
          loading,
          children,
          disabled,
+         leftIcon,
          ...props
       },
       ref
@@ -64,7 +66,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             disabled={loading || disabled}
             {...props}
          >
-            {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+            {loading ? (
+               <Loader2 className="w-4 h-4 animate-spin mr-2" />
+            ) : leftIcon ? (
+               leftIcon
+            ) : null}
             {children}
          </Comp>
       );

client/src/components/ui/button.tsx

@@ -8,6 +8,7 @@ export const ENDPOINTS = {
       REFRESH_TOKEN: '/auth/refresh-token',
       FORGOT_PASSWORD: '/auth/forgot-password',
       RESET_PASSWORD: '/auth/reset-password',
+      WITH_ID_TOKEN: '/auth/with-id-token',
    },
    UPLOAD: {
       SINGLE: '/upload/single',

client/src/constants/index.ts

@@ -1,4 +1,6 @@
 export * from './use-forgot-pass';
 export * from './use-login';
+export * from './use-login-with-id-token';
+export * from './use-login-with-provider';
 export * from './use-register';
 export * from './use-set-pass';

client/src/hooks/auth/index.ts

@@ -0,0 +1,19 @@
+import { auth } from '@/apis/auth';
+import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+export const useLoginWithIdToken = () => {
+   const { t } = useTranslation('common');
+   return useMutation({
+      mutationFn: (idToken: string) => {
+         return auth.loginWithIdToken(idToken);
+      },
+      onSuccess(data) {
+         toast.success(data.message);
+      },
+      onError(err: any) {
+         toast.error(err?.response?.data?.message || t('api_error'));
+      },
+   });
+};

client/src/hooks/auth/use-login-with-id-token.ts

@@ -0,0 +1,25 @@
+import { auth } from '@/apis/auth';
+import { auth as fAuth } from '@/lib/firebase';
+import { useMutation } from '@tanstack/react-query';
+import { AuthProvider, getIdToken, signInWithPopup } from 'firebase/auth';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+export const useLoginWithProvider = (provider: AuthProvider) => {
+   const { t } = useTranslation('common');
+   return useMutation({
+      mutationFn: async () => {
+         const user = await signInWithPopup(fAuth, provider);
+
+         const idToken = await getIdToken(user.user);
+
+         return auth.loginWithIdToken(idToken);
+      },
+      onSuccess(data) {
+         toast.success(data.message);
+      },
+      onError(err: any) {
+         toast.error(err?.response?.data?.message || t('api_error'));
+      },
+   });
+};

client/src/hooks/auth/use-login-with-provider.ts

@@ -1 +1,18 @@
-// handle the firebase configuration
+import { initializeApp } from 'firebase/app';
+import { GoogleAuthProvider, getAuth } from 'firebase/auth';
+
+const firebaseConfig = {
+   apiKey: 'AIzaSyAUS_tTkaP0bQHBDbHImBxHf9MNXZ3-9U0',
+   authDomain: 'dialoguebot-6674e.firebaseapp.com',
+   projectId: 'dialoguebot-6674e',
+   storageBucket: 'dialoguebot-6674e.appspot.com',
+   messagingSenderId: '173106613353',
+   appId: '1:173106613353:web:34bb3797a0588b8496e6f8',
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+const GoogleProvider = new GoogleAuthProvider();
+
+export { GoogleProvider, app, auth };

client/src/lib/firebase.ts

@@ -5,5 +5,6 @@
    "api_error": "An error occurred while processing your request. Please try again later.",
    "term": "By continuing, you agree to our <term>Terms of Service</term> and <privacy>Privacy Policy</privacy>.",
    "register": "Register",
-   "back_to_login": "Back to login"
+   "back_to_login": "Back to login",
+   "login_with": "Login with {{provider}}"
 }