Authentication component for ReactJs

Question

I would like to have a universal component that gets called every time I navigate to routes. The main purpose of this component is authentication. To better illustrate what I need I have this example if vue.js:

const routes = [
    { path: '/', component: Login, meta: { auth: false } },
    { path: '/dashboard', component: Dashboard, meta: { auth: true } },
];

router.beforeEach((to, from, next) => {
    if( to.meta.auth ) {
       // run auth, then next();
    } else {
       next();
    }
})

I can I achieve smth like this in ReactJs?

Tom Van Rompaey · Accepted Answer · 2017-07-14 05:38:52Z

1

On the documentation of react-router (assuming you are going to use this router library) there is an example of how to implement authenticated routes: https://reacttraining.com/react-router/web/example/auth-workflow

Using your example you could implement it like this

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import Login from './Login';
import Dashboard from './Dashboard';

const routes = [
  { path: '/', component: (props) => <Login {...props} />, meta: { auth: false } },
  { path: '/dashboard', component: (props) => <Dashboard {...props} />, meta: { auth: true } },
];

export default class MyRouter extends Component {

  isLoggedin() {
    // run auth check that will return true/false 
    return true;
  }

  render() {
    // if loggedin => render component, if not => redirect to the login page
    const PrivateRoute = ({ component: RouteComponent, ...rest }) => (
      <Route
        {...rest}
        render={props => (
        this.isLoggedin() ? (
          <RouteComponent {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      )}
      />
    );

    return (
      <BrowserRouter>
        <Switch>
          {routes.map((route, index) => (
            route.meta.auth ?
              <PrivateRoute key={index} path={route.path} exact component={route.component} />
            :
              <Route key={index} path={route.path} exact component={route.component} />
          ))}
        </Switch>
      </BrowserRouter>
    );
  }
}

Inside the PrivateRoute we will check the auth status with this.isLoggedIn() and based on the returned boolean, the component or a Redirect (to the login page for example) is rendered.

answered Jul 14, 2017 at 5:38

Tom Van Rompaey

3,58622 silver badges22 bronze badges

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

2 Comments

luiquao Over a year ago

Can I make an ajax call to define if its true or false?

Tom Van Rompaey Over a year ago

Sure, inside isLoggedin() you can return a fetch Promise (developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and check the response inside the PrivateRoute: this.isLoggedin().then((response) => { // return <RouteComponent ... /> or <Redirect ... /> }

mradziwon · Accepted Answer · 2017-07-14 05:03:31Z

1

You can create react component that contains login logic. This component wraps all of the routes that require authenticated users. Check this article for solution.

answered Jul 14, 2017 at 5:03

mradziwon

1,2361 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

Authentication component for ReactJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related