Challenges

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 = [
    Providers.GitHub({
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET
    })
]

const callbacks = {}

const options = {
  providers,
  callbacks
}

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:

NEXTAUTH_URL=http://localhost:3009
šŸ’” 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?
authenticating...

šŸ™ We need your help

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