Redirect when the user is not logged in

Question

I have the following routes in App.js

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <Route exact path="/passwordchange/:email" component={PasswordChange} />
      <Route exact path="/account" component={Account} />
      <Route exact path="/forgot-password" component={ForgotPassword} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/faq" component={FAQ} />
      <Route exact path="/library" component={Library} />
      <Route exact path="/signup" component={SignUp} />
      <Route exact path="/signup/:id" component={SignUp} />
      <Route exact path="/login/:id" component={Login} />
      <Route path="/books" exact component={BookSummaries} />
      <Route path="/home" exact component={Main} />
      <Route path="/pricing" exact component={Pricing} />
      <Route path="/books/:id" exact component={BookDetail} />
      <Route path="/categories/:id" exact component={Categories} />
      <Route path="/category/:category" exact component={BookListPage} />
      <Route path="/stacksocial" exact component={StackSocial} />
      <Route path="/booklist/:sort" exact component={BookListPage} />
      <Route path="/reader/:id" exact component={Reader} />
      <Route path="/search" exact component={BookSearch} />
      <Route path="/payment/:planid" exact component={Payment} />
    </Layout>
  </div>
</Router>

For some of the routes, I want to only show them if the user is logged in. What's the best way to do that using React?

What do you use to determine if a user is logged in? Do you have some sort of localSorage or redux-state? — Chris Ngo, Oct 11 '19 at 16:29
Is this [react router](https://github.com/ReactTraining/react-router)? Did you look at the [docs](https://reacttraining.com/react-router/web/example/auth-workflow)? — zero298, Oct 11 '19 at 16:31

score 3 · Accepted Answer · edited Nov 22 '19 at 06:44

The best way to do it is by creating a ProtectedRoute component. If the user is not logged in, redirect them to somewhere else such as the login page.

Here is ProtectedRoute.js (here I have an authService to decide if the user is logged in or not; yours can be different).

import React from "react";
import { Route, Redirect } from "react-router-dom";
import authService from "../../services/auth-service";

export const ProtectedRoute = ({
  path,
  component: Component,
  render,
  ...rest
}) => {
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (authService.isAuthenticated()) {
          return Component ? <Component {...props} /> : render(props);
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

This way you can use this component for the routes that require authentication.

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
    </Layout>
  </div>

score 1 · Answer 2 · answered Oct 11 '19 at 16:30

Assuming you have some sort of isLoggedIn variable somewhere. You could do it with something like:

<Router>
                <div className="App">
                    <Layout>
                        <Route exact path="/" exact component={Main}/>
                        <Route exact path="/passwordchange/:email" component={PasswordChange}/>
                        <Route exact path="/account" component={Account}/>
                        <Route exact path="/forgot-password" component={ForgotPassword}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/faq" component={FAQ}/>
                        <Route exact path="/library" component={Library}/>
                        <Route exact path="/signup" component={SignUp}/>
                        <Route exact path="/signup/:id" component={SignUp}/>
                        <Route exact path="/login/:id" component={Login}/>
                        <Route path="/books" exact component={BookSummaries}/>
                        { isLoggedIn &&
                        <>
                          <Route path="/home" exact component={Main}/>
                          <Route path="/pricing" exact component={Pricing}/>
                          <Route path="/books/:id" exact component={BookDetail}/>
                          <Route path="/categories/:id" exact component={Categories}/>
                          <Route path="/category/:category" exact component={BookListPage}/>
                          <Route path="/stacksocial" exact component={StackSocial}/>
                          <Route path="/booklist/:sort" exact component={BookListPage}/>
                          <Route path="/reader/:id" exact component={Reader}/>
                          <Route path="/search" exact component={BookSearch}/>
                          <Route path="/payment/:planid" exact component={Payment}/>
                        </>
                      }
                    </Layout>
                </div>
            </Router>

What I do is return a `` component in one of the leaf components after defining the routes. — Jake Luby, Oct 11 '19 at 16:34

Redirect when the user is not logged in

2 Answers2

Linked