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.
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)