Next.js: Next-auth

#react #nextjs #javascript #webdev

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

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.

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

Store your google api and client_secret in .env.local file

To use authentication in your application first wrap your application with 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.