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

This comment has been minimized.

Copy link

@alfonmga 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

This comment has been minimized.

Copy link

@dehamzah 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

This comment has been minimized.

Copy link

@x1wins x1wins commented Oct 12, 2018

good!

@gamesover

This comment has been minimized.

Copy link

@gamesover 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

This comment has been minimized.

Copy link

@nguyencuong12 nguyencuong12 commented May 28, 2020

tks !

@abohannon

This comment has been minimized.

Copy link
Owner Author

@abohannon 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

This comment has been minimized.

Copy link

@Zo3rb 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