Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@alfonmga
Copy link

alfonmga commented Jul 11, 2018

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.

@dehamzah
Copy link

dehamzah commented Sep 14, 2018

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

gamesover commented Jan 28, 2019

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

@nguyencuong12
Copy link

nguyencuong12 commented May 28, 2020

tks !

@abohannon
Copy link
Author

abohannon commented May 28, 2020

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