Login Front end & Back end on React & Rails
By: Nicholas Stano
Tags: React, Backend Development, Login, Front End Development, Rails

I’m going to create a simple Login App that connects the front and back ends. Let us start with our back end. I will be using rails and after setting up a new API in rails, I’ve included the table for users below as well as the User Model. Be sure to use password_digest in your table and has_secure_password in your model.

Users Table

User Model

Also I made sure to uncomment out BCrypt and bundle install in rails.

gem 'bcrypt', '~> 3.1.7' bundle install

For login I set up the following in my controller, a custom route login. I used authenticate password which can be used again only if you have uncommented out BCrypt Gem and ran bundle install.

Auth Controller for Login

post '/login', to: 'auth#login'

Another piece of information to keep in mind is when creating users once your table is set up, be sure to set up the user using password, not password_digest, which would then display the password in the backend.

User.create(username: "Hitchcock", password: "Alfred", picture: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Alfred_Hitchcock_%281955%29.JPG/440px-Alfred_Hitchcock_%281955%29.JPG")

However password_digest hides the password in the database.



id: 3,

username: "Hitchcock",

password_digest: "$2a$12$DxQSsWq2mKHWiRQ77TrRF.GYT0CPvcUc9iJC2O/062kD99l0xRyh.",

picture: "

created_at: "2019-09-11T16:32:01.564Z",

updated_at: "2019-09-11T16:32:01.564Z"

}, : 3,: "Hitchcock",: "$2a$12$DxQSsWq2mKHWiRQ77TrRF.GYT0CPvcUc9iJC2O/062kD99l0xRyh.",: " https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Alfred_Hitchcock_%281955%29.JPG/440px-Alfred_Hitchcock_%281955%29.JPG ",: "2019-09-11T16:32:01.564Z",: "2019-09-11T16:32:01.564Z"},

That wraps up the back end. Now I bring you to the front end. First here is my simple login form.

Beautiful login page

At the top of my tree I have App.js with two children, Home.js and Login.js. In App.js I’m going to set state of user to null to start off. Using a ternary with this.state.user, if the user is null they will be directed to login, otherwise they will be directed to the home page.

App.js

Passing down the same two props to login and home will allow a user to login or logout. These props are the current state of the user as well as setUser which will set the state of the user to null in home.

Home.js

When the log out button is pressed my onClick event handleLogout kicks off and first sets the user to null using the prop. Using withRouter allows me to redirect the user to back to login. For login I have a state username and password that I can use for the values on my form.

Login.js

Login.js continued

Connecting the front and back ends when the login button is pressed I run a fetch to my route for login I set up in Ruby and I will use state for body given the username and password exist on the backend.

Once I have the response I will use localStorage and set userId equal to the user id of the user who has logged in. This would be helpful if using a nav bar and having many pages to ensure your user is logged in on all of those pages. I also have my call back of setUser where I take the data from the response and change the user: null into the current user who has logged in. Finally using withRouter again, the user is redirected home where they can log out.

This wraps up a basic login.