DEV Community: ArmandeepKaur

Authentication using React and Ruby on Rails: creating a login, staying logged in, and logging out

ArmandeepKaur — Fri, 16 Dec 2022 18:03:54 +0000

In this post, I will explain how to create a login page using a Ruby on Rails backend and React frontend.

Add sessions and cookies to application.rb

In config/application.rb, add the following code:

    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore

    # Use SameSite=Strict for all cookies to help protect against CSRF
    config.action_dispatch.cookies_same_site_protection = :strict

Update application_controller.rb

In app/controllers/application.rb, add the following code:

include ActionController::Cookies

This allows all of our controllers to work with the cookies. After adding the above code, your application_controller.rb should look like this:

class ApplicationController < ActionController::API
  include ActionController::Cookies
end

Create a sessions_controller.rb file

One can create a sessions_controller.rb file by entering the following code in the terminal. The command utilizes a rails generator to create a sessions controller.

rails g controller Sessions

Create a login path

In config/routes.rb, add the following route:

post "/login", to: "sessions#create"

Create a login request on the frontend

function Login(){

    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")


    function handlSubmit(e){
        e.preventDefault()
        const formData = {
            username: username, 
            password: password
        }
        fetch("/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(formData),
          })
            .then((r) => r.json())
            .then(navigate("/"));
        }

     return (
        <div className="login-div">
            <form  className="form" onSubmit={handlSubmit}>
                <input 
                    id="username"
                    type="text"
                    onChange={(e) =>   setUsername(e.target.value)}
                    value={username}
                    placeholder="username"/>
                <input 
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="password"
                />
                <input 
                type="submit"
                value="Login"
                className="login_buttons"
                />
                <h3>OR</h3>
                <button onClick={handleAccount} className="login_buttons">Create Account</button>
            </form>
        </div>
    )
}

The above code create a login form and creates a post request for the login path defined in config/routes.rb. These steps will ensure that a person can login using their username and password.

Remain logged in

To remain logged in, one must define a route that fetches the data for the user who matches the session id created in the last step.

In config/routes.rb, define the following route:

get "/me", to: "users#show"

In your user_controller.rb, create a show method that finds a user with the same session created in the login.

class UsersController < ApplicationController
  def show
    user = User.find_by(id: session[:user_id])
    if user
      render json: user
    else
      render json: { error: "Not authorized" }, status: :unauthorized
    end
  end
end

Finally, create a get request in React that fetches the data for that specific user.

 const [me, setMe] = useState([])


  useEffect(() => {
    fetch("/me")
    .then((resp) => resp.json())
    .then((info) => setMe(info))
  },[])

Logging out

In config/routes.rb, create the following route:

delete "/logout", to: "sessions#destroy"

In sessions controller, define a delete method:

def destroy
  session.delete :user_id
  head :no_content
end

In React, create a delete request like the following:

function logout(){
  fetch("/logout", {
  method: "DELETE",
  }).then(navigate("/login"));
}

In Conclusion

Creating a login page using ruby and rails and react can be very simple using the above code. One must define the correct routes, define the correct methods in the right controller, and create the correct requests on the frontend.

CRUD in Ruby

ArmandeepKaur — Mon, 28 Nov 2022 19:49:07 +0000

This post goes over how to create routes in Ruby-Sinatra that respond to fetch requests, post requests, patch requests, and delete requests. In order for Ruby to act as the backend server and respond to requests from the frontend, one must have installed the needed dependencies, created necessary migrations, created seed data, set up models accurately, and created CRUD routes.

Install Necessary Dependencies

In order to install necessary depending for ActiveRecord and Sinatra to work, run bundle install in the terminal.

Create Migrations

In order to create a migration, run bundle exec rake db:create_migration NAME=create_<Name of migration>.
For example, In order to create a migration for a model named Review run bundle exec rake db:create_migration NAME=create_reviews. To create a migration for a model named Restaurant, run bundle exec rake db:create_migration NAME=create_restaurants

This will create a migration file in the db folder. In the newly create migration file, one can create a table with specific attributes.

For example, we can create the following table in db/migrate/20221114231536_create_reviews.rb:

class CreateReviews < ActiveRecord::Migration[6.1]
  def change
    create_table :reviews do |t|
      t.string :username
      t.string :date
      t.integer :rating 
      t.string :review
      t.belongs_to :restaurant
    end
  end
end

This table contains a username which takes a string, a date which takes a string, a rating which takes an integer, a review which takes a string, and a foreign key for model Restaurant.

we can create the following table in db/migrate/20221114231542_create_restaurants.rb:

class CreateRestaurants < ActiveRecord::Migration[6.1]
  def change
    create_table :restaurants do |t|
      t.string :name
      t.string :location
     end
  end
end

This table contains attributes name and location both of which take a string.

Create Seed Data

After creating all necessary migrations, the next step is to create seed data in db/seeds.rb. Following is an example of some seed data.

//create seed data for 
Snooze = Restaurant.create(name: "Snooze, an A.M. Eatery", location: "3940 5th Ave San Diego, CA 92103")

Din_Tai = Restaurant.create(name: "Din Tai Fung",location: "4301 La Jolla Village Dr Bldg P Unit 2000 San Diego, CA 92122")

//Review belongs to Snooze as shown under restaurant attribute
Review.create(username: "Camille Jones", date: "10/5/2021", rating: 5, review: "Very good breakfast items. We got the French toast and the shrimp and grits and the eggs benedict. I highly recommend this place and the staff was very attentive.", restaurant: Snooze)

//Review belongs to Din_Tai as shown under restaurant attribute
Review.create(username: "Camille Jones", date: "07/25/2022", rating: 5, review: "Created this account just to write this review because the service was EXCEPTIONAL :)We are very excited to go back again !", restaurant: Din_Tai)

In the example above, we create seed data for Restaurant first. We then use the Restaurant data in the Review data for the restaurant attribute to specify the relationship between a Review and a Restaurant (in other words, we specify which Review belongs to which restaurant).

Creating Models

For the purposes of this post, A restaurant has many reviews and a review belongs to a restaurant. We can specify this relationship in app/restaurant.rb and app/review.rb.

// app/restaurant.rb

class Restaurant < ActiveRecord::Base
    has_many :reviews
end

// app/review.rb
class Review < ActiveRecord::Base
    belongs_to :restaurant
end

Set up CRUD responses (JSON format)

After installing dependencies, creating migrations, creating seed data, and setting up models, we can finally define our CRUD routes in app/controllers/application_controller.rb responsible for responding to CRUD requests.

Creating a Get (Read) route for all Restaurant data and its associate Reviews

The following code will do all of the following:

respond with all Restaurant instances in json format

get "/restaurants" do
  restaurants = Restaurant.all
  restaurants.to_json
end

respond with all Restaurant instances in json format including its associate reviews

get "/restaurants" do
  restaurants = Restaurant.all
  restaurants.to_json(include: :reviews)
end

Creating a Post (Create) route
In order to create a new Review, the post route will look like the following:

post '/review' do
  review = Review.create(
    username: params[:username],
    date: params[:date],
    review: params[:review],
    rating: params[:rating],
    restaurant_id: params[:restaurant_id]
  )
end

Creating a Delete route
In order to delete a review, create a delete route. Add the /:id in the path and use .find() method to find a review by its id so that specific review can be deleted.

delete '/review/:id' do
  review = Review.find(params[:id])
  review.destroy
  review.to_json
end

Creating a Patch (Update) route

In order to respond to a Patch request, create a patch route. Add "/:id" to the path and use .find() method to find a review by its id so it can be updated.

patch '/review/:id' do
  review = Review.find(params[:id])
  review.update(
    date: params[:date],
    username: params[:username],
    rating: params[:rating],
    review: params[:review]
  )
  review.to_json
end

React Events: Simplified

ArmandeepKaur — Fri, 04 Nov 2022 17:52:01 +0000

In my previous post, I talked about Events and Event Handling in JavaScript. In this post, I wanted to continue building on that and review Events and Event Handling in React. Events in React are simpler to use than events in JavaScript. In this post, I will go over the steps needed to add an event listener to a React element and show examples of onClick, onSubmit, and onChange events.

Adding an Event Listener

To add an event listener to a React Element:

Add the event listener to the element of interest
Create a callback function
Pass the callback function as a function reference to the event listener

For example, if we have the following code:

function example(){
  return (<button>Hello<button>)
}

Add the event listener to the element of interest.

The Event Listener names are a combination of on and the event name itself, such as "Click". Additionally, the event Listener names are camelCased.

The following is an example of the onClick event listener:

function example(){
  return <button onClick={}>Hello<button>
}

Create a callback function

function example(){
  function eventHandler(){
    console.log("This is the callback function!")
  }
  return <button onClick={}
}

Pass in the callback function as a function reference

function example(){
  function eventHandler(){
    console.log("This is the callback function!")
  }
  return <button onClick={eventHandler}
}

onClick Event Listener Example

Add the onClick event listener to the element of interest.
Create a callback function that handles the event.
Pass it as a function reference to the event listener.

function example(){
  //create a callback function 
  function handleClick(){
    console.log("this function handles the click event")
  }
  //add the event listener to the element of interest
  //pass in the callback function
  return <button onClick={handleClick}><button>
}

onSubmit Event Listener Example

The onSubmit event listener is used for forms. The onSubmit event listener must be added to the form tag. Additionally, always add e.preventDefault() to prevent any unwanted default behavior.

In order to use the onSubmit event listener:

Add the onSubmit event listener to the element of interest.
Create a callback function that handles the event.
Pass it as a function reference to the event listener.

for example:

function form(){
  //create a callback function that handles the event listener
  function handleSubmit(e){
    //add e.preventDefault()
    e.preventDefault()
    console.log(this function handles the form submit event")
  }

  return(
    //add the event listener onSubmit to the `<form>` tag
    //pass in the callback function as a function reference
    <form onSubmit={handleSubmit}>
      <input type="text" name="name">
    <form>
   )
}

onChange Event Listener Example

The onChange event listener is useful in handling changes to input fields.

Add the onChange event listener to the element of interest.
Create a callback function that handles the event.
Pass it as a function reference to the event listener.

for example:

function form(){
  //create a callback function that handles the event
  function handleChange(){
    console.log("This function handles the onChange event!")}

  return(
    //add the event listener onChange to the `<input>` tag
    <form>
      <input type="text" name="name" onChange={handleChange}>
    <form>
  )
}

Conclusion

In conclusion, creating an event listener in React is much easier in comparison to JavaScript. One can add an event listener in 3 easy steps: 1. Add the event listener to the element of interest 2. Create a callback function 3. Pass the callback function as a function reference to the event listener.

For more information, visit:
Event Handling
React Events

JavaScript Events: Simplified

ArmandeepKaur — Fri, 14 Oct 2022 17:31:49 +0000

When I started learning JavaScript, The first concept that I really struggled with was JavaScript Events. As a result of my experiences with JavaScript events, I wanted to create a blog simplifying JavaScript Events, how to listen for them, and how to respond to them.

What are JavaScript Events?

To begin, JavaScript is able to listen for events happening in the browser. These events can include but are not limited to Keydown, Form Submission, Mouse Click, Mouseover, on-change, mouse-enter, focus, blur etc. In order to listen for these events, and to respond to these events, one can utilize the addEventListener() method.

addEventListener() Method

.addEventListener() is a method in JavaScript that can be used to listen for and respond to events happening in the browser. The method takes in two arguments:

Argument 1: the type of the event we are listening for (eg. "click", "submit" etc.)

Argument 2: A callback function that responds to the specified event in a specified manner.

Steps to using .addEventListener()

In order to use .addEventListener() we must:

Grab the element that we want to add an event listener to and save the element as a reference in a variable.
Add the .addEventListener() method to the variable containing the element of interest.
Pass the event type and a callback function as the arguments to the addEventListener() method

Step 1: Grab the Element of Interest

The following methods can be used to grab the element of interest:

document.getElementById()

Note: This method will return the element with the requested Id. This method is the most specific method since all Ids are unique to their own elements.

example:

//the HTML Element we want to add an event to
<button id="button" className="btn"></button>

//Using, document.getElementById(),I entered the id of the button in the parenthesis, added quotations marks to the id, and saved the element to a variable called buttonById
const buttonById = document.getElementById("button")

document.getElementsByClassName()

Note: This method will return a list of elements with the specified class name. This method is not recommended when we are looking to grab a specific element.

//the HTML element we would like to grab
<button id="button" className="btn"></button>

//used document.getElementByClassName, inserted the className into the parenthesis, and assigned the element to a variables called buttonByClass
const buttonByClass = document.getElementsByClassName("btn")

document.getElementsByTagName()

Note: This method will return all elements with the specified Tag Name. This method is the least specific and is not recommended when we are looking to grab one specific element.

//the HTML element we would like to grab
<button id="button" className="btn"></button>

//used document.getElementsByTagName(), passed the Tag Name surrounded by quotation marks, and assigned to a variable called buttonByTag
const buttonByTag = document.getElementsByTagName("button")

Other methods include CSS Selectors such as:
document.querySelector(selector)

document.querySelector will return the first element that matches the requested selector. querySelector can be used to grab an element by its Id, Class Name, and Tag Name.

If we look at the following HTML elements

<button id="button1" className="btn">button 1</button>
<button id="button2" className="btn">button 2</button>
<button id="button3" className="btn">button 3</button>

To grab the first element by its id using querySelector, we need to pass a # into the parenthesis followed by its Id.

const buttonQueryId = document.querySelector("#button")

To grab the first element by its Class Name using querySelector, we need to pass a . into the parenthesis followed by its className.

const buttonQueryClass = document.querySelector(".btn")

To grab the first element by its Tag Name using querySelector, we need to simply pass the Tag Name with quotation marks.

const buttonQueryTag = document.querySelector("button")

document.querySelectorAll(selector)

document.querySelectorAll() will return a nodeList of the elements that match the criteria of the selector. The method grabs elements by their Class Name and Tag Name.

For example,

<button id="button1" className="btn">button 1</button>
<button id="button2" className="btn">button 2</button>
<button id="button3" className="btn">button 3</button>

to grab elements by their class:
const buttonsClass = document.querySelectorAll(".btn")

to grab elements by their div:
const buttonsTagName = document.querySelectorAll("button")

To learn more about the above two methods, visit this website.

Step 2: Add the addEventListener() method

We can add the .addEventListener() method to the variable names that contain our HTML Element/s of interest.

example:

//.addEventListener() to a button we grabbed using getElementById and saved to a variables called buttonById

buttonById.addEventListener()

//.addEventListener() to a button we grabbed using querySelector and saved to a variable called buttonQueryClass

buttonQueryClass.addEventListener()

//.addEventListener to buttons we grabbed using querySelectorAll and saved to a variable called buttonsTagName 

buttonsTagName.addEventListener()

Step 3: Pass in the arguments

Now we can move on to the final step, which is passing in the arguments.

Click Event

For example, if we want add a click event to our button with a call back function that will console.log "hello" for every click, we could write:

//the HTML Element we want to click
<button id="button" className="btn"></button>

//step 1: grab the element

const buttonById = document.getElementById("button")

//step 2: add the .addEventListener() method 
//step 3: pass in event type and callback function as arguments

buttonById.addEventListener("click", myCallbackFunction) 

//the callback function that will console.log "hello"

function myCallbackFunction(){
   console.log("hello")
}

Form Submission

If we want to add an event listener to a form which will console.log "hello" every time it is submitted:

We must add an eventListener to the
element instead of the button element
We must use "submit" as our event type
We must add event.preventDefault() in the callback function to prevent any default behavior of the form

For example,

//basic HTML form 
<form id="form">
  <label for="username">Username</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Enter Username</button>
</form>

//step1: grab the element

const form = document.getElementById("form")

//step2:add .addEventListener() method+ pass in the arguments

form.addEventListener("submit", myCallbackFunction)

function myCallbackFunction(event){
   event.preventDefault()
   console.log("hello")
}

Conclusion

I hope this serves as a beginner's guide to understanding the very basics of JavaScript events. JavaScript events can get more complex, especially the callback functions. I kept the callback functions very basic -console.log("hello")- due to this complexity. Callback functions deserve their own separate blogs or two!

To learn more about Callback functions, visit:
What are Callbacks in JS and How to Use Them
event.target JavaScript

To learn more about event types, visit:
Form Submission
Mouseover Event
Keydown
Change Event
Keyup

References:
Finding HTML Elements
querySelector Method
JavaScript Events