-
-
Save EduVencovsky/f8f6c275f42f7352571c92a59309e31d to your computer and use it in GitHub Desktop.
import React, { useState, useEffect } from 'react' | |
import PropTypes from 'prop-types' | |
import { checkIsAuthenticated, authSignUp, authLogin, authLogout } from '../../services/auth' | |
export const AuthContext = React.createContext({}) | |
export default function Auth({ children }) { | |
const [isAuthenticated, setIsAuthenticated] = useState(false) | |
const [isLoading, setIsLoading] = useState(true) | |
useEffect(() => { | |
checkAuth() | |
}, []) | |
const checkAuth = () => checkIsAuthenticated() | |
.then(() => setIsAuthenticated(true)) | |
.catch(() => setIsAuthenticated(false)) | |
.then(() => setIsLoading(false)) | |
const login = credentials => authLogin(credentials) | |
.then(setIsAuthenticated(true)) | |
.catch(error => { | |
alert(error) | |
setIsAuthenticated(false) | |
}) | |
const logout = () => { | |
authLogout() | |
setIsAuthenticated(false) | |
} | |
const signUp = credentials => authSignUp(credentials) | |
.then(setIsAuthenticated(true)) | |
.catch(error => { | |
alert(error) | |
setIsAuthenticated(false) | |
}) | |
return ( | |
<AuthContext.Provider value={{ isAuthenticated, isLoading, login, logout, signUp }}> | |
{children} | |
</AuthContext.Provider> | |
) | |
} | |
Auth.propTypes = { | |
children: PropTypes.oneOfType([ | |
PropTypes.func, | |
PropTypes.array | |
]) | |
} |
import React from 'react' | |
import { Switch, Route } from 'react-router-dom' | |
import PrivateRoute from './components/PrivateRoute/PrivateRoute' | |
import Auth from './components/Auth/Auth' | |
import Header from './components/Header/Header' | |
import HomePage from './views/HomePage/HomePage' | |
import SignUp from './views/SignUp/SignUp' | |
import SignIn from './views/SignIn/SignIn' | |
import FormList from './views/FormList/FormList' | |
import PageNotFound from './views/PageNotFound/PageNotFound' | |
export default function App() { | |
return ( | |
<div> | |
<Auth> | |
<Header /> | |
<Switch> | |
<Route exact path="/" component={HomePage} /> | |
<Route path="/signup" component={SignUp} /> | |
<Route path="/signin" component={SignIn} /> | |
<PrivateRoute path="/forms" component={FormList} /> | |
<Route component={PageNotFound} /> | |
</Switch> | |
</Auth> | |
</div> | |
) | |
} |
import React, { useContext } from 'react' | |
import { Route, Redirect } from 'react-router-dom' | |
import PropTypes from 'prop-types' | |
import { AuthContext } from '../Auth/Auth' | |
import Loading from '../../views/Loading/Loading' | |
const PrivateRoute = ({ component: Component, ...otherProps }) => { | |
const { isAuthenticated, isLoading } = useContext(AuthContext) | |
return ( | |
<Route | |
{...otherProps} | |
render={props => ( | |
!isLoading | |
? | |
( | |
isAuthenticated | |
? | |
<Component {...props} /> | |
: | |
<Redirect to={otherProps.redirectTo ? otherProps.redirectTo : '/signin'} /> | |
) | |
: | |
<Loading /> | |
)} | |
/> | |
) | |
} | |
PrivateRoute.propTypes = { | |
component: PropTypes.func.isRequired | |
} | |
export default PrivateRoute |
DisasterNatsu
commented
Oct 26, 2021
via email
However, when we reload the protected route page the initial value of isAuthenticated is false and we are redirected to /signin directly ......But when isAuthenticated is set to true after some time it has no effect on the current route since we are already on '/signin'.......Correct me if i am wrong but this approach does not seem to be working for me since checking isAuthenticated is a time consuming task???? Thank You.
I have the same issue @NabinOjha did you find any solution?
@EduVencovsky what's your thought on this?
However, when we reload the protected route page the initial value of isAuthenticated is false and we are redirected to /signin directly ......But when isAuthenticated is set to true after some time it has no effect on the current route since we are already on '/signin'.......Correct me if i am wrong but this approach does not seem to be working for me since checking isAuthenticated is a time consuming task???? Thank You.
I have the same issue @NabinOjha did you find any solution? @EduVencovsky what's your thought on this?
https://medium.com/@dennisivy/creating-protected-routes-with-react-router-v6-2c4bbaf7bc1c