implement google login

README.md

@@ -209,3 +209,8 @@ Visit our <a href="https://streetcode.com.ua" target="_blank">*site*</a>, we wil
 
 - **[MIT license](http://opensource.org/licenses/mit-license.php)**
 - Copyright 2022 © <a href="https://softserve.academy/" target="_blank"> SoftServe IT Academy</a>.
+
+---
+## Create .env file in repository root example
+---
+GoogleAuth__ClientId=123721973387-7i3rs06c8iui5lrb805f22o0k2s6gk1o.apps.googleusercontent.com

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",

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<UserLoginResponce>(
-                API_ROUTES.USERS.LOGIN,
-                loginParams,
-            ),
+const UserApi = {
+    login: (loginParams: UserLoginRequest) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.USERS.LOGIN,
+            loginParams,
+        ),
 
-        refreshToken: (token: RefreshTokenRequest) =>
-            Agent.post<RefreshTokenResponce>(
-                API_ROUTES.USERS.REFRESH_TOKEN,
-                token,
-            ),
+    googleLogin: (body: { idToken: string }) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.GOOGLE_LOGIN,
+            body,
+        ),
 
-        adminLogin: (loginParams: UserLoginRequest) =>
-            Agent.post<UserLoginResponce>(
-                API_ROUTES.ADMIN_AUTHORIZATION.LOGIN,
-                loginParams,
-            ),
+    refreshToken: (token: RefreshTokenRequest) =>
+        Agent.post<RefreshTokenResponce>(
+            API_ROUTES.USERS.REFRESH_TOKEN,
+            token,
+        ),
 
-        adminRefreshToken: (token: RefreshTokenRequest) =>
-            Agent.post<RefreshTokenResponce>(
-                API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN,
-                token,
-            ),
-        adminLogout: () =>
-            Agent.post<void>(
-                API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {},
-            ),
-    };
+    adminLogin: (loginParams: UserLoginRequest) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.LOGIN,
+            loginParams,
+        ),
+
+    adminRefreshToken: (token: RefreshTokenRequest) =>
+        Agent.post<RefreshTokenResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN,
+            token,
+        ),
+    adminLogout: () =>
+        Agent.post<void>(
+            API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {},
+        ),
+};
 export default UserApi;

src/app/common/constants/api-routes.constants.ts

@@ -220,12 +220,14 @@ export const API_ROUTES = {
   },
   ADMIN_AUTHORIZATION: {
     LOGIN: "auth/login",
+    GOOGLE_LOGIN: "auth/google-login",
     REFRESH_TOKEN: "auth/refresh-token",
+    LOGOUT: "auth/logout",
   },
   COMMENTS: {
     GET_BY_STREETCODE_ID: "comment/getByStreetcodeId",
     CREATE: "comment/create",
     UPDATE: "comment/update",
     DELETE: "comment/delete",
   },
-};
+};

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,26 @@ const LoginPage = () => {
                         <span className="dividerLine" />
                     </div>
 
-                    <Button className="googleLoginBtn" disabled>
-                        Google
-                    </Button>
+                    <GoogleLogin
+                        onSuccess={async (credentialResponse) => {
+                            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) {
+                                console.error('Google Auth Error:', e);
+                                message.error('Помилка авторизації через Google');
+                            } finally {
+                                setIsLoading(false);
+                            }
+                        }}
+                        onError={() => {
+                            message.error('Не вдалося увійти через Google');
+                        }}
+                    />
                 </Form>
             </div>
         </div>

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;
     };
 };

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(
     <React.StrictMode>
-        <RouterProvider router={router} />
+       <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID!}>
+            <RouterProvider router={router} />
+        </GoogleOAuthProvider>
     </React.StrictMode>,
 );