Skip to content

Instantly share code, notes, and snippets.

@abohannon
Created December 22, 2017 19:23
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save abohannon/cca2dd998edf9dc2c2165f538eece4b2 to your computer and use it in GitHub Desktop.
Save abohannon/cca2dd998edf9dc2c2165f538eece4b2 to your computer and use it in GitHub Desktop.
React/Redux Auth with Private Route Component
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, authed, ...rest }) => (
<Route
{...rest}
render={props => (
authed
? <Component {...props} />
: <Redirect to="/login" />
)}
/>
);
export default PrivateRoute;
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import * as actions from '../actions';
import Dashboard from '../components/Dashboard';
import UserAuth from '../components/UserAuth';
import PrivateRoute from '../components/PrivateRoute';
class Routes extends Component {
componentDidMount() {
console.log('==== Routes mounted!');
}
render() {
console.log('Routes props', this.props.currentUser);
return (
<BrowserRouter>
<div>
<Route exact path="/login" component={UserAuth} />
<Route exact path="/signup" component={UserAuth} />
<PrivateRoute exact path="/" component={Dashboard} authed={this.props.currentUser} />
</div>
</BrowserRouter>
);
}
}
const mapStateToProps = state => ({ currentUser: state.userAuth });
export default connect(mapStateToProps, actions)(Routes);
@dehamzah
Copy link

Thanks, it works.
When i try to connect the state to props in PrivateRoute component it doesn't work. It seems wrapped component in connect prevent the PrivateRoute to rerender.

@x1wins
Copy link

x1wins commented Oct 12, 2018

good!

@gamesover
Copy link

@alfonmga I agree with you. In my own project, I direct read current user from store's redux state.

@nguyencuong12
Copy link

tks !

@abohannon
Copy link
Author

Hey Adam (@abohannon) thanks for sharing this.
I was asking myself if isn't better to get currentUser state from PrivateRoute.js instead of get it from Routes.js so we don't have to pass it to all private routes. What do you think? I'm missing something? I'm new to Redux.

@alfonmga Whoa I had no idea people were finding this. Two years later, sorry!

So it's been a minute since I've used this pattern in redux and today I would likely use hooks or context, but glancing back over this, I think I added connect on Routes because I was treating Routes as a container and I typically only like to connect my containers to keep things organized. Sometimes I break that rule, but since currentUser here only has to go one level deep, I don't mind.

@Zo3rb
Copy link

Zo3rb commented Oct 27, 2020

Stll can use this ?
I need to make route guard in my app too ?


Edit: i did try out and it was awesome :) :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment