PrivateOutlet.js doesn't render page after authentication - reactjs

Question

When I try the below code I get redirected to login page as if I'm not authenticated. Once I login I can't view the about page as it directs me to Welcome page because the logic in login page (if isAuthenticated navigates to Welcome page). If I remove the logic in login page I get stuck in login page only. Why I can't view about page?
PrivateOutlet.js ;
import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
const PrivateOutlet = ({ isAuthenticated }) => {
if (isAuthenticated ) {
return <Outlet />
} else {
return <Navigate to='login' /> //Go to login
}
};
export default PrivateOutlet;
updated PrivateOutlet.js ;
import React from 'react';
import { connect } from 'react-redux';
import { Outlet, Navigate } from 'react-router-dom';
const PrivateOutlet = ({ isAuthenticated }) => {
return isAuthenticated ? <Outlet /> : <Navigate to='/login' replace />;
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps)(PrivateOutlet);
App.js
function App() {
return (
<Provider store={store}>
<Router>
<Layout>
<Routes>
<Route path='/' element={<WelcomePage/>} />
<Route path='/home' element={<Home/>} />
<Route element={<PrivateOutlet/>}>
<Route path='/about' element={<About/>} />
</Route>
<Route path='/contact' element={<Contact/>} />
<Route path='/login' element={<Login/>} />
<Route path='/signup' element={<Signup/>} />
<Route path='/reset-password' element={<ResetPassword/>} />
<Route path='/password/reset/confirm/:uid/:token' element={<ResetPasswordConfirm/>} />
<Route path='/activate/:uid/:token' element={<Activate/>} />
<Route path='*' element={<NotFound/>} />
</Routes>
</Layout>
</Router>
</Provider>
);
}
export default App;
login.js
import React, { useState } from 'react';
import { Link, Navigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { Button } from '#mui/material';
import { login } from '../actions/auth';
import './Login.css';
import { Helmet } from 'react-helmet';
function Login({ login, isAuthenticated }) {
const [formData, setFormData] = useState({
email: '',
password: ''
});
const { email, password } = formData;
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value});
const onSubmit = e => {
e.preventDefault();
login (email, password)
};
if (isAuthenticated) {
return <Navigate to='/' />
}
return (
<div className='login'>
<Helmet>
<title>Prosperity - Login</title>
<meta
name='description'
content='login page'
/>
</Helmet>
<h1 className='login__title'>Login</h1>
<p className='login__lead'>Login into your Account</p>
<form className='login__form' onSubmit={e => onSubmit(e)}>
<div className='login__form__group'>
<input
className='login__form__input'
type='email'
placeholder='Email *'
name='email'
value={email}
onChange={e => onChange(e)}
required
/>
</div>
<div className='login__form__group'>
<input
className='login__form__input'
type='password'
placeholder='Password *'
name='password'
value={password}
onChange={e => onChange(e)}
minLength='8'
required
/>
</div>
<Button className='login__button__main' type='submit'>Login</Button>
</form>
<p className='link__to__Signup'>
Do not have an account? <Link to='/signup' className='login__link'>Register</Link>
</p>
<p className='link__to__resetPassword'>
Forgot Password? <Link to='/reset-password' className='reset__password__link'>Reset Password</Link>
</p>
</div>
)
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect (mapStateToProps, { login }) (Login);
actions/Auth.js ;
import axios from 'axios';
import { setAlert } from './alert';
import {
LOGIN_SUCCESS,
LOGIN_FAIL,
SIGNUP_SUCCESS,
SIGNUP_FAIL,
ACTIVATION_SUCCESS,
ACTIVATION_FAIL,
USER_LOADED_SUCCESS,
USER_LOADED_FAIL,
AUTHENTICATED_SUCCESS,
AUTHENTICATED_FAIL,
PASSWORD_RESET_SUCCESS,
PASSWORD_RESET_FAIL,
PASSWORD_RESET_CONFIRM_SUCCESS,
PASSWORD_RESET_CONFIRM_FAIL,
LOGOUT
} from './types';
export const checkAuthenticated = () => async dispatch => {
if (localStorage.getItem('access')) {
const config = {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
};
const body = JSON.stringify({ token: localStorage.getItem('access') });
try {
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/verify/`, body, config)
if (res.data.code !== 'token_not_valid') {
dispatch({
type: AUTHENTICATED_SUCCESS
});
} else {
dispatch({
type: AUTHENTICATED_FAIL
});
}
} catch (err) {
dispatch({
type: AUTHENTICATED_FAIL
});
}
} else {
dispatch({
type: AUTHENTICATED_FAIL
});
}
};
export const load_user = () => async dispatch => {
if (localStorage.getItem('access')) {
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': `JWT ${localStorage.getItem('access')}`,
'Accept': 'application/json'
}
};
try {
const res = await axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config);
dispatch({
type: USER_LOADED_SUCCESS,
payload: res.data
});
}catch (err) {
dispatch({
type: USER_LOADED_FAIL
});
}
} else {
dispatch({
type: USER_LOADED_FAIL
});
}
};
export const login = (email, password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ email, password });
try {
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/create/`, body, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
});
dispatch(setAlert('Authenticated successfully', 'success'));
dispatch(load_user());
}catch (err) {
dispatch({
type: LOGIN_FAIL
});
dispatch(setAlert('Error Authenticating', 'error'));
}
};
export const signup = (name, email, password, re_password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ name, email, password, re_password });
try {
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/users/`, body, config);
dispatch({
type: SIGNUP_SUCCESS,
payload: res.data
});
dispatch(setAlert('Check Your Email to Activate Your Account.', 'warning'));
} catch (err) {
dispatch({
type: SIGNUP_FAIL
})
}
};
export const verify = (uid, token) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ uid, token });
try {
await axios.post(`${process.env.REACT_APP_API_URL}/auth/users/activation/`, body, config);
dispatch({
type: ACTIVATION_SUCCESS,
});
dispatch(setAlert('Account Activated Successfully.', 'success'));
} catch (err) {
dispatch({
type: ACTIVATION_FAIL
})
}
};
//Reset Password
export const reset_password = (email) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ email });
try {
await axios.post (`${process.env.REACT_APP_API_URL}/auth/users/reset_password/`, body, config);
dispatch({
type: PASSWORD_RESET_SUCCESS
});
dispatch(setAlert('Check Your Email to Rest Password.', 'warning'));
} catch (err) {
dispatch({
type: PASSWORD_RESET_FAIL
});
}
};
// Reset Password Confirm
export const reset_password_confirm = (uid, token, new_password, re_new_password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ uid, token, new_password, re_new_password });
try {
await axios.post (`${process.env.REACT_APP_API_URL}/auth/users/reset_password_confirm/`, body, config);
dispatch(setAlert('Password Rest Successful.', 'success'));
dispatch({
type: PASSWORD_RESET_CONFIRM_SUCCESS
});
} catch (err) {
dispatch({
type: PASSWORD_RESET_CONFIRM_FAIL
});
}
};
//Logout
export const logout = () => dispatch => {
dispatch(setAlert('Logout successful.', 'success'));
dispatch({
type: LOGOUT
});
};
reducers/Auth.js ;
import {
LOGIN_SUCCESS,
LOGIN_FAIL,
SIGNUP_SUCCESS,
SIGNUP_FAIL,
ACTIVATION_SUCCESS,
ACTIVATION_FAIL,
USER_LOADED_SUCCESS,
USER_LOADED_FAIL,
AUTHENTICATED_SUCCESS,
AUTHENTICATED_FAIL,
PASSWORD_RESET_SUCCESS,
PASSWORD_RESET_FAIL,
PASSWORD_RESET_CONFIRM_SUCCESS,
PASSWORD_RESET_CONFIRM_FAIL,
LOGOUT
} from '../actions/types';
const initialState = {
access: localStorage.getItem('access'),
refresh: localStorage.getItem('refresh'),
isAuthenticated: null,
user: null,
};
export default function (state = initialState, action) {
const { type, payload } = action;
switch(type) {
case AUTHENTICATED_SUCCESS:
return {
...state,
isAuthenticated: true
}
case LOGIN_SUCCESS:
localStorage.setItem('access', payload.access);
localStorage.setItem('refresh', payload.refresh);
return {
...state,
isAuthenticated: true,
access: payload.access,
refresh: payload.refresh,
}
case USER_LOADED_SUCCESS:
return {
...state,
user: payload
}
case SIGNUP_SUCCESS:
return {
...state,
isAuthenticated: false,
}
case AUTHENTICATED_FAIL:
return {
...state,
isAuthenticated: false
}
case USER_LOADED_FAIL:
return {
...state,
user: null
}
case LOGIN_FAIL:
case SIGNUP_FAIL:
case LOGOUT:
localStorage.removeItem('access');
localStorage.removeItem('refresh');
return {
...state,
access: null,
refresh: null,
isAuthenticated: false,
user: null,
}
case PASSWORD_RESET_SUCCESS:
case PASSWORD_RESET_FAIL:
case ACTIVATION_SUCCESS:
case ACTIVATION_FAIL:
case PASSWORD_RESET_CONFIRM_SUCCESS:
case PASSWORD_RESET_CONFIRM_FAIL:
return {
...state
}
default:
return state
}
};

Answer 1

isAuthenticated isn't passed as a prop to PrivateOutlet.
<Route element={<PrivateOutlet />}> // <-- no isAuthenticated prop
<Route path='/about' element={<About />} />
</Route>
isAuthenticated is stored in redux state and the initial value is null and not the true|false after a successful or failed authentication attempt.
const initialState = {
access: localStorage.getItem('access'),
refresh: localStorage.getItem('refresh'),
isAuthenticated: null,
user: null,
};
You can explicitly check if the isAuthenticated state is null and conditionally return null or a loading indicator, etc... while the authentication status is being resolved. Once the authentication status resolves to a non-null value then either the routed component or redirect can be rendered.
import React from 'react';
import { connect } from 'react-redux';
import { Outlet, Navigate } from 'react-router-dom';
const PrivateOutlet = ({ isAuthenticated }) => {
if (isAuthenticated === null) {
return null;
}
return isAuthenticated ? <Outlet /> : <Navigate to='/login' replace />;
};
const mapStateToProps = state => ({
isAuthenticated: state => state.auth.isAuthenticated,
});
export default connect(mapStateToProps)(PrivateOutlet);
or
import React from 'react';
import { useSelector } from 'react-redux';
import { Outlet, Navigate } from 'react-router-dom';
const PrivateOutlet = () => {
const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
if (isAuthenticated === null) {
return null;
}
return isAuthenticated ? <Outlet /> : <Navigate to='/login' replace />;
};
export default PrivateOutlet;
Update
If you want to redirect a user back to the page they were originally trying to access the PrivateOutlet component should grab the current location and pass this in route state to the login page.
import { Outlet, Navigate, useLocation } from 'react-router-dom';
const PrivateOutlet = () => {
const location = useLocation();
const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
if (isAuthenticated === null) {
return null;
}
return isAuthenticated
? <Outlet />
: <Navigate to='/login' state={{ from: location }} replace />;
};
Then the Login component grabs this value from route state to imperatively navigate back to the original route.
const navigate = useNavigate();
const { state } = useLocation();
const { from } = state || {};
...
navigate(from.pathname || "/home", { state: from.state, replace: true });
Example
import React, { useState } from 'react';
import { Link, Navigate, useLocation } from 'react-router-dom';
...
function Login({ login, isAuthenticated }) {
const { state } = useLocation();
const { from } = state || {};
const [formData, setFormData] = useState({
email: '',
password: ''
});
const { email, password } = formData;
const onChange = e => setFormData({
...formData,
[e.target.name]: e.target.value
});
const onSubmit = e => {
e.preventDefault();
login(email, password);
};
if (isAuthenticated) {
return (
<Navigate
to={from.pathname || "/home"}
replace
state={from.state}
/>
);
}
return (
...
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
Update 2
I get on the console; Login.js:30 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
I think what is occurring here is that the login action updates your redux store, which should trigger the component to rerender, and I suspect it's this rerender that looses the route state. Route state is pretty transient and only exists during the transition and render cycle when it's received. You could probably use a React ref to cache a copy of the route state to use later.
Example:
import React, { useRef, useState } from 'react';
import { Link, Navigate, useLocation } from 'react-router-dom';
...
function Login({ login, isAuthenticated }) {
const { state } = useLocation();
const { from } = state || {};
const fromRef = useRef(from);
const [formData, setFormData] = useState({
email: '',
password: ''
});
const { email, password } = formData;
const onChange = e => setFormData({
...formData,
[e.target.name]: e.target.value
});
const onSubmit = e => {
e.preventDefault();
login(email, password);
};
if (isAuthenticated) {
return (
<Navigate
to={fromRef.current.pathname || "/home"}
replace
state={fromRef.current.state}
/>
);
}
return (
...
);
};
It may be more practical to pass an "onLoginSuccess" handler to the login action, and issue an imperative navigation from the asynchronous action.
Example:
import React, { useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
...
function Login({ login, isAuthenticated }) {
const navigate = useNavigate();
const { state } = useLocation();
const { from } = state || {};
const [formData, setFormData] = useState({
email: '',
password: ''
});
const { email, password } = formData;
const onChange = e => setFormData({
...formData,
[e.target.name]: e.target.value
});
const onSubmit = e => {
e.preventDefault();
const onSuccess = () => {
navigate(
from.pathname || "/home",
{
replace: true,
state: from.state
}
);
};
login(email, password, onSuccess);
};
return (
...
);
};
...
export const login = (email, password, onSuccess) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ email, password });
try {
const res = await axios.post(
`${process.env.REACT_APP_API_URL}/auth/jwt/create/`,
body,
config
);
dispatch({ type: LOGIN_SUCCESS, payload: res.data });
dispatch(setAlert('Authenticated successfully', 'success'));
dispatch(load_user());
if (onSuccess) {
onSuccess();
}
} catch (err) {
dispatch({ type: LOGIN_FAIL });
dispatch(setAlert('Error Authenticating', 'error'));
}
};