Add Social Authentication

Adding Next Auth

Now we are going to add NextAuth to our app. First of all, let's install it:

yarn add next-auth

Then create a file called pages/api/auth/[...nextauth].js and add the following content:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const providers = [
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET

const callbacks = {}

const options = {

export default (req, res) => NextAuth(req, res, options)
šŸ’” It will add a GitHub auth provider based on the information we added to the .env.local file.

Finally, edit your .env.local file and add this:

šŸ’” This should be the current website URL of our app. The domain of this URL should match the "Authorization callback URL", we added previously.

Start the app again, visit http://localhost:3009/api/auth/signin and follow through the UI.

Q: How do you describe the outcome?

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: