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

Controllers

ApplicationController

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

AuthController

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

UsersController

create action for User
Strong params

Routes

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)
    dispatch(loginUser(data.user))
  • 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

Login

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

IntersectionObserver()

How to develop a chrome extension to stop those annoying mailto link popups

Detect if HTML 5 Video is playing or paused

Execute Java Code in Neoload using JS

React Server Side Render & Code Splitting: identifying and loading required assets

From Back End to Front End Development

How To Easily Animate SVG With a Few CSS Lines

Adding Firebase Analytics to React Application — The Simple Way

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

A journey of how we cloned Gaana website using MongoDb,Express,NodeJs,React.

Edit form in Todo List React Redux App (with hooks)

React Tutorial — Learn React in 5 hours — Part 3

React functional component

Using Sessions with Sinatra in Web Apps