Full-Stack Final Project Using React + Redux + Rails

Setup Backend

#gemfilegem 'bcrypt'
gem 'jwt'
gem 'pg'

User model

rails g model User username:string password_digest:string name:string bio:text pronouns:string 
# db/migrat/create_users.rb User Table
# /user.rb model



  • Checks if the HTTP request has a header ‘Authorization’
  • Decodes the encrypted token using JWT.decode


skip_before_action :require_login, only [:login, :auto_login]


create action for User
Strong params


Frontend User Authentication With React + Redux

User Actions

Now this (below), is where the fetch calls take place, the user.js actions.

There’s a lot going on here, so break it down a bit:

  • POST request to /api/login which routes to the login controller action
  • The body consists of username and password
  • if (data.failiure) — if the request returns a Failure, it will dispatch the failure error message to authError, it will return the error as the payload{type: AUTHENTICATION_ERROR, error: error }
  • If the login is a success, the token will be saved to localStorage — {
    localStorage.setItem(“token”, data.jwt)
  • After authenticated login, the current user’s data is saved to currentUser in store
  • POST request to /api/users calling on the UsersController create action on the backend
  • If successful, it create’s the user on the backend, giving it an ID
  • Finally, it returns the JWT token to localStorage, logging the user in, and setting it to currentUser

User Reducer

  • Called on from loginUser , takes user information as currentUser
  • authenticated: true, sets authenticated to true when a user is logged in
  • Also sets error to an empty string
  • Sets error to whatever error message was received from fetch call

Protected Routes

index.js BrowserRouter

Higher-Order Components

Home Component — If User’s Authenticated

If User Is NOT Authenticated — Redirect’s to /loginRequired

/loginRequired component prompts user to create account or login
loginRequired Component


Unsuccessful Login

Authentication failed /login
Redux Action upon auth error

Upon successful authentication

Login Component

Create Account

Upon successful submission:

Upon authentication, the token is saved to localStorage

CreateAccount Component

In Summary

Questions Are Welcome! Email Me: tifftiff.email@gmail.com




Full-stack developer. Alumna of Flatiron School's Software Engineering Immersive bootcamp. Portfolio: https://tiffany-codes.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Typescript Generics Explained

How to load a script on a specific component in a specific environment in a React App

React logo and an empty script tag


The magic of Javascript’s ES6 destructuring assignment

How http cache on static assets works out of the box

Node.js: Bulk Message Delivery as a Runtime Service

Hash Tables Explained and Implemented in JavaScript

React JS Introduction

Get the Medium app

Tiffany Abraham

Tiffany Abraham

Full-stack developer. Alumna of Flatiron School's Software Engineering Immersive bootcamp. Portfolio: https://tiffany-codes.com/

More from Medium

React App from Scratch: SharkAid

React: Less is More

Flatiron Phase 2 — React

Building a Messaging Feature in Rails & React