From f7c4872fe1adbc44c327f505b6c59a409b614014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?= =?UTF-8?q?=D0=BA=D0=B0?= Date: Wed, 17 Jun 2026 00:06:57 +0300 Subject: [PATCH 1/3] implement google login --- .env | 4 +- README.md | 5 ++ src/app/api/user/user.api.ts | 58 ++++++++++--------- .../common/constants/api-routes.constants.ts | 1 + .../LoginPage/LoginPage.component.tsx | 25 ++++++-- src/global.d.ts | 2 + src/index.tsx | 5 +- 7 files changed, 68 insertions(+), 32 deletions(-) diff --git a/.env b/.env index 331448f..e57bb46 100644 --- a/.env +++ b/.env @@ -1,3 +1,5 @@ REACT_APP_BACKEND_URL=https://localhost:5001/api REACT_APP_TEMPVAL=tempval -REACT_APP_API_URL=https://localhost:5001/api \ No newline at end of file +REACT_APP_API_URL=https://localhost:5001/api + +REACT_APP_GOOGLE_CLIENT_ID= \ No newline at end of file diff --git a/README.md b/README.md index 8faddbe..8063dbf 100644 --- a/README.md +++ b/README.md @@ -209,3 +209,8 @@ Visit our *site*, we wil - **[MIT license](http://opensource.org/licenses/mit-license.php)** - Copyright 2022 © SoftServe IT Academy. + +--- +## Create .env file in repository root example +--- +GoogleAuth__ClientId=123721973387-7i3rs06c8iui5lrb805f22o0k2s6gk1o.apps.googleusercontent.com diff --git a/src/app/api/user/user.api.ts b/src/app/api/user/user.api.ts index aba34d5..c2c9b91 100644 --- a/src/app/api/user/user.api.ts +++ b/src/app/api/user/user.api.ts @@ -6,33 +6,39 @@ import { UserLoginRequest, UserLoginResponce, } from '@/models/user/user.model'; - const UserApi = { - login: (loginParams: UserLoginRequest) => - Agent.post( - API_ROUTES.USERS.LOGIN, - loginParams, - ), +const UserApi = { + login: (loginParams: UserLoginRequest) => + Agent.post( + API_ROUTES.USERS.LOGIN, + loginParams, + ), - refreshToken: (token: RefreshTokenRequest) => - Agent.post( - API_ROUTES.USERS.REFRESH_TOKEN, - token, - ), + googleLogin: (body: { idToken: string }) => + Agent.post( + API_ROUTES.ADMIN_AUTHORIZATION.GOOGLE_LOGIN, + body, + ), - adminLogin: (loginParams: UserLoginRequest) => - Agent.post( - API_ROUTES.ADMIN_AUTHORIZATION.LOGIN, - loginParams, - ), + refreshToken: (token: RefreshTokenRequest) => + Agent.post( + API_ROUTES.USERS.REFRESH_TOKEN, + token, + ), - adminRefreshToken: (token: RefreshTokenRequest) => - Agent.post( - API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN, - token, - ), - adminLogout: () => - Agent.post( - API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {}, - ), - }; + adminLogin: (loginParams: UserLoginRequest) => + Agent.post( + API_ROUTES.ADMIN_AUTHORIZATION.LOGIN, + loginParams, + ), + + adminRefreshToken: (token: RefreshTokenRequest) => + Agent.post( + API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN, + token, + ), + adminLogout: () => + Agent.post( + API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {}, + ), +}; export default UserApi; diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts index 3de91c9..6ef2ff7 100644 --- a/src/app/common/constants/api-routes.constants.ts +++ b/src/app/common/constants/api-routes.constants.ts @@ -227,6 +227,7 @@ export const API_ROUTES = { }, ADMIN_AUTHORIZATION: { LOGIN: 'auth/login', + GOOGLE_LOGIN: 'auth/google-login', REFRESH_TOKEN: 'auth/refresh-token', LOGOUT: 'auth/logout' }, diff --git a/src/features/AdminPage/LoginPage/LoginPage.component.tsx b/src/features/AdminPage/LoginPage/LoginPage.component.tsx index 5958d78..8ce8d67 100644 --- a/src/features/AdminPage/LoginPage/LoginPage.component.tsx +++ b/src/features/AdminPage/LoginPage/LoginPage.component.tsx @@ -1,9 +1,10 @@ import './LoginPage.styles.scss'; +import { GoogleLogin } from '@react-oauth/google'; import { useState } from 'react'; import { Button, Checkbox, Form, Input, message } from 'antd'; import { observer } from 'mobx-react-lite'; -import { Navigate,useNavigate } from 'react-router-dom'; +import { Navigate, useNavigate } from 'react-router-dom'; import UserLoginStore from '@/app/stores/user-login-store'; import UserApi from '@api/user/user.api'; @@ -100,9 +101,25 @@ const LoginPage = () => { - + { + try { + setIsLoading(true); + const response = await UserApi.googleLogin({ + idToken: credentialResponse.credential as string + }); + userLoginStore.setUserLoginResponce(response, userLoginStore.refreshToken); + navigate(FRONTEND_ROUTES.ADMIN.BASE); + } catch (e) { + message.error('Помилка авторизації через Google'); + } finally { + setIsLoading(false); + } + }} + onError={() => { + message.error('Не вдалося увійти через Google'); + }} + /> diff --git a/src/global.d.ts b/src/global.d.ts index 4cb2480..773f7da 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -7,5 +7,7 @@ declare const process: { readonly REACT_APP_ENVIRONMENT?: string; readonly REACT_APP_BUILD_SHA?: string; readonly REACT_APP_BUILD_NUMBER?: string; + + readonly REACT_APP_GOOGLE_CLIENT_ID?: string; }; }; diff --git a/src/index.tsx b/src/index.tsx index 5aec473..2d58b93 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import ReactDOM from 'react-dom/client'; import ReactGA from 'react-ga4'; import { RouterProvider } from 'react-router-dom'; import router from '@app/router/Routes'; +import { GoogleOAuthProvider } from '@react-oauth/google'; ReactGA.initialize('G-2RHY04JKG0'); @@ -14,6 +15,8 @@ const root = ReactDOM.createRoot( ); root.render( - + + + , ); From a102f907af478db90777734d87a3dfc453fd8c1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?= =?UTF-8?q?=D0=BA=D0=B0?= Date: Wed, 17 Jun 2026 00:20:41 +0300 Subject: [PATCH 2/3] update google login btn --- src/features/AdminPage/LoginPage/LoginPage.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/AdminPage/LoginPage/LoginPage.component.tsx b/src/features/AdminPage/LoginPage/LoginPage.component.tsx index 8ce8d67..47eb8fc 100644 --- a/src/features/AdminPage/LoginPage/LoginPage.component.tsx +++ b/src/features/AdminPage/LoginPage/LoginPage.component.tsx @@ -111,6 +111,7 @@ const LoginPage = () => { userLoginStore.setUserLoginResponce(response, userLoginStore.refreshToken); navigate(FRONTEND_ROUTES.ADMIN.BASE); } catch (e) { + console.error('Google Auth Error:', e); message.error('Помилка авторизації через Google'); } finally { setIsLoading(false); From 9fa983cff1fd1ab6ecedcb2ea2e9591d18396956 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?= =?UTF-8?q?=D0=BA=D0=B0?= Date: Wed, 17 Jun 2026 00:25:05 +0300 Subject: [PATCH 3/3] install @react-oauth/google --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 2f8dbfb..819cd2d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@fortawesome/fontawesome-free": "^6.4.0", "@react-google-maps/api": "^2.18.1", "@react-hook/resize-observer": "^1.2.6", + "@react-oauth/google": "^0.13.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0",