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.
Part 2 of this series is here: Magic Link Email Authentication in Next.js with next-auth and PostgreSQL.
Now we have our app scaffold; nothing surprising here if you’ve ever done this before.
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.
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.
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:
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.
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.