DEV Community: Chirag Gupta

Using Intersection Observer API in React

Chirag Gupta — Mon, 16 Oct 2023 12:43:05 +0000

This article is about using the Intersection Observer API to enhance the visual experience of web applications. We will see the usage of this API in both HTML/CSS projects and React applications.

What is Intersection Observer API? (with a working example)

The Intersection Observer API provides us with a way to take some action asynchronously whenever a particular element that we are observing comes or goes out from the viewport / or a specified container. Let's understand it using an example:

//used in the codesandbox(Vanilla js) below:
const supportContainer = document.querySelector(".supporting");
const sectObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      entry.target.classList.toggle("blockAnimation", entry.isIntersecting);
    });
  },
  {
    threshold: 0,
    rootMargin: "-100px"
  }
);

sectObserver.observe(supportContainer);

Let's break this down:

We create a new Intersection Observer using new IntersectionObserver(callback,options) syntax. This callback is triggered when it initially attaches to the DOM element and each time the element intersects based on the specified options.
Threshold value: A threshold of value 0 means that when any part of the observed element becomes visible, the isIntersecting property changes to true.
RootMargin: rootMargin is used to set the margins of the root property. In our case, root is the viewport. We are using the rootMargin property of -100px because of the footer height.
Callback: we pass a callback to the observer which toggles a blockAnimation class on our element based on the boolean value of isIntersecting property.

Codesandbox example using HTML, CSS, and Javascript:

Notice the slide-in effect of the supporting container in the codesandbox preview.

Infinite scroll in React:

Infinite scrolling is a popular feature in modern web applications. It is generally implemented using the intersection observer API. This section explains how to implement this feature, showcasing an example.

Link: https://custom-infinite-scroll-react.netlify.app/

Idea:

The idea behind infinite scrolling is simple, let's understand it:

We always observe the last item in the DOM using Intersection Observer API.
Whenever the last item comes into the view (intersects), we call the API to fetch the next set of items.
We disconnect the observer from the previous last item and connect it to the latest last item.

Code:

const App: React.FunctionComponent = () => {
  const [pageNumber, setPageNumber] = useState(1);
  const [todos, setTodos] = useState<todo[]>([]);
  const [loading, setLoading] = useState(false);
  const observer = useRef<IntersectionObserver>();

  const lastTodo = useCallback((node: Element | null) => {
    console.log(node);
    if (node != null) { // to check if the node exists
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver(
        (entries) => {
          const firstEntry = entries[0];
          if (firstEntry.isIntersecting) {
            setPageNumber((n) => n + 1);
          }
        },
        {
          threshold: 1,
        }
      );
      observer.current.observe(node);
    }
  }, []);

//this useEffect runs whenever the pageNumber gets changed
  useEffect(() => {
    fetchTodos(pageNumber, setTodos, setLoading);//fetches todos based on pageNumber
  }, [pageNumber]);

//JSX
  return (
    <div className="app">
      <header className="header">
        <h1>Custom Infinite Scroll</h1>
      </header>
      <main className="container">
        {todos.length
          ? todos.map((todo, index) => (
              <p
                className="todo"
                key={todo.id}
                ref={index === todos.length - 1 ? lastTodo : null}
              >
                {todo.title}
              </p>
            ))
          : ""}
        <div>{loading ? "Loading..." : ""}</div>
      </main>
      <footer className="footer">
        <p>Intersection Observer API</p>
      </footer>
    </div>
  );
};

export default App;

Let's break this down:

We declare three state variables:

pageNumber: to increase the page number when reaching the end of the page.
todos: an array of todos.
loading: to indicate the loading state.

We initialize an observer using useRef and lastTodo using useCallback.

We can pass either a useRef reference to the ref attribute or a function to the ref attribute (callback ref). In our case, we are using the latter.

useCallback is a better option in this case because the callback that we pass to useCallback gets called every time it attaches itself to a DOM element. Specifically, when the component using this callback as a ref mounts, this callback gets called with the element as an argument. When this component unmounts, the callback gets called with null as an argument.

So, whenever the callback gets called, here's what happens:

We check if the node (element) is present or not; if it is, we proceed.
If an observer is already observing an element, we disconnect the observer.
We connect the observer to the new element.

When this element intersects our viewpoint, the pageNumber gets incremented. Whenever the pageNumber increases, the useEffect runs and fetches the next set of todos.

If you want to view the full code of the mentioned example: https://github.com/Hardiegogo/intersection-observer-mock

I hope you found this article helpful, see you in the next one!

Connect with me on Twitter | Linkedin | Github

Happy Coding! 🎈🎈

Authentication in Next.js using NextAuth.js

Chirag Gupta — Sat, 09 Sep 2023 15:40:29 +0000

If you are a front-end developer, thinking about authentication can be quite challenging. In authentication, from storing JWT in local storage to managing cookies, we consider it all. NextAuth.js is currently the most popular library for handling authentication in your Next.js projects.

What will we use?

In this guide, we will be using the NextAuth.js credentials provider, so that we can set up custom fields for authentication. These fields will be username and password. On the Next.js side, we will be using API routes (pages router) as these are currently being used in most of the codebases. We will also use our custom login page rather than relying on NextAuth.js's default page.

Setting Up the Credentials Provider

App setup - I hope you already have a next app, if not then start by creating one using official docs.
Start by installing NextAuth.js using :
```
npm install next-auth
```

Create [...nextauth].ts file under the directory /pages/api/auth/[...nextauth].ts and add the following code :

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import dbConnect from '../../../lib/dbConnect'; //import your dbConnect, if you have one.
import User from '../../../models/userModel'; //ignore this
import { Provider } from 'next-auth/providers';

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
      id: 'credentials',
      type: 'credentials',
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        //Add logic here to look up the user from the credentials supplied
        await dbConnect(); // connect to your db, to check the user
        if (credentials?.password?.length && credentials?.username?.length) {
          //I am using a mongoose model in this example.
          const existingUser = await User.findOne({
            username: credentials.username,
            password: credentials.password,
          });
          if (existingUser) {
            return existingUser;
          } else return null;
        } else {
          return null;
        }
      },
    }),
  ] as Provider[],
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60,
  },
  jwt: {
    encryption: true,
  },
  pages: {
    signIn: '/login',
  },
  // callbacks in the next section
};

export default NextAuth(authOptions);

Let's break this code snippet piece by piece :

As we are using the Credentials provider, we start by adding the provider to the provider list. We mention the id as "credentials" to access this provider on the frontend side while using the custom sign-in page. We also mention the type as "credentials" as we are using the same type.
In the next part, we define a credentials object which tells NextAuth about what kind of fields, we are dealing with. In this case, these fields are username and password.
Next, we define an async function called "authorize" which NextAuth uses while authentication, this function gets called up when we click on the login/sign-in button. In this function, we write the logic to verify the user credentials and if the user exists, we return the user otherwise we return null or we can throw an error.
Next, we define a secret variable, which will be our JWT secret (store it in .env.local at the root of your project).
In the next part, we define the session object which declares our strategy as jwt and maxAge of 30 days(you can use whatever value you like). This defines the duration for which our user session will remain active, once logged in. We also set the jwt encryption to true, which encrypts our token.
For the custom sign-in page, we define the page route to our custom login page in the pages object.

Callbacks (JWT and Session)

Extend the above-mentioned credentials provider by adding the callbacks setup below

export const authOptions:any = {
  providers: [
    CredentialsProvider({
        // above mentioned code,
    callbacks: {
      jwt: async ({ token, user }) => {
        if (user) {
          token.username= user.username;
          token.id=user._id
        }

        return token;
      },
      session: ({ session, token }) => {
        if (token) {
          session.user.username = token.username;
          session.user.id=token.id
        }
        return session;
      },
    },
}

JWT callback is invoked whenever a JWT token is created by nextAuth (while sign-in). In this case, we receive token and user as arguments. The argument user is the user returned by the authorize function and the token is something that we can use to persist our user details in our session object.
Session callback is invoked whenever we try to access the session on the client or server side. We can extend the user object in the session by using the token that we have received from JWT callback.

This callbacks setup is necessary to get the username and the userId, whenever we try to access the session.

Login page setup

The login page structure and styling depend on your project, so we will just focus on the core functionality. Whenever the user clicks on login after entering the credentials, signIn function from next-auth should be called. Example:

import { signIn } from 'next-auth/react';
// on button click this clickhandler should be invoked
const clickHandler: React.MouseEventHandler<HTMLButtonElement> = async (e) => {
  e.preventDefault();
  try {
    const res = await signIn('credentials', {
      username, // entered by the user
      password, // entered by the user
      redirect: false,
      callbackUrl: '/',
    });
    if (res?.status === 200) {
      addSuccess('Successfully logged in'); //custom function for toast notification, you can just use console.log()
    } else {
      addError('error signing in');
    }
    // Here, you can also redirect based on successfull authentication using useRouter
  } catch (error) {
    if (isAxiosError(error)) {
      if (error.response) {
        addError(error.response.data);
      }
    }
  }
};

We pass the following arguments to signIn() function from nextAuth:

The first argument is your provider id, in our case it is "credentials".
The second argument is an object containing the credentials that we received from the user and some other parameters like redirect and callbackUrl. In our case, we don't need redirection, so we are setting redirect:false .

Finally, let's talk about accessing the session

We have these ways to access the session :

useSession() hook: This is a hook provided by nextAuth to access the session and the authentication status on the client side :

import { useSession } from 'next-auth/react';
const { data: session, status } = useSession()

//session contains our user object
//status can be authentication | unauthenticated | loading

getSession(): This is a function by nextAuth to call an API and get the session. This may be used when you are managing the loading state on your own. However, useSession() is generally used in most cases.

getServerSession(): As the name suggests, this function is used to get the session on the server side. This function accepts 3 arguments. Example:

//API route example :
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const session: Session | null = await getServerSession(
      req,
      res,
      authOptions //we defined the authOptions in our first snippet
    );
    await dbConnect();
    if (session) {
      //if session exists proceed to the backend logic
    } else {
      res.status(401).json({ message: 'Unauthorized' });
    }
  } catch (error) {
    console.log(error);
  }
}

These functions provided by NextAuth make our lives easy.

Securing pages and components

RequireAuth Wrapper:

You can use this wrapper to secure pages and components that require authenticated status on the client side.

import React from 'react';
import { signIn, useSession } from 'next-auth/react';

function RequireAuth({ children }: { children: React.JSX.Element | string }) {
  const {status}=useSession() 
  if(status==="unauthenticated"){
    signIn()
  }
  if(status==="loading"){
    return <Loader/>
  }
  if(status==="authenticated"){
    return <>{children}</>
  }
}
export default RequireAuth;

Middleware: NextAuth also provides us with middleware to secure pages: create a middleware.ts file at the same level as the pages directory and use the following code:
```
export { default } from 'next-auth/middleware';
export const config = { matcher: [...] }; // add routes to secure pages
```

Additional advice: Use the developer tools (Application section) as much as possible, to see your cookies and try to play different scenarios by changing/deleting cookies. This will help you to avoid potential bugs related to authentication.

Connect with me on Twitter | Linkedin | Github

Happy Coding! 🎈🎈

How to solve hydration error in Next.js

Chirag Gupta — Sat, 09 Sep 2023 15:31:59 +0000

If you recently transitioned from using React to Next.js, you must've encountered this error "Error: Hydration failed because the initial UI does not match what was rendered on the server". Let's understand why this error usually occurs and how to solve it.

What is Hydration?

In Next.js, the first render of the page takes place on the server. This pre-rendered HTML is then served to the client. On the client side, React takes over this HTML page to make this page interactive(Basically it attaches event handlers to the dom nodes). This is Hydration.

Why does this error occur?

During this process React also has a model of how pre-rendered HTML should look like (so that it can attach event handlers for necessary Js interactivity), if the client version of the initial render is not the same as the pre-rendered HTML from the server, we get this error.

Some scenarios, in which this error can arise:

You are using browser APIs to conditionally render your component/page: In this case, as the browser APIs (localStorage,sessionStorage) are not available on the server, pre-rendered HTML can differ from the client side.

// I will use this atom in the solutions section :)
const defaultState={
    username:"",
    id:"",
    isLoggedIn:false      
}

export const adminState=atom<IAdmin>({
    key:"currentAdmin",
    default:  (typeof window !== 'undefined') ? (
        localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : defaultState
    ) : defaultState
})
//if this state is used to conditionally render, it will cause hydration error

While using this recoil state in the component, a hydration error will arise because on the server HTML will be rendered according to the default state and on the client side HTML will be different due to localStorage.

Your HTML syntax is not correct: In this case, you have probably used JSX in some weird way. some examples :
```
<p><div>logout</div></p>

<p><p>Your text</p></p>
```
Some browser extensions change the HTML on the client side.

Solutions for this error:

Reconfigure Logic with useEffect:

The server ignores useEffect blocks during rendering the HTML on the server side. useEffect only runs on the client side and has access to all the browser APIs.

// I am using the above mentioned state atom
const RequireAuth: React.FC<{ children: ReactElement }> = ({ children }) => {
  const [loader, setLoader] = useState(true);
  const user = useRecoilValue(userState);
  const router = useRouter();
  useEffect(() => {
    if (user.isLoggedIn) {
      setLoader(false);
    } else router.replace('/login');
  }, []);

  return <>{!loader && children}</>;
};
// As  user.isLoggedIn depends on localStorage,
// we check for it in the useEffect (client side)

Disable SSR on some components which may differ on the client side:

import dynamic from 'next/dynamic';
//code for YourComponent
export default dynamic(() => Promise.resolve(YourComponent), { ssr: false });

In the case of timestamps, pre-rendered HTML will be different from the client version. You can suppress the warning in such cases by using suppressHydrationWarning={true} in the element.

Additional Advice: Rather than rendering an entire page on the client side, consider abstracting the pieces that require client-side rendering into separate components. Utilize the above-mentioned methods to render them, incorporating some tweaks from your end.

Note on security: In the above article, I am storing the JWT token in the localStorage which is not a good practice. A better solution may include authenticating using cookies. If you are using cookies, you can try using getServerSideProps() for getting the authentication status on the server side itself.

Connect with me on Twitter | Linkedin | Github

Happy Coding! 🎈🎈

Zod for Runtime Validation in Next.js

Chirag Gupta — Thu, 07 Sep 2023 17:05:11 +0000

Introduction

Zod is a runtime validation library suitable for both backend and frontend. This article will guide you through utilizing Zod in Next.js for securing API routes and performing input validation.

Zod vs. TypeScript

Typescript's purpose is to provide type-checking capabilities during compilation(development phase). It ensures type safety before runtime.

Zod's primary focus is to catch validation errors during runtime. However, we can also infer types from Zod schemas.

Installing Zod

//npm
npm install zod
//yarn
yarn add zod

Creating schemas with Zod

const userInputSchema=z.object({
  username:z.string().min(3).max(40), //
  password:z.string().min(6).max(20)
}) // Schemas assist with runtime validation.

//Getting type from above schema
type AdminType=z.infer<typeof userInputSchema>

//Admin type will look like this
type AdminType = {
    username: string;
    password: string;
}

In the code snippet above, We :

Created an object schema using z.object() and then we declared the username and password as strings using z.string() inside the schema.
Used min and max functions, which add checks for the length of the variables.
Used z.infer<typeof Schema> to get the type for the declared Schema.

Complex example

An example containing schema for course details:

const courseInputSchema=z.object({
  title:z.string().min(3).max(150),
  rating:z.number().positive().min(0).max(5),
  description:z.string().min(50).max(700),
  published:z.boolean(),
  gallery:z.array(z.string().url()),//An array of valid URLs
  price:z.number().min(0).max(4999),
  imgLink:z.string()
})

type CourseType=z.infer<typeof courseInputSchema>

// this translates to
type CourseType = {
    title: string;
    rating: number;
    description: string;
    published: boolean;
    gallery: string[];
    price: number;
    imgLink: string;
}

Using safeParse() to secure API routes

//Nextjs API route
import type { NextApiRequest, NextApiResponse } from 'next';
import dbConnect from '../../../lib/dbConnect';
import {z} from 'zod'

const userInputSchema=z.object({
  username:z.string().min(3).max(40),
  password:z.string().min(6).max(20)
})

type AdminType=z.infer<typeof userInputSchema>

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await dbConnect(); //connecting to the db
    const parsedInput=userInputSchema.safeParse(req.body)
    if(!parsedInput.success){
      return res.status(400).json({messsage:"Incorrect input"})
    }
    //further backend logic
  } catch (error) {
    console.log(error);
  }
}

Let's break this down:

We use the safeParse() method from Zod to validate the data from request with our declared inputSchema.
safeParse() can give us these outputs:
Before going further into the backend logic, we validate the user input using the schema and if the input is validated, we proceed. Otherwise, we send a response with status code 400 (Read about ZodError).
Zod also provides us with another method parse(), it directly throws an error instead of returning us with the above-mentioned outputs. safeParse() is preferred due to its simplicity.

Note : We can do similar stuff in expressjs, by creating a schema and then validating request data before proceeding to further backend logic.

Input validation on the client side

Let's define an user input schema for client-side validation:

//Schema
import { z } from 'zod';

const userInputSchema = z.object({
  username: z
    .string()
    .min(3, 'username must have atleast 3 characters')
    .max(40, 'username max length should be 40 characters'),
  password: z
    .string()
    .min(6, 'password must have atleast 6 characters')
    .max(20, 'password max length should be 20 characters'),
});

Here, the second argument to the min and max methods are custom error messages. We will use these custom messages in the next section.

Using the above schema in a form

const SignupForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] =
    useState<z.inferFlattenedErrors<typeof userInputSchema>>(); //define type for errors

  const clickHandler: React.MouseEventHandler<HTMLButtonElement> = async (
    e
  ) => {
    e.preventDefault();
    try {
      const parsedInput = userInputSchema.safeParse({ username, password });
      if (!parsedInput.success) {
        setErrors(parsedInput.error.flatten());
      }else {
        //proceed to submit the form
      }
    } catch (error) {
      setUsername('');
      setPassword('');
      console.log(error);
    }
  };

  return (
    <form className="p-4 border border-greyVariant mt-20 text-textColor w-80">
      <h2 className="text-center text-2xl">Signup</h2>
      <div className="flex flex-col mt-3">
        <label htmlFor="username">Username:</label>
        <input
          className="outline-none border-primary border-2 rounded-xl px-2 py-1"
          type="text"
          id="username"
          name="username"
          onChange={(e) => setUsername(e.target.value)}
          value={username}
        />
        {errors?.fieldErrors?.username ? (
          <p className="text-red-500">{errors.fieldErrors['username']}</p>
        ) : null}
      </div>
      <div className="flex flex-col mt-3">
        <label htmlFor="password">Password:</label>
        <input
          className="outline-none border-primary border-2 rounded-xl px-2 py-1"
          type="password"
          id="password"
          name="password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
      </div>
      {errors?.fieldErrors?.password ? (
        <p className="text-red-500">{errors.fieldErrors['password']}</p>
      ) : null}
      <button
        className="mt-6 bg-primary px-3 py-2 rounded-xl text-bgColor hover:opacity-90 w-full"
        onClick={clickHandler}
      >
        Signup
      </button>
    </form>
  );
};

export default SignupForm;

Let's break this down :

We declare a state variable "errors", which we will use to display our custom error messages.
Before submitting the form, we validate our input data using safeParse(), and if the input data is incorrect we store the flattened error object in our state variable.
We are displaying the error using errors.fieldErrors["fieldName"], if it exists.
This will look like:

Additional advice : You can also try using Zod with some form libraries like react-hook-form and conform.

I hope you found this article helpful, see you in the next one!

Connect with me on Twitter | Linkedin | Github

Happy Coding! 🎈🎈