How can i check if user is authenticated more efficently in react?

Question

I have a this.props.auth reducer in my protected route (returns user if authenticated or false when not). Currently I'm checking that if this.props.auth is false or has a user inside of it. When false, then redirect to /login or if true, render the page with this.props.auth data. I currently have to rewrite the auth logic for all components same way. What would be the best way to make the is user authenticated check reusable?

Protected Component Code:

class StaffMeetingsPage extends React.Component {
componentDidMount() {
    document.title = "Staff Meetings";
}

renderContent() {
    console.log(this.props.auth)
    switch (this.props.auth) {
        case null:
            return 'still fetching';
        case false:
            return this.props.history.push('/login');;
        default:
            return <div>Logged in</div>;
    }
}

render() {
    console.log(this.props);
    return(
        <div>
            {this.renderContent()}
        </div>
    );
  }
}

function mapStateToProps(state) {
    return {
        auth: state.authenticationProperty
    };
}

export default connect(mapStateToProps)(StaffMeetingsPage);

Console logging this.props.auth when logged in:

email: "[email protected]" username: "user" _id: "adasdasdasfe3453" __proto__: Object

Console logging this.props.auth when not logged in:

false

0xc14m1z · Accepted Answer · 2019-01-26 20:52:13Z

3

I usually create a PrivateRoute component that checks if the user is logged in (via prop, redux, localstorage or something).

Something like:

import { Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({ isLoggedIn, ...props }) =>
  isLoggedIn
    ? <Route { ...props } />
    : <Redirect to="/login" />

In your case you could connect this PrivateRoute component to the part of your state where you handle the authentication:

function mapStateToProps(state) {
    return {
        isLoggedIn: !!state.authenticationProperty
    };
}

export default connect(mapStateToProps)(PrivateRoute)

In the router I then use it for my, well, private routes :)

<Switch>
  <PrivateRoute path="/staff-meetings" component={StaffMeetingsPage} />
  <Route path="/login" component={Login}/>
</Switch>

edited Jan 26, 2019 at 20:52

answered Jan 26, 2019 at 20:43

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tryingtodevelop Over a year ago

my redux reducer action is async, how can i wait for that result in PrivateRoute?

Collectives™ on Stack Overflow

How can i check if user is authenticated more efficently in react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related