Private route get Authentication before render Component - reactjs

Question

I have problem in using PrivateRoute for user with authentication.
Since I use redux to catch authentication of an user, I need to wait state return from store before rendering component.
If not, the page will be automatically redirect to login route.
My problem is that current route will be redirect to login page while waiting authentication result. It will be return page if authenticated.
So I want wait for authentication result first. If authenticated, page component will be loaded, if not it will redirect to login page.
Here is my private route with authentication.
import React from "react";
import { Route, Redirect} from "react-router-dom";
import { connect } from "react-redux";
const PrivateRoute = ({ component: Component, auth, role, ...rest }) => {
return (
<Route
{...rest}
render={props => auth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to={{
pathname: "/",
state: { from: props.location }
}} />
)
}
/>
)
}
const stateStoreToProp = state => ({
auth: state.loginReducer,
});
export default connect(stateStoreToProp)(PrivateRoute);
Here is my login Component for auto redirect.
let history = useHistory();
let location = useLocation();
let { from } = location.state || { from: { pathname: "/choose" } };
const isAuthenticated = prop.loginReducer.isAuthenticated;
const user = prop.loginReducer.user;
if (isAuthenticated && typeof user !== "undefined") {
history.replace(from);
}
And here is App.js
import { loadUser } from './actions/AuthAction';
function App() {
useEffect(() => {
store.dispatch(loadUser());
}, []);
return (
<Provider store={store}>
<Router>
<Fragment>
<div className="blockcontain">
<div className="fss">
<div className="rightSide">
<Switch>
<Route path='/' exact component={Login} />
<PrivateRoute exact path='/choose' component={Choose} />
</Switch>
</div>
</div>
</div>
</Fragment>
</Router>
</Provider>
);
}
and LoginReducer
import {
LOGIN_SUCCESS, LOGIN_FAIL, USER_LOADED, AUTH_ERROR
} from '../actions/typeName';
import Cookies from 'js-cookie';
const initialState = {
token: Cookies.get('token'),
isAuthenticated: null,
loading: true,
user: null
}
const loginReducer = (state = initialState, action) => {
const {type, payload} = action;
switch(type) {
case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: false,
user: payload
};
case LOGIN_SUCCESS:
Cookies.set('token', payload.access_token, { expires: payload.expires_at });
return {
...state,
isAuthenticated: true,
loading: false
}
case AUTH_ERROR:
case LOGIN_FAIL:
return {
...state,
token:null,
isAuthenticated: false,
loading: true
}
default:
return state;
}
}
export default loginReducer;
I go choose page, it will go to login page because the store for authentication is not ready.
Thank you.

Answer 1

You could add a loading property to your state and only show the route when fetching has been completed:
const PrivateRoute = ({ component: Component, auth, isLoading, role, ...rest }) => {
if(isLoading) return <div>Loading...</div>;
return (
<Route
{...rest}
render={(props) =>
auth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/',
state: { from: props.location },
}}
/>
)
}
/>
)
}
const stateStoreToProp = (state) => ({
isLoading: state.loading,
auth: state.loginReducer,
})
export default connect(stateStoreToProp)(PrivateRoute)
And also add the loading mutations in your reducer, for example:
case REQUEST_LOGIN:
return [...state, isLoading: true];
case LOGIN_SUCCESSFUL:
return [...state, auth: isAuthenticated, isLoading: false];

Answer 2

What you can do is to add a "loading" key to your auth state, so while it is authenticating the state will be "true" else "false". If it is true you display a loader.
import React from "react";
import { Route, Redirect} from "react-router-dom";
import { connect } from "react-redux";
const PrivateRoute = ({ component: Component, auth, role, ...rest }) => {
return (
<>
{
auth.loading && (
<Loader/>
)
}
{
!auth.loading && (
(
<Route
{...rest}
render={props => auth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to={{
pathname: "/",
state: { from: props.location }
}} />
)
}
/>
)
)
}
</>
)
}
const stateStoreToProp = state => ({
auth: state.loginReducer,
});
export default connect(stateStoreToProp)(PrivateRoute);