User Authentication Using ReacJS with Loopback

Question

I am working on a little project right now and trying to set up user authentication for the front end using ReactJS with Loopback. I have my login view for the user and am able to sign up and then log in, but I am trying to make it to where, if the user is not logged in then they can not view the other pages I have in the application. I have tried searching and have found very slim documentation on how to complete this step. Would I need to use Auth in the routers, and how would I go about redirecting the user to a page if they are logged in.

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Carlist from './Carlist';
import About from './About';
import Contact from './contact';
import CarlistDetails from './CarlistDetails';
import Addnew from './Addnew';
import EditCar from './EditCar';
import Thanks from './Thanks';
import Login from "./Login";
import AddUsers from "./AddUsers";
const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Login} />
      <Route exact path='/home' component={Carlist} />
      <Route exact path='/about' component={About} />
      <Route exact path='/Thanks' component={Thanks} />
      <Route exact path='/contact' component={Contact} />
      <Route exact path='/AddUsers' component={AddUsers} />
      <Route exact path='/carlist/add' component={Addnew} />
      <Route exact path='/carlist/edit/:id' component={EditCar} />
      <Route exact path='/carlist/:id' component={CarlistDetails} />
    </Switch>

  </main>


)

export default Main;

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class Login extends Component {

  submitUser(loginUser) {
    axios.request({
      method: 'post',
      url: 'http://localhost:3000/api/Users/login',
      data: loginUser
    }).then(response => {
      this.props.history.push('/home');
    }).catch(err => console.log(err));
  }

  onSubmit(e) {
    const loginUser = {
      email: this.refs.email.value,
      password: this.refs.password.value,
    }
    this.submitUser(loginUser);
    e.preventDefault();
  }






  render() {
    return (
      <div>

        <h1>Login</h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <input type="text" name="email" ref="email" />
            <label htmlFor="email">Email</label>
          </div>
          <div className="input-field">
            <input type="text" name="password" ref="password" />
            <label htmlFor="password">  Password</label>
          </div>
          <input type="submit" value="Login" className="btn blue darken-3" />
          <Link className="btn right" to="/AddUsers">Create Account</Link>
        </form>
      </div>
    )
  }
}
export default Login;

Answer 1

You need a state include a login param.

state = {login: false}

then render the other routes only the login is true.

<Switch>
  <Route exact path='/' component={Login} />
  {this.state.login && ...}
</Switch>