Forem: Mohammad Hossain

Recursive rendering in React

Mohammad Hossain — Fri, 18 Nov 2022 19:08:46 +0000

What is Recursion?

In computer science, recursion is a method of solving a computational problem where the solution depends on solutions to more minor instances of the same problem. Recursion solves such recursive problems by using functions that call themselves from within their own code.

For example, a factorial(5) is 5*4*3*2*1. If we want to solve it recursively, we can say a factorial(5) is 5 times the factorial(4): 5*4!

And factorial(4) is 4*3! until we reach the number 1.

5!
    5 * 4!
        5 * 4 * 3!
            5 * 4 * 3 * 2!
                5 * 4 * 3 * 2 * 1

We eventually reach the same solution which is 5 * 4 * 3 * 2 * 1. If we have to write a function for factorial we can write the following:

function factorial(n){
   return n * factorial(n ‑ 1);
}

If we invoke the factorial() function and pass an integer n, it will keep calling the factorial() * n, and in each invocation, n will be n-1.

However, we have a serious problem. We did not tell our function when to stop and therefore our factorial() function will end up in an infinite loop and we will never reach the solution. Telling the function when to terminate is called a base case. Base case is always required when defining a recursive function. The base case in this case would be n = 1. Since factorials of numbers that are less than 1 don't make any sense, we stop at the number 1 and return the factorial of 1 (which is 1).

function factorial(n){
    if(n === 1)
        return 1;
    else
        return n * factorial(n ‑ 1);
}

Now if we pass 5 as n: factorial(5)

How do we handle recursion in React?

What would a recursive call look like in react? Let’s say you are making an API call and the response data has children that is also the same key and value format.

{
  text: "some text",
  data: {
      text: "some text",
      data: {
        text: "some text",
        data: {
          text: "No more data here"
        }
    }
  }
}

As you can see the object data is continuously stacked on top of another data object. We can have indefinite amount of stacked data. Using recursion we will render the data.

Say that our component is called <RecursivelyRenderComponent> which takes the data object as a prop and will render the text inside the data object.

function RecursivelyRenderComponent({ data }) {
  return (
    <div>
      <h1>{data.text}</h1>
    </div>
  );
}

This will return the first instance of the text. But what about the nested ones?

We need to recursively return the same component within itself for the amount of time we encounter data.

Our recursion will look like:

Base case: If data does’t exist we stop recursion
Recursion rule: If data exist render <RecursivelyRenderComponent> again and pass data as a prop.

Our component will look like this:

function RecursivelyRenderComponent({ data }) {
  if (data.data)
    return (
      <div>
        <h1>{data.text}</h1>
        <RecursivelyRenderComponent
          data={data.data}
        ></RecursivelyRenderComponent> {/*calling the same component recursivly */}
      </div>
    );
  else return <h1>{data.text}</h1>;
}

We can simplify it more using ternary:

function RecursivelyRenderComponent({ data }) {
  return (
    <div>
      <h1>{data.text}</h1>
      {data.data ? (
        <RecursivelyRenderComponent
          data={data.data}
        ></RecursivelyRenderComponent> {/*calling the same component recursivly */}
      ) : null}
    </div>
  );
}

And our DOM will look like this:

Let’s analyze a real-life scenario

This is a thread from a random Reddit post. As seen in the picture a Reddit post can have multiple replies, and the replies can also have multiple replies. The replies to a post can be heavily nested. In this example, each new thread has a space and a line indicating the parent reply. Similar to our previous example of <RecursivelyRenderComponent/>, this type of data could be handled using recursion.

How do we render reddit style replies?

Sample response data:

const data = [
  {
    post: {
      id: 1,
      author: "goodKitty",
      title: "A day in a life of a kitten!",
      text: "Claws in your leg the best thing in the universe is a cardboard box lie on your belly and purr when you are asleep so chase ball of string yet i like big cats and i can not lie wake up human for food at 4am. Ask for petting stand with legs in litter box, but poop outside yet climb leg, yet favor packaging over toy. Stare at wall turn and meow stare at wall some more meow again continue staring the dog smells bad miaow then turn around and show you my bum and cry louder at reflection yet missing until dinner time lasers are tiny mice.",
      reply: [
        {
          author: "KittyLord",
          text: "Love it!",
          reply: [
            {
              author: "Hungrycat22",
              text: "Meow To!",
              reply: [
                {
                  author: "catnipDealer",
                  text: "purrrrrrrr!!",
                  reply: [
                    {
                      author: "KittyLord",
                      text: "Purrfect!",
                    },
                  ],
                },
              ],
            },
            {
              author: "Hungrycat22",
              text: "Mice!!!",
            },
          ],
        },

        {
          author: "CatM0m",
          text: "I have a cat!",
          reply: [
            {
              author: "dirtyKitten",
              text: "I have 2 cats",
              reply: [
                {
                  author: "CatM0m",
                  text: "Hahahaha",
                },
              ],
            },
          ],
        },
      ],
    },
  },
]

This is similar data to a Reddit post. We have posts, which contains replies, and the replies contain more replies. The replies should be rendered under the post and should keep nesting under other replies until there are no replies in the data.

function Reply({ reply }) {
  return (
    <div>
        {reply.author} replied
      </p>
        {reply.text}
      </p>
      <div>
         {reply.reply
           ? reply.reply.map((reply) => <Reply reply={reply}></Reply>)
           : null}
      </div>
    </div>
  );
}

Our <Reply/> component takes a prop reply, it renders the author and text of the reply and check if the data has any reply inside. If there is a reply field, we map through it (since reply returns an array) and re-render the <Reply/> for each element of the array and pass the element as a prop: reply.reply.map((reply) => <Reply reply={reply}></Reply>).

If there is no reply we stop the recursion and that’s our base case.

Adding some forum style spacing to it.

function Reply({ reply }) {
  return (
    <div>
      <p
        style={{
          marginLeft: "10px",
          textDecoration: "underline",
          color: "grey",
          fontStyle: "italic",
        }}
      > 
        {reply.author} replied
      </p>
      <p
        style={{
          marginLeft: "10px",
                  backgroundColor: "beige",
          padding: '20px'
        }}
      >
        {reply.text}
      </p>
      <div className="forum">
        <div className="break"></div>
        <div>
          {reply.reply
            ? reply.reply.map((reply) => <Reply reply={reply}></Reply>)
            : null}
        </div>
      </div>
    </div>
  );
}

Css:

.forum{
  display: flex;
  flex-direction: row;
}

.break{  /* this is the line */           
  margin-left: 40px;
  background-color: cadetblue;
  width: 2px;
}

Let’s also render the post data in our <App/> component and render the replies.

function App() {
  return (
    <div className="App">
      <h1>{data[0].post.title}</h1>
      <p>By: {data[0].post.author}</p>
      <p>{data[0].post.text}</p>

      {data[0].post.reply
        ? data[0].post.reply.map((reply) => <Reply reply={reply}></Reply>)
        : null} {/* we are mapping through the direct replies to the post */}
    </div>
  );
}

And finally our DOM will look like:

It’s as simple as that. This will work for indefinite amount of nested data without a problem.

A Complete Guide to Rails Authentication Using JWT

Mohammad Hossain — Fri, 04 Nov 2022 15:42:30 +0000

Rails JWT authentication

A JSON web token(JWT) is a JSON Object that is used to securely transfer information between two parties. JWT is widely used for securely authenticate and authorize user from the client in a REST API. In this post, I will go over step by step how to implement authentication using JWT in a rails API.

The gems we need:



gem 'bcrypt', '~> 3.1', '>= 3.1.12’

gem 'jwt', '~> 2.5’

gem 'rack-cors'

gem 'active_model_serializers', '~> 0.10.12’

After adding the gemfile run bundle install

Create the routes



  post "/users", to: "users#create"
  get "/me", to: "users#me"
  post "/auth/login", to: "auth#login"

We will sign up new users making a POST request to /users. An existing user can log in by making a post request to “/auth/login” and a user can access user data by making a GET request to “/me”. We need 3 routes to the least, more routes can be added later as we go.

Add CORS



Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Cross-Origin Resource Sharing (CORS) is a middleware that will accept requests to the API from only one client URL. The client URL that we want to allow to make a request will go into the origins. We set * origins, for now, that will allow anyone to make requests to our API for now.

Create the user model:



rails g model user username password_digest bio --no-test-framework

Add the has_secure_password macro in the user model and validation for the username:



class User < ApplicationRecord
    has_secure_password
    validates :username, uniqueness: true
end

has_secure_password is a bcrypt method that encrypts the password for each user. For this method to work we add password_digest field to our database table. However, when we make a post request to our server we send password. Bcrypt handles the rest for us.

Example request:



fetch('URL/auth/login',{
method: POST,
headers: {
    'Content-type': 'application/json'
},
body: {
    username: 'randomUserName',
    password: 'ask^dsk34'
})

Adding JWT to our API

JSON Web Tokens are an open, industry-standard RFC 7519 method for representing claims securely between two parties. A JWT token looks like this: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Source - JWT.io

It has three parts. The first part is the header that contain the algorithm and token type. The second part is the payload, the data we want to store in the token. The third part is the signature, which contains the secret key. We are going to generate JWT tokens from the application_controller.rb



class ApplicationController < ActionController::API

    def encode_token(payload)
        JWT.encode(payload, 'hellomars1211') 
    end

    def decoded_token
        header = request.headers['Authorization']
        if header
            token = header.split(" ")[1]
            begin
                JWT.decode(token, 'hellomars1211')
            rescue JWT::DecodeError
                nil
            end
        end
    end

end

The encode_token method takes the payload as an argument. We will pass the user id as a payload. Then we call the JWT.encode(payload, 'hellomars1211') method to encode our token. Our payload will be the user id which then we can use to find the correct user. Notice that we pass a string: 'hellomars1211', along with the payload as an argument, which will be our secret key, that we’ll also use to decode our token. A secret key can be any combination of chars, symbols, numbers, etc. We will call the decoded_token method to decode a JWT token.

Whenever we make a request to a protected route or resource we pass the JWT token along with our data in the request, in the Authorization header using the Bearer schema. An example request:



fetch("URL/me", {
  method: "GET",
  headers: {
    Authorization: `Bearer <token>`,
  },
});

We access the token from the header and decode the token using JWT.decode(token, 'hellomars1211', true, algorithm: 'HS256') method, we also need to pass the secret key in order to decode the token.

We can now access the user.id from the decoded token. We will create a method current_user that takes the user id from the decoded token and find the user using the same user id. This will give us the user that is currently logged in. We will create another method authorized to check if we have a current_user that is logged in.



def current_user 
    if decoded_token
        user_id = decoded_token[0]['user_id']
        @user = User.find_by(id: user_id)
    end
end

def authorized
    unless !!current_user
    render json: { message: 'Please log in' }, status: :unauthorized
    end
end

Finally we will add a before_action rule to the controller that will call the authorized method before doing anything and check if the user is logged in. For any unauthorized request we will render a message: Please log in. This is what our application_controller will look like:



*app/controllers/application_controller.rb*

class ApplicationController < ActionController::API
    before_action :authorized

    def encode_token(payload)
        JWT.encode(payload, 'hellomars1211') 
    end

    def decoded_token
        header = request.headers['Authorization']
        if header
            token = header.split(" ")[1]
            begin
                JWT.decode(token, 'hellomars1211', true, algorithm: 'HS256')
            rescue JWT::DecodeError
                nil
            end
        end
    end

    def current_user 
        if decoded_token
            user_id = decoded_token[0]['user_id']
            @user = User.find_by(id: user_id)
        end
    end

    def authorized
        unless !!current_user
        render json: { message: 'Please log in' }, status: :unauthorized
        end
    end

end

Create the users_controller



rails g controller users

In the user controller, we will create an action for creating or signing up a new user. We will also create a token if a user signs up with valid data and send the token along with the response, this will make the user to be logged in right away when they sign up for our app. We will handle the sign up function in the create method inside the users_controller.rb.



class UsersController < ApplicationController
    rescue_from ActiveRecord::RecordInvalid, with: :handle_invalid_record

    def create 
        user = User.create!(user_params)
        @token = encode_token(user_id: user.id)
        render json: {
            user: UserSerializer.new(user), 
            token: @token
        }, status: :created
    end

    private

    def user_params 
        params.permit(:username, :password, :bio)
    end

    def handle_invalid_record(e)
            render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
    end
end

We serialized our data to only return the user id, username, and bio. It wouldn’t make sense for us to return the password to the client and also the password is encrypted in our database.



class UserSerializer < ActiveModel::Serializer
  attributes :id, :username, :bio
end

Now, remember when we added the before_action rule to the application_controller? That will prevent us creating a new user if we are logged in. But that doesn’t make any sense. How can we log in when we didn’t even sign up yet or how can we log in when we can’t create a new user at all? Well, in order for us to bypass authorization we will add a skip_before_action to the user controller and make exception for only the create method. This will allow us to skip the authorization if we want to sign up a new user.

Also, we will create method me to get the profile of the user that will return the current_user that we set in the application_controller.



*app/controllers/users_controller.rb*

class UsersController < ApplicationController
    skip_before_action :authorized, only: [:create]
    rescue_from ActiveRecord::RecordInvalid, with: :handle_invalid_record

    def create 
        user = User.create!(user_params)
        @token = encode_token(user_id: user.id)
        render json: {
            user: UserSerializer.new(user), 
            token: @token
        }, status: :created
    end

    def me 
        render json: current_user, status: :ok
    end

    private

    def user_params 
        params.permit(:username, :password, :bio)
    end

    def handle_invalid_record(e)
            render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
    end
end

Our sign-up is ready. Let’s try making some request it in the postman:

Let’s gooooooooooo!! Oh, wait! What else are we missing? The most important part of the auth: the LOGIN!

To implement login we will create a new controller and we will call it auth_controller.



rails g controller auth



*app/controllers/auth_controller.rb*

class AuthController < ApplicationController

    skip_before_action :authorized, only: [:login]
    rescue_from ActiveRecord::RecordNotFound, with: :handle_record_not_found

    def login 
        @user = User.find_by!(username: login_params[:username])
        if @user.authenticate(login_params[:password])
            @token = encode_token(user_id: @user.id)
            render json: {
                user: UserSerializer.new(@user),
                token: @token
            }, status: :accepted
        else
            render json: {message: 'Incorrect password'}, status: :unauthorized
        end

    end

    private 

    def login_params 
        params.permit(:username, :password)
    end

    def handle_record_not_found(e)
        render json: { message: "User doesn't exist" }, status: :unauthorized
    end
end

In the login method we are first finding the user with the username, if the user is not found we return an error message: "User doesn't exist". After we find the user we authenticate the user with the password using bcrypt’s authenticate method. Once the authentication is complete we create a token for the user and return the user along with token. In case the authentication is failed we return an error message: 'Incorrect password'. We also added the skip_before_action :authorized, only: [:login] here just like for the create method in the users controller.

Let’s make some calls in postman:

Our auth is complete.

User authentication is 3 fold. At first we validate the data, then we authenticate the user with correct username, and password, and finally we authorize the user.

Validation—————>Authentication————>Authorization

We cannot build a logout function if we authenticate using JWT. The JWT library doesn’t come with a destroy method for the token. So, how can we log out? That has to be handled in the client. If we have a react client, we can store the token when we login in the localStorage and remove it from the localStorage if we want to log out.



fetch("http://localhost:3000/auth/login/", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        username: username,
        password: password,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        localStorage.setItem("jwt", data.jwt);
      })

And we simply remove the jwt token from the localStorage to logout:



localStorage.removeItem("jwt")