DEV Community: Harshit Dugar

Implement NextAuth with Next.js and TypeScript

Harshit Dugar — Fri, 25 Apr 2025 05:40:53 +0000

Introduction

Authentication is a critical part of web applications, and external authentication services like Google, GitHub, and Facebook make it easier to implement secure login mechanisms. In this guide, we will go step by step to integrate external authentication in a Next.js application using TypeScript and NextAuth.js.

Before moving to the tutorial, let’s dive into what NextAuth is.

What is NextAuth

NextAuth.js is a complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

Before we start, ensure you have the following installed:

Node.js
Next.js (latest version)
TypeScript

Project Setup

First, create a Next.js project if you haven’t already:

npx create-next-app@latest my-auth-app

We will use TypeScript in this project, so choose TypeScript from the options.
For better production and understanding purpose, we will not be using /src folder in our structure.

Install NextAuth

After setting up your project, install next next-auth JS through npm

npm install next-auth

Before creating components and writing code, let’s understand the structure of nextAuth.

Setup env variable

Add the nextauth_secret to the environment variable.

NEXTAUTH_SECRET=nextauth

NextAuth Structure

next-auth.d.ts is a file in the root directory that defines all the data types for using nextAuth.
nextAuthOptions - This contains all the options (for instance, consider it as an array of options) that is needed for performing the authentication part. Can also refer to the Documentation.
[…nextauth] - It is a special directory that contains route.ts to maintain and inject auth options.
middleware - Acts as a bridge between the frontend and authentication service.

next-auth.d.ts

In the root directory, create a file named next-auth.d.ts

import { DefaultSession } from "next-auth";

declare module "next-auth"{
    interface Session{
        user:{
            id: string;            
        } & DefaultSession["user"];
    }
}

We will use session as our default datatype to capture all the information.
Now we will define options for our nextAuth

nextAuthOptions

In the root directory, create a folder util. Inside that, create a file auth.ts (name of file can be anything).
Inside util/auth.ts paste this code.

Authentication Providers in NextAuth.js are services that can be used to sign in a user. There are many ways a user can be signed in, we are using Credentials as the provider.

Next, we will be adding callback option, in the above file, after adding provider,s add another option named callbacks. File should look like this-

import { NextAuthOptions } from "next-auth";
import  CredentialsProvider  from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

export const authOptions: NextAuthOptions = {
    providers: [
        CredentialsProvider( {
            name: "Credentials",
            credentials: {
                email: {label:"Email",type:"text"},
                password: {label: "Password", type: "password"}
            },
            async authorize(credentials){
                if(!credentials?.email || !credentials?.password){
                    throw new Error("Missing Email or Password"); 
                }
                try {
                    return {
                        email: credentials.email
                    }
                } catch (error) {
                    throw error
                }
            }
        }),
    ],
    callbacks: {
        async jwt({token,user}){
            if(user){
                token.id = user.id;
            }
            return token
        },
        async session({session,token}){
            if(session.user){
                session.user.id = token.id as string
            }
            return session
        }
    },
}

Jwt is used to generate the token of the user and store it in the session.

We have used two methods in callbacks-

jwt to tokenize the user credential
session

Next option is session, modify the code after callbacks-

import { NextAuthOptions } from "next-auth";
import  CredentialsProvider  from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

export const authOptions: NextAuthOptions = {
    providers: [
        CredentialsProvider( {
            name: "Credentials",
            credentials: {
                email: {label:"Email",type:"text"},
                password: {label: "Password", type: "password"}
            },
            async authorize(credentials){
                if(!credentials?.email || !credentials?.password){
                    throw new Error("Missing Email or Password"); 
                }
                try {
                    return {
                        email: credentials.email
                    }
                } catch (error) {
                    throw error
                }
            }
        }),
    ],
    callbacks: {
        async jwt({token,user}){
            if(user){
                token.id = user.id;
            }
            return token
        },
        async session({session,token}){
            if(session.user){
                session.user.id = token.id as string
            }
            return session
        }
    },
    session: {
        strategy: "jwt",
        maxAge: 30 * 24 * 60 * 60
    },
}

In session we use Strategy to define where to store and use our sessions.

Two types of strategies are there-

Database
jwt The most common and easy way is to use jwt strategy. maxAge is defined for the time-limit of this session.

Final step is to add the pages, secret option.

import { NextAuthOptions } from "next-auth";
import  CredentialsProvider  from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

export const authOptions: NextAuthOptions = {
    providers: [
        CredentialsProvider( {
            name: "Credentials",
            credentials: {
                email: {label:"Email",type:"text"},
                password: {label: "Password", type: "password"}
            },
            async authorize(credentials){
                if(!credentials?.email || !credentials?.password){
                    throw new Error("Missing Email or Password"); 
                }
                try {
                    return {
                        email: credentials.email
                    }
                } catch (error) {
                    throw error
                }
            }
        }),
    ],
    callbacks: {
        async jwt({token,user}){
            if(user){
                token.id = user.id;
            }
            return token
        },
        async session({session,token}){
            if(session.user){
                session.user.id = token.id as string
            }
            return session
        }
    },
    session: {
        strategy: "jwt",
        maxAge: 30 * 24 * 60 * 60
    },
    pages:{
        signIn: "/login",
        error: "/login"
    },
    secret: process.env.NEXTAUTH_SECRET
}

Setting […nextauth]

In the app folder, create api/auth folder. Inside auth create another directory […nextauth].

Remember to name it the same way. Create a file route.ts to handle the routes for the nextAuth operations .

import { authOptions } from "@/util/auth";
import NextAuth from "next-auth";

const handler = NextAuth(authOptions);

export {handler as GET, handler as POST};

This way our nextAuth will handle and bundle the Get and Post requests.

Final step is to setup the middleware.

Middleware

In the root directory, create a file middleware.ts and paste the following code

import withAuth from "next-auth/middleware";
import { NextResponse } from "next/server";

export default withAuth(
    function middleware(){
        return NextResponse.next()
    },
    {
        callbacks: {
            authorized: ({token,req}) =>{
                const {pathname} = req.nextUrl;
                //allow auth related routes
                if(
                    pathname.startsWith("/api/auth") ||
                    pathname === "/login" ||
                    pathname === "/register"
                ){
                    return true
                }    
                //public 
                if(pathname ==="/" || pathname.startsWith("/api/video")){
                    return true
                }
                return !!token                                                
            }
        }
    }
)

export const config = {
    matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"]
}

The best method that works efficiently with nextjs is withAuth().

This function takes parameters to define where to use and block our paths for nextAuth.

Callback is used to ensure the paths mentioned are not allowed to be accessed openly by any user without authentication.

Conclusion

This guide provides a step-by-step tutorial for integrating external authentication in a Next.js application using TypeScript and NextAuth.js. You'll learn how to set up a Next.js project without the /src folder, install NextAuth.js, and configure authentication providers and callbacks. The guide also covers setting up middleware and routing for secure authentication, ensuring only authorized users can access specific paths.

Thanks a lot developers 😄, I hope this article was helpful to you.

Please support me by subscribing to my newsletter for such tutorials and tip on Development.

Social media apps as a Developer

Harshit Dugar — Sat, 07 Aug 2021 17:18:03 +0000

It this article I have listed some best social media websites which I use as a developer and everyone should use .

1.) Reddit

Reddit is a network of communities where people can dive into their interests, hobbies and passions. There's a community for whatever you're interested in.

2.) Slack

Slack is a messaging app for business that connects people to the information they need. By bringing people together to work as one unified team, Slack transforms the way organizations communicate.

3.) Twitch

Twitch is the world's leading live streaming platform for gamers and the things we love. Watch and chat now with millions of other fans from around the world. But it is also very useful if you are a developer as many communities conduct their workshops here.

4.) Discord

Discord is the easiest way to talk over voice, video, and text. Talk, chat, hang out, and stay close with your friends and developer communities.

5.) Meetup

Find groups that host online or in person events and meet people in your local community who share your interests.
Many developer communities host their events on meetup.

6.) Gitter

Gitter is a chat and networking platform that helps to manage, grow and connect communities through messaging, content and discovery.

7.) Stack overflow

As a Developer who don't know about stack overflow.
Stack Overflow is the largest, most trusted online community for developers to learn, share their programming knowledge, and build their careers.

8.) Twitter

As a developer it is the best platform to increase your networking and showcase your skills.

9.) Linkedin

LinkedIn is an online platform that connects the world's professionals. A complete LinkedIn profile will summarize your professional experience to your connections, current and future employers, and recruiters. Through your profile, you can showcase your professional life, milestones, skills and interests.

All these social websites are great to use as a developer as you get informed by new events and technologies regularly .

Some websites also send newsletters in a weekly basis.

All About Web Development

Harshit Dugar — Tue, 20 Jul 2021 15:17:02 +0000

Technology plays a huge role in our daily lives, from the simplest of apps to the most groundbreaking inventions. Every website or piece of software that we encounter has been built by a web developer—but what exactly is web development, and what does a web developer do?

In this guide, we’ll go through the basics of web development.
And one more important point , there is no prerequisite to learn web development , if you are a beginner or from non technical background then also you can get started .

There are three phases to become a FULL STACK WEB DEVELOPER.

1. Know the basic essentials

2. Front End

3. Back End

Now the question comes how to get started and which resources to follow .
I will be giving all the resources and how to get started in a particular manner .

1. Basic Essentials -

As you are going to start your web development journey you should know some basic knowledge of HTTP , API and how internet works .
Not to worry about this that how we will learn . It will not take much time . Here is the list

a. Git and Github

Git is a version control system which basically manages your project i.e. every change you make in your project it will keep a record of it .
Now from where to learn --

Free Udacity course click here

b. HTTP and Browser system

HTTP means Hyper Text Transfer Protocol, to learn more about http and how server client works you can read this article click here

c. API

API i.e. Application Programming Interface , is a two way system between softwares . to learn more about API click here

2. Front End Development

Now as you have learned basic essentials now lets get started to real web development .
Front end means the actual page you see like YouTube page , Facebook and other websites . They are basically made of 3 components 1.) HTML 2.) CSS 3.) JavaScript
When you make a request to the server to load the website it basically sends you HTML CSS Js code to the browser and you are able to see that web app.
To get started --

a. HTML5

HTML Hypertext Markup Language makes the skeleton of you web page . It is very easy to learn and implement . As a beginner I will not suggest you to do 100% of HTML as there are some advanced concepts like svg and canvas which is not used as a beginner .
Here is a documentation from where you can learn HTML

b. CSS3

CSS i.e. Cascading Style Sheet is a styling language that provides styles and enhancement to the web page .
All the images collars and effects are done by css .
click here

c. JavaScript

JavaScript is a programming language . It is the brain of you whole web page, it decides the behaviour of web page , you can think it as a full working system . How the button will be clickable and what to do when a particular action is taking place is done through js. For full tutorial of javascript click here
After doing Javascript I will suggest to do Bootstrap which is a css framework. You cam do this from w3schools.
Also do react a javascript library which is developed by Facebook click here
This completes the front end part .
But only learning is not important I will also recommend to do some small projects while learning .

3. Back End Development

As you have successfully completed Front End you are good to go for back end .
All the server side process like searching and storing data to cloud happens in backend part . Backend gives full functionality to our website , we can communicate with data on the server using backend .
To get started first you have to learn a backend programming language , it can be Python , PHP , Java , node.js
I will recommend to use node.js as there is a big community for this language.

a. Node.js

Node.js is used for backend development . It is a server side language .Click here for full documentation .

b. Database Management System (DBMS)

As we move forward and make a responsive website it is also important to know Database Management System. It is a way to store and manage data . You will be storing some data to your page or your website will ask for user input , this all Data will be stored and managed using DBMS. And to do all these task you need Query language. SQL,MongoDB are best and I will recommend to do MongoDB (NoSQL) if you are doing node.js.Click here

What is a stack (MERN vs MEAN)

Stack means set of technologies , in web development stack means set of technology or languages used to make a single project .

There are main two stacks in web development -

1. MERN stack

This is the most recommended stack as it is most used in the industry level.
M => MongoDB
E => Express.js
R => React
N => Node.js
In the above guide I have discussed about MERN stack

2. MEAN stack

M => MongoDB
E => Express.js
A => Angular
N => Node.js

This was all about the full roadmap to become a Full Stack Web Developer.
Thanks for reading article, if you found it helpful do comment your reviews.

Technology Update 13/07/21

Harshit Dugar — Tue, 13 Jul 2021 05:30:32 +0000

Big Tech & Startups 🖥

1. Tesla finally releases Full Self-Driving Beta v9: here’s what it looks like

Tesla has released its Full Self-Driving Beta v9 update. It uses Tesla Vision, a computer vision system that relies on optical imagery. The release notes do not reveal many details about the improvements to the driving system. Full Self-Driving must still be used with caution and drivers are required to stay alert on the roads. The update features driving visualization improvements that display an expanded visualization to show additional surrounding information. Video and screenshots of the new update are available in the article..

2. Exclusive TED chats are coming to Clubhouse (2 minute read)

TED will be bringing weekly exclusive chats to Clubhouse starting on July 12. It will start with one room at 11 AM ET on Mondays, with plans of launching more rooms soon. TED is free to sell brand partnerships or ads without giving Clubhouse a cut. The company has been successful with its podcasting efforts, with 1.65 million downloads per day from all over the globe. Companies are locking down talent as a strategy to win in the social audio market.

Science & Futuristic Technology🔭

1. Watch Virgin Galactic launch Richard Branson to space (2 minute read)

Richard Branson and three company employees flew to the edge of space on the morning of July 11. The event was livestreamed and featured Stephen Colbert as the host and a performance from Khalid. It was delayed by 90 minutes due to overnight weather over Spaceport America. Virgin Galactic has already sold roughly 600 tickets at around $250,000 each. Jeff Bezos will be flying to space on July 20. Virgin Galactic's livestream is available in the article.

2. Northrop to build homes on moon orbit under $935 mln NASA contract (1 minute read)

Northrop Grumman Corp has acquired a $935 million contract from NASA to develop living quarters for its planned outpost in lunar orbit. The Habitation And Logistics Outpost (HALO) will be a vital component of NASA's lunar Gateway. Gateway will support science investigations and enable surface landings on the moon. Eight countries have signed a pact as part of the Artemis program. NASA is aiming to launch the spacecraft in November 2024.

Programming, Design & Data Science 💻

1. Earthly (GitHub Repo)

Earthly is a build automation tool that executes builds in containers, making them self-contained, repeatable, portable, and parallel. It uses the same technology as Docker, but Earthly is designed to be a general-purpose build system. Earthly builds run the same for everyone, making it easier to debug and deploy apps.

2. hck (GitHub Repo)

hck is a cut clone that can use a regex delimiter instead of a fixed string. It makes common things, such as reordering output fields or splitting records on a weird delimiter, easy. hck is fast, and benchmarking results are available.

Thanks a lot for reading this article .
I hope that it was informative and useful.

Need help for back end Development

Harshit Dugar — Tue, 22 Jun 2021 06:51:48 +0000

I need some information regarding installation of nvm and rpm package in my MacBook Air . If anyone knows can comment and tell me the procedure regarding that

New to community

Harshit Dugar — Thu, 03 Jun 2021 14:35:26 +0000

Coding is my passion and I am new here . Help me out to grow in this community