fix oauth

.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'

.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

package.json

@@ -14,6 +14,7 @@
     "@ant-design/nextjs-registry": "^1.0.0",
     "@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",
@@ -28,6 +29,7 @@
     "next": "14.0.3",
     "next-intl": "^3.3.1",
     "react": "^18",
+    "react-apple-login": "^1.1.6",
     "react-dom": "^18",
     "react-signalr": "^0.2.24",
     "react-slick": "^0.29.0",

src/actions/auth.ts

@@ -12,3 +12,39 @@ 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
+});
+
+export const getRegisterByApple = (locale: string, code: string): Promise<{ jwtToken: string }> => apiRequest({
+    url: '/auth/registerexternalappleweb',
+    method: 'post',
+    data: { code },
+    locale
+});
+
+export const getLoginByApple = (locale: string, code: string): Promise<{ jwtToken: string }> => apiRequest({
+    url: '/auth/tryloginexternalappleweb',
+    method: 'post',
+    data: { code },
+    locale
+});

src/actions/stripe.ts

@@ -13,7 +13,6 @@ export async function createCheckoutSession(
     const ui_mode = data.get(
         "uiMode",
     ) as Stripe.Checkout.SessionCreateParams.UiMode;
-    console.log('DATA', data)
     const origin: string = headers().get("origin") as string;
 
     const checkoutSession: Stripe.Checkout.Session =

src/app/[locale]/blog/[slug]/page.tsx

@@ -50,7 +50,6 @@ function renderWidget (widget: Widget, index: number) {
 
 export default async function BlogItem({params}: { params: BlogPostPageParams }) {
     const item = await fetchBlogPost({slug: params.slug, preview: draftMode().isEnabled })
-    console.log('BLOG POST')
     console.log(Util.inspect(item, {showHidden: false, depth: null, colors: true}))
     if (!item) notFound();
 

src/app/[locale]/layout.tsx

@@ -4,6 +4,7 @@ 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';
@@ -28,6 +29,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
 
     return (
         <AntdRegistry>
+            <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ''}>
                 <ConfigProvider theme={theme}>
                 <div className="b-wrapper">
                     <Suspense fallback={null}>
@@ -40,6 +42,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
                     <Footer locale={locale} />
                 </div>
                 </ConfigProvider>
+            </GoogleOAuthProvider>    
         </AntdRegistry>
     );
 }

src/app/[locale]/temp/login/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import React, { useEffect } from 'react';
+import { notification } from 'antd';
+import { useSearchParams } from 'next/navigation';
+import { CustomSpin } from '../../../../components/view/CustomSpin';
+import { getLoginByApple } from '../../../../actions/auth';
+import { getUserData } from '../../../../actions/profile';
+import { AUTH_TOKEN_KEY, AUTH_USER } from '../../../../constants/common';
+import { useLocalStorage } from '../../../../hooks/useLocalStorage';
+import { useRouter } from '../../../../navigation';
+
+export default function AppleLoginPage({ params: { locale } }: { params: { locale: string } })  {
+    const params = useSearchParams();
+    const router = useRouter();
+    const [, setToken] = useLocalStorage(AUTH_TOKEN_KEY, '');
+
+    useEffect(() => {
+        const code = params.get('code');
+        if (code) {
+            getLoginByApple(locale, code)
+                .then((data) => {
+                    if (data.jwtToken) {
+                        getUserData(locale, data.jwtToken)
+                            .then((profile) => {
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
+                                setToken(data.jwtToken);
+                            })
+                    } else {
+                        notification.error({
+                            message: 'Error',
+                            description: 'Access denied'
+                        });
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    router.push('/');
+                });
+        }
+    }, [params]);
+
+    return <CustomSpin />;
+}

src/app/[locale]/temp/register/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import React, { useEffect } from 'react';
+import { notification } from 'antd';
+import { useSearchParams } from 'next/navigation';
+import { CustomSpin } from '../../../../components/view/CustomSpin';
+import { getRegisterByApple } from '../../../../actions/auth';
+import { getUserData } from '../../../../actions/profile';
+import { AUTH_TOKEN_KEY, AUTH_USER } from '../../../../constants/common';
+import { useLocalStorage } from "../../../../hooks/useLocalStorage";
+import { useRouter } from '../../../../navigation';
+
+export default function AppleRegisterPage({ params: { locale } }: { params: { locale: string } })  {
+    const params = useSearchParams();
+    const router = useRouter();
+    const [, setToken] = useLocalStorage(AUTH_TOKEN_KEY, '');
+
+    useEffect(() => {
+        const code = params.get('code');
+        if (code) {
+            getRegisterByApple(locale, code)
+                .then((data) => {
+                    if (data.jwtToken) {
+                        getUserData(locale, data.jwtToken)
+                            .then((profile) => {
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
+                                setToken(data.jwtToken);
+                            })
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    router.push('/');
+                });
+        }
+    }, [params]);
+
+    return <CustomSpin />;
+}

src/components/Modals/AuthModal.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import React, { Dispatch, FC, SetStateAction, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
-import { Modal, Form } from 'antd';
+import { Modal, Form, notification } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import { RegisterContent, ResetContent, FinishContent, EnterContent } from './authModalContent';
 import { i18nText } from '../../i18nKeys';
+import { useRouter } from '../../navigation';
+import { AUTH_USER} from '../../constants/common';
+import { getRegisterByApple, getLoginByApple } from '../../actions/auth';
+import { getUserData } from '../../actions/profile';
 
 type AuthModalProps = {
     open: boolean;
@@ -27,6 +31,47 @@ export const AuthModal: FC<AuthModalProps> = ({
 }) => {
     const [form] = Form.useForm<{ login: string, password: string, confirmPassword: string }>();
     const paths = usePathname().split('/');
+    const params = useSearchParams();
+    const router = useRouter();
+
+    const onUpdateToken = (token: string) => {
+        if (updateToken && typeof updateToken !== 'string') {
+            updateToken(token);
+        }
+    };
+
+    useEffect(() => {
+        const code = params.get('code');
+        const type = params.get('state');
+        if (code && type) {
+            const appleFunc = type === 'bbregister' ? getRegisterByApple : getLoginByApple;
+            appleFunc(locale, code)
+                .then((data) => {
+                    if (data.jwtToken) {
+                        getUserData(locale, data.jwtToken)
+                            .then((profile) => {
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
+                                onUpdateToken(data.jwtToken);
+                            })
+                    } else {
+                        notification.error({
+                            message: 'Error',
+                            description: 'Access denied'
+                        });
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    router.push('/');
+                });
+        }
+    }, [params]);
 
     const onAfterClose = () => {
         form.resetFields();
@@ -38,12 +83,6 @@ export const AuthModal: FC<AuthModalProps> = ({
         }
     }, [mode]);
 
-    const onUpdateToken = (token: string) => {
-        if (updateToken && typeof updateToken !== 'string') {
-            updateToken(token);
-        }
-    };
-
     return (
         <Modal
             className="b-modal"

src/components/Modals/ScheduleModal.tsx

@@ -76,7 +76,6 @@ export const ScheduleModal: FC<ScheduleModalProps> = ({
             getSchedulerSession(parseData as SignupSessionData, locale || 'en', jwt)
                 .then((session) => {
                     setSessionId(session?.sessionId);
-                    console.log(session?.sessionId);
                 })
                 .catch((err) => {
                     console.log(err);

src/components/Modals/authModalContent/EnterContent.tsx

@@ -1,12 +1,11 @@
 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 AppleLogin from 'react-apple-login';
 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';
@@ -30,7 +29,6 @@ export const EnterContent: FC<EnterProps> = ({
     handleCancel
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const { openOauthWindow } = useOauthWindow();
 
     const onLogin = () => {
         form.validateFields().then(() => {
@@ -59,47 +57,44 @@ export const EnterContent: FC<EnterProps> = ({
         });
     };
 
-    const onSocialEnter = (type: Social) => {
-        const url = SocialConfig[type].oauthUrl;
 
-        if (!url) return;
+    const onGoogleLogin = useGoogleLogin({
-
+        onError: (err) => {
-        openOauthWindow(url, type, async (event: MessageEvent) => {
+            notification.error({
-            const { data: socialData } = event
+                message: err.error,
-
+                description: err.error_description
-            // примерная схема последующей обработки
+            });
-
+        },
-            // const socialErrors: string[] = [];
+        onSuccess: (tokenResponse) => {
-            // try {
+            setIsLoading(true);
-            //     // отправляем запрос на бэк с данными из соц сети
+            getLoginByGoogle(locale, tokenResponse.access_token)
-            //     const { data: { jwtToken } } = await query(socialData);
+                .then((data) => {
-            //     // обновляем токен
+                    if (data.jwtToken) {
-            //     updateToken(jwtToken);
+                        getUserData(locale, data.jwtToken)
-            //     // получаем данные о пользователе
+                            .then((profile) => {
-            //     await getAuthUser()
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
-            // } catch (error: any) {
+                                updateToken(data.jwtToken);
-            //     if (error.httpStatus === 449) {
+                                handleCancel();
-            //         // ошибка, когда отсутствует e-mail
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку регистрации
-            //         handleCancel();
-            //         openSocialEmailRequestModal(socialData);
-            //     } else if (error.httpStatus === 409) {
-            //         // ошибка, когда по переданному email уже существует аккаунт
-            //
-            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку с вводом пароля
-            //         handleCancel();
-            //         openSocialPasswordModal(socialData);
-            //     } else {
-            //         // в остальных случаях записываем ошибку в массив ошибок
-            //         socialErrors.push(error.toString());
-            //     }
-            // }
-            //
-            // // если все успешно, закрываем окно
-            // handleCancel();
                             })
-    };
+                    } else {
+                        notification.error({
+                            message: 'Error',
+                            description: 'Access denied'
+                        });
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        }
+    });
 
     return (
         <>
@@ -155,21 +150,24 @@ export const EnterContent: FC<EnterProps> = ({
                 {`${i18nText('forgotPass', locale)}?`}
             </LinkButton>
             <span>{i18nText('or', locale)}</span>
-            <OutlinedButton
+            <AppleLogin
-                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
+                clientId="bbuddy.expert"
-                onClick={() => onSocialEnter(Social.FACEBOOK)}
+                redirectURI="https://bbuddy.expert"
-            >
+                state="bblogin"
-                {i18nText('facebook', locale)}
+                responseType="code"
-            </OutlinedButton>
+                responseMode="query"
+                render={({ onClick }) => (
                     <OutlinedButton
                         icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
-                onClick={() => onSocialEnter(Social.APPLE)}
+                        onClick={onClick}
                     >
                         {i18nText('apple', locale)}
                     </OutlinedButton>
+                )}
+            />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => onSocialEnter(Social.GOOGLE)}
+                onClick={onGoogleLogin}
             >
                 {i18nText('google', locale)}
             </OutlinedButton>

src/components/Modals/authModalContent/RegisterContent.tsx

@@ -1,12 +1,11 @@
 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 AppleLogin from 'react-apple-login';
 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';
@@ -29,7 +28,6 @@ export const RegisterContent: FC<RegisterProps> = ({
     handleCancel
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const { openOauthWindow } = useOauthWindow();
 
     const onRegister = () => {
         form.validateFields().then(() => {
@@ -64,47 +62,38 @@ export const RegisterContent: FC<RegisterProps> = ({
         });
     };
 
-    const onSocialRegister = (type: Social) => {
+    const onGoogleLogin = useGoogleLogin({
-        const url = SocialConfig[type].oauthUrl;
+        onError: (err) => {
-
+            notification.error({
-        if (!url) return;
+                message: err.error,
-
+                description: err.error_description
-        openOauthWindow(url, type, async (event: MessageEvent) => {
+            });
-            const { data: socialData } = event
+        },
-
+        onSuccess: (tokenResponse) => {
-            // примерная схема последующей обработки
+            setIsLoading(true);
-
+            getRegisterByGoogle(locale, tokenResponse.access_token)
-            // const socialErrors: string[] = [];
+                .then((data) => {
-            // try {
+                    if (data.jwtToken) {
-            //     // отправляем запрос на бэк с данными из соц сети
+                        getUserData(locale, data.jwtToken)
-            //     const { data: { jwtToken } } = await query(socialData);
+                            .then((profile) => {
-            //     // обновляем токен
+                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
-            //     updateToken(jwtToken);
+                                updateToken(data.jwtToken);
-            //     // получаем данные о пользователе
+                                handleCancel();
-            //     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();
                             })
-    };
+                    }
+                })
+                .catch((error) => {
+                    const err = error?.message ? JSON.parse(error.message) : {};
+                    notification.error({
+                        message: 'Error',
+                        description: err?.details?.errMessage || undefined
+                    });
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        }
+    });
 
     return (
         <>
@@ -177,21 +166,24 @@ export const RegisterContent: FC<RegisterProps> = ({
             </FilledButton>
             <OutlinedButton onClick={() => updateMode('enter')}>{i18nText('enter', locale)}</OutlinedButton>
             <span>{i18nText('or', locale)}</span>
-            <OutlinedButton
+            <AppleLogin
-                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
+                clientId="bbuddy.expert"
-                onClick={() => onSocialRegister(Social.FACEBOOK)}
+                redirectURI="https://bbuddy.expert"
-            >
+                state="bbregister"
-                {i18nText('facebook', locale)}
+                responseType="code"
-            </OutlinedButton>
+                responseMode="query"
+                render={({ onClick }) => (
                     <OutlinedButton
                         icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
-                onClick={() => onSocialRegister(Social.APPLE)}
+                        onClick={onClick}
                     >
                         {i18nText('apple', locale)}
                     </OutlinedButton>
+                )}
+            />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => onSocialRegister(Social.GOOGLE)}
+                onClick={onGoogleLogin}
             >
                 {i18nText('google', locale)}
             </OutlinedButton>

src/components/Page/Header/HeaderAuthLinks.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { FC, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from 'antd';
 import { useSelectedLayoutSegment } from 'next/navigation';
 import { Link } from '../../../navigation';

src/lib/apiClient.ts

@@ -20,6 +20,27 @@ export const onSuccessRequestCallback = (config: InternalAxiosRequestConfig) =>
     return newConfig;
 };
 
+export const onSuccessRequestJwtCallback = (config: InternalAxiosRequestConfig) => {
+    const newConfig = { ...config };
+
+    if (typeof window !== 'undefined') {
+        var jwt = localStorage.getItem('bbuddy_token_test');
+
+        if(jwt) {
+            newConfig.headers.set('Authorization', `Bearer ${jwt}`);
+        }   
+    } 
+    return newConfig;
+};
+
+export const onSuccessResponseJwtCallback = (response: AxiosResponse) => {    
+    var header = response.headers['x-new-token'];
+    if(header) {
+        localStorage.setItem('bbuddy_token_test', header);
+    }
+    return response;
+};
+
 export const onSuccessResponseCallback = (response: AxiosResponse) => response;
 
 export const onErrorResponseCallback = (error: any) => Promise.reject(error);
@@ -34,3 +55,6 @@ apiClient.interceptors.response.use(
     onSuccessResponseCallback,
     onErrorResponseCallback
 );
+
+apiClient.interceptors.response.use(onSuccessResponseJwtCallback);
+apiClient.interceptors.request.use(onSuccessRequestJwtCallback);

src/types/profile.ts

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