demo

.gitignore

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

package-lock.json

@@ -11,6 +11,8 @@
         "@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",
         "antd": "^5.12.1",
         "antd-img-crop": "^4.21.0",
         "axios": "^1.6.5",
@@ -19,6 +21,7 @@
         "next": "14.0.3",
         "next-intl": "^3.3.1",
         "react": "^18",
+        "react-apple-login": "^1.1.6",
         "react-dom": "^18",
         "react-slick": "^0.29.0",
         "slick-carousel": "^1.8.1",
@@ -309,6 +312,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@greatsumini/react-facebook-login": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@greatsumini/react-facebook-login/-/react-facebook-login-3.3.3.tgz",
+      "integrity": "sha512-Y5D7EncR3iy/X/OfWwjjpM5OW0XV6PCE08RZUV/yhAE413PEBIlML7S6z69BcpUPWO5XzEt7cytHChUdwXO4Dw==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -638,6 +649,15 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz",
@@ -3498,7 +3518,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3784,7 +3803,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4419,6 +4437,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apple-login": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
+      "integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4452,8 +4484,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "node_modules/react-slick": {
       "version": "0.29.0",
@@ -5582,6 +5613,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "@greatsumini/react-facebook-login": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@greatsumini/react-facebook-login/-/react-facebook-login-3.3.3.tgz",
+      "integrity": "sha512-Y5D7EncR3iy/X/OfWwjjpM5OW0XV6PCE08RZUV/yhAE413PEBIlML7S6z69BcpUPWO5XzEt7cytHChUdwXO4Dw==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -5772,6 +5809,12 @@
         "rc-util": "^5.38.0"
       }
     },
+    "@react-oauth/google": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+      "requires": {}
+    },
     "@rushstack/eslint-patch": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz",
@@ -7881,8 +7924,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
-      "dev": true
     },
     "object-inspect": {
       "version": "1.13.1",
@@ -8079,7 +8121,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -8507,6 +8548,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-apple-login": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
+      "integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -8535,8 +8582,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "react-slick": {
       "version": "0.29.0",

package.json

@@ -12,6 +12,8 @@
     "@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",
     "antd": "^5.12.1",
     "antd-img-crop": "^4.21.0",
     "axios": "^1.6.5",
@@ -20,6 +22,7 @@
     "next": "14.0.3",
     "next-intl": "^3.3.1",
     "react": "^18",
+    "react-apple-login": "^1.1.6",
     "react-dom": "^18",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",

src/app/[locale]/apple-registration/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React from 'react';
+import { useEffect, useRef } from 'react';
+import { apiClient } from '../../../lib/apiClient';
+
+export default function BbAppleLogIn() {    
+
+    const urlParams = new URLSearchParams(location.search);
+    var code = urlParams.getAll('code')[0];
+    const ref = useRef(false);
+
+    var makeRequest  = async (c) => {
+
+        if(ref.current) {
+            return;
+        }
+        ref.current = true;
+
+        try {
+            var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternalappleweb', {
+                code: c               
+            });
+            localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
+            window.location.href="/";
+        }
+        catch (err) {
+            /*process*/
+        }
+
+    }
+
+    useEffect(() => {
+        makeRequest(code);
+    },[code]);
+    return (
+        <>
+        </>
+    );
+};

src/app/[locale]/apple-sign-in/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React from 'react';
+import { useEffect, useRef } from 'react';
+import { apiClient } from '../../../lib/apiClient';
+
+export default function BbAppleLogIn() {    
+
+    const urlParams = new URLSearchParams(location.search);
+    var code = urlParams.getAll('code')[0];
+    const ref = useRef(false);
+
+    var makeRequest  = async (c) => {
+
+        if(ref.current) {
+            return;
+        }
+        ref.current = true;
+
+        try {
+            var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternalappleweb', {
+                code: c               
+            });
+            localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
+            window.location.href="/";
+        }
+        catch (err) {
+            /*process*/
+        }
+
+    }
+
+    useEffect(() => {
+        makeRequest(code);
+    },[code]);
+    return (
+        <>
+        </>
+    );
+};

src/app/[locale]/layout.tsx

@@ -8,6 +8,9 @@ import theme from '../../constants/theme';
 import { ALLOWED_LOCALES } from '../../constants/locale';
 import { Header, Footer } from '../../components/Page';
 
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { SessionProvider } from "next-auth/react"
+
 type LayoutProps = {
     children: ReactNode;
     params: { locale: string };
@@ -28,6 +31,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
 
     return (
         <AntdRegistry>
+            <GoogleOAuthProvider clientId='909563069647-03rivr8k1jmirf382bcfehegamthcfg4.apps.googleusercontent.com'>
                 <ConfigProvider theme={theme}>
                 <div className="b-wrapper">
                     <div className="b-content">
@@ -37,6 +41,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
                     <Footer locale={locale} />
                 </div>
                 </ConfigProvider>
+            </GoogleOAuthProvider>    
         </AntdRegistry>
     );
 };

src/components/Modals/authModalContent/EnterContent.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import { Form, FormInstance, notification } from 'antd';
 import Image from 'next/image';
 import { Social } from '../../../types/social';
@@ -13,6 +13,15 @@ import { FilledButton } from '../../view/FilledButton';
 import { OutlinedButton } from '../../view/OutlinedButton';
 import { LinkButton } from '../../view/LinkButton';
 
+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;
@@ -58,7 +67,51 @@ export const EnterContent: FC<EnterProps> = ({
         });
     };
 
+
+    const googleLogin = useGoogleLogin({
+            onError: (err) => {
+                console.log(err);
+            },        
+            onSuccess: async (tokenResponse) => {
+                var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternal',  { 
+                    platform: 0,
+                    provider: 4,
+                    accesstoken: tokenResponse.access_token
+                });
+                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;
@@ -154,24 +207,45 @@ export const EnterContent: FC<EnterProps> = ({
                 Forgot password?
             </LinkButton>
             <span>or</span>
-            <OutlinedButton
+            <FacebookLogin 
-                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
+                initParams={{
-                onClick={() => onSocialEnter(Social.FACEBOOK)}
+                    version: 'v16.0',
+                }}
+                loginOptions={{
+                    return_scopes: true,
+                    auth_type: 'rerequest'
+                }}
+                appId={appId}
+                onSuccess={facebookLogin}
                 >
-                Facebook account
+
-            </OutlinedButton>
+            </FacebookLogin>
-            <OutlinedButton
+            <AppleLogin 
-                icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
+                clientId="bbuddy.expert" 
-                onClick={() => onSocialEnter(Social.APPLE)}
+                redirectURI="https://local.apple-sigin.mydomain.com/en/apple-sign-in" 
-            >
+                responseType='code'
-                Apple account
+                responseMode = 'query'
-            </OutlinedButton>
+            />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => onSocialEnter(Social.GOOGLE)}
+                onClick={() => googleLogin()}
             >
                 Google account
             </OutlinedButton>
+
+            <OutlinedButton                
+                onClick={() => authRequest()}
+            >
+                Test Request
+            </OutlinedButton>
+
+            <OutlinedButton                
+                onClick={() => logout()}
+            >
+                Log Out
+            </OutlinedButton>
+
+
         </>
     );
 };

src/components/Modals/authModalContent/RegisterContent.tsx

@@ -12,6 +12,15 @@ import { CustomInputPassword } from '../../view/CustomInputPassword';
 import { FilledButton } from '../../view/FilledButton';
 import { OutlinedButton } from '../../view/OutlinedButton';
 
+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;
@@ -30,6 +39,17 @@ export const RegisterContent: FC<RegisterProps> = ({
     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(() => {
             const { login, password } = form.getFieldsValue();
@@ -63,6 +83,22 @@ export const RegisterContent: FC<RegisterProps> = ({
         });
     };
 
+    const googleLogin = useGoogleLogin({
+        onError: (err) => {
+            console.log(err);
+        },        
+        onSuccess: async (tokenResponse) => {
+            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);
+        }
+    });
+
+
     const onSocialRegister = (type: Social) => {
         const url = SocialConfig[type].oauthUrl;
 
@@ -176,21 +212,30 @@ export const RegisterContent: FC<RegisterProps> = ({
             </FilledButton>
             <OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
             <span>or</span>
-            <OutlinedButton
+            <FacebookLogin 
-                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
+                initParams={{
-                onClick={() => onSocialRegister(Social.FACEBOOK)}
+                    version: 'v16.0',
+                }}
+                loginOptions={{
+                    return_scopes: true,
+                    auth_type: 'rerequest'
+                }}
+                appId={appId}
+                onSuccess={facebookLogin}
                 >
-                Facebook account
+
-            </OutlinedButton>
+            </FacebookLogin>
-            <OutlinedButton
+            <AppleLogin 
-                icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
+
-                onClick={() => onSocialRegister(Social.APPLE)}
+            clientId="bbuddy.expert" 
-            >
+            redirectURI="https://local.apple-sigin.mydomain.com/en/apple-registration" 
-                Apple account
+            responseType='code'
-            </OutlinedButton>
+            responseMode = 'query'
+            
+            />
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
-                onClick={() => onSocialRegister(Social.GOOGLE)}
+                onClick={() => googleLogin()}
             >
                 Google account
             </OutlinedButton>

src/lib/apiClient.ts

@@ -17,6 +17,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);
@@ -31,3 +52,6 @@ apiClient.interceptors.response.use(
     onSuccessResponseCallback,
     onErrorResponseCallback
 );
+
+apiClient.interceptors.response.use(onSuccessResponseJwtCallback);
+apiClient.interceptors.request.use(onSuccessRequestJwtCallback);