Bare Guidelines For Setting Up Auth With Revisions Based on Comments using Ruby on Rails And Vanilla JS

Joshycsm
3 min readAug 31, 2020

--

https://www.youtube.com/watch?v=KADfCLGQWmI
  1. make a frontend directory (be sure to link your index.html, app.js, app.css)
rails new --api -d=postgresql backend_auth_1st_attempt
  1. fix cors errors
uncomment bcrypt
bundle add jwt to add jwt to your back end directory
run bundle install
create user with rails g resource, get password digest, username, password
password:digest
rails g resource username email password:digest
rails d resourcepassword:digest should generate has_secure_password in your user model, rails magic to show t.string :password_digest in your migration table, you better not do a password_digest when you create your seeds
rails db create migrate
test - seed and console
User.create(name: "", password: "")
setup index
rails g controller
check your rails routes
you should have a authentication#login for your login route to POST a login action within your authentication controller
you should also have a your users controller updated in your routes to the profile action (users#profile) as a GET
YOU WANt to create an authentication controller
require 'jwt'
you'll also want to save the token created by the authentication controller to local storage.
whenver the page loades you'll want to be checking if local storage has a token in it.
hmm...if a token does exist you'll want to pass it over to the user controller.... you'll want to be passing over to the backend to for it to be decoded and return the...(payload of the decoded token) ...which was probably the user that was stored within that token...

02–18–20 Really setting up auth

Make a frontend directory

mkdir frontendAuth
cd frontendAuth
touch index.html app.js app.css

Make a rails project/ a backend directory

rails new --api -d=postgresql backendAuth

Fix cors error

command + p gemfile
command + p cors.rb

uncomment bcrypt and bundle install jwt so you can require ‘jwt’ in the authentication controller that you will create as well as in the users controller or any other controllers that require the jwt as a dependency?

create your user model

rails g resource user username email password:digest
password digest will make it so the user model 'has_secure_password'
it will also generate the password as password_digest in the migration table and schema to assist with the login action and profile action created in the authentication controller and users controller respectively.

create your authentication controller

rails g controller authentication

allow a post to be created in your routes.rb that allows you to create a login method under the authentication controller for a login action

also allow a get to be created in your routes.rb that allows you to create a profile method under the users controller for a profile action

in your routes:
post "login", to: 'authentication#login'
get 'profile', to: 'users#profile'

check that these two additional routes have been created

rails routes

create a login method so you have a login action within your authentication controller that is able to create a token and encode the attribute values that were created in your user migration table.

def login
username = params[:user][:username]
password = params[:user][:password]
?? email = params[:user][:email]
@user = User.find_by(username: username
?? @user = User.find_by(username: username, email: email)
if !@user
render status: :unauthorized
else
if !@user.authenticate password
render status: :unauthorized
else
secret_key = Rails.application.secrets.secret_key_base
token = JWT.encode({
user_id: @user.id,
user_name: @user.username,
email: @user.email
}, secret_key)
render json: {
token: token
}

create a login form on your frontend with at least a username password and submit input

grab your login form from within you app.js file and create an event listener for the login form to link to the login action/endpoint you created on your backend.

You will want to store the token created for your user into localstorage.

If local storage contains a token, you will want to create a logout button for that user with that specific token.

Decode the token on the backend from your profile action/endpoint. fetch from the profile endpoint to get the payload information back decoded for your user or whatever the token happens to be encoding.

If you’re looking for a deeper dive into this you can watch this tutorial below:

--

--

Joshycsm
Joshycsm

Written by Joshycsm

Excited to learn, and even happier to teach.

No responses yet