diff --git a/frontend/src/AppRoot.tsx b/frontend/src/AppRoot.tsx index 64c8a5874..e885d6ef8 100644 --- a/frontend/src/AppRoot.tsx +++ b/frontend/src/AppRoot.tsx @@ -1,7 +1,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import PrivateRoute from './components/PrivateRoute' import { UserProfileProvider } from './components/UserProfileContext' -import { useAuth } from './hooks/useAuth' +import { AuthProvider, useAuth } from './hooks/useAuth' import AdminPage from './pages/AdminPage' import ConfirmEmailWithTokenPage from './pages/ConfirmEmailWithTokenPage' import ApolloDemoPage from './pages/demo/ApolloDemo' @@ -24,7 +24,7 @@ import ROUTES from './utils/routes' const isDev = process.env.NODE_ENV === 'development' -const AppRoot = () => { +const App = () => { const { isLoading, isAuthenticated } = useAuth() return ( @@ -92,4 +92,12 @@ const AppRoot = () => { ) } +const AppRoot = () => { + return ( + + + + ) +} + export default AppRoot diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.tsx similarity index 68% rename from frontend/src/hooks/useAuth.ts rename to frontend/src/hooks/useAuth.tsx index b868d28d7..9d4871143 100644 --- a/frontend/src/hooks/useAuth.ts +++ b/frontend/src/hooks/useAuth.tsx @@ -1,4 +1,29 @@ -import { useState } from 'react' +import { createContext, useContext, useState } from 'react' +import { PropsWithChildren } from 'react-router/node_modules/@types/react' + +type AuthInfo = { + isLoading: boolean + isAuthenticated: boolean + isRegistered: boolean + isConfirmed: boolean + logout: () => void + login: (_: { email: string; password: string }) => void + register: (_: { name: string; email: string; password: string }) => void + confirm: (_: { email: string; token: string }) => void +} + +export const AuthContext = createContext({ + isLoading: false, + isAuthenticated: false, + isRegistered: false, + isConfirmed: false, + logout: () => undefined, + login: () => undefined, + register: () => undefined, + confirm: () => undefined, +}) + +export const useAuth = () => useContext(AuthContext) const SERVER_URL = process.env.REACT_APP_SERVER_URL @@ -11,12 +36,13 @@ export const emailRegEx = /.+@.+\..+/ export const passwordRegEx = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/ -export const useAuth = () => { +export const AuthProvider = ({ children }: PropsWithChildren) => { const [isLoading, setIsLoading] = useState(false) const [isAuthenticated, setIsAuthenticated] = useState(false) const [isRegistered, setIsRegistered] = useState(false) const [isConfirmed, setIsConfirmed] = useState(false) - return { + + const auth: AuthInfo = { isLoading, isAuthenticated, isRegistered, @@ -34,7 +60,7 @@ export const useAuth = () => { document.location.reload() }) }, - login: ({ email, password }: { email: string; password: string }) => { + login: ({ email, password }) => { setIsLoading(true) fetch(`${SERVER_URL}/login`, { method: 'POST', @@ -45,22 +71,13 @@ export const useAuth = () => { .then(() => { setIsAuthenticated(true) setIsLoading(false) - console.log('authenticated') }) .catch((err) => { console.error(err) setIsLoading(false) }) }, - register: ({ - name, - email, - password, - }: { - name: string - email: string - password: string - }) => { + register: ({ name, email, password }) => { setIsLoading(true) fetch(`${SERVER_URL}/register`, { method: 'POST', @@ -77,7 +94,7 @@ export const useAuth = () => { setIsLoading(false) }) }, - confirm: ({ email, token }: { email: string; token: string }) => { + confirm: ({ email, token }) => { setIsLoading(true) fetch(`${SERVER_URL}/register/confirm`, { method: 'POST', @@ -95,4 +112,6 @@ export const useAuth = () => { }) }, } + + return {children} }