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.

In this article, I’ll show you how to set up one-click signup in a Next.js application via Google and GitHub, and how to easily force users to be logged in to see your content.

Full code is available here on GitHub, and an interactive demo is here on Vercel.

Part 2 of this series is here: Magic Link Email Authentication in Next.js with next-auth and PostgreSQL.

Scaffold app and add dependencies

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

Now we have our app scaffold; nothing surprising here if you’ve ever done this before.

Create Provider Credentials

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.

From each provider, you’ll need to get an access key and secret. Those will go in your local .env file as follows:

Later when deploying to Vercel, these will go into Vercel environment variables as well.

Configure next-auth

Ok let’s get to the code! 🎉

Following https://next-auth.js.org/getting-started/example, first add their route file which makes their magic integration happen. Then add any providers you want. Below I’ve added Google and GitHub.

Add session and theme to application state

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.

One last .env variable

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

Add authentication!

Now that the setup is complete, let’s give people the ability to sign in and sign out.

Our index.js will now look like this:

Here are the notable pieces:

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:

We’ll now be able to display the user’s name when they’re logged in:

That’s it. In a matter of minutes you were able to allow a user to create an account on your site with a few clicks.

Here’s some even better news: next-auth can do a lot more. In subsequent articles we’ll talk about how to control access to private information, allow signing up via email with a magic link, mashup Google profile info with your app’s custom data, and more.

Now, check out Part 2: Magic Link Email Authentication in Next.js with next-auth and PostgreSQL.

More about:

Mike Cavaliere

Mike Cavaliere is a Senior Engineering Strategist at Echobind. He’s been working with web and mobile software for two decades as an engineer, manager, and one-time CTO. He’s written dozens of articles, been on a number of podcasts, and authored a book entitled Cut into the Jamstack: Build and Deploy a Full-Stack Application Using React and Next.js. He’s a parent of two boys, loves travel, cocktails, comedy, and most music, with a special place in his heart for 1990’s hip-hop.