NextAuth.js Intro [1 of 3]: One-Click Signup

One-click signup using Google, Facebook, or any other existing provider is a desirable feature for most web applications since it makes it faster and easier for people to create accounts. Integrating one-click signup with Next.js or any other isomorphic web framework can take a fair bit of work, but the fantastic package makes it incredibly easy and flexible.

Let’s generate our app as we normally would, then add .

Create an account for every provider you want users to be able to log in to your site with. I’m using Google and GitHub in this example, but supports link a ton so go crazy.

Now we’ll add the next-auth session state to our _app.js so that it’s available everywhere via the hook. We'll also add Chakra's theme information to the application in the same manner, so we can style everything pretty easily.

next-auth also requires the environment variable for some functionality, so your .env file should now look something like this.

First, we call the hook to determine login status.

The next-auth hook is multi-purpose. By returning an object in the variable (and not a falsy value), it tells us whether the person is logged in or logged out respectively. It can also return a second boolean to tell us whether it's currently checking session status; we're not doing it in this example, but that's useful if you want to show a loading spinner while it's checking.

Then we add the Log in and Log out links that trigger the default and functions provided by next-auth. Now we've got basic one-click login functionality already. 🎉

The other purpose of is getting information about the logged-in user. If exists, it'll have user information inside of it. So if we add this line to the index.js page: