DEV Community: Jeet Bhalani

Getting Started with NextAuth.js: Authentication for Next.js

Jeet Bhalani — Mon, 10 Mar 2025 07:27:33 +0000

Authentication is a must-have for most web apps, and NextAuth.js makes it incredibly easy to set up authentication in a Next.js project. Whether you're using OAuth providers like GitHub and Google, or custom credentials, NextAuth.js has you covered.

In this guide, I'll walk you through setting up NextAuth.js from scratch and share some tips to make your authentication flow seamless.

What is NextAuth.js?

NextAuth.js is a flexible authentication library built for Next.js. It supports multiple authentication strategies, including:

OAuth (Google, GitHub, Twitter, etc.)
Credentials-based authentication (email/password, magic links, etc.)
JWT (JSON Web Tokens) for secure, stateless authentication

With minimal setup, you can add authentication to your Next.js app without handling user sessions manually.

Setting Up NextAuth.js

1️⃣ Install NextAuth.js
Run the following command to install NextAuth.js in your Next.js project:

npm install next-auth
# or
yarn add next-auth

2️⃣ Create an API Route
NextAuth.js requires an API route to handle authentication. Create a new file at pages/api/auth/[...nextauth].ts (or .js if you're not using TypeScript) and add the following code:

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

We're using GitHub as the authentication provider.
The API route handles login and logout flows.
We're modifying the session object to include the user ID.

3️⃣ Set Up Environment Variables.
To keep your API keys secure, create a .env.local file in the root directory and add:


GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
NEXTAUTH_URL=http://localhost:3000

NextAuth.js uses environment variables to securely store API keys.
NEXTAUTH_URL ensures OAuth redirects work correctly.

4️⃣ Implement Authentication in a Component.
Now, let’s add login and logout functionality to a React component using the useSession hook from next-auth/react:

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

export default function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <p>Welcome, {session.user.name}</p>
        <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }
  return <button onClick={() => signIn("github")}>Sign In with GitHub</button>;
}

If the user is logged in, we show their name and a sign-out button.
If not, we display a Sign In with GitHub button.

5️⃣ Protecting Pages with Authentication.
If you want to restrict access to certain pages (e.g., a dashboard), you can use getServerSideProps to check the session:

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

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin",
        permanent: false,
      },
    };
  }
  return { props: { session } };
}

It ensures that only authenticated users can access the page.
Unauthenticated users are redirected to the sign-in page.

🎯 Wrapping Up

With just a few steps, we've integrated NextAuth.js into a Next.js project. This setup works for both OAuth providers (GitHub, Google, etc.) and custom authentication strategies.

🔥 Next Steps

Add more authentication providers like Google or Twitter.
Customize user sessions with database integration.
Explore NextAuth.js callbacks and events for advanced use cases.

Getting Started with Next.js: A Simple Guide

Jeet Bhalani — Sun, 09 Feb 2025 08:05:45 +0000

Next.js is a powerful React framework that simplifies building fast, scalable web applications. With built-in features like server-side rendering (SSR), static site generation (SSG), and API routes, it provides a great developer experience.

In this quick guide, we’ll set up a Next.js project, explore its core features, and build a simple page.

📌 Prerequisites

✅ Node.js installed (recommended: v18+)
✅ Basic knowledge of React.js

🚀 Step 1: Setting Up a Next.js Project

To create a new Next.js project, run the following command in your terminal:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

This starts a development server at http://localhost:3000. 🎉

📂 Step 2: Understanding the Project Structure

A new Next.js project includes:

📁 pages/ – Each file here becomes a route (e.g., index.js → /)
📁 public/ – Stores static assets (images, icons, etc.)
📁 styles/ – Contains global styles and CSS modules

🛠️ Step 3: Creating a Page

Each file inside the pages/ directory automatically becomes a route. Let’s create an About page:

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

Visit http://localhost:3000/about to see it in action!

🎨 Step 4: Styling in Next.js.

Next.js supports global CSS, CSS Modules, and Tailwind CSS.

Using CSS Modules:

Create a CSS file inside the styles/ directory:

/* styles/Home.module.css */
.title {
  color: blue;
  font-size: 24px;
}

Import it inside a page:

import styles from '../styles/Home.module.css';

export default function Home() {
  return <h1 className={styles.title}>Hello Next.js</h1>;
}

🔄 Step 5: Fetching Data in Next.js

Next.js provides multiple ways to fetch data:

getStaticProps (SSG) – Fetches data at build time
getServerSideProps (SSR) – Fetches data on every request
useEffect (CSR) – Fetches data on the client side
Example using getStaticProps:

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

This method pre-renders the page with fetched data.

🚀 Step 6: Deploying Next.js

You can deploy your Next.js app easily using Vercel (the creators of Next.js).

To deploy:

Push your project to GitHub
Go to Vercel and import your repo
Click Deploy 🎉

🎯 Final Thoughts

Next.js is an excellent choice for modern web development, offering SEO benefits, fast performance, and easy routing. Start building your first project today!

🚀 What’s next? Explore:

🔹 API Routes in Next.js
🔹 Middleware & Authentication
🔹 Server Actions & Optimizations.

Happy coding! 💻✨

Wanna copy Data Objects? Shallow copy And Deep copy are the ways: In JS

Jeet Bhalani — Sun, 22 May 2022 17:30:20 +0000

__In JavaScript, Data can be divided into two main categories which are primitivedata types and reference data types. The word data here refers to all the collection of Array, strings and objects which are mostly used to store data in js.

If you don't know what are they no worries here's a link to get some more knowledge ____

`1.` Primitive data types:

The value assigned to a primitive data type variable is strongly tied. This means that anytime you replicate a basic data type variable, the value is transferred to a new memory address that the new variable points to. It will be a true copy if you make a copy.

`2.` Reference data types:

Whereas, for reference data type it stores the address of the memory location where the object is stored. There are two types of copying reference data types namely shallow copy and deep copy.

Shallow copy:

A shallow copy just points to the reference address of the original collection structure (object or array) that carries the value in the new variable; that is, only the collection structure is copied, not the element.

When the field value is a reference type it just copies the reference address, no new object will be created. The referenced objects are thus shared.

let Obj1 = {name: "apple", type: "fruit"};
let clonedObj = obj1;
clonedObj.name = ‘orange’;

// Output:
clonedObj = {name: “orange”, type: “fruit”}
obj1 = {name: “orange”, type: “fruit”}

Shallow copy is simple and typically cheap, as they can be usually implemented by simply copying the reference address. Similarly, this can be observed for arrays.

let arr = [1,2,3];
let clonedArr = arr;
clonedArr.push(4);

// Output:
clonedArr = [1,2,3,4]
arr = [1,2,3,4]

However, there are methods for copying objects without referencing them.

`1.` Spread operator (…)

It is a convenient way to make a shallow copy of an array or object —when there is no nesting, it works great.

It is useful for creating new instances of arrays that do not behave unexpectedly due to old references.

let Obj1 = {name: "apple"};
let clonedObj = {...obj1};
clonedObj.name = ‘orange’;

// Output:
clonedObj = {name: “orange”}
obj1 = {name: “apple”}

`2.` Object.assign().

It copies enumerable properties from a source object to a target object. Further, this can be used only if the object/array contains primitive type values.

let Obj1 = {name: "apple"};
let clonedObj = Object.assign({}, obj1);
clonedObj.name = ‘orange’;

// Output:
clonedObj = {name: “orange”}
obj1 = {name: “apple”}

`3.` Slice().

For arrays specifically, using the built-in .slice() method works the same as the spread operator — creating a shallow copy of one level:

let arr = [1,2,3,4,5]
let clonedArr = arr.slice();
clonedArr.push(6);

//Output:
arr = [1, 2, 3, 4, 5]
clonedArr = [1, 2, 3, 4, 5, 6]

`4.` Array.from().

Another method to copy a JavaScript array is using Array.from()which will also make a shallow copy.

let arr = [1,2,3,4,5]
let clonedArr = Array.from(arr);
clonedArr.push(6);

// Output:
arr = [1, 2, 3, 4, 5]
clonedArr = [1, 2, 3, 4, 5, 6]

These techniques will copy up to the first level. Because nested objects are not truly cloned, the internally copied reference type value for any nested object or array will refer to its memory address, causing shallow copies to operate unexpectedly. To overcome this, we must iterate and copy until we reach the final level, whereas this method is costly and not recommended. A deep copy will be required for objects that are deeply nested.

Deep copy

It simply creates a duplicate of all the properties of the source object into the target object. In other words, both the primitive type and reference type properties will be allocated to new memory locations.

The correct term to use would be cloning, where you know that they both are totally the same, but yet different (i.e. stored as two different entities in the memory space).

It is used to copy JavaScript objects to a new variable NOT by reference.

const nestedArray = [["4"] ,["9"] ,["7"]];

const nestedCopyWithSpread = [...nestedArray];

console.log(nestedArray[0] === nestedCopyWithSpread[0]); 
// true -- Shallow copy (same reference)

const nestedCopyWithJSON = JSON.parse(JSON.stringify(nestedArray));

console.log(nestedArr[0] === nestedCopyWithJSON[0]);
// false -- Deep copy (different references)

The strict equality operator (===)shows that the nested references are the same for shallow copy and different for deep copy.

There are many methods of making a deep copy (or deep clone):

`1.` JSON.parse/stringify.

It helps in parsing a stringified Object and vice versa.


let originalObj = {name: “apple”, price: {chennai: 120}};

let clonedObj = JSON.parse(JSON.stringify(originalObj));
clonedObj.name =”orange”;

clonedObj.price.chennai = “34”;

// Output:
clonedObj = {name: “orange”, price: {chennai: 100}}
originalObj = {name: “apple”, price: {chennai: 34}}

`2.` Lodash.

It is a JavaScript library that provides multiple utility functions and one of the most commonly used functions of the Lodash library is the cloneDeep() method. This method helps in the deep cloning of an object and also clones the non-serializable properties which were a limitation in the JSON.stringify() approach.

Of the various copy algorithms, the shallow copies are the fastest, followed by deep copies using a custom function

Conclusion

In JavaScript, it's actually quite simple to avoid having to deep copy if you never nest objects and arrays inside each other. Because in that scenario — where there is no layering and the objects and arrays just contain primitive values — producing a shallow copy using the spread operator (...),.slice(), and.assign() all function perfectly.

However, in the actual world, where objects contain arrays or vice versa, a deep copy will be required.

A ReactJS Hook : useState()

Jeet Bhalani — Thu, 19 May 2022 08:12:02 +0000

useState is a Hook that enables state variables to be used in functional components. This function takes the initial state and returns a variable with the current state value and another function to update it.

In React, there are two type of components class based and functional based. Functional components are simple functions that accept parameters as component properties and return valid JSX:

function React(props) {
  return <div>{props.useState}</div>
}
// Or as an arrow function
const React = (props) =>  <div>{props.useState}</div>

There are no state or lifecycle methods, as you can see.

React Hooks are the functions that add state variables to functional components. They usually begin with the keyword use.

How to use `useState` Hook in ReactJS? What does it do?

useState allows you to add state to function components, as previously indicated. When you use useState inside a function component, it creates a single piece of state for that component.

Whereas in a class, the state is always an object, Hooks' state can be any type. Each state item contains a single value, which can be an object, an array, a boolean, or any other kind you can think of.

So, when is it appropriate to utilize the useState Hook? It's particularly effective for the local component state, but larger projects may require the usage of additional state management methods.

Declaring`{ useState }`in your React App.

To use the UseState hook in your App simply type the following code:

import React, { useState } from 'react';

The useState Hook allows you to declare only one state variable (of any type) at a time, like this:

import React, { useState } from 'react';

const React= () => {
   const message = useState( '' );
   const listOfMessage = useState( [] );
}

useStatetakes the initial value of the state variable as an argument.

You can pass it directly, as shown in the previous example, or use a function to initialize the variable.

const Message= () => {
   const message = useState( () => helloWorld() );
}

The initial value will only be assigned on the first render and if it's a function, it will only be called on the first render.

The initial parameter of the useState Hook will be ignored in subsequent renders (due to a change of state in the component or a parent component) and the current value will be obtained.

Because its argument is only used for the first time — not every time the property changes — using useState alone won't work.

However, unlike the previous examples, useState does not just return a variable.

It returns an array with the state variable as the first element and a function to update the variable's value as the second element.

Array destructuringis commonly used to simplify the code.

const React= () => {
   const [message, setMessage]= useState( '' );
}

Updating the `useState` in React Hooks

The second element returned by useState is a function that updates the state variable with a new value.

Here's an example of how to update the state variable.

const React = () => {
  const [message, setMessage] = useState( '' );

  return (
    <div>
      <input
         type="text"
         value={message}
         placeholder="Enter a text"
         onChange={e => setMessage(e.target.value)}
       /
  </div>
  );
};

This update function, on the other hand, does not immediately update the value.

The useState parameter will be ignored after re-rendering the component, and this function will return the most recent value or the new state values.

Using state varibales as an object: In `useState()` Hooks

If we add another property to the message object (id) like in the previous example:

const React = () => {
  const [messageObj, setMessage] = useState({ message: '', id: 1 });

  return (
    <div>
      <input
        type="text"
        value={messageObj.message}
        placeholder="Enter a message"
        onChange={e => {
          const newMessageObj = { message: e.target.value };
          setMessage(newMessageObj); 
        }}
      />
      <p>
        <strong>{messageObj.id} : {messageObj.message}</strong>
      </p>
  </div>
  );
};

And we only update themessageproperty like in the above example, React will replace the original state object:

{ message: '', id: 1 }

With the object used in the onChange event, which only contains the message property:

{ message: 'message entered' } // id property is lost

You may replicate the behavior of setState() by passing the object to be replaced as a function argument and using the object spread syntax:

onChange={e => {
  const val = e.target.value;
  setMessage(prevState => {
    return { ...prevState, message: val }
  });
}}

The ...prevState part will get all of the properties of the object and the message: value part will overwrite the messageproperty.

You just have to be careful when applying the spreadsyntax to multidimensional arrays because it won’t work as you might expect.

This leads us to another thing to consider when working with objects as the state.

Updating state in React hooks: For Nested objects

In JavaScript, multidimensional arrays are arrays within arrays:

[
  ['value1','value2'],
  ['value3','value4']
]

You could use them to centralize all of your state variables. However, it is preferable to use nested objects for this purpose:

{
  'row1' : {
    'key1' : 'value1',
    'key2' : 'value2'
  },
  'row2' : {
    'key3' : 'value3',
    'key4' : 'value4'
  }
}

However, when working with multidimensional arrays and nested objects, the spread syntax and Object. assign will create a shallow copy rather than a deep copy.

When copying an array, the spreadsyntax essentially goes one level deep. As a result, as the following example shows, it may not be suited for copying multidimensional arrays. (The same is true for spread syntax and Object.assign().)

let a = [[1], [2], [3]];
let b = [...a];

b.shift().shift(); //  1
//  Array 'a' is affected as well: [[], [2], [3]]

but the important point is that when using nested objects, we can’t just use the spread syntax to update the state object.

For example, consider the following state object:

const [msgObj, setMsg] = useState({
  author: '',
  msg: {
    id: 1,
    text: ''
  }
});

The following code snippets show some incorrect ways to update the text field:

// Wrong
setMsg(prevState => ({
  ...prevState,
  text: 'My message'
}));

// Wrong
setMsg(prevState => ({
  ...prevState.msg,
  text: 'My message'
}));

// Wrong
setMsg(prevState => ({
  ...prevState,
  msg: {
    text: 'My message'
  }
}));

To properly update the text field, we have to copy to a new object the entire set of fields/nested objects of the original object

// Correct
setMsg(prevState => ({
  ...prevState,      
  msg: {             
    ...prevState.msg, 
    text: 'My message'    
  }
}));

In the same way, here’s how you’d update the author field of the state object:

// Correct
setMsg(prevState => ({
  author: 'Joe',      
  ...prevState.msg  
}));

Assuming the message object doesn’t change. If it does change, you’d have to update the object this way:

// Correct
setMsg(prevState => ({
  author: 'Joe',         
  msg: {              
    ...prevState.msg, 
    text: 'My message'    
  }
}));

Conculsion

useState is a Hook (function) that enables state variables to be used in functional components. This function takes the initial state and returns a variable with the current state value (not necessarily the starting state) and another function to update it.

Async Js let's Make It Happen With Promises

Jeet Bhalani — Thu, 19 May 2022 08:07:11 +0000

Promises are asynchronous computations that represent operations that are yet to be complete.

Having you here means you know some basic knowledge about javascript & How it works synchronously. If you don't no worries here are some links to

Promise terminology

A promise is a JavaScript object that allows you to make asynchronous(aka async) calls. It produces a value when the async operation completes successfully or produces an error if it doesn't complete.

A promise can be:

fulfilled - The action relating to the promise succeeded.
rejected - The action relating to the promise failed.
pending - Hasn't fulfilled or rejected yet.
settled - Has fulfilled or rejected.

Although promise implementations follow a standardized behavior, their overall APIs differ. JavaScript promises are similar in API to RSVP.js. Here's how you create a promise:

const promise = new Promise(function(resolve, reject)=>{
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

Step 1.
The promise constructor takes one argument, a callback with two parameters, resolve and reject. Do something within the callback, perhaps async, then call resolve if everything worked, otherwise call reject.

Step 2.
The resolve method indicates successful completion of the task(fetching water), and the reject method indicates an error(the disaster). You do not implement the resolve/reject method. JavaScript provides it to you. You need to call them from the executor function.

Step 3.
so here an example of resolved promise :

// Creating a promise
let promise = new Promise(function(resolve, reject) {
    resolve("resolved"); // resloved on success
});

// Consuming a promise
promise.then((value) => console.log(value)) // resloved

so here as you can see to know what exactly a promise is returning after creating a promise we use .then() and we can say it as consuming a promise.

Step 4.
so here an example of rejected promise :

// Creating a promise
let promise = new Promise(function(resolve, reject) {
    reject("rejected"); // rejected on failure
});

// Consuming a promise
promise.then((value) => console.log(value)) // rejected

here promise is rejected so it logs out rejected on failure

Promise States and Object

The promise object should be capable of informing the consumers when the execution has been started, completed (resolved), or returned with an error (rejected).

A promise object has the following internal properties,

state: This property can have the following values,

pending: When the execution function starts.
fulfilled: When the promise resolves successfully.
rejected: When the promise rejects.

result: This property can have the following values,
undefined: Initially, when the state value is pending.

value: When the promise is resolved(value).
error: When the promise is rejected.
A promise that is either resolved or rejected is called settled.

Handling Promises by the Consumers

The promise object returned by the new Promise constructor has it all. A consumer can use it to know the state(pending, fulfilled, or rejected) and the possible outcomes(value or error) from it.

But hold on. These properties are internal. They are code-inaccessible, but they are inspectable. It means that we will be able to inspect the state and result property values using a debugger tool, but we will not be able to access them directly using the program.

So then? That's where we have three important handler methods, .then(), .catch(), and .finally(). These methods help us create a link between the executor and the consumer when a promise resolves or rejects.

The `.then()` Promise Handler

We get a .then() method from every promise. The sole purpose of this method is to let the consumer know about the outcome of a promise. It accepts two functions as arguments, result and error.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

If you are just interested in the successful outcome, you can chose to pass only one argument,

promise.then(
  (result) => { 
      console.log(result);
  }
);

Similarly, if you are interested in only the error, pass null as the value for the first argument.

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

Also note, you can do three very exceptional things inside the .then() method,

You can return another promise from it.
You can return a value including undefined.
You can throw an error.

These three points will be the basis of learning the Promise Chain which is a whole new advance topic and will cover it in the future blog.

// 1. Creating a Promise

let promise = new Promise(function(resolve, reject) {
 // Pretend a delay of 2 sec to fetch it!
  setTimeout(function() {
      // Let's resolve the promise
      resolve('resolved promise');
  }, 2000);
});


// now let us consume promise
const consumePromise = () => {
  // The handler function to handle the resolved promise
  promise.then(function(result) {
    console.log(`Consumed ${result}`);
  });
}

// 3. Calling the function 
consumePromise();

output // Consumed resolved promise

The `.catch()` Promise Handler

You can use this handler method to handle errors (rejections) from promises.As we discussed already, it is a much better syntax to handle the error situation than handling it using the .then() method.

.catch() helps to handle the failure of API calls and handle errors.Here in catch its takes argument which shows the error by consoling it.
using .catch() to handle errors

// 1. Create the promise
let promise = new Promise(function(resolve, reject) {
  reject("rejected") // rejected  
}

promise.then((value)=>console.log(value))
.catch((error)=>console.log(error))

The `.finally()`Promise Handler

The .finally() handler method performs cleanups like stopping a loader, closing a live connection, and so on. Irrespective of whether a promise resolves or rejects, the .finally() method will be called.
Here .finally() takes a callback function as argument

// 1. Create the promise
const isLoading = true;
let promise = new Promise(function(resolve, reject) {
  reject("rejected") // rejected  
}

promise.then((value)=>console.log(value))
.catch((error)=>console.log(error))
.finally(()=>{
isLoading = false
})

Summary

To Summarize,

Promise is an important building block for the asynchronous concept in JavaScript.
You can create a promise using the constructor function.
The constructor accepts an executor function as an argument and returns a promise object.
A promise object has two internal properties, state and result. These properties are not code-accessible.
The consumer of a promise can use the .then(), .catch(), and .finally() methods to handle promises.