DEV Community

Cover image for Next.js: Next-auth
Md Anas Sabah
Md Anas Sabah

Posted on

Next.js: Next-auth

In this article, you will see how to authenticate our Next application with Google

What is Next?

Next is a full stack , open source react framework for production application by the company named Vercel.

Getting Started with Next-auth.

First setup your Next application
npx create-next-app app-name

npx
Note: npx stands for Node Package Execute and it comes with the npm to execute CLI command.

This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template.

nmpx

These folders/files will be created after running CLI.

To add NextAuth.js to a project create a file called [...nextauth].js in pages/api/auth. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.

In [...nextauth].js file add the following code

Image-auth
Store your google api and client_secret in .env.local file

To use authentication in your application first wrap your application with Session Provider.

Image-session-provider
To be able to use useSession first you'll need to expose the session context,

<SessionProvider />

at the top level of your application

Now, to implement Sign-In and Sign-Out method, we have to import these to methods from next-auth/react and create a function on div or button where ever you want.

sign-in

example
example-1
example-2
example-4

You can checkout the code of my new project Challan-X on Github

Thank you for reading and let's connect

Thank you for reading my blog. Feel free to connect on Twitter or Instagram

Top comments (0)