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.

Step 2. Install auth.js library :-

For npm users - npm install 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

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

In my case its src directory.

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

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

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.