Redirect router on after login - reactjs

Question

I am trying to figure out how to redirect my react app to proper page after it has been authenticated through the login.
Here is my App.js file with the routed (without imports):
ReactDOM.render((
<Provider store={store}>
<Router history={history}>
<Switch>
<PrivateRoute path="/test" component={Test} />
<Route path="/login" component={Login} />
<PrivateRoute path="/" render={() => <h1>Welcome</h1>} />
</Switch>
</Router>
</Provider>
), document.getElementById('root'));
I am using PrivateRoute component to make sure private routes get authenticated:
class PrivateRoute extends Route {
render() {
const { component: Component, isAuthenticated } = this.props;
let propsCopy = Object.assign({}, this.props);
delete propsCopy.component;
delete propsCopy.isAuthenticated;
return (
isAuthenticated
? <Component {...propsCopy} />
: <Redirect to={{
pathname: LOGIN_PATH,
state: { from: this.props.location }
}} />
);
}
}
/**
* Maps properties from Redux store to this component.
* #param {Object} state Redux object
* #return {Object} mapper properties
*/
function mapStateToProps(state) {
// pull out auth element from Redux store state
const { auth } = state;
// extract authenticated element from auth object
const { isAuthenticated } = auth;
return {
isAuthenticated
}
}
export default connect(mapStateToProps)(PrivateRoute);
My Login component that get redirected to (simplified for the sake of the example:
class LoginForm extends Component {
constructor() {
super();
this.state = {
email: '',
password: '',
}
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleFormSubmit(event) {
//event.preventDefault();
const validation = this.validator.validate(this.state);
this.setState({ validation });
this.submitted = true;
if (validation.isValid) {
// submit form here
this.props.loginUser({
email: this.state.email,
password: this.state.password
});
}
}
render() {
return (
// My login FROM code here
)
}
}
function mapStateToProps(state) {
return {
isFetching: state.auth.isFetching,
loginError: state.auth.loginError,
isAuthenticated: state.auth.isAuthenticated
};
}
function mapDispatchToProps(dispatch, props, state) {
return {
loginUser: (credentials) => {
dispatch(loginUser(credentials));
},
};
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
Right now it works where it redirects to the LoginForm component if isAuthenticated is false. I can submit the login form to my login service and receive a success response and set isAuthenticated.
My question is how to I redirect to the original route? Where is redirection normally done? I'm assuming it's never done in the reducer so it would have to be done in the LoginForm component right?
I know there are a lot of resources discuss this whole login flow but I can't find one that deals with this issue(which surprised me). Everyone redirects to a specific page ('/', '/home' etc) but how do i capture and redirect to the original route.

Answer 1

The PrivateRoute component is storing the previous route in from when a redirect occurs due to isAuthenticated being false. This can be used in LoginForm to redirect the user when isAuthenticated is true. Just extract from from this.props.location.state and use that in combination with Redirect component from react-router-dom. If you log this.props.location.state.from you will see the property pathname containing the string route path that the user attempted to get to in an unauthenticated state, which can be used to redirect them once authentication is successful.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, withRouter } from 'react-router-dom';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
}
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleFormSubmit(event) {
event.preventDefault();
const validation = this.validator.validate(this.state);
this.setState({ validation });
this.submitted = true;
if (validation.isValid) {
// submit form here
this.props.loginUser({
email: this.state.email,
password: this.state.password
});
}
}
render() {
const { from } = this.props.location.state || { from: { pathname: "/" } };
const { isAuthenticated } = this.props;
if (isAuthenticated) {
return <Redirect to={from} />;
}
return (
{* login from code *}
);
}
}
function mapStateToProps(state) {
return {
isFetching: state.auth.isFetching,
loginError: state.auth.loginError,
isAuthenticated: state.auth.isAuthenticated
};
}
function mapDispatchToProps(dispatch, props, state) {
return {
loginUser: (credentials) => {
dispatch(loginUser(credentials));
},
};
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LoginForm));
You may need to update your PrivateRoute component is well to ensure it returns a Route, this would be in line with react-router-dom example:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, withRouter } from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props =>
rest.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: LOGIN_PATH,
state: { from: props.location }
}}
/>
)
}
/>
);
const mapStateToProps = ({ auth: { isAuthenticated } }) => ({ isAuthenticated });
export default withRouter(connect(mapStateToProps)(PrivateRoute));
I've created a simplified StackBlitz demonstrating the functionality in action.
Hopefully that helps!

Answer 2

#Alexander and #bos570 first of all I really appreciate the way you've done this. There are better approaches to this but here is an implementation to build it in controlled way:
In your index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.scss'; // it depends what styles you're using css,scss,jss
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));
In your App.js:
class App extends Component {
state = {
isAuthenticated: false,
};
componentDidMount(){
//call authentication API here
// setState isAuthentication to true upon authentication success
}
render(){
return(
<Provider store={store}>
<BrowserRouter>{isAuthenticated ? <Routes /> : <Login />}</BrowserRouter>
</Provider>
)}
Your Routes.js will have all routes in a Switch and It will keep showing loading screen unless API response gives success. and you re-route to a basic Login page.
Even If you've done code splitting It would not download any bundles from network except main.bundle.js upon authentication failure.
I see people when people use Redux like jack of all trades in programming. I know you future implementation for authentication will give you an refreshToken that's what Authentication API does for us. You can store it in localStorage and You need to do this if someone refresh the browser at any instant you can't keep it in redux as we know redux will lose state upon browser refresh so here localStorage comes into the play. Use it wisely I would really like to have conversion with both of you how can we make it more better.
I hope this would be helpful for you. and Maybe redux will be used side by side for Authentication. I have had a great time while implementing auth in an app.
Cheers
EDITED keep it as it you've done. But we need to know at which point, you need redux, localStorage, Context API