Rails API User Authentication in React A detailed tutorial on Rails/React user authentication

API for Rails
Let's begin by establishing the API that will be used to authenticate our users in our react app.

Prerequisites
Please make sure the following are installed on your computer before beginning this portion of the course. This will make it easier for you to follow along without any problems.

Rails >= 6.0 should be installed.
Install PostgreSQL and set it up. Installers for Ubuntu may be found here.
Install your preferred text editor.
Rails new auth-api —api -d=postgresql creates a new Rails app. This script builds a new API Rails app called auth-api with the database Postgresql. Change to the app directory; cd auth-api

Construct a User model.

rails g model User email, password_digest

Now let's create the database and migrate the schema.

Runrails db:create and rails db:migrate

Update Gemfile
Add gem 'bcrypt' and gem 'racks-cors', :require => 'racks/cors'

Install the gems by running bundle install

Set up the session storage.
The user's session will be saved across the app using this file settings.

Create a file called session store.rb in config/initializers.

if Rails.env == "production"
  Rails.application.config.session_store :cookie_store, key: "_authentication_app", domain: "https://link-to-your-production-app.com/"
else
  Rails.application.config.session_store :cookie_store, key: "_authentication_app"
end

Let's set up the CORS middleware (Cross-Origin Resource Sharing).
CORS (Cross-Origin Resource Sharing) is a method that uses extra HTTP headers to instruct browsers to allow a web application operating on one origin to access resources from another origin. When a web application accesses a resource from a domain, protocol, or port other than its own, it makes a cross-origin HTTP request. Find out more here.

Inside config/initializers, create the file cors.rb and paste the code below into it.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3000"
    resource "*", headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  end

  allow do
    origins "https://link-to-production-app.com/"
    resource "*", headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  end
end

Create the sessions controller
rails g controller Sessions

app/controllers/sessions_controller

class SessionsController < ApplicationController
  include CurrentUserConcern

  def create
    user = User.find_by(email: params["user"]["email"]).try(:authenticate, params["user"]["password"])

    if user
      session[:user_id] = user.id 
      render json: {
        status: :created,
        logged_in: true,
        user: user
      }
    else
      render json: { status: 401 }
    end
  end

  def logged_in
    if @current_user
      render json: {
        logged_in: true,
        user: @current_user
      }
    else
      render json: {
        logged_in: false
      }
    end
  end

  def logout
    reset_session
    render json: { 
      status: 200, 
      logged_out: true 
    }
  end
end

Add the user's current worry.
Create a new file current user concern.rb in the app/controllers/concerns folder and add the following code to it.

module CurrentUserConcern
  extend ActiveSupport::Concern

  included do
    before_action :set_current_user
  end

  def set_current_user
    if session[:user_id]
      @current_user = User.find(session[:user_id])
    end
  end
end

The current user concern variable will be used to identify logged-in app users. We made it a worry so that other controllers could access it. Continue reading.

Editing the User Model
Add the line has secure password to app/models/user.rb. That line is required for bcrypt to encrypt our user passwords.

Add validation to the model as well

class User < ApplicationRecord
  has_secure_password
  validates_presence_of :email, :password
  validates_uniqueness_of :email
end

Update our routes

Rails.application.routes.draw do
  resources :sessions, only: [:create]
  resources :users

  delete :logout, to: "sessions#logout"
  get :logged_in, to: "sessions#logged_in"

  root to: "static#home"
end

Let's make the registrations controller for new user registration.
Let's provide our new users the chance to register now that our software is operating as planned.

Create the registrations controller.rb file in app/controllers.

Registrations for rails g controller

class RegistrationsController < ApplicationController
  def create 
    user = User.create!(
      email: params["user"]["email"],
      password: params["user"]["password"],
      password_confirmation: params["user"]["password_confirmation"]
    )

    if user 
      session[:user_id] = user.id 
      render json: {
        status: :created,
        user: user
      }
    else
      render json: { status: 500 }
    end
  end
ens

Update the Application controller
Open app/controllers/application_controller.rb and change it to

class ApplicationController < ActionController::Base
  skip_before_action :verify_authenticity_token
end

The line skip before action:verify authenticity token disables the controllers' forgery prevention. This is critical for resolving the ActionController:: Exceptions for InvalidCrossOriginRequest. More information may be found here.

The Rails portion of the application is now complete. Let's perform one more test by creating a user from the console to ensure that our model is functioning properly.

App in Reactjs
It's time to develop the Reactjs app and connect it to our Rails backend now that we've finished configuring the Rails API.

Prerequisites
Before proceeding, make sure you have the following installed and functioning on your computer.

Nodejs. Installers for Ubuntu may be found here.

Make a react app

Run npx create-react-app name-of-app . This creates a new react app with the name chosen.

Run npm start to ensure everything is working properly. If you built your app correctly, you should see this.

Create components
Let's install some packages that we'll use later before we start building our first component.

Run npm install --save react-route react-router react-router-dom axios

React-route will be used to generate our routes, axios will be used to communicate with our Rails API, and react-router and react-router-dom will be used to render the matching Route>.

Open src and make two new folders called components and auth. Create a new file registration and move app.js to components. Add the following code to js in the auth folder.

Open src and make two new folders called components and auth. Create a new file registration and move app.js to components. Add the following code to js in the auth folder:

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

export default class Registration extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      password_confirmation: "",
      registrationErrors: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(event) {
    const {
      email,
      password,
      password_confirmation
    } = this.state;
    axios
      .post(
        "http://localhost:3001/users",
        {
          user: {
            email: email,
            password: password,
            password_confirmation: password_confirmation
          }
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.status === "created") {
          console.log("Registration data", response.data)
        }
      })
      .catch(error => {
        console.log("registration error", error);
      });

    event.preventDefault();
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <input
              className="form-control"
              type="email"
              name="email"
              placeholder="Email"
              required
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>

          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password"
              placeholder="Password"
              required
              value={this.state.password}
              onChange={this.handleChange}
            />
          </div>

          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password_confirmation"
              placeholder="Password Confirmation"
              required
              value={this.state.password_confirmation}
              onChange={this.handleChange}
            />
          </div>

          <button type="submit" className="btn btn-primary btn-sm">
            Register
          </button>
          <p>
            Have an account? <Link to="/">Login</Link>
          </p>
        </form>
      </div>
    );
  }
}

To begin, we construct a state object containing the parameters we require from a user in order to register successfully. Only the email, password, and password confirmation parameters are supported by our API.

Our handleSubmit method will use axios to send a POST request to the API when the form is submitted. If the user's credentials are legitimate, a successful login will transport them to the dashboard, and their login status will be updated to logged in.

The login.js component should now be added to the auth subdirectory.

import React, { Component } from "react";
import axios from "axios";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      loginErrors: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(event) {
    const { email, password } = this.state;
    axios
      .post(
        "http://localhost:3001/sessions",
        {
          user: {
            email: email,
            password: password
          }
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.logged_in && response.data.patient) {
          this.props.handleSuccessfulAuth(response.data);
        } else {
          this.props.handleSuccessfulDoctorAuth(response.data);
        }
      })
      .catch(error => {
        console.log("login error", error);
      });

    event.preventDefault();
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <input
              className="form-control"
              type="email"
              name="email"
              placeholder="Email"
              required
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password"
              placeholder="Password"
              required
              value={this.state.password}
              onChange={this.handleChange}
            />
          </div>
          <button type="submit" className="btn btn-primary btn-sm">
            Login
          </button>
        </form>
      </div>
    );
  }
}

We have our login and registration components ready at this stage. So let's get started.

The Dashboard and Home components
For unauthenticated users, we require a home component, and for authorized users, we need a dashboard component.

A login form and a link to register will be on the main page. After logging in, users are brought to the dashboard, where they can logout.

Add home.js to src/components to build the home component.

import React, { Component } from "react";
import Login from "./auth/Login";
import { Link } from "react-router-dom";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.handleLogin(data);
    this.props.history.push("/dashboard");
  }

  render() {
    return (
      <div>
        <h1>Home</h1>
        <h1>Status: {this.props.loggedInStatus}</h1>
        <Login
          handleSuccessfulAuth={this.handleSuccessfulAuth}
        />
        <p>
          Don't have an account? <Link to="/registration">Register</Link>
        </p>
      </div>
    );
  }
}

The App component
The App component is the topmost (parent) component.

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Dashboard from "./dashboard";
import Home from "./home";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import Registration from "../auth/Registration";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      loggedInStatus: "NOT_LOGGED_IN"
    };

    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
  }

  checkLoginStatus() {
    axios
      .get("http://localhost:3001/logged_in", { withCredentials: true })
      .then(response => {
        if (
          response.data.logged_in &&
          this.state.loggedInStatus === "NOT_LOGGED_IN"
        ) {
          this.setState({
            loggedInStatus: "LOGGED_IN"
          });
        } else if (
          !response.data.logged_in &&
          this.state.loggedInStatus === "LOGGED_IN"
        ) {
          this.setState({
            loggedInStatus: "NOT_LOGGED_IN"
          });
        }
      })
      .catch(error => {
        console.log("login error", error);
      });
  }

  handleSuccessfulAuth(data) {
    this.handleLogin(data);
  }

  componentDidMount() {
    this.checkLoginStatus();
  }

  handleLogin(data) {
    this.setState({
      loggedInStatus: "LOGGED_IN"
    });
  }

  handleLogout() {
    this.setState({
      loggedInStatus: "NOT_LOGGED_IN"
    });
  }

  render() {
    return (
      <div className="app">
        <BrowserRouter>
          <Switch>
            <Route
              exact
              path={"/"}
              render={props => (
                <Home
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                  handleLogin={this.handleLogin}
                  handleLogout={this.handleLogout}
                />
              )}
            />
            <Route
              exact
              path={"/dashboard"}
              render={props => (
                <Dashboard
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                />
              )}
            />
            <Route
              exact
              path={"/registration"}
              render={props => (
                <Registration
                  handleSuccessfulAuth={this.handleSuccessfulAuth}
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                />
              )}
            />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

At this stage, we must test our app to check how it functions.

Let's get the servers up and running: reactjs server; npm start This will run the program on port 3000 automatically.

rails s -p 3001 rails server

Home/Login Page
Let's utilize the user credentials we established while we were testing the user model to log in.

Comments

[NguyenTungSon0503]

thank you so much for this tutorial. But i have a question, in the app.js file, i saw ./dashboard but in the tutorial i dont see it. Can you update the source code of it? Thank you!