Добавила OAuth авторизацию

packages/client/src/App.tsx

@@ -16,16 +16,16 @@ import NotFound from '@pages/not-found/NotFound'
 import ServerError from '@pages/server-error/ServerError'
 
 function App() {
-  useEffect(() => {
-    const fetchServerData = async () => {
-      const url = `http://localhost:${__SERVER_PORT__}`
-      const response = await fetch(url)
-      const data = await response.json()
-      console.log(data)
-    }
+  // useEffect(() => {
+  //   const fetchServerData = async () => {
+  //     const url = `http://localhost:${__SERVER_PORT__}`
+  //     const response = await fetch(url)
+  //     const data = await response.json()
+  //     console.log(data)
+  //   }
 
-    fetchServerData()
-  }, [])
+  //   fetchServerData()
+  // }, [])
   return (
     <div className="App">
       <Router>

packages/client/src/components/YandexIcon/YandexIcon.tsx

@@ -0,0 +1,5 @@
+import icon from '@assets/RU.svg'
+export const YandexIcon = () => {
+  return <img src={icon}/>
+
+}

packages/client/src/hooks/useAuth.ts

@@ -11,9 +11,9 @@ export const useAuth = () => {
     user.id
       ? navigate('/game/start')
       : dispatch(fetchUser()).then(res => {
-          if (res.type === 'auth/fetch/rejected') {
-            return navigate('/auth')
-          }
-        })
+        if (res.type === 'auth/fetch/rejected') {
+          return navigate('/auth')
+        }
+      })
   }
 }

packages/client/src/hooks/useOAuth.tsx

@@ -0,0 +1,23 @@
+import { oauthYandex, fetchUser } from '@store/actions/AuthActionCreators'
+import { useAppDispatch } from '@store/index'
+import { OauthData } from '@store/types'
+
+export const useOAuth = () => {
+  const REDIRECT_URI = 'http://localhost:3000'
+  const dispatch = useAppDispatch()
+  const url = document.location.href
+  const code = url.split('=').pop();
+  return () => {
+    if (/code/.test(url)) {
+      dispatch(oauthYandex({
+        code: code,
+        redirect_uri: REDIRECT_URI
+      } as OauthData))
+        .then(res => {
+          if (res.payload === 'OK') {
+            dispatch(fetchUser())
+          }
+        })
+    }
+  }
+}

packages/client/src/hooks/useServiceId.tsx

@@ -0,0 +1,16 @@
+import { getServiceId } from "@store/actions/AuthActionCreators"
+import { useAppDispatch } from "@store/index"
+
+export const useServiceId = () => {
+  const dispatch = useAppDispatch()
+  const REDIRECT_URI = 'http://localhost:3000';
+
+  return () => {
+    dispatch(getServiceId())
+      .then(res => {
+        if (res.payload.service_id) {
+          document.location = `https://oauth.yandex.ru/authorize?response_type=code&client_id=${res.payload.service_id}&redirect_uri=${REDIRECT_URI}`
+        }
+      })
+  }
+}

packages/client/src/main.tsx

@@ -9,21 +9,21 @@ import './index.css'
 
 const store = setupStore()
 
-window.addEventListener('load', () => {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker
-      .register('/sw.js')
-      .then(registration => {
-        console.log(
-          'ServiceWorker registration successful with scope: ',
-          registration.scope
-        )
-      })
-      .catch((error: string) => {
-        console.log('ServiceWorker registration failed: ', error)
-      })
-  }
-})
+// window.addEventListener('load', () => {
+//   if ('serviceWorker' in navigator) {
+//     navigator.serviceWorker
+//       .register('/sw.js')
+//       .then(registration => {
+//         console.log(
+//           'ServiceWorker registration successful with scope: ',
+//           registration.scope
+//         )
+//       })
+//       .catch((error: string) => {
+//         console.log('ServiceWorker registration failed: ', error)
+//       })
+//   }
+// })
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

packages/client/src/pages/LoginPage/Login.tsx

@@ -7,26 +7,42 @@ import {
   Stack,
 } from '@mui/material'
 import { Link, useNavigate } from 'react-router-dom'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { createTheme, styled, ThemeProvider } from '@mui/material/styles'
 import { LoginData } from '@store/types'
 import { useLogin } from '../../hooks/useLogin'
 import { useUser } from '../../hooks/useUser'
 import { useEffect } from 'react'
 import { fetchUser } from '@store/actions/AuthActionCreators'
 import { useAppDispatch } from '@store/index'
+import { YandexIcon } from '@components/YandexIcon/YandexIcon'
+import { useServiceId } from '../../hooks/useServiceId'
 
 export default function Login() {
   const user = useUser()
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
   const login = useLogin()
+  const location = useServiceId()
 
+  const YandexIdButton = styled(Button)({
+    color: ' white',
+    width: '100%',
+    height: '44px',
+    backgroundColor: 'black',
+    textTransform: 'none',
+    '&:hover': {
+      backgroundColor: 'black',
+      borderColor: '#0062cc',
+      boxShadow: 'none',
+    },
+  })
+
   useEffect(() => {
-    dispatch(fetchUser())
     if (user.id) {
       navigate('/')
     }
-  }, [navigate, user])
+    dispatch(fetchUser())
+  }, [user.id])
 
   const theme = createTheme({
     typography: {
@@ -42,6 +58,7 @@ export default function Login() {
     } as LoginData
     login(authData)
   }
+
 
   return (
     <ThemeProvider theme={theme}>
@@ -89,6 +106,13 @@ export default function Login() {
               {' '}
               Войти
             </Button>
+            <Typography component="p" sx={{ textAlign: 'center', fontSize: '12px' }}>
+            или
+          </Typography>
+            <YandexIdButton 
+            onClick={()=>location()}
+            startIcon={<YandexIcon/>}
+            >Войти c Яндекс ID</YandexIdButton>
             <Stack spacing={2} sx={{ textAlign: 'center' }}>
               <Typography>Еще не зарегистрированы?</Typography>
               <Link

packages/client/src/pages/game/GameStart/MenuList/MenuList.tsx

@@ -1,14 +1,11 @@
-import { Box, Button } from '@mui/material'
+import { Box } from '@mui/material'
 
 import userIcon from '../../../../assets/user-icon.svg'
 import chatIcon from '../../../../assets/chat-icon.svg'
 import ratingIcon from '../../../../assets/rating-icon.svg'
 import questionIcon from '../../../../assets/question-icon.svg'
 import exitIcon from '../../../../assets/exit-icon.svg'
 import MenuItem from '../MenuItem'
-import { logout } from '@store/actions/AuthActionCreators'
-import { useAppDispatch } from '@store/index'
-import { useNavigate } from 'react-router-dom'
 
 const links = [
   { title: 'Профиль игрока', src: userIcon, alt: 'профиль', to: '/profile' },
@@ -19,13 +16,7 @@ const links = [
 ]
 
 export default function MenuList() {
-  const dispatch = useAppDispatch()
-  const navigate = useNavigate()
 
-  const logOut = () => {
-    dispatch(logout())
-    navigate('/auth')
-  }
   return (
     <Box
       component="ul"
@@ -43,7 +34,6 @@ export default function MenuList() {
       {links.map(props => (
         <MenuItem key={props.title} {...props} />
       ))}
-      <Button onClick={logOut}>Выйти</Button>
     </Box>
   )
 }

packages/client/src/pages/intro/Intro.tsx

@@ -1,19 +1,20 @@
 import { Box, Container, Button, Typography } from '@mui/material'
 import { fetchUser } from '@store/actions/AuthActionCreators'
 import { useAppDispatch } from '@store/index'
+import { useOAuth } from '../../hooks/useOAuth'
 import { useEffect } from 'react'
 import { useAuth } from '../../hooks/useAuth'
 import styles from './styles'
 
 export default function Intro() {
+  const isOAuth = useOAuth()
+  const isAuth = useAuth()
   const dispatch = useAppDispatch()
+
   useEffect(() => {
+    isOAuth()
     dispatch(fetchUser())
   }, [])
-  const isAuth = useAuth()
-  const handleClick = () => {
-    isAuth()
-  }
 
   return (
     <Box sx={{ ...styles.page }}>
@@ -29,7 +30,7 @@ export default function Intro() {
               alignItems: 'flex-start',
             }}>
             <Button
-              onClick={handleClick}
+              onClick={() => isAuth()}
               sx={{ marginBottom: '1rem' }}
               variant="contained"
               size="large"

packages/client/src/pages/profile/Profile.tsx

@@ -206,8 +206,8 @@ const Profile = () => {
             marginTop: 1,
           }}
           onClick={() => {
-            dispatch(logout())
-            navigate('/auth')
+            dispatch(logout()).then(()=>navigate('/auth'))
+
           }}>
           Выйти из профиля
         </RB.Button>

packages/client/src/store/actions/AuthActionCreators.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { LoginData, UserData } from '@store/types'
+import { LoginData, OauthData, UserData } from '@store/types'
 import axiosInstance from '../../services/BaseApi'
 
 export const register = createAsyncThunk(
@@ -45,3 +45,27 @@ export const logout = createAsyncThunk('auth/logout', async (_, thunkApi) => {
     return thunkApi.rejectWithValue('Не удалось выйти из приложения')
   }
 })
+
+export const getServiceId = createAsyncThunk(
+  'auth/serviceid',
+  async (_, thunkApi) => {
+    try {
+      const response = await axiosInstance.get('oauth/yandex/service-id')
+      return response.data
+    } catch (e) {
+      return thunkApi.rejectWithValue('No such redirect_uri refistered')
+    }
+  }
+)
+
+export const oauthYandex = createAsyncThunk(
+  'auth/yandex',
+  async (data: OauthData, thunkApi) => {
+    try {
+      const response = await axiosInstance.post('oauth/yandex', data)
+      return response.data
+    } catch (e) {
+      return thunkApi.rejectWithValue('Пользователь не авторизован в системе')
+    }
+  }
+)

packages/client/src/store/slices/AuthSlice.ts

@@ -4,12 +4,15 @@ import {
   login,
   fetchUser,
   logout,
+  getServiceId,
+  oauthYandex,
 } from '@store/actions/AuthActionCreators'
 import {
   StatusLoading,
   RequestDataState,
   RequestData,
   UserData,
+  OauthData,
 } from '../types'
 
 export interface AuthState {
@@ -32,6 +35,8 @@ const initialState: AuthState = {
     signIn: {} as RequestDataState,
     getUserInfo: {} as RequestDataState<UserData>,
     logout: {} as RequestDataState,
+    getServiceId: {} as RequestDataState,
+    oauth: {} as RequestDataState<OauthData>,
   },
 }
 
@@ -85,6 +90,26 @@ export const authSlice = createSlice({
       state.requestData.logout.errorMessage = payload
       state.requestData.logout.status = StatusLoading.ERROR
     },
+    [getServiceId.fulfilled.type]: state => {
+      state.requestData.getServiceId.status = StatusLoading.SUCCESS
+    },
+    [getServiceId.pending.type]: state => {
+      state.requestData.getServiceId.status = StatusLoading.IN_PROGRESS
+    },
+    [getServiceId.rejected.type]: (state, { payload }: PayloadAction<string>) => {
+      state.requestData.getServiceId.errorMessage = payload
+      state.requestData.getServiceId.status = StatusLoading.ERROR
+    },
+    [oauthYandex.fulfilled.type]: state => {
+      state.requestData.oauth.status = StatusLoading.SUCCESS
+    },
+    [oauthYandex.pending.type]: state => {
+      state.requestData.oauth.status = StatusLoading.IN_PROGRESS
+    },
+    [oauthYandex.rejected.type]: (state, { payload }: PayloadAction<string>) => {
+      state.requestData.oauth.errorMessage = payload
+      state.requestData.oauth.status = StatusLoading.ERROR
+    },
   },
 })
 

packages/client/src/store/types.ts

@@ -74,3 +74,8 @@ export interface PassWord {
   oldPassword: string
   newPassword: string
 }
+
+export interface OauthData {
+  code: string
+  redirect_uri: string
+}

packages/client/sw.js

@@ -1,7 +1,6 @@
 const CACHE_NAME = 'my-site-cache-v1'
 
 const URLS = [
-  // '/',
   './src/main.tsx',
 ]