Authentication system in Next.Js using Auth.js

Hey there,

I was working on a project and then comes authentication part. Then I started searching for authentication library for nextjs rather than writing whole code by myself.

Where I landed on this amazing library known as auth.js.

So,
Here I am going to share how to set up auth.js with next.js and importantly the errors which I came across.

Let's get started:

Step 1. Setup the project :-

Open your desired folder in terminal.
Run npx create-next-app@latest to create a next app.

Then cd into your app by cd <your-app-name>

This should look like this :

Step 2. Install auth.js library :-

For npm users - npm install next-auth@beta

For yarn users - yarn add next-auth@beta

Error No 1 - Do not remove "beta" from the command

I intentionally removed the beta part from the installation command because I don't want to install beta version but then I bumped into so many error like import error and file error. So don't remove the beta part.

Step 3. Setup auth secret key :-

npx auth secret

This will automatically adds a secret key named "AUTH_SECRET" in your .env.local file.

AUTH_SECRET is a environment variable which is mandatory in auth.js.

Step 4. Create a new auth.ts file in the root directory of your project.

In my case its src directory.

Add the following code to it :

import NextAuth from "next-auth"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

Step 5. In your app folder create - /api/auth/[...nextauth]/route.ts file.

Add the following code to it :

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Step 6. Create a new middleware.ts file in the root directory of your project.

Add the following code to it :

export { auth as middleware } from "@/auth"

Our initial setup is done. Now what we have to do is to setup authentication methods.

There are three types of authentication methods available in auth.js library:

• OAuth

• Magic Links

• WebAuthn

In this tutorial I am gonna use OAuth method. You can choose between various OAuth providers for this tutorial I am going with Github.

Step 7. Go to https://github.com/settings/profile.

On left navigation bar scroll down and select Developer Settings.

Then click on OAuth apps. And create New OAuth App.

From there you get your client id and client secret.

Step 8. Create .env.local file in the root directory of your project.

Add the following environment variables to it :

AUTH_GITHUB_ID=<client-id-from-step7>
AUTH_GITHUB_SECRET=<client-secret-from-step7>

Note: Do not change the name of the variables.

Step 9. Add the Github Provider in auth.js file @/auth.ts

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
})

Step 10. Create component folder inside src folder and add a SignInBtn.tsx component file to it. You can name it as you want.

Add the following code to it :

import { signIn } from "@/auth"

export default function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("github")
      }}
    >
      <button type="submit">Signin with GitHub</button>
    </form>
  )
}

You can also style the button as you want it to be.

Now use this button wherever you want.

Error No 2 - Do not use the button inside the page or component which is using "use client" property.

I used this button inside a component which is rendering on client side. If you carefully see the button code we are using "use server" in it, so it gives me error that I cannot use server service in the client side rendering. So be careful in it.

Enjoy.