DEV Community: Ananna Dristy

Facing problem in starting Supabase on MacOs?

Ananna Dristy — Thu, 29 Jun 2023 04:50:52 +0000

Supabase is an open-source platform that provides a suite of tools and services to simplify the process of building and managing backend infrastructure for web and mobile applications. It combines the functionalities of a real-time database (PostgreSQL), authentication, and authorization system, and RESTful API generation.

The Supabase CLI provides tools to develop the project locally and deploy to the Supabase Platform.
To run Supabase locally, we use the commands:
supabase init
supabase start

The command supabase start requires Docker Desktop to be running because it utilizes Docker to spin up a local instance of the Supabase server. Docker is a popular containerization platform that allows us to package applications and their dependencies into isolated container.

When you give the command in the terminal specially in case of macos,

> supabase start

you may get an error even after you have your Docker Desktop running,

Error: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
  in github.com/supabase/cli/internal/utils.AssertDockerIsRunning:48
  in github.com/supabase/cli/internal/start.Run:39
Try rerunning the command with --debug to troubleshoot the error.

The solution of this problem is simple. Just don't get overwhelmed with the installation process. Install docker using homebrew.

Steps are:

Open a terminal on your macOS system.
Ensure that Homebrew is installed and up to date by running the following command:

brew update

Once Homebrew is updated, you can proceed to install Docker by running the following command:

brew install --cask docker

After the installation is complete, you can launch Docker by either searching for it in your Applications folder or by running the following command in the terminal:

open /Applications/Docker.app

Docker will start up.

Then, start giving all the supabase commands in your terminal:

Initialize the Supabase login process:

supabase login

Then you need to provide your access token by generating it from this site.
Initialize a new Supabase project:

supabase init

Start the Supabase CLI:

supabase start

Then you may get the above error of Cannot connect to the Docker daemon
Just you need to add a command after that to set the path of docker.sock

export DOCKER_HOST=unix://"$HOME/.docker/run/docker.sock"

And you will be good to go!

Bridge Between Lifecycle Methods & Hooks

Ananna Dristy — Sun, 23 Apr 2023 07:39:26 +0000

React Hooks are more popular to us because of simplicity, performance, and scalability of functional components. For a better understanding of hooks, we gotta know the lifecycle of the react components. We will venture through the lifecycle of react component to reach our destination hooks. The lifecycle of a react component refers to a series of methods that are called in a specific order during the component's creation and update. There are three main phases in the lifecycle of a react component:

Mounting: This phase happens when a component is first created and inserted into the DOM.
Updating: This phase happens when a component's state or props change.
Unmounting: This phase happens when a component is removed from the DOM.

All these phases have some methods that allow us to control what happens at various points in the component's lifecycle. All these stuffs are technically belong to the class based components. We can't use these methods of lifecycle in functional components. Does this mean we can't have lifecycle in functional component?

The answer is No. We can have lifecycle in functional components using certain hooks. In React 16.8, Hooks have been introduced. Now we can use abstracted versions of these lifecycle methods in functional component. But the question remains how was the versions of react before React 16.8? All the versions before React 16.8 had 2 types of components based on statefulness.

Class-based stateful component
Stateless functional component

Functional components in React were originally used only for rendering a view or UI elements. Prior to React 16.8, functional components were stateless and could not manage their own state. They were simply JavaScript functions that took in props and returned JSX elements. React Hooks were introduced in React 16.8 to bridge the gap between functional and class components, providing state management and lifecycle methods in functional components without the need for classes.

There are a number of methods in each phases. If we jot it down together in a picture:

We can write this down in the following way:

Mounting:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Updating:

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Unmounting:

componentWillUnmount()

In addition to these methods, there are a few other methods that can be used to handle errors and update the state of the component.

In order to handle all these methods in functional component, there are some equivalent lifecycle hooks. The built in react hooks are:

useState(): add state to your functional components. It takes an initial state value as an argument and returns an array containing the current state and a function to update the state.
useEffect(): perform side effects in the functional components. It takes takes two arguments: the first argument is a callback function that performs the side effect, and the second argument is an optional array of dependencies that tells react when the effect needs to be re-run.
useContext(): access a React context in the functional components. It takes a context object as an argument and returns the current context value.
useRef(): create a ref in the functional components. It returns a mutable object with a current property that can be used to store any value.
useMemo(): memoize the result of a function so that it is not recalculated on every render. It takes two arguments: a function that returns a value, and an array of dependencies and returns the memoized value.
useCallback(): same as useMemo hook but returns a memoized function instead of value.

and many more.

It's important to know that while React Hooks provide equivalent functionality to lifecycle methods, they often do so in a different way. This means that we may need to change our approach to writing components when using React Hooks instead of class components.

The equivalence can be shown as:

Many other methods can be implemented using 2 hooks together; like getDerivedStateFromProps() can be achieved using useState() and useEffect(), getSnapshotBeforeUpdate() can be achieved using useState() and useLayoutEffect() and so on.

Now we will walk through one by one.

UseState()

State is a key concept in React which represents the internal data of a component. It can be changed over time by the component itself, either in response to user actions or other events. By updating the state of a component, the component can re-render itself and update its appearance or behavior based on the new data.

First of all, we are gonna write a class based component that defines a stateful counter.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };

    this.setCount = this.setCount.bind(this);
  }

  setCount() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <button onClick={this.setCount}>Click me</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default App;

In this example, the component is defined using the class keyword and extends the React.component class provided by the React library. The component's state is initialized in the constructor method with a count property set to 0. The count state property is initialized to 0 in the component's constructor. The current value of count can be accessed using this.state.count in the render method.

To update the state, we can use the setState method provided by React. For example, to increment the count property by 1, we would call this.setState({ count: this.state.count + 1 }) inside an event handler.

The same thing is handled in functional component using useState hook.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(prevCount => prevCount + 1);  
}

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

In the previous class component example, state was managed using the component's constructor and setState method.
In the functional component example, the useState hook is used to declare the count state variable and the setCount updater function. This hook simplifies state management by providing a convenient way to declare and update state in functional components.

The useState hook takes an initial value as an argument and returns an array with two values: the current state value and the updater function. In the example, the initial value for count is 0.

When the handleClick function is called, it updates the count state value by calling the setCount function with the new count value. This triggers a re-render of the component with the updated count value.

UseEffect()

UseEffect hook replicates the behaviour of 3 methods of react lifecycle: componentDidMount, componentDidUpdate and componentWillUnmount. First we are gonna look at the class based component.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    console.log("Component mounted");
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.count !== prevState.count || this.props !== prevProps) {
      console.log("Component updated");
    }
  }

  componentWillUnmount() {
    console.log("Component unmounted");
  }

  handleClick() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default App;

In this example, the componentDidMount method runs when the component is mounted (i.e., after the first render). We log a message to the console to indicate that the component has mounted.

The componentDidUpdate method runs whenever the component is updated. We check if the count state variable has changed from the previous state or if the props have changed since the previous props, and if either condition is true, we log a message to the console to indicate that the component has been updated.

The componentWillUnmount method runs when the component is unmounted. We log a message to the console to indicate that the component has been unmounted.

Finally, we have a handleClick function that updates the count state variable when the button is clicked. This triggers a re-render of the component, which causes the componentDidUpdate method to run if the count state variable has changed.

Now, in order to achieve this same behaviour as class based component, we will be using useEffect hook in functional component.

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Component mounted");

    return () => {
      console.log("Component unmounted");
    };
  }, []);

  useEffect(() => {
    console.log("Count updated");
  }, [count]);

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

In this example, we're using two useEffect hooks to replicate the behavior of the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods.

The first useEffect hook runs when the component is mounted (i.e., after the first render). We log a message to the console to indicate that the component has mounted. This useEffect hook also returns a function that will be called when the component is unmounted. In this case, we're logging a message to the console to indicate that the component has been unmounted. The empty dependency array [] ensures that this effect only runs once, when the component mounts.

The second useEffect hook runs whenever the count state variable changes (i.e., after each update). We log a message to the console to indicate that the count has been updated. The count dependency array [count] ensures that this effect only runs when the count state variable changes.

Finally, we have a handleClick function that updates the count state variable when the button is clicked. This triggers a re-render of the component, which causes the second useEffect hook to run if the count state variable has changed.

UseMemo()

UseMemo hook works like shouldComponentUpdate() method which is mainly used to memorize a value so that it doesn't run in every render. The following shows a example using shouldComponentUpdate() in class based component.

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count1: 0,
      count2: 0,
      expensiveValue: this.expensiveCalculation(0)
    };
    this.handleClick1 = this.handleClick1.bind(this);
    this.handleClick2 = this.handleClick2.bind(this);
    this.expensiveCalculation = this.expensiveCalculation.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (
      nextState.count1 !== this.state.count1 ||
      nextState.count2 !== this.state.count2
    );
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count1 !== this.state.count1) {
      this.setState({
        expensiveValue: this.expensiveCalculation(this.state.count1)
      });
    }
  }

  handleClick1() {
    this.setState((prevState) => ({
      count1: prevState.count1 + 1
    }));
  }

  handleClick2() {
    this.setState((prevState) => ({
      count2: prevState.count2 + 1
    }));
  }

  expensiveCalculation(num) {
    console.log("Calculating...");
    for (let i = 0; i < 1000000000; i++) {
      num += 1;
    }
    return num;
  }

  render() {
    const { count1, count2, expensiveValue } = this.state;
    return (
      <div>
        <div>
          <h2>Counter 1: {count1}</h2>
          <button onClick={this.handleClick1}>Add Me</button>
        </div>
        <div>
          <h2>Counter 2: {count2}</h2>
          <button onClick={this.handleClick2}>Add Me</button>
        </div>
        <div>
          <h2>Expensive Value:</h2>
          {expensiveValue}
        </div>
      </div>
    );
  }
}

export default App;

In this example, the expensiveCalculation function performs a time-consuming calculation, simulating a case where the value is difficult to calculate and requires significant resources. So, we're using the shouldComponentUpdate method to optimize rendering, and only re-calculating the expensive value when the count1 state changes.

The shouldComponentUpdate method compares the current count1 state with the next count1 state, and only allows the function expensiveCalculation to run if they are different. This avoids unnecessary calculating when the count1 state has not changed.

We're also using componentDidUpdate lifecycle methods to perform the expensive calculation and update the state accordingly. We only perform this calculation when the count1 state changes.

Same optimization is done using useMemo hook. The following shows the transformed version into functional component:

import React from "react";
import { useState, useMemo } from "react";

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const expensiveValue = useMemo(() => expensiveCalculation(count1), [count1]);

  function handleClick1() {
    setCount1((prevCount) => prevCount + 1);
  }

  function handleClick2() {
    setCount2((prevCount) => prevCount + 1);
  }

  function expensiveCalculation(num) {
    console.log("Calculating...");
    for (let i = 0; i < 1000000000; i++) {
      num += 1;
    }
    return num;
  }

  return (
    <div>
      <div>
        <h2>Counter 1: {count1}</h2>
        <button onClick={handleClick1}>Add Me</button>
      </div>
      <div>
        <h2>Counter 2: {count2}</h2>
        <button onClick={handleClick2}>Add Me</button>
      </div>
      <div>
        <h2>Expensive Value:</h2>
{expensiveValue}
      </div>
    </div>
  );
}

export default App;

Here, the useMemo hook is used to calculate the expensiveCalculation only when count1 changes. It takes two arguments: a function that returns the value to be memoized (in this case, the expensiveCalculation function) and an array of dependencies (in this case, [count1]). Whenever count1 changes, the function expensiveCalculation is re-executed and the is expensiveValue updated.

This means that if the count1 state hasn't changed, the cached result of expensiveCalculation will be used instead of recalculating it.

We can see the same effect of optimization in the console log. The expensiveCalculation function is only recalculated when the count state changes, and is not recalculated when the component re-renders due to other state changes.

In this way all other hooks somehow replicate the methods of the lifecycle that are prevailed in class based components fulfilling all three phases. The introduction of hooks has eliminated a lot of verbosity in a class-based component and made the code easier and simpler to write and read.

Using UseEffect Hook: Avoiding Excessive Re-rendering

Ananna Dristy — Wed, 19 Apr 2023 11:23:25 +0000

React is one of the most popular front-end web development frameworks and has gained widespread adoption since its release in 2013. In React, there are two ways to define a component: class components and functional components. Functional components are widely used now-a-days because they are simpler and more lightweight than class components. To manage states and side effects, hooks are used in functional component which have made our works much easier.

UseEffect is one of the react hooks that allows functional components to perform side effects, such as fetching data or updating the DOM, in response to changes in state or props. But for the beginners, it may be somewhat troublesome. There are some common mistakes while using useEffect in code.

I have assumed that people reading this blog have already used useEffect hooks before. One of the simplest examples for showing useEffect hook is of increasing counter value and displaying the value in the webpage.



import {useEffect, useState} from "react";

function App() {
  const [count, setCount] = useState(0)

  useEffect(()=>
  {
    console.log("Rerendering!")

    setInterval(() => {
      setCount(count+1)
    },1000)
  },[count])

  return (
  <div>Current count is: {count}</div>
  )
}

export default App;

We have used the useState hook to define a state variable called count and a function called setCount which will be used to update the state of count. In this case, the initial value of count is set to 0.

The useEffect hook is used to handle side effects in functional components. In this case, it sets an interval using setInterval to update the count value every 1000ms (1 second). Whenever the count value changes, the useEffect hook is called again due to the dependency array [count], and the component is re-rendered.

You can find the running code here.

After running the code, you will observe some abnormalities in the webpage. You will understand better if you open your console. It have been rendering infinitely. This has happened because the count is updating every second. Since the count is the dependency in our useEffect, it runs the function again and again.

But a question can appear in your mind, why the number of Rendering printed on the console is more than the count. As we already know the function is run when the count is changed. This happens because the setInterval function is asynchronous, it is possible for multiple updates to be scheduled before the component has a chance to re-render. This means that there may be several updates to the count state variable before the component actually re-renders and displays the updated count. This is why you may see more log messages for "Rendering!" than the count updates you observe.

Now, to remove this infinite loop, we will now update the code a bit.



import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Rerendering!");

    setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);
  }, []);

  return <div>Current count is: {count}</div>;
}

export default App;

Here, we pass an empty dependency array [] to the useEffect hook, which means that the effect will only run once on mount and not re-run on updates. We also use a functional update to update the count state variable inside the setInterval function, which ensures that we always have the latest value of count and avoids the infinite loop.
You can see the running code here.

This time the code runs almost perfectly. The re-rendering is seen on the log once or twice. It's supposed to be one. But because your App is wrapped inside React.StrictMode, it renders twice. StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful). So, you may get 2 log messages of Rerendering!

Now, it is the time for making this piece of code perfect as we have said the previous one was almost perfect. The best practice of using useEffect is with a cleanup function.



import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Rerendering!");

    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return <div>Current count is: {count}</div>;
}

export default App;

In this code, the clearInterval function is called inside the cleanup function that is returned from the useEffect hook. You can find the running code here.

The useEffect hook sets an interval using the setInterval function, which repeatedly updates the count state variable. Without a cleanup function, the interval would continue running even after the component is unmounted, leading to potential memory leaks and performance issues. The cleanup function ensures that the interval is cleared when the component is unmounted or when the count state variable changes and the effect is re-run.

Hope that now you all can write useEffect hooks without any confusion of excessive re-rendering. This is all for now. For any enquiries, let me know.

Hasura Custom Authentication Using JWT

Ananna Dristy — Wed, 29 Jun 2022 15:31:05 +0000

Hasura, as in Hasura GraphQL engine is a very popular web application that helps in building API's 10 times faster than before. It has built in authorization and caching; and gives instant realtime GraphQL APIs on a Postgres database.

Hasura supports two modes of authentication configuration.

Using webhook
Using JWT token

Today I will be talking about authentication using JWT. Before that lets talk about JWT.

JWT means JSON Web Token. It is mainly used to identify an authenticated user and share information between two parties, like client and server. It contains a JSON object which bears public information but only can be verified by the signer who originally created the token by a secret key.

JWT has mainly 3 parts:

Header:
It contains the signing algorithm such as SHA256, RSA and the type of the token which is JWT

{
    "alg": "HS256",
    "typ": "JWT"
}

Payload:
It contains the claims and the data to be shared. Claims are statements about an entity (i.e user).

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Signature:
It is generated by the using the algorithm mentioned in the header in encoded header, encoded payload and a secret key together. It is used to verify the information wasn't changed along the way and the authenticity of the sender by the secret key.

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-256-bit-secret

)

Putting all these 3 parts together a token is formed.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

When a user is signed up or logged in, a JWT is returned; which is used to access private routes in a server. In order to access private routes, the client should send the JWT, typically in the Authorization header using the Bearer schema. The server's protected routes will check for a valid JWT in the Authorization header. If the JWT is decoded and verified, the user will be allowed to access protected routes.

The GraphQL engine is configured to use JWT authorization mode to authorize all incoming requests to the Hasura GraphQL engine server. Hasura docs is self sufficient enough to explain the flow of JWT. It has provide a flow diagram:

^{courtesy - hasura.io}

Before using JWT mode, the GraphQL end point has to be secured using admin secret. Otherwise JWT won't be effective. In order to secure the endpoint, HASURA_GRAPHQL_ADMIN_SECRET has to be added on the config vars.

After that, you need to pass HASURA_GRAPHQL_JWT_SECRET on the environment variable. The format would be:

{
 "type": "<standard-JWT-algorithms>",
 "key": "<optional-key-as-string>"
}

where-

Type: Standard JWT algorithms - Hasura supports HS256, HS384, HS512, RS256, RS384, RS512, Ed25519

Key: The secret key used to decode and encode the JWT.
JWT contains several parts. The data one needed to send and the custom claims as mentioned above. By default Hasura engine looks under "https://hasura.io/jwt/claims". 2 things are mandatory to be present in the custom claims:

x-hasura-default-role field: default role of the user
x-hasura-allowed-roles field: an array of allowed roles for the user

The claims in the JWT can have other x-hasura-* fields where their values can only be strings.

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "iat": 1516239022,
  "https://hasura.io/jwt/claims": {
    "x-hasura-allowed-roles": ["editor", "user", "mod"],
    "x-hasura-default-role": "user",
    "x-hasura-user-id": "1234567890",
    "x-hasura-org-id": "123",
    "x-hasura-custom": "custom-value"
  }
}

Now the JWT should be sent by the client to the Hasura GraphQL engine via the Authorization: Bearer header.

One can find many blogs on authentication by JWT using Auth0 or firebase and many more. But there are less resources of doing custom authentication without using any auth server. I am going to lay out the procedure step by step.

We are going to use Next.JS which is a frontend framework in that it is ReactJS, React-DOM with a NextJS development server for server-side rendering so that we wont need separate backend framework. For GraphQL client, we are going to use urql. You can learn more about urql here.

Before going to the coding part, we need to setup our hasura console. We will run our hasura graphql engine on heroku. We need to visit this page and press on the button : Deploy to Heroku. And deploy our app. Now we can find our container in Hasura. We can open our console from there.

In our console, we will create a schema first i.e our database. Then we will create all the tables we need. For authentication, we need a user table containing email, password, id. If you want you can add any number of columns. Then we have to set permission of the tables as per need.

SignUp

We basically do mutation for signing up. In hasura, we make this graphql mutation code:

mutation($email: String!, $password: String!) {
    insert_users_one(object: {
        email: $email,
        password: $password
    }) {
        id
    }
}

It means, we need to pass email and password to the insert_users_one; which will insert the user on the users table and return us the id of that user.

This mutation has to be done on the backend. So we need to use urql/core package for Node.js. To learn about the core and node.js usage, visit here.

We need to first install some packages.

npm install @urql/core graphql
or
yarn add @urql/core graphql

Then we have to create a graphql client file anywhere for setting up the client. Lets say we have named it gql-client.js and contents of the file:

import { createClient } from "@urql/core";

const client = createClient({
    url: "your_graphql_post_url",
    fetchOptions: {
        headers: {
            "content-type": "application/json",
            "x-hasura-admin-secret": "your_admin_secret",
        },
    },
});
export default client;

Your url part will the url present here-

x-hasura-admin-secret will be the HASURA_GRAPHQL_ADMIN_SECRET you have added in the environment vars in order to secure the endpoint.

Next we will create a file under api on the pages folder which will work as our api for signing up.

As we are doing authentication using jwt, we need to generate the token. First we need to set our data we want to send and the claims.

const tokenContents = {
    sub: "id that we will get from mutation",
    "https://hasura.io/jwt/claims": {
        "x-hasura-allowed-roles": ["user"],
        "x-hasura-default-role": "user",
        "x-hasura-user-id": "id that we will get from mutation",
    },
};

You can also add email in the content or can send and anything with x-hasura prefix under claims.

Then we need to produce the token by passing the contents and the key that we added in HASURA_GRAPHQL_JWT_SECRET. For that we will be using the jsowebtoken package. We need to install it first.

npm install jsonwebtoken
or
yarn add jsonwebtoken

Then we have to use the sign method from jsonwebtoken.

const token = jsonwebtoken.sign(tokenContents, "your_jwt_secret_key");

It is not a good idea to keep password of the users in the table. It is certainly a breach in privacy. So, we will hash the password using bcrypt hashing function
We need to install the package.

npm install bcryptjs
or
yarn add bcryptjs

If you want to learn more about bcrypt, check here. We will generate a salt ( a random string that makes the hash unpredictable) and hash that password using the salt.

const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(password, salt);

We need to import client from gql-client.js to use the client for mutation. Then call the mutation function from the client and get our id from the handler.

Here's the full code-

import jsonwebtoken from "jsonwebtoken";
import bcrypt from "bcryptjs";
import client from "your_gql-client_file_path";

const SIGNUP = `
mutation($email: String!, $password: String!) {
insert_users_one(object:
{email: $email, password: $password}){
id}}`;

const generateToken = (id) => {
    const tokenContents = {
        sub: id,
        "https://hasura.io/jwt/claims": {
            "x-hasura-allowed-roles": ["user"],
            "x-hasura-default-role": "user",
            "x-hasura-user-id": id,
        },
    };
    return jsonwebtoken.sign(tokenContents, "your_jwt_secret_key");
};

const handler = async (req, res) => {
    const { email, password } = req.body;

    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(password, salt);

    client
        .mutation(SIGNUP, { email: email, password: hashedPassword })
        .toPromise()
        .then((result) => {
            if (result.error) {
                return res.status(400).json({
                    message: result.error.message,
                });
            } else {
                return res.status(200).json({
                    data: result.data,
                    token: generateToken(
                        result.data.insert_users_one.id.toString()
                    ),
                });
            }
        });
};

export default handler;

Login

query($email: String!) {
    users(where: {
        email: {
            _eq: $email
        }
    }) {
        id,
        password
    }
}

Here we will match the email and return the id and password of the user. Next we will match the hashing the password using bcrypt. For that we are going to use bcrypt.compare function.

The full code is :

import jsonwebtoken from "jsonwebtoken";
import bcrypt from "bcryptjs";
import client from "your_gql-client_file_path";

const LOGIN = `
query($email: String!) {
users(where: {email: {_eq: $email}}) {
id,
password
}}`;

const generateToken = (id) => {
    const tokenContents = {
        sub: id,
        "https://hasura.io/jwt/claims": {
            "x-hasura-allowed-roles": ["user"],
            "x-hasura-default-role": "user",
            "x-hasura-user-id": id,
        },
    };

    return jsonwebtoken.sign(tokenContents, "your_jwt_secret_key");
};

const handler = async (req, res) => {
    const { email, password } = req.body;

    const result = await client.query(LOGIN, { email: email }).toPromise();

    if (result.error) {
        res.status(400).json({
            message: result.error.message,
        });
    }
    if (
        result.data.users.length == 1 &&
        (await bcrypt.compare(password, result.data.users[0].password))
    ) {
        return res.status(200).json({
            data: result.data,
            token: generateToken(result.data.users[0].id),
        });
    } else {
        return res.status(200).json({ message: "Invalid Credentials" });
    }
};

export default handler;

Now just calling these two api from the frontend, we are good to go.

Congrats! Now you can implement authentication without using any auth services.