DEV Community: Rahul Solanki

Step-by-Step Guide: Implementing NextAuth.js Authentication in Next.js 13 App Directory

Rahul Solanki — Sun, 30 Jul 2023 15:40:10 +0000

Hey everyone! In this article, we are going to set up Authentication for our web app with the help of Next-Auth With all of that will also show you to set up Prisma, react-query and other techs to ensure smooth and better authentication.

The article will include:-

Installation and folder structure
Setting up Prisma and Environment variable
Securing passwords with the help of bcrypt
API and hooks.
Register, Login and check credentials
Caching and fetching current Users with react-query

Installation:-

First of all, let's install all the dependencies-

 npm i next-auth


npm install -D prisma


npm install @prisma/client

and now can install the rest of the dependencies later.

Setting up prisma:-

As we have already installed Prisma and Prisma client, now all we to initialize the Prisma in our project. To do so run

npx prisma init

After running this command you should see a file in your codebase something like this-

And this is the file where we have to set up our Prisma schema. next, you need to have your database URL; you can choose any database like MongoDB, MySQL or Postgresql. It's totally up to you. I am going to use Mysql for my project. After having your database URL, change the provider to the database you choose and paste the URL into the ".env" file in your root directory.

(Note: Check if your ".env" file is included in ".gitignore" or not, if not then include it)

After having all of this let's write our User model-

You can set up fields according to your application. Like I was building an e-commerce so I setup accordingly. To keep things unique like the id, username or email, you can use the 'unique' keyword. and to expect things in a specific type you can use 'String' or 'number' as I did in the case of String or id. In the case of id 'default(uuid())' will ensure to generate a random id everytime; Remember that there might be some changes in using 'default(uuid())'.

and after setting up everthing all we have to do is to push the model into our database with the command-

npx prisma db push

Now our Prisma model is setup, now we need to create a new library that can provide out Prisma client to global like this:-

This library will ensure that next.js doesn't create a bunch of clients on every hot reload.

Setting up Next-Auth:-

Now let's set up our Next-auth, all we have to do is to create out next auth file with this file structure-

Now before setting up our 'authoptions' you need to install bcrypt

npm install bcrypt
npm install -D @types/bcrypt

and prisma adapter for our next auth

npm install @next-auth/prisma-adapter

and in our config folder you can create a file named - 'nextauth.config.tsx'

while signing-in we will pass the credentials, and the above code will check if we have the right credentials or not. The code will first accept the right form of credentials and then check if the credentials have email and password or not, and next it's going to check if the user's email exist in database or not and 'bcrypt.compare' function will check if the password is right or not.

after creating the above file, create the variables-

and set the values whatever you want.

Now let's build our register endpoint-

Register API endpoint-

we will use bcrypt to hash our password. To know more about bcrypt you can read my another article on how to keep you user's password-

https://dev.to/rahulj9a/how-to-keep-users-password-safe-in-database-g0f

And this endpoint will create a new user in out database.

Get the user after signin-

Now let's create a another lib. that will check if the user is sign in or not and if yes then will fetch the user's data.

The code will fetch the session details and extract the email to check if the user is registered or not and if yes then will fetch the user's data for further use.

But to access the session we have to provide the session to the main layout file like this-

//app>layout.tsx
import {ReactQueryProvider} from "@/providers/reactQueryProvider";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>

          <NextAuthProvider>
            {children}
          </NextAuthProvider>

      </body>
    </html>
  );
}

Now we can't use this liberary directly and we need an API endpoint to fetch the current user's detail

API end point to fetch user's detail

As we have fetch the user's data threw the serverAuth lib. all we have to do is build an api to facilitate our frontend.

Now we have build API to fetch currentUser's detail. But we don't want to make API calls again and again throughout the app. So lets's cache the User's detail using react-query

Caching our current User-

install react-query

npm i react-query

and build a hook can be accessed throughout the app. So to do that we have to provide the query client to the main layout file and that can be done like this-

import { NextAuthProvider } from "@/providers/nextAuthProvider";
import {ReactQueryProvider} from "@/providers/reactQueryProvider";
 export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ReactQueryProvider>
          <NextAuthProvider>
             {children}
          </NextAuthProvider>
        </ReactQueryProvider>
      </body>
    </html>
  );
}

and now the useCurrentUser hook-

The hook will cache the details of User and provide that to the frontend while keep checking if the user's details have changed or not and if it is changed then will fetch again in the background.

Final result-

import { signIn } from "next-auth/react";
import { useCallback, useState } from "react";
import Input from "../Input";
import Modal from "../Modal";
import axios from "axios";

const RegisterModal = () => {
     const [email, setemail] = useState("");
     const [password, setpassword] = useState("");
     const [name, setname] = useState("");
     const [username, setuserName] = useState("");
     const [loading, setloading] = useState(false);

     const onSubmit = useCallback(async () => {
          try {
               setloading(true);

               //add Register and login

               await axios.post("/api/register", {
                    email,
                    password,
                    username,
                    name,
               });

               signIn("credentials", { email, password });

          } catch (error) {
               console.log(error);

          } finally {
               setloading(false);
          }
     }, [email, password, username, name]);

     const bodyContent = (
          <div className="flex flex-col gap-4">
               <Input
                    placeholder="Email"
                    onChange={(e) => setemail(e.target.value)}
                    value={email}
                    disabled={loading}
               />
               <Input
                    placeholder="Name"
                    onChange={(e) => setname(e.target.value)}
                    value={name}
                    disabled={loading}
               />
               <Input
                    placeholder="UserName"
                    onChange={(e) => setuserName(e.target.value)}
                    value={username}
                    disabled={loading}
               />
               <Input
                    placeholder="Password"
                    type="password"
                    onChange={(e) => setpassword(e.target.value)}
                    value={password}
                    disabled={loading}
               />
          </div>
     );

     return (
          <div>
               <Modal
                    disabled={loading}

                    title="Create an account"
                    actionLabel="Regsiter"

                    onSubmit={onSubmit}
                    body={bodyContent}

               />
          </div>
     );
};

export default RegisterModal;


import { useCallback, useState } from "react";
import Input from "../Input";
import Modal from "../Modal";

import { signIn } from "next-auth/react";

const LoginModal = () => {

     const [email, setemail] = useState("");
     const [password, setpassword] = useState("");
     const [loading, setloading] = useState(false);

     const onSubmit = useCallback(async () => {
          try {
               setloading(true);
               await signIn("credentials", {
                    email,
                    password,
               });

          } catch (error) {
               console.log(error);
          } finally {
               setloading(false);
          }
     }, [email, password]);

     const bodyContent = (
          <div className="flex flex-col gap-4">
               <Input
                    placeholder="Email"
                    onChange={(e) => setemail(e.target.value)}
                    value={email}
                    disabled={loading}
               />
               <Input
                    placeholder="Password"
                    type="password"
                    onChange={(e) => setpassword(e.target.value)}
                    value={password}
                    disabled={loading}
               />
          </div>
     );

     return (
          <div>
               <Modal
                    disabled={loading}

                    title="Login"
                    actionLabel="Sign in"

                    onSubmit={onSubmit}
                    body={bodyContent}

               />
          </div>
     );
};

export default LoginModal;

and whenever we need currentUser details-

import usecurrentUser from "@/hooks/useCurrentUser";
export default function User(){
const {data:currentUser,isLoading,isError} = usecurrentUser()
const email = currentUser.email
}

and yes we have build our authentication. Ya! I know its a bit complicated and it will create pain just for 1 or 2 times as it's not that much hard of you try to understand what happening.

Let me know your suggestion. I am also on Twitter where I used to post my journey and knowledge. So follow me there and DM for may help.

How to build simple link preview without any external LIBRARY in react

Rahul Solanki — Fri, 23 Jun 2023 15:55:20 +0000

You must have encounter situation where you want to want to preview the link and for that you have to use external libraries. Now external libraries have their own advantages. But sometimes we just want our link preview component to be very simple and we don't want to fall into much complicated steps of using external libraries for example building our personal portfolio where we have to showcase our blogs that are published on different platforms.

Step1: Define preview componant

function LinkPreview({ url }) {
  // State to hold the link preview data and loading status
  const [previewData, setPreviewData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetches the link preview data when the URL prop changes
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.text();

        // Parsing logic to extract link preview data goes here

        setLoading(false);
      } catch (error) {
        console.error(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  // Rendering logic for the link preview goes here

  return (
    // JSX code for rendering the link preview component
  );
}

export default LinkPreview;

above code will take url as parameter and later process it. The previewData state will hold the link preview data, and the loading state will track the loading status while fetching the data.Next, we use the useEffect hook to fetch the link preview data when the url prop changes. Inside the fetchData function, we use the fetch function to make a request to the provided URL. Once we have the response, we extract the necessary data, such as title, description, and image, from the HTML response which you have seen written in head section of HTML code.

Step2: Extracting Link Preview Data

To extract the link preview data, we need to parse the HTML response and retrieve the relevant information. In this step, we will extract the title, description, and image using a basic parsing technique.

const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const title = doc.querySelector('title')?.textContent || '';
const description = doc.querySelector('meta[name="description"]')?.getAttribute('content') || '';
const image = doc.querySelector('meta[property="og:image"]')?.getAttribute('content') || '';

setPreviewData({ title, description, image });

It will create a new instance of the DOMParser and parse the HTML data using 'parser.parseFromString(data, 'text/html')', where data is the HTML response.
We will use 'doc.querySelector' to search for the required elements within the parsed HTML document.

Finally, we will update the previewData state with the extracted information by calling 'setPreviewData({ title, description, image })'.

Step3: Rendering the Link Preview

Now that we have the link preview data available, let's update the rendering logic in the return statement:

return (
  <div>
    <h3>{previewData.title}</h3>
    <p>{previewData.description}</p>
    {previewData.image && <img src={previewData.image} alt="Link Preview" />}
  </div>
);

You can style the componant according to your choice, I am not doing because i sucks at designing. and that's all for the very simple link preview component.

Final result-

Now we can implement some error and loading state and with that we can also implement the redirect to website according to the link provided.

import { useState, useEffect } from 'react';

function LinkPreview({ url }) {
  const [previewData, setPreviewData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(data, 'text/html');
        const title = doc.querySelector('title')?.textContent || '';
        const description = doc.querySelector('meta[name="description"]')?.getAttribute('content') || '';
        const image = doc.querySelector('meta[property="og:image"]')?.getAttribute('content') || '';

        setPreviewData({ title, description, image });
        setLoading(false);
      } catch (error) {
        console.error(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!previewData) {
    return <p>Failed to fetch link preview.</p>;
  }

  const handleClick = () => {
    window.open(url, '_blank');
  };

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      <h3>{previewData.title}</h3>
      <p>{previewData.description}</p>
      {previewData.image && <img src={previewData.image} alt="Link Preview" />}
    </div>
  );
}

export default LinkPreview;

But what if it has a youtube video. The above code definately will not show the desired result. That what can we do?
well here is an escape:
We can check if a url is related to youtube or not and then using some methods we can extract the thumbnail of video for image section in link preview.

import { useState, useEffect } from 'react';

function LinkPreview({ url }) {
  const [previewData, setPreviewData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.text();

        const isYouTubeVideo = isYouTubeURL(url);
        if (isYouTubeVideo) {
          const videoId = extractYouTubeVideoId(url);
          const videoThumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

          setPreviewData({
            videoId,
            videoThumbnail,
          });
          setLoading(false);
        } else {
          const parser = new DOMParser();
          const doc = parser.parseFromString(data, 'text/html');
          const title = doc.querySelector('title')?.textContent || '';
          const description = doc.querySelector('meta[name="description"]')?.getAttribute('content') || '';
          const image = doc.querySelector('meta[property="og:image"]')?.getAttribute('content') || '';

          setPreviewData({
            title,
            description,
            image,
          });
          setLoading(false);
        }
      } catch (error) {
        console.error(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  const isYouTubeURL = (url) => {
    return url.includes('youtube.com') || url.includes('youtu.be');
  };

  const extractYouTubeVideoId = (url) => {
    const videoIdRegex = /(?:\/embed\/|\/watch\?v=|\/(?:embed\/|v\/|watch\?.*v=|youtu\.be\/|embed\/|v=))([^&?#]+)/;
    const match = url.match(videoIdRegex);
    return match ? match[1] : '';
  };

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!previewData) {
    return <p>Failed to fetch link preview.</p>;
  }

  const handleClick = () => {
    window.open(url, '_blank');
  };

  if (previewData.videoId) {
    return (
      <div onClick={handleClick} style={{ cursor: 'pointer' }}>
        <img src={previewData.videoThumbnail} alt="Video Thumbnail" />
      </div>
    );
  }

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      <h3>{previewData.title}</h3>
      <p>{previewData.description}</p>
      {previewData.image && <img src={previewData.image} alt="Link Preview" />}
    </div>
  );
}

export default LinkPreview;

'isYoutubeUrl' function

It will check if youtube keyword is in there to sperate youtube link and normal link

'extractYouTubeVideoId' function-

It will be reponsible for extracting video ID,
The pattern
(?:\/embed\/|\/watch\?v=|\/(?:embed\/|v\/|watch\?.*v=|youtu\.be\/|embed\/|v=))([^&?#]+)
is used to match various YouTube URL formats, including 'embed', 'watch?v=, v/', 'watch?...v=', and 'youtu.be/'. The captured group ([^&?#]+) captures the video ID.
We then use the match method on the url string with the videoIdRegex to search for a match. If a match is found, the video ID is extracted using match[1]. If no match is found, the function returns an empty string.

And after finding we will get the thumbnail image easily.

and that's it.

Follow me on twitter - @Rahulj9a

Easiest way to Create React tables (NEXTJS)

Rahul Solanki — Sat, 27 May 2023 14:15:29 +0000

You must have encounter the situations where you have to build a react table, and honestly they are some real problem. So we can use some component library to make them easy, like we can use some component libraries like material UI but the problem with tables in material UI is that you have to ship a very large amount of javascript to browser as it should be a client side component.
But now this problem is solved with a new component DATA TABLE by shadcn UI.

You can filter and sort the email, can check all the fields, can enable and disable any sort of columns, and above all this have built-in pagination

So let's build it
first of all install the npm package by running command
npm install @tanstack/react-table
and here is the folder structure:

Folder structure

app
└── payments
├── columns.tsx
├── data-table.tsx
└── page.tsx

The column component is where we declare what data is shown for each column for example the email and amount

and to display all the information we will use the DataTable component which will handle all the data

Code

read the comments within the code:

Column.tsx:



"use client"

import { ColumnDef } from "@tanstack/react-table"

// This type is used to define the shape of our data. e.g we want our id to be string and status none other than these four options
export type Payment = { 
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const columns: ColumnDef<Payment>[] = [
//we can set normal fields like this
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
//
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)

//we can format the amount in any currency without any use of external package

      return <div className="text-right font-medium">{formatted}</div>  
    },
  },
]

DataTable.tsx



"use client"
//we have to import a lot of things and here are they
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

//now we are expecting 2 props: columns and the data(that we are expecting from the page component)
interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
// and now we will use this useReactTable hook
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel()

// and yes adding pagination can be done with just this above one line 

  })

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                )
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

//now to use the pagination we will use the buttons

<button onClick={()=>table.previouspage()}>Previous page</button>
<button onClick={()=>table.nextpage()}>Next Page</button>
    </div>
  )
}

and here is out page.tsx folder:



import { Payment, columns } from "./columns"
import { DataTable } from "./data-table"

async function getData(): Promise<Payment[]> {
// and this Payment[] is imported from .columns which will again controll the type of that data that is passed from the server component to the client component

// Fetch data from your API here.

  return [
    {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "m@example.com",
    },
    // ...
  ]
}

export default async function DemoPage() {
  const data = await getData()

  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={data} />
    </div>
  )
}

and that's all, don't forget to check the official documentation of the component

Follow me on Twitter and Instagram
for more such content

DEVOSORUS

Accessibility in web development: designing for all users

Rahul Solanki — Mon, 24 Apr 2023 06:49:41 +0000

Web accessibility a topic that is often underrated especially among beginners and sometimes even the experienced developers, but what is web accessibility. Web accessibility basically means designing and developing websites to ensure that all users, including those with disabilities,like dyslexia or color blindness, can access and use them. In this article, we will discuss the importance of accessibility in web development and provide some best practices for designing for all users.

Why Is Accessibility Important?

Accessibility is essential because it ensures that all individuals, including those with disabilities, have equal access to information and technology. The internet has become a vital part of everyday life, and it is critical that everyone has access to it.

Web accessibility ensures that individuals with disabilities can use and navigate websites and online content as effectively as individuals without disabilities. Inaccessible websites can prevent users from accessing essential information, completing tasks, and can even lead to legal issues.

Moreover, accessibility is not just important for individuals with disabilities. It can also benefit users with temporary disabilities, such as a broken arm, users with slow internet connections, and even elderly users who may have difficulty with technology.

In addition to the ethical and moral considerations of ensuring that all users have access to online content, there are also legal considerations. Many countries have laws and regulations that require websites to be accessible, and failure to comply can result in legal action and financial penalties.

Overall, accessibility is crucial for creating a more inclusive online environment and ensuring that all individuals have access to information and technology. It is important for web developers to prioritize accessibility and create websites that are usable and accessible to all users.

Designing for Accessibility: Best Practices

Use Semantic HTML

Semantic HTML is the practice of using HTML elements that accurately describe the content they contain, rather than just using generic divs and spans. Semantic HTML improves the accessibility, SEO, and maintainability of a website.By using semantic HTML, screen readers and other assistive technologies can better understand the content and provide a more accessible experience for users.

Here's an example of how semantic HTML can be used:

Let's say you're creating a website that has a section for articles. In the past, you may have used a generic div to create the section, like this:

<div class="articles">
  <div class="article">
    <h2>Title</h2>
    <p>Content</p>
  </div>
  <div class="article">
    <h2>Title</h2>
    <p>Content</p>
  </div>
</div>

However, this code doesn't provide any information about the content it contains, making it less accessible to users who rely on assistive technology, such as screen readers.

Instead, using semantic HTML, you can use the section and article elements, like this:

<section class="articles">
  <article>
    <h2>Title</h2>
    <p>Content</p>
  </article>
  <article>
    <h2>Title</h2>
    <p>Content</p>
  </article>
</section>

In this example, the section element describes the purpose of the content as a collection of articles, and each article element describes a single article. This provides more information about the content to assistive technology and makes it more accessible to users with disabilities.

By using semantic HTML, you can provide more context and meaning to your website's content, making it more accessible, understandable, and maintainable.

Provide Alternative Text for Images

Images are an essential component of many websites, but they can present barriers for users with visual impairments. Providing alternative text (alt text) for images allows screen readers to describe the image to the user.
Here's an example of how alt text can be used:

<img src="example.jpg" alt="A smiling woman holding a dog on a leash">

In this example, the img element includes the alt attribute, which provides a description of the image. The alt text, "A smiling woman holding a dog on a leash," describes the content of the image and provides context for users who are unable to see the image.
It's also important to note that decorative images, such as background images or images that don't add any information to the content, should have empty alt text.

Ensure Color Contrast

Color contrast is important for users with visual impairments who rely on high contrast to differentiate between text and background colors. Ensuring that text has a high contrast with its background can help users with low vision or color blindness.
You can read this topic in more detail in the below article on mdn website:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

Use Descriptive Link Text

Links should be descriptive of their destination and should make sense out of context. For example, "Click Here" is not a descriptive link, but "Read More About Web Accessibility" is.

Use ARIA (Accessible Rich Internet Applications) Attributes

ARIA attributes are HTML attributes that provide additional information to assistive technologies about the purpose and function of UI elements. Using ARIA attributes can make web content more accessible for users with disabilities.
You can read below article for more detail about this topic:
https://www.w3.org/WAI/standards-guidelines/aria/

Keyboard Accessibility

Users with motor impairments or who use assistive technologies rely on keyboard navigation to navigate web content. Ensuring that all interactive elements are accessible via keyboard navigation is a crucial aspect of web accessibility.
Here are some tips for improving keyboard accessibility on your website:

Make links and buttons keyboard accessible: Ensure that links and buttons can be accessed and activated using only the keyboard, by using the tabindex attribute and the Enter key to activate them.
Ensure focusability and visibility: Make sure that keyboard users can see where they are on the page by ensuring that all focusable elements, such as links, buttons, and form fields, are visually distinguishable from other page elements.
Provide clear and concise instructions: Provide clear and concise instructions for keyboard users on how to navigate and interact with the website. This can include instructions on how to use keyboard shortcuts or how to access hidden content.

Conclusion:

Designing for accessibility means designing websites that are inclusive and accessible to all users. By implementing the best practices outlined above, web developers can create websites that are more accessible, usable, and enjoyable for all users, regardless of their abilities or disabilities. By prioritizing accessibility, web developers can create a more equitable online experience for everyone

Now you are here don't forget to follow me @rahulj9a
And on twitter with username rahulj9a

Have a nice day 😊

The Importance of Clean Code in JavaScript Development

Rahul Solanki — Sat, 22 Apr 2023 14:59:45 +0000

Enhance your JavaScript development skills with the best practices and techniques to write clean and robust code for optimal performance and maintain
So in the past few years, Javascript has emerged as one of the most popular programming languages and its popularity is still increasing day by day. New features, libraries and frameworks are coming regularly and so the style of doing a task is also changing, making javascript a more powerful language that allows developers to build dynamic and interactive web applications. And while building these scalable and high-quality applications one has to write code in a way that can be maintainable, easy to understand for other developers, can easily be debugged and if it needs some change then can be modified very easily. So it is essential for a developer to write clean and maintainable code who wants to build a complex application. However, writing clean and maintainable JavaScript code can be quite challenging, especially for beginners. In this blog, we will discuss what clean code is, why it is essential, and how to write clean and maintainable JavaScript code that is also SEO-friendly.

What is Clean Code?
Clean code refers to code that is easy to read, understand, and modify. It follows best practices, is well-organized, and has a consistent style. Writing clean code is important because it makes it easier to collaborate with other developers, reduces the risk of errors, and makes it easier to maintain and extend the codebase over time. So, Clean code is characterized by the following traits:

Clarity: The code should be easy to read and understand.
Simplicity: The code should be simple, without any unnecessary complexity.
Consistency: The code should follow a consistent style and use consistent naming conventions.
Maintainability: The code should be easy to modify and maintain over time.

Why is Clean Code Important?
Generally beginners don't emphasize on writing clean code and just focus on the fact that code should work, and because beginners' projects are not usually that much complex and they don't have a team to collaborate with, writing clean code can be easily ignored, But as their project's size boom, it became a necessity to write it in a well-defined manner. So Clean code is important for several reasons:

Readability: Clean code is easier to read and understand, which makes it easier for developers to collaborate and maintain the codebase over time. When code is hard to read, it can be difficult to understand what the code does or how it works, which can lead to errors and inefficiencies.

Maintainability: Clean code is easier to maintain, which reduces the risk of bugs and makes it easier to add new features or make changes to the codebase. When code is poorly organized or inconsistent, it can be time-consuming and error-prone to modify or extend it.

Scalability: Clean code is more scalable, which means it can handle growth and change more effectively. When code is clean, it is easier to add new functionality or refactor existing code without introducing bugs or compromising the overall quality of the codebase.

Collaboration: Clean code is easier to collaborate on, which fosters a culture of teamwork and code ownership. When code is clean, it is easier for multiple developers to work on the same codebase without stepping on each other's toes or introducing conflicting changes.

Efficiency: Clean code is more efficient, which means it uses fewer system resources and performs faster. When code is clean, it is easier to optimize and improve the codebase's performance without introducing bugs or other issues.

Here is an example of a piece of code that is working fine but not in the category of clean code:-

function a(b,c){let d=0;for(let e=0;e<b.length;e++){if(b[e]===c){d++}}return d}

This code will run correctly but this code has several issues. First, the function name a is not descriptive or meaningful. Second, the function takes arguments b and c without any indication of what they represent. Third, the code uses a single-letter variable name d without any explanation of what it represents. Fourth, the for loop is hard to read and understand, with multiple levels of nesting and no spacing between elements. Finally, the code uses an if statement without braces, which can make it harder to read and understand.

Here's an example of how this code could be refactored to be cleaner:

function countOccurrences(array, targetValue) {
  let count = 0;
  for (let i = 0; i < array.length; i++) {
    if (array[i] === targetValue) {
      count++;
    }
  }
  return count;
}

This code is much cleaner and more readable. The function name countOccurrences is descriptive and meaningful, and the arguments array and targetValue indicate what the function expects as input. The variable name count is also more descriptive, and the for loop is easier to read and understand, with proper spacing and indentation. Finally, the if statement is enclosed in braces, making it easier to read and understand the logic of the function.

Overall, clean code is important because it reduces the risk of errors, improves the efficiency and scalability of the codebase, fosters a culture of collaboration, and makes the codebase more maintainable and extensible over time.

How to Write Clean and Maintainable JavaScript Code
Now that we understand the importance of clean code let's discuss how to write clean and maintainable JavaScript code.

Use Meaningful and Consistent Naming Conventions One of the most important aspects of writing clean code is using meaningful and consistent naming conventions. This includes naming variables, functions, and classes in a way that accurately reflects their purpose and meaning. It is also essential to use consistent naming conventions throughout the codebase so that other developers can easily understand what each variable represents.

Here is an example:

// Poor Example:
let a = 10;
let b = 20;

// Good Example:
let numberOfUsers = 10;
let totalRevenue = 20;

Comment Your Code Adding comments to your code is also crucial for writing clean and maintainable JavaScript code. Comments help other developers understand your code by providing context and explaining how the code works. This is especially important for complex or challenging code sections, although the best code is self-explanatory and does not require comments, sometimes it's important when the codebase is huge and there is a lack of time, as comments can also help a developer to focus on the point where it needs to be rather than reading every single line of code

Here is an example:

// Poor Example:
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    console.log(i + ' is even');
  } else {
    console.log(i + ' is odd');
  }
}

// Good Example:
for (let i = 0; i < 10; i++) {
  // Check if i is even
  if (i % 2 === 0) {
    console.log(i + ' is even');
  } else {
    console.log(i + ' is odd');
  }
}

Use Modular Code Using modular code is another critical element of writing clean and maintainable JavaScript code. This means breaking your code down into smaller, more manageable functions or independent modules that can be developed and tested separately. Modular code makes it easier to read and understand your code, as well as making it easier to modify, maintain and debug.

Here is an example:-

// Poor Example:
function calculateArea(width, height) {
  return width * height;
}

function calculatePerimeter(width, height) {
  return 2 * (width + height);
}

let width = 10;
let height = 20;

let area = calculateArea(width, height);
let perimeter = calculatePerimeter(width, height);

console.log('Area: ' + area);
console.log('Perimeter: ' + perimeter);

// Good Example:
function rectangle(width, height) {
  function calculateArea() {
    return width * height;
  }

  function calculatePerimeter() {
    return 2 * (width + height);
  }

  return {
    area: calculateArea,
    perimeter: calculatePerimeter
  };
}

let rect = rectangle(10, 20);

console.log('Area: ' + rect.area());
console.log('Perimeter: ' + rect.perimeter());

In the poor example, the calculateArea() and calculatePerimeter() functions are defined separately, and the values for width and height are declared outside the functions. This makes the code harder to read and understand, and could lead to errors if the values for width and height were changed by mistake.

In the good example, the rectangle() function encapsulates both the calculateArea() and calculatePerimeter() functions within a single module. The width and height values are passed as arguments to the rectangle() function, and are used internally by the calculateArea() and calculatePerimeter() functions. The rectangle() function returns an object with properties for area and perimeter, which can be called as functions to calculate the respective values. This approach makes the code more modular, easier to understand, and less error-prone.

Use Functional Programming Concepts Functional programming concepts are another important aspect of writing clean and maintainable JavaScript code. This includes writing code that is stateless and immutable, which means that it does not change its state or properties externally. This results in code that is more predictable and testable, which can help you catch bugs before they become real problems. With that we can access a function later very easily and we don't have to write a piece of code again and again

// Poor Example:
if (user.age >= 18 && user.age <= 65 && user.hasValidLicense) {
  console.log('User is eligible to drive');
} else {
  console.log('User is not eligible to drive');
}

// Good Example:
function isEligibleToDrive(user) {
  return user.age >= 18 && user.age <= 65 && user.hasValidLicense;
}

if (isEligibleToDrive(user)) {
  console.log('User is eligible to drive');
} else {
  console.log('User is not eligible to drive');
}

In the poor example, the condition for determining if a user is eligible to drive is written directly in the if statement. While it is functional, this code is not easily reusable and lacks readability. If we need to check whether a user is eligible to drive in another part of the application, we would have to rewrite the same condition again.

In the good example, we've created a isEligibleToDrive() function that encapsulates the condition for checking eligibility. This function takes in the user object as a parameter and returns a boolean value based on whether the user meets the eligibility criteria. The if statement then calls this function, making the code much more readable and easier to understand.

Moreover, this approach makes the code more modular, as we can easily reuse the isEligibleToDrive() function throughout our application. If the eligibility criteria change, we can simply update the isEligibleToDrive() function instead of searching for every instance where the condition is written directly in the code.

By using modular code like this, we can improve the maintainability and scalability of our codebase.

Optimize for Performance While performance is not the primary focus of writing clean and maintainable code, it is still an essential consideration. To improve your application's performance, you should minimize the use of global variables and use iteration loops instead of recursion. It is also a good idea to reduce the number of HTTP requests and optimize your code for memory usage.

Let's take a look at each of these performance considerations with an example of code:

Minimizing the use of global variables:

// Poor Example:
let username = 'John';

function greetUser() {
  console.log('Hello, ' + username + '!');
}

greetUser();

// Good Example:
function greetUser(username) {
  console.log('Hello, ' + username + '!');
}

let username = 'John';
greetUser(username);

In the poor example, the username variable is declared in the global scope and is accessed within the greetUser() function. While this code is functional, it is not recommended because it can lead to naming conflicts and can make the code harder to maintain.

In the good example, the username variable is passed as an argument to the greetUser() function instead of being accessed directly within the function. This approach minimizes the use of global variables and makes the code more modular and easier to maintain.

Using iteration loops instead of recursion:

// Poor Example:
function factorial(num) {
  if (num === 0) {
    return 1;
  } else {
    return num * factorial(num - 1);
  }
}

console.log(factorial(5)); // Output: 120

// Good Example:
function factorial(num) {
  let result = 1;
  for (let i = 1; i <= num; i++) {
    result *= i;
  }
  return result;
}

console.log(factorial(5)); // Output: 120

In the poor example, the factorial() function uses recursion to calculate the factorial of a number. While this code is functional, it can cause performance issues for larger inputs, as each recursive call adds a new level to the call stack.

In the good example, the factorial() function uses a for loop to calculate the factorial of a number. This approach is more efficient than recursion and can handle larger inputs without causing performance issues.

Reducing the number of HTTP requests:

// Poor Example:
function getDataFromAPI() {
  let data = null;
  $.ajax({
    url: '/api/data',
    success: function(response) {
      data = response;
    }
  });
  return data;
}

console.log(getDataFromAPI()); // Output: null

// Good Example:
function getDataFromAPI(callback) {
  $.ajax({
    url: '/api/data',
    success: function(response) {
      callback(response);
    }
  });
}

getDataFromAPI(function(data) {
  console.log(data); // Output: data from API
});

In the poor example, the getDataFromAPI() function makes an HTTP request to fetch data from an API and returns the data immediately. However, since the HTTP request is asynchronous, the getDataFromAPI() function returns null instead of the actual data.

In the good example, the getDataFromAPI() function takes a callback function as an argument and calls this function with the actual data once the HTTP request is complete. This approach ensures that the actual data is returned only when it is available and minimizes the number of HTTP requests made by the application.

Optimizing code for memory usage:

// Poor Example:
let data = [];
for (let i = 0; i < 1000000; i++) {
  data.push(i);
}

console.log(data.length); // Output: 1000000

// Good Example:
function* generateData() {
  for (let i = 0; i < 1000000; i++) {
    yield i;
  }
}

let data = Array.from(generateData());

console.log(data.length);

Conclusion
In conclusion, writing clean and maintainable JavaScript code is essential for any web developer. By using meaningful and consistent naming conventions, commenting on your code, using modular code, applying functional programming concepts, and optimizing for performance, you can write code that is easier to read, maintain, modify and debug. Writing clean code is not a one-time task but an ongoing effort. As you continue to develop your skills, strive to write cleaner, more maintainable code to become an expert in your field

HOW to Keep user's password safe in database

Rahul Solanki — Thu, 19 Jan 2023 09:05:52 +0000

If you have ever tried to build a backend where you have to build sign-in/sign-up, one of the main concerns is "how can I keep my user's password safe".
Let's dive deep into it

Let's say you have an authentication system and you have to store a username and password for your application in your database. Let's say the user's username is "Abc" and the password is "Abc$123" and you store it in plain words in your database. Now if any hacker/attacker tries to hack your database can steal all of your data about username and password and can easily access the user's account and can hack it.

Hacker: I just hack the database now I can log in with
any user details.

But then what's the solution?
Simply we will not store our password in plain word.

Before learning how will we do that. let's see how our authentication will work

Our client will enter a username and password
After that our backend will check if the login credentials are right or wrong.
Backend will talk with the database and will check if a user is already sign-up or not and then will return the respective results

Now let's get back to what can we do, we will do is we will make a hash of the user's password in our backend and then send that hashed value into our backend to store. while signup and checking while signing in. and this whole process is called password hashing.

Hacker: Okay I will change that hashed value into a plain password

Password hashing is basically a one-way function. It can convert a plain password into hashed value but can't convert a hashed value back into a plain password. Let's say your password is "abc$123" and after hashing value became "dfdfvsa#342123%EFW$". then there is no way we can change that hashed value into our actual password and if we try to log in with that hashed password it will generate another hash value according to the input.

now whenever we will try to log in the backend will again convert the password and will check if the converted value is stored or not. and now even if the hacker has stolen our user's login data only thing he will have is a converted value and he will not be able to login with that.
How do that:
we can use a npm package bcryptjs to make a hash

Hacker: ha ha! I already have a table containing hash
values of millions of common passwords.

now to avoid the situations where a hacker already have some converted hash values we use SALT. In salt, we add some random string of character in backend with user's password. So chances became very low that hacker have value of that hash value and that's how it can became very difficult for hacker to know the password. So let's say our salt is "12#42$6". So as user will enter his password salt will add to it in backend and then backend will convert it into hash.
code:

const salt = bcrypt.genSalt(10); 
//bcrypt can also generate salt for you
secPass = await bcrypt.hash(password, salt)

user = await User.create({
name:req.body.name,
password:secPass
})

and our password will be remain secured in our database,

additional info: There is also a concept called PEPPER which can be added to password to make it more secure
For more info you can read bcryptjs official documentation

You can contact me on Twitter.
Suggest me on what topics I should write on next?

Copy vs Reference in Javascript

Rahul Solanki — Wed, 11 Jan 2023 07:38:07 +0000

Have you ever try to copy the value of an array and realized that new variable that you assigned is actually not a copy but a reference.
Sometimes we are intended to copy the value of an array or an object and apply the same method that we do to copy a normal string or a number like this:

let a = 1
let b = a;
console.log(a, b) // will return 1 1
b = 2
console.log(a,b) // will return 1 2

but if we try this it does not copy the value of array or object but instead create a reference and then whenever we try to change the value of second variable, the value of first one also changed like this:

const players = ['Wes', 'Rahul', 'Sarah'];
const team = players
console.log(players) // ['Wes', 'Rahul', 'Sarah']
console.log(team) // ['Wes', 'Rahul', 'Sarah']

team[2] = 'raj'
console.log(players) // ['Wes', 'Rahul', 'raj']
console.log(team) // ['Wes', 'Rahul', 'raj']

So in above code as we see, when we change the value of "team[2]", value of "players[2]" also changed. and same case is with objects, like this:

const person = {name:"Rahul", age:"21"}
const captain = person

captain.score = 50

console.log(person) // {name:"Rahul", age:"21", score:50}
console.log(captain)// {name:"Rahul", age:"21", score:50}

that is second variable become a reference of first one;

But than how to copy them?

Well here are some methods to do so:
for arrays:

using .slice()
using .concat()
using ES6 methods
using Array.from()

for objects:

using Object.assign()
using JSON.parse(JSON.stringify())

Implementation:

1).
For Arrays:

2.)
For Objects:
i) Using Object.assign():-
It will take 3 parameters:-

an empty object in order to copy
Object whom which we want copy
(optional) If we want any property to insert.

ii) using JSON.parse( JSON.stringify() ) :-

Follow/DM me on Twitter for any help/collab