DEV Community: Momin Mahmud

Using React Hook Forms to make handling forms easier

Momin Mahmud — Tue, 11 Jun 2024 08:11:56 +0000

Introduction

React Hook Form is a powerful library for handling forms in React using hooks. It simplifies form management by reducing boilerplate code and providing efficient validation. In this extended blog post, we’ll explore how to use React Hook Form’s useFieldArray to create dynamic forms with ease.

Prerequisites

Before we begin, make sure you have the following installed:

Node.js
npm or yarn (for package management)

Setting Up the Project
Create a new React project using create-react-app or any other preferred method.
Install React Hook Form:

npm install react-hook-form
# or
yarn add react-hook-form

Creating a Simple Form

Let’s start with a basic form that collects user information. We’ll create a form with fields for name and email. If any field is empty, we’ll display an error message.

import React from 'react';
import { useForm } from 'react-hook-form';

const SimpleForm = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data); // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="name"
        placeholder="Name"
        ref={register({ required: true })}
      />
      {errors.name && <p>Name is required</p>}

      <input
        type="email"
        name="email"
        placeholder="Email"
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}
      />
      {errors.email && <p>Valid email is required</p>}

      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

Adding Dynamic Fields with useFieldArray

Now, let’s enhance our form by allowing users to add multiple ticket details. We’ll use useFieldArray to manage an array of ticket fields dynamically.

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

const DynamicForm = () => {
  const { register, handleSubmit, control } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'tickets',
  });

  const onSubmit = (data) => {
    console.log(data); // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            type="text"
            name={`tickets[${index}].name`}
            placeholder="Ticket Name"
            ref={register()}
          />
          <input
            type="email"
            name={`tickets[${index}].email`}
            placeholder="Ticket Email"
            ref={register()}
          />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '', email: '' })}>
        Add Ticket
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicForm;

Conclusion

In this extended blog post, we covered how to create a simple form using React Hook Form and then extended it to handle dynamic fields with useFieldArray. Feel free to explore more features of React Hook Form to enhance your form-building experience!

Remember to check out the complete example on GitHub and experiment with it yourself. Happy coding! 🚀

Unleashing the Power of GraphQL with React and .NET Hot Chocolate

Momin Mahmud — Sat, 16 Mar 2024 12:55:29 +0000

In the realm of modern web development, the efficiency of data retrieval and manipulation is paramount. As applications become more complex, the need for a robust and flexible data querying system becomes increasingly evident. In this blog post, we'll delve into how we harnessed the combined power of GraphQL, React, and .NET Hot Chocolate to streamline data management in our web application.

Understanding GraphQL Components

Before diving into our implementation, let's grasp the core components of GraphQL with some examples.

Fields

At its essence, GraphQL revolves around querying specific fields on objects. Imagine we're developing an application related to the Star Wars universe. Here's a simple GraphQL query and its corresponding result:


graphql
Copy code
{
  hero {
    name
  }
}
The response would be:

json
Copy code
{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

This simple query demonstrates how GraphQL precisely delivers the requested fields, ensuring that clients receive exactly what they ask for.

Objects and Relationships

GraphQL not only handles scalar fields like strings but also objects and their relationships. For instance, querying for a hero's friends alongside their names:

graphql
{
  hero {
    name
    friends {
      name
    }
  }
}

Resulting in:

json
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {"name": "Luke Skywalker"},
        {"name": "Han Solo"},
        {"name": "Leia Organa"}
      ]
    }
  }
}

Arguments

GraphQL also supports passing arguments to fields, enabling dynamic data retrieval. For example, fetching details about a human character with a specific ID:

graphql

{
  human(id: "1000") {
    name
    height
  }
}

Resulting in:

json
{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

Aliases

To handle scenarios where querying the same field with different arguments is needed, GraphQL employs aliases. This allows renaming the result of a field, preventing conflicts:

graphql
{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

Fragments

Fragments are reusable units in GraphQL, particularly useful for structuring complex queries efficiently. They enable the construction of sets of fields that can be included wherever needed:

graphql
{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

Using GraphQL with React and .NET Hot Chocolate

Now that we understand the fundamental components of GraphQL, let's explore how we integrated it into our web application using React on the frontend and .NET Hot Chocolate on the backend.

Setting up GraphQL Server with .NET Hot Chocolate

We began by setting up a GraphQL server using .NET Hot Chocolate, a GraphQL server implementation for .NET. Hot Chocolate simplifies the process of creating GraphQL APIs in .NET, offering features like schema-first development, automatic resolver generation, and built-in support for subscriptions.

First, we defined our GraphQL schema, specifying the types, queries, mutations, and subscriptions our API would support. With Hot Chocolate's schema-first approach, this was straightforward and intuitive.

Next, we implemented resolvers to handle the execution of GraphQL queries and mutations. These resolvers interact with our existing data sources, fetching and manipulating data as needed before returning it to the client.

Once our GraphQL server was up and running, we could start querying and mutating data using GraphQL queries.

Integrating GraphQL with React

On the front end, we integrated GraphQL into our React application using Apollo Client, a powerful GraphQL client for React applications. Apollo Client simplifies the process of fetching and managing data with GraphQL in React, providing features like caching, query batching, and real-time data updates.

We began by configuring Apollo Client to connect to our GraphQL server. Then, we used Apollo Client's useQuery and useMutation hooks to execute GraphQL queries and mutations respectively.

With Apollo Client, managing data in our React components became straightforward. We could simply define GraphQL queries and mutations using gql templates, execute them using Apollo Client's hooks, and render the results in our components.

Conclusion

In conclusion, leveraging GraphQL with React and .NET Hot Chocolate has significantly improved the efficiency and flexibility of data management in our web application. With GraphQL's intuitive querying capabilities, React's powerful component-based architecture, and .NET Hot Chocolate's seamless GraphQL server implementation, we've been able to build a modern, performant, and scalable web application that meets the needs of our users.

By understanding and harnessing the core components of GraphQL, we've unlocked a new level of data querying and manipulation that has revolutionized our development process. As we continue to iterate and improve our application, GraphQL will remain a cornerstone of our technology stack, enabling us to deliver dynamic and engaging user experiences.

Implementing Stripe Payments in a React App and on Stripe Hosted Page: A Step-by-Step Guide

Momin Mahmud — Thu, 29 Feb 2024 14:39:48 +0000

Introduction:

In this blog post, I will walk you through the process of integrating Stripe payments into a React application. Stripe offers a seamless way to accept payments online, and with their Payment Element and React Stripe.js library, it becomes even easier to implement within your React projects.

Step 1: Set up Stripe

First, you'll need to set up your Stripe account and obtain your publishable key. This key will be used to connect your React application with Stripe's API.

Step 2: Install Dependencies

Using npm or yarn, install the necessary dependencies for integrating Stripe into your React application. This includes @stripe/react-stripe-js and @stripe/stripe-js packages.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Step 3: Configure Stripe Elements Provider

In your React application, wrap your checkout page component with the Elements provider from @stripe/react-stripe-js. Use the loadStripe function to load your Stripe instance with your publishable key.

Step 4: Add Payment Element Component

Create a checkout form component where you'll include the PaymentElement component provided by Stripe. This component handles the collection of payment details from the user.

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_51Oms7lDHd6wvkNXn2q0ORqQYjpQlJW2zpR36LTnmtkrTS3TCRUKpyXPXt9bkc8ZJ0pkwAxpWODvvynMoABsERAZQ00JXOBTvLk');

function App() {
  const options = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

Step 5: Create PaymentIntent on Server

On the server side, use a backend framework (e.g., Node.js with Express) to create a route for creating a PaymentIntent. This involves using the Stripe API to create a PaymentIntent with the desired amount and currency.

using System;
using Microsoft.AspNetCore.Mvc;
using Stripe;

namespace StripeExampleApi.Controllers
{
  [Route("create-intent")]
  [ApiController]
  public class CheckoutApiController : Controller
  {
    public CheckoutApiController()
    {
      StripeConfiguration.ApiKey = "sk_test_51Oms7lDHd6wvkNXnWTQ2NMtzJOtXij2UtdyW9FAKS4HZOnSWonZMeaPGXMoqcTiSYFokhK3BIvolPTcwthggS4TS00LL9O97bC"
    }

    [HttpPost]
    public ActionResult Post()
    {
      var options = new PaymentIntentCreateOptions
      {
          Amount = 1099,
          Currency = "usd",
          // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
          AutomaticPaymentMethods = new PaymentIntentAutomaticPaymentMethodsOptions
          {
              Enabled = true,
          },
      };
      var service = new PaymentIntentService();
      PaymentIntent intent = service.Create(options);
      return Json(new {client_secret = intent.ClientSecret});
    }
  }
}

Step 6: Submit Payment to Stripe

Back in your React application, handle form submission by calling the handleSubmit function. Inside this function, trigger form validation and wallet collection with elements.submit(). Then, fetch the client secret from your server and confirm the PaymentIntent using stripe.confirmPayment().

Step 7: Handle Payment Confirmation

After confirming the PaymentIntent, handle any errors that may occur during the payment process. If successful, your customer will be redirected to the specified return URL.

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}

Change Request

So, my client recently approached me with some concerns regarding our current implementation of Stripe payments within our React application. They emphasized the importance of compliance with industry regulations and the need to address potential security vulnerabilities. After a thorough discussion, we collectively decided that it would be best to modify our approach. Specifically, we agreed to transition the payment process to an external page. This decision was made to enhance security by isolating the payment transaction from our main application environment, thus reducing the risk of unauthorized access to sensitive payment information. By moving to an external page for payment processing, we aim to bolster our data protection measures and ensure strict adherence to regulatory requirements. This adjustment demonstrates our unwavering commitment to maintaining the highest standards of security and compliance throughout our payment ecosystem.

Payment on Stripe Hosted Page

Step 1: Install Stripe.NET Package

Begin by installing the Stripe.NET package using either the dotnet CLI or NuGet package manager. This package provides access to the Stripe API from your .NET Core application, enabling seamless integration with Stripe Checkout.

# Install with dotnet
dotnet add package Stripe.net
dotnet restore

Step 2: Add Checkout Button to Your Website

In your HTML page, add a checkout button that calls a server-side endpoint to create a Checkout Session. This session represents what your customer sees when redirected to the payment form and can be configured with line items, currencies, success URL, and cancel URL.

<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <!-- Use action="/create-checkout-session.php" if your server is PHP based. -->
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Checkout</button>
    </form>
  </body>
</html>

Step 3: Configure Server-Side Endpoint

Set up a server-side endpoint using ASP.NET MVC framework to handle the creation of a Checkout Session. Utilize the Stripe.NET library to create a session with the desired line items, currency, success URL, and cancel URL. Upon creation, redirect the customer to the session URL returned by Stripe.

// This example sets up an endpoint using the ASP.NET MVC framework.
// Watch this video to get started: https://youtu.be/2-mMOB8MhmE.

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Stripe;
using Stripe.Checkout;

namespace server.Controllers
{
  public class PaymentsController : Controller
  {
    public PaymentsController()
    {
      StripeConfiguration.ApiKey = "sk_test_51Oms7lDHd6wvkNXnWTQ2NMtzJOtXij2UtdyW9FAKS4HZOnSWonZMeaPGXMoqcTiSYFokhK3BIvolPTcwthggS4TS00LL9O97bC";
    }

    [HttpPost("create-checkout-session")]
    public ActionResult CreateCheckoutSession()
    {
      var options = new SessionCreateOptions
      {
        LineItems = new List<SessionLineItemOptions>
        {
          new SessionLineItemOptions
          {
            PriceData = new SessionLineItemPriceDataOptions
            {
              UnitAmount = 2000,
              Currency = "usd",
              ProductData = new SessionLineItemPriceDataProductDataOptions
              {
                Name = "T-shirt",
              },
            },
            Quantity = 1,
          },
        },
        Mode = "payment",
        SuccessUrl = "http://localhost:4242/success",
        CancelUrl = "http://localhost:4242/cancel",
      };

      var service = new SessionService();
      Session session = service.Create(options);

      Response.Headers.Add("Location", session.Url);
      return new StatusCodeResult(303);
    }
  }
}

Step 4: Create a Success Page

Create a minimal success page to display to the customer after a successful payment submission. This page should convey gratitude for the order and provide contact information for further inquiries.

<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Thanks for your order!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </body>
</html>

Step 5: Test Your Integration

Test your Stripe-hosted payment form integration by creating a Checkout Session and filling out payment details with test card information. Verify successful payment redirection to the designated success URL and check the payment details in the Stripe Dashboard.

Click your checkout button.
Fill out the payment details with the test card information:
Enter 4242 4242 4242 4242 as the card number.
Enter any future date for card expiry.
Enter any 3-digit number for CVC.
Enter any billing postal code.
Click Pay.
You’re redirected to your new success page.

Conclusion:

Implementing Stripe payments in your React application is made simple with the Stripe Payment Element and React Stripe.js library. By following these steps, you can securely accept payments from your users while providing a seamless checkout experience.

With this guide, you can enhance your e-commerce or subscription-based application by integrating Stripe payments, empowering you to monetize your services with ease.

How Tanstack improved my React App's performance and user experience.

Momin Mahmud — Mon, 12 Feb 2024 16:18:41 +0000

React is a great framework for building fast and interactive web applications, but it also comes with some challenges when it comes to data fetching and caching. How do we avoid unnecessary requests, stale data, loading states, and error handling? How do we optimize our app for performance and user experience?

That's where TanStack comes in. TanStack is a collection of open-source libraries that help you manage your application state with ease. In this blog post, I will share how I used three of TanStack's libraries - Query, Mutation, and Infinite Query - to improve my React app's performance and user experience.

Query

Query is a library that lets you fetch, cache, and update data in your React components with minimal code. It handles all the complex logic of data fetching, such as deduping, caching, refetching, background updates, and more. It also provides hooks to access the data and its status, such as loading, error, and success.

I used Query to fetch data from my API using the useQuery hook. This hook accepts a query key and a fetch function, and returns an object with the data and the status. For example, here is how I fetched a list of posts from my API:

import { useQuery } from '@tanstack/query'

function Posts() {
  const { data, status } = useQuery('posts', () => fetch('/api/posts').then(res => res.json()))

  if (status === 'loading') {
    return <div>Loading...</div>
  }

  if (status === 'error') {
    return <div>Error!</div>
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

As you can see, Query makes it easy to fetch and display data in a declarative way. It also automatically caches the data, so if I navigate away from the Posts component and come back, it will show the cached data instantly, while also refetching the data in the background to keep it fresh. This improves the performance and user experience of my app, as the user doesn’t have to wait for the data to load every time.

Mutation

Mutation is a component that lets you perform mutations, such as creating, updating, or deleting data, in your React components. It handles all the complex logic of mutations, such as optimistic updates, error handling, and invalidation. It also provides hooks to access the mutation status and data, such as loading, error, and success.

I used Mutation to perform mutations on my data using the useMutation hook. This hook accepts a mutation function and returns an object with the mutation status and data, as well as a function to trigger the mutation. For example, here is how I created a new post using my API:

import { useMutation, useQueryClient } from '@tanstack/mutation'

function CreatePost() {
  const [title, setTitle] = useState('')
  const queryClient = useQueryClient()
  const { mutate, status } = useMutation(
    title => fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify({ title }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => res.json()),
    {
      // Optimistically update the cache with the new post
      onMutate: newPost => {
        queryClient.setQueryData('posts', oldPosts => [...oldPosts, newPost])
      },
      // Invalidate the posts query to refetch the data
      onSuccess: () => {
        queryClient.invalidateQueries('posts')
      }
    }
  )

  const handleSubmit = e => {
    e.preventDefault()
    mutate(title)
    setTitle('')
  }

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={e => setTitle(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      {status === 'loading' && <div>Creating post...</div>}
      {status === 'error' && <div>Error!</div>}
      {status === 'success' && <div>Post created!</div>}
    </div>
  )
}

As you can see, Mutation makes it easy to perform and display mutations in a declarative way. It also allows me to optimistically update the cache with the new post, so the user can see the result immediately, while also invalidating the posts query to refetch the data from the server. This improves the performance and user experience of my app, as the user doesn’t have to wait for the mutation to complete to see the effect.

Infinite Query

Infinite Query is a component that lets you fetch and display paginated or infinite data in your React components. It handles all the complex logic of pagination, such as fetching more data, scrolling, and caching. It also provides hooks to access the data and its status, such as loading, error, and success.

I used Infinite Query to fetch and display infinite data from my API using the useInfiniteQuery hook. This hook accepts a query key and a fetch function, and returns an object with the data and the status, as well as functions to fetch more data and reset the data. For example, here is how I fetched and displayed an infinite list of comments from my API:


import { useInfiniteQuery } from '@tanstack/infinite-query'

function Comments() {
  const { data, status, fetchNextPage, hasNextPage, reset } = useInfiniteQuery(
    'comments',
    ({ pageParam = 0 }) => fetch(`/api/comments?page=${pageParam}`).then(res => res.json()),
    {
      // Get the next page parameter from the last page
      getNextPageParam: lastPage => lastPage.nextPage
    }
  )

  const handleScroll = e => {
    // Check if the user has scrolled to the bottom of the container
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (scrollTop + clientHeight >= scrollHeight) {
      // Fetch the next page if it exists
      if (hasNextPage) {
        fetchNextPage()
      }
    }
  }

  const handleReset = () => {
    // Reset the data to the first page
    reset()
  }

  if (status === 'loading') {
    return <div>Loading...</div>
  }

  if (status === 'error') {
    return <div>Error!</div>
  }

  return (
    <div>
      <h1>Comments</h1>
      <div style={{ height: '300px', overflow: 'auto' }} onScroll={handleScroll}>
        {data.pages.map(page => (
          <ul key={page.page}>
            {page.comments.map(comment => (
              <li key={comment.id}>{comment.text}</li>
            ))}
          </ul>
        ))}
      </div>
      <button onClick={handleReset}>Reset</button>
    </div>
  )
}

As you can see, Infinite Query makes it easy to fetch and display infinite data in a declarative way. It also automatically caches the data, so if I navigate away from the Comments component and come back, it will show the cached data instantly, while also re-fetching the data in the background to keep it fresh. It also provides a way to fetch more data when the user scrolls to the bottom of the container and to reset the data to the first page. This improves the performance and user experience of my app, as the user can access the data in a fast and intuitive way.

Conclusion

In this blog post, I showed how I used TanStack to improve my React app’s performance and user experience. TanStack is a powerful and easy-to-use solution for data fetching and caching in React. It offers many features and benefits, such as:

Declarative and minimal code
Automatic and smart caching
Background updates and refetching
Optimistic updates and invalidation
Pagination and infinite data
Loading, error, and success states
And more!

React Firebase Auth with Redux deployed on Vercel

Momin Mahmud — Wed, 07 Feb 2024 12:33:22 +0000

Motivation

Temporarily, I'm a full-time front-end developer for a project. It utilizes Redux, but when I started, I lacked both React and Redux experience. While I've been on this project for three months now, I've primarily relied on existing code to implement Redux functionalities without grasping the core concepts. Understanding the intricacies of the Redux store and its inner workings remained elusive. Thankfully, with guidance from senior colleagues and Stack Overflow, I've managed to navigate runtime issues.

However, I'm determined to delve deeper and solidify my understanding of Redux from the ground up. This way, I can troubleshoot problems with confidence and rely less on external resources for minor challenges.

To efficiently learn two technologies simultaneously, I decided to implement Firebase Authentication while storing user metadata and auth tokens using Redux.

Setup (Firebase)

Create a Firebase project:

Go to the Firebase console (https://console.firebase.google.com/) and create a new project.
Give your project a name and enable billing if necessary.

Register your app:

Select the platform you're developing for (web, Android, iOS, etc.) and follow the specific instructions for registering your app.
This will give you a configuration file or snippet that you need to add to your project.
** Install the Firebase SDK:**

Use the package manager for your platform (npm for JavaScript, CocoaPods for iOS, etc.) to install the required Firebase SDK libraries.
Initialize Firebase in your app:

Use the configuration file or snippet you obtained earlier to initialize Firebase in your app.
This will enable you to use Firebase services in your code.

Create Register Component

Notice, I the code I also have sent another call to sendEmailVerification so user cannot register with a bogus email

const Register = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const register = async () => {
    setLoading(true);
      await createUserWithEmailAndPassword(auth, email, password)
        .then(async (userCredential: any) => {
          await sendEmailVerification(userCredential.user);
          navigate(RouteEnums.VERIFICATION_NOTICE, { state : userCredential.user.email });
        })
        .catch((error: any) => {
          toast.error(error.message);
        }).finally(()=> {
          setLoading(false)
        });
  };

  return (
    <>
      {loading ? <Spinner /> : (
           <div className="flex min-h-full flex-1 flex-col justify-center w-[400px] px-6 py-12 lg:px-8">
           <div className="sm:mx-auto sm:w-full sm:max-w-sm">
             <img
               className="mx-auto h-10 w-auto"
               src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
               alt="Your Company"
             />
             <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
               Register a new account
             </h2>
           </div>

           <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
             <div>
               <label
                 htmlFor="email"
                 className="block text-sm font-medium leading-6 text-gray-900"
               >
                 Email address
               </label>
               <div className="mt-2">
                 <input
                   onChange={(e) => setEmail(e.target.value)}
                   id="email"
                   name="email"
                   type="email"
                   autoComplete="email"
                   required
                   className="block w-full rounded-md border-0 p-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />
               </div>
             </div>

             <div className="my-5">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
                   className="block text-sm font-medium leading-6 text-gray-900"
                 >
                   Password
                 </label>
                 <div className="text-sm">
                   <a className="font-semibold text-indigo-600 hover:text-indigo-500">
                     Forgot password?
                   </a>
                 </div>
               </div>
               <div className="mt-2">
                 <input
                   onChange={(e) => setPassword(e.target.value)}
                   id="password"
                   name="password"
                   type="password"
                   autoComplete="current-password"
                   required
                   className="block w-full rounded-md border-0 p-1.5  shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />
               </div>
             </div>

             <div>
               <button
                 onClick={register}
                 type="submit"
                 className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
                 Register
               </button>
             </div>
           </div>
         </div>
      )}

    </>
  );
};

Verify the Register Function

If your configuration was successful your user would appear in the Authentication > Userssection on the firebase console

Create Login component

Notice I have only let user into my application if the user's email is verified

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);

useEffect(() => {
  console.log(loading)
},[loading])

  const checkEmailVerified = (userCredential: any) => {
    if (!userCredential.user.emailVerified) {
      console.error("User email is not verified.");
      toast.error("Please verify your email address to continue.");
    } else {
      dispatch(saveUser(userCredential.user));
      dispatch(saveToken(userCredential.user.accessToken));
      navigate(RouteEnums.HOME);
    }
  };
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const login = () => {
    setLoading(true);
      signInWithEmailAndPassword(auth, email, password)
        .then((userCredential: any) => {
          checkEmailVerified(userCredential);
        })
        .catch((error: any) => {
          toast.error(error.message);
        }).finally(()=> {
          setLoading(false)
        });
  };

  return (
    <>
      {loading ? <Spinner /> : (
              <div className="flex min-h-full flex-1 flex-col justify-center w-[400px] py-12 lg:px-8">
              <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                <img
                  className="mx-auto h-10 w-auto"
                  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                  alt="Your Company"
                />
                <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                  Login
                </h2>
              </div>

              <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium leading-6 text-gray-900"
                  >
                    Email address
                  </label>
                  <div className="mt-2">
                    <input
                      onChange={(e) => setEmail(e.target.value)}
                      id="email"
                      name="email"
                      type="email"
                      autoComplete="email"
                      required
                      className="block w-full rounded-md border-0 p-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                    />
                  </div>
                </div>

                <div className="my-5">
                  <div className="flex items-center justify-between">
                    <label
                      htmlFor="password"
                      className="block text-sm font-medium leading-6 text-gray-900"
                    >
                      Password
                    </label>
                    <div className="text-sm">
                      <a className="font-semibold text-indigo-600 hover:text-indigo-500">
                        Forgot password?
                      </a>
                    </div>
                  </div>
                  <div className="mt-2">
                    <input
                      onChange={(e) => setPassword(e.target.value)}
                      id="password"
                      name="password"
                      type="password"
                      autoComplete="current-password"
                      required
                      className="block w-full rounded-md border-0 p-1.5  shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                    />
                  </div>
                </div>

                <div>
                  <button
                    onClick={() => login()}
                    type="submit"
                    className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                  >
                    Login
                  </button>
                </div>
              </div>
            </div>
      )}

    </>
  );
};

🎉 Congratulations 🎉 you have implemented Auth using Firebase in your React app

Now Lets save the response from firebase in the Redux Store

Install the required packages:

Bash

npm install @reduxjs/toolkit react-redux @types/react-redux @types/react-router-dom (if using routing)

Store Setup:

Create a store.ts file to define your Redux store:

`import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../reducer/user/userAuthSlice"


export const store = configureStore({
    reducer: {
        auth: authReducer,
        }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch`

Configure Reducers

import { createSlice } from "@reduxjs/toolkit"

const initialState: any = {
    user: null,
    authToken : null
}
const userAuthSlice = createSlice({
    name : "auth",
    initialState,
    reducers: {
        saveUser(state :any, action:any){
            state.user = action.payload
        },
        saveToken(state :any, action:any){
            state.authToken = action.payload
        }
    }
},
)


export const { saveUser , saveToken } : any = userAuthSlice.actions


export default userAuthSlice.reducer

Store the user Data and token in stores on successful login

      dispatch(saveUser(userCredential.user));
      dispatch(saveToken(userCredential.user.accessToken));

To protect the application create a guard to only allow authenticated user to login

const Router = () => {
  const GUARD_ROUTE = (props: any) => {
    const { children } = props;
    const authToken: any = useSelector((state: any) => state.auth.authToken);
    if (authToken) {
      return <React.Fragment>{children}</React.Fragment>;
    } 
    if (!authToken) {
      toast.dismiss()
      toast.error("Please Login First");
    }
    return <Navigate to={RouteEnums.LANDING} />;
  };
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/verification-sent" element={<VerificationNotice />} />
        <Route
          path="/home"
          element={
            <GUARD_ROUTE>
              <Home />
            </GUARD_ROUTE>
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

🎉 Congratulations you have implemented Redux as well 🎉

Deployment

I used Vercel as it is the easiest and quickest option.

Steps

Push your app to a Git repository:

If you don't have one, create a new repository on GitHub, GitLab, or Bitbucket.
Push your local React app files to the remote repository.

Import your repository into Vercel:

Go to https://vercel.com/dashboard
Click "New Project" and select "From Git repository".
Choose your Git provider and authorize Vercel to access your repositories.
Select your repository and click "Import".
Vercel will automatically detect your React app and deploy it.

You'll receive a deployment URL upon completion.