Skip to content

Authentication

When building a front-end web application in React, you will most likely end up needing a mechanism to perform authenticated requests to your Rails application.

To achieve that, usually the best approach is to implement a way to store some credentials in your front-end, either via cookies or local storage.

The Process

In general, when implementing any type of authentication in your app, you will want to follow these guidelines:

  • (Backend) Set up an endpoint to create/start a new session and to return the session credentials (either via response payload or via headers)
  • (Frontend) Store the returned credentials somewhere in your app (can be browser LocalStorage, Cookies, or something else custom)
  • (Frontend) Implement some call to your backend API and include the stored session credentials, via request headers for example
  • (Backend) Validate the credentials received from the request, and deny/accept the request as necessary.
  • (Backend) If the request had invalid/expired credentials, return some error. Otherwise, execute the requested endpoint
  • (Frontend) Add some error handling for the scenarios where your request may be invalid or if your credentials may have already expired.

All-in-One Guide

Additionally, we have a more complete guide on building authentication between Rails and React apps.

This guide contains recommendations on how to set up a simple authentication mechanism, using JWT tokens and Cookies, to communicate with the back-end Rails app and to store the credentials, respectively.