feat: update google login

.env

@@ -1,5 +1,6 @@
 NEXT_PUBLIC_SERVER_BASE_URL=https://api.bbuddy.expert/api
 NEXT_PUBLIC_AGORA_APPID=ed90c9dc42634e5687d4e2e0766b363f
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=909563069647-03rivr8k1jmirf382bcfehegamthcfg4.apps.googleusercontent.com
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LVB3LK5pVGxNPeKk4gedt5NW4cb8k7BVXvgOMPTK4x1nnbGTD8BCqDqgInboT6N72YwrTl4tOsVz8rAjbUadX1m00y4Aq5qE8
 STRIPE_SECRET_KEY=sk_test_51LVB3LK5pVGxNPeK6j0wCsPqYMoGfcuwf1LpwGEBsr1dUx4NngukyjYL2oMZer5EOlW3lqnVEPjNDruN0OkUohIf00fWFUHN5O
 STRIPE_PAYMENT_DESCRIPTION='BBuddy services'

package.json

@@ -12,10 +12,9 @@
     "@ant-design/cssinjs": "^1.18.1",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/nextjs-registry": "^1.0.0",
-    "@greatsumini/react-facebook-login": "^3.3.3",
-    "@react-oauth/google": "^0.12.1",
     "@contentful/rich-text-react-renderer": "^15.22.9",
     "@microsoft/signalr": "^8.0.7",
+    "@react-oauth/google": "^0.12.1",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^4.1.0",
     "agora-rtc-react": "2.1.0",

src/actions/auth.ts

@@ -12,3 +12,25 @@ export const getRegister = (locale: string): Promise<{ jwtToken: string }> => ap
     method: 'post',
     locale
 });
+
+export const getRegisterByGoogle = (locale: string, accesstoken: string): Promise<{ jwtToken: string }> => apiRequest({
+    url: '/auth/registerexternal',
+    method: 'post',
+    data: {
+        platform: 0,
+        provider: 4,
+        accesstoken
+    },
+    locale
+});
+
+export const getLoginByGoogle = (locale: string, accesstoken: string): Promise<{ jwtToken: string }> => apiRequest({
+    url: '/auth/tryloginexternal',
+    method: 'post',
+    data: {
+        platform: 0,
+        provider: 4,
+        accesstoken
+    },
+    locale
+});

src/app/[locale]/layout.tsx

@@ -4,13 +4,11 @@ import { unstable_setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 import { ConfigProvider } from 'antd';
 import { AntdRegistry } from '@ant-design/nextjs-registry';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import theme from '../../constants/theme';
 import { ALLOWED_LOCALES } from '../../constants/locale';
 import { Header, Footer, AppConfig } from '../../components/Page';
 
-import { GoogleOAuthProvider } from '@react-oauth/google';
-import { SessionProvider } from "next-auth/react"
-
 type LayoutProps = {
     children: ReactNode;
     params: { locale: string };
@@ -31,7 +29,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
 
     return (
         <AntdRegistry>
-            <GoogleOAuthProvider clientId='909563069647-03rivr8k1jmirf382bcfehegamthcfg4.apps.googleusercontent.com'>
+            <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ''}>
                 <ConfigProvider theme={theme}>
                 <div className="b-wrapper">
                     <Suspense fallback={null}>

src/components/Modals/authModalContent/EnterContent.tsx

@@ -1,27 +1,18 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState } from 'react';
 import { Form, FormInstance, notification } from 'antd';
 import Image from 'next/image';
-import { Social } from '../../../types/social';
 import { AUTH_USER } from '../../../constants/common';
-import { SocialConfig } from '../../../constants/social';
+import { getAuth, getLoginByGoogle } from '../../../actions/auth';
-import { useOauthWindow } from '../../../hooks/useOauthWindow';
+import { getUserData } from '../../../actions/profile';
-import { getAuth } from '../../../actions/auth';
-import {getPersonalData, getUserData} from '../../../actions/profile';
 import { CustomInput } from '../../view/CustomInput';
 import { CustomInputPassword } from '../../view/CustomInputPassword';
 import { FilledButton } from '../../view/FilledButton';
 import { OutlinedButton } from '../../view/OutlinedButton';
 import { LinkButton } from '../../view/LinkButton';
 import { i18nText } from '../../../i18nKeys';
-import { apiClient } from 'lib/apiClient';
 import { useGoogleLogin } from '@react-oauth/google';
-import { FacebookLoginClient, SuccessResponse } from '@greatsumini/react-facebook-login';
-import FacebookLogin from '@greatsumini/react-facebook-login';
-
 import AppleLogin from 'react-apple-login'
 
-const appId = '581373996992475';
-
 type EnterProps = {
     form: FormInstance;
     updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
@@ -38,7 +29,6 @@ export const EnterContent: FC<EnterProps> = ({
     handleCancel
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const { openOauthWindow } = useOauthWindow();
 
     const onLogin = () => {
         form.validateFields().then(() => {
@@ -68,90 +58,38 @@ export const EnterContent: FC<EnterProps> = ({
     };
 
 
-    const googleLogin = useGoogleLogin({
+    const onGoogleLogin = useGoogleLogin({
-            onError: (err) => {
+        onError: (err) => {
-                console.log(err);
+            notification.error({
-            },
+                message: err.error,
-            onSuccess: async (tokenResponse) => {
+                description: err.error_description
-                var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternal',  {
+            });
-                    platform: 0,
+        },
-                    provider: 4,
+        onSuccess: (tokenResponse) => {
-                    accesstoken: tokenResponse.access_token
+            setIsLoading(true);
+            getLoginByGoogle(locale, tokenResponse.access_token)
+                .then((data) => {
+                    if (data.jwtToken) {
+                        getUserData(locale, data.jwtToken)
+                            .then((profile) => {
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
+                                updateToken(data.jwtToken);
+                                handleCancel();
+                            })
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    setIsLoading(false);
                 });
-                localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
-                console.log(result);
-            }
-        });
-
-    const facebookLogin = async (response: SuccessResponse) => {
-        console.log('Login Success!', response);
-        var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternal',  {
-            platform: 0,
-            provider: 1,
-            accesstoken: response.accessToken
-        });
-        localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
-        console.log(result);
-    }
-
-    const authRequest = async () => {
-        try {
-            await apiClient.post('/home/userdata');
-            console.log('success');
         }
-        catch(err) {
+    });
-            console.log(err);
-        }
-
-    }
-
-    const logout = () => {
-        localStorage.removeItem('bbuddy_token_test');
-    }
-
-
-    const onSocialEnter = (type: Social) => {
-
-        const url = SocialConfig[type].oauthUrl;
-
-        if (!url) return;
-
-        openOauthWindow(url, type, async (event: MessageEvent) => {
-            const { data: socialData } = event
-
-            // примерная схема последующей обработки
-
-            // const socialErrors: string[] = [];
-            // try {
-            //     // отправляем запрос на бэк с данными из соц сети
-            //     const { data: { jwtToken } } = await query(socialData);
-            //     // обновляем токен
-            //     updateToken(jwtToken);
-            //     // получаем данные о пользователе
-            //     await getAuthUser()
-            // } catch (error: any) {
-            //     if (error.httpStatus === 449) {
-            //         // ошибка, когда отсутствует e-mail
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку регистрации
-            //         handleCancel();
-            //         openSocialEmailRequestModal(socialData);
-            //     } else if (error.httpStatus === 409) {
-            //         // ошибка, когда по переданному email уже существует аккаунт
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку с вводом пароля
-            //         handleCancel();
-            //         openSocialPasswordModal(socialData);
-            //     } else {
-            //         // в остальных случаях записываем ошибку в массив ошибок
-            //         socialErrors.push(error.toString());
-            //     }
-            // }
-            //
-            // // если все успешно, закрываем окно
-            // handleCancel();
-        })
-    };
 
     return (
         <>
@@ -207,43 +145,26 @@ export const EnterContent: FC<EnterProps> = ({
                 {`${i18nText('forgotPass', locale)}?`}
             </LinkButton>
             <span>{i18nText('or', locale)}</span>
-            <FacebookLogin
-                initParams={{
-                    version: 'v16.0',
-                }}
-                loginOptions={{
-                    return_scopes: true,
-                    auth_type: 'rerequest'
-                }}
-                appId={appId}
-                onSuccess={facebookLogin}
-                >
-
-            </FacebookLogin>
             <AppleLogin
                 clientId="bbuddy.expert"
-                redirectURI="https://local.apple-sigin.mydomain.com/en/apple-sign-in"
+                redirectURI="https://bbuddy.expert"
-                responseType='code'
+                responseType="code"
-                responseMode = 'query'
+                responseMode ="query"
+                render={({ onClick }) => (
+                    <OutlinedButton
+                        icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
+                        onClick={onClick}
+                    >
+                        {i18nText('apple', locale)}
+                    </OutlinedButton>
+                )}
             />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => googleLogin()}
+                onClick={onGoogleLogin}
             >
                 {i18nText('google', locale)}
             </OutlinedButton>
-
-            <OutlinedButton
-                onClick={() => authRequest()}
-            >
-                Test Request
-            </OutlinedButton>
-
-            <OutlinedButton
-                onClick={() => logout()}
-            >
-                Log Out
-            </OutlinedButton>
         </>
     );
 };

src/components/Modals/authModalContent/RegisterContent.tsx

@@ -1,26 +1,17 @@
 import React, { FC, useState } from 'react';
 import { Form, FormInstance, notification } from 'antd';
 import Image from 'next/image';
-import { Social } from '../../../types/social';
+import { useGoogleLogin } from '@react-oauth/google';
 import { AUTH_USER } from '../../../constants/common';
-import { SocialConfig } from '../../../constants/social';
+import { getRegister, getRegisterByGoogle } from '../../../actions/auth';
-import { getRegister } from '../../../actions/auth';
+import { getUserData, setPersonData } from '../../../actions/profile';
-import { setPersonData } from '../../../actions/profile';
-import { useOauthWindow } from '../../../hooks/useOauthWindow';
 import { CustomInput } from '../../view/CustomInput';
 import { CustomInputPassword } from '../../view/CustomInputPassword';
 import { FilledButton } from '../../view/FilledButton';
 import { OutlinedButton } from '../../view/OutlinedButton';
 import { i18nText } from '../../../i18nKeys';
-import { apiClient } from 'lib/apiClient';
-import { useGoogleLogin } from '@react-oauth/google';
-import { FacebookLoginClient, SuccessResponse } from '@greatsumini/react-facebook-login';
-import FacebookLogin from '@greatsumini/react-facebook-login';
-
 import AppleLogin from 'react-apple-login';
 
-const appId = '581373996992475';
-
 type RegisterProps = {
     form: FormInstance;
     locale: string;
@@ -37,18 +28,6 @@ export const RegisterContent: FC<RegisterProps> = ({
     handleCancel
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const { openOauthWindow } = useOauthWindow();
-
-    const facebookLogin = async (response: SuccessResponse) => {
-        console.log('Login Success!', response);
-        var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternal',  {
-            platform: 0,
-            provider: 1,
-            accesstoken: response.accessToken
-        });
-        localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
-        console.log(result);
-    }
 
     const onRegister = () => {
         form.validateFields().then(() => {
@@ -83,64 +62,39 @@ export const RegisterContent: FC<RegisterProps> = ({
         });
     };
 
-    const googleLogin = useGoogleLogin({
+    const onGoogleLogin = useGoogleLogin({
         onError: (err) => {
-            console.log(err);
+            notification.error({
-        },
+                message: err.error,
-        onSuccess: async (tokenResponse) => {
+                description: err.error_description
-            var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternal',  {
-                platform: 0,
-                provider: 4,
-                accesstoken: tokenResponse.access_token
             });
-            localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
+        },
-            console.log(result);
+        onSuccess: (tokenResponse) => {
+            setIsLoading(true);
+            getRegisterByGoogle(locale, tokenResponse.access_token)
+                .then((data) => {
+                    if (data.jwtToken) {
+                        getUserData(locale, data.jwtToken)
+                            .then((profile) => {
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
+                                updateToken(data.jwtToken);
+                                handleCancel();
+                            })
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
         }
     });
 
-
-    const onSocialRegister = (type: Social) => {
-        const url = SocialConfig[type].oauthUrl;
-
-        if (!url) return;
-
-        openOauthWindow(url, type, async (event: MessageEvent) => {
-            const { data: socialData } = event
-
-            // примерная схема последующей обработки
-
-            // const socialErrors: string[] = [];
-            // try {
-            //     // отправляем запрос на бэк с данными из соц сети
-            //     const { data: { jwtToken } } = await query(socialData);
-            //     // обновляем токен
-            //     updateToken(jwtToken);
-            //     // получаем данные о пользователе
-            //     await getAuthUser()
-            // } catch (error: any) {
-            //     if (error.httpStatus === 449) {
-            //         // ошибка, когда отсутствует e-mail
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку регистрации
-            //         handleCancel();
-            //         openSocialEmailRequestModal(socialData);
-            //     } else if (error.httpStatus === 409) {
-            //         // ошибка, когда по переданному email уже существует аккаунт
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку с вводом пароля
-            //         handleCancel();
-            //         openSocialPasswordModal(socialData);
-            //     } else {
-            //         // в остальных случаях записываем ошибку в массив ошибок
-            //         socialErrors.push(error.toString());
-            //     }
-            // }
-            //
-            // // если все успешно, закрываем окно
-            // handleCancel();
-        })
-    };
-
     return (
         <>
             <Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
@@ -212,42 +166,23 @@ export const RegisterContent: FC<RegisterProps> = ({
             </FilledButton>
             <OutlinedButton onClick={() => updateMode('enter')}>{i18nText('enter', locale)}</OutlinedButton>
             <span>{i18nText('or', locale)}</span>
-            <OutlinedButton
-                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
-                onClick={() => onSocialRegister(Social.FACEBOOK)}
-            >
-                {i18nText('facebook', locale)}
-            </OutlinedButton>
-            <OutlinedButton
-                icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
-                onClick={() => onSocialRegister(Social.APPLE)}
-            >
-                {i18nText('apple', locale)}
-            </OutlinedButton>
-            <FacebookLogin
-                initParams={{
-                    version: 'v16.0',
-                }}
-                loginOptions={{
-                    return_scopes: true,
-                    auth_type: 'rerequest'
-                }}
-                appId={appId}
-                onSuccess={facebookLogin}
-                >
-
-            </FacebookLogin>
             <AppleLogin
-
+                clientId="bbuddy.expert"
-            clientId="bbuddy.expert"
+                redirectURI="https://bbuddy.expert"
-            redirectURI="https://local.apple-sigin.mydomain.com/en/apple-registration"
+                responseType="code"
-            responseType='code'
+                responseMode ="query"
-            responseMode = 'query'
+                render={({ onClick }) => (
-
+                    <OutlinedButton
+                        icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
+                        onClick={onClick}
+                    >
+                        {i18nText('apple', locale)}
+                    </OutlinedButton>
+                )}
             />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => googleLogin()}
+                onClick={onGoogleLogin}
             >
                 {i18nText('google', locale)}
             </OutlinedButton>

src/types/profile.ts

@@ -30,6 +30,7 @@ export type ProfileRequest = {
     faceImage?: any;
     isFaceImageKeepExisting?: boolean;
     phone?: string;
+    role?: string;
 };
 
 export type PayInfo = {