Challenges

Add Social Authentication

Get the Email From GitHub

Now we are going to get the email from GitHub. To do that, we have to make an API call.

We are going to use a NextAuth callback to handle this. These callbacks allow us to modify the default behavior of NextAuth. Right now, we are going to use the signIn callback.

Try to open the pages/api/auth/[...nextauth].js file. Then you will see this:

const callbacks = {}

Add the following code, just below it:

callbacks.signIn = async function signIn(user, account, metadata) {
  const emailRes = await fetch('https://api.github.com/user/emails', {
    headers: {
      'Authorization': `token ${account.accessToken}`
    }
  })
  const emails = await emailRes.json()
  const primaryEmail = emails.find(e => e.primary).email;

  user.email = primaryEmail;
}

Here we get the GitHub accessToken and use that to fetch emails. Then we add it to the user.email field. After that we can see it access it from the client-side.


Now, it's time for an experiment:

  • Check your browser console for session.user.email value
  • Logout
  • Login again
  • Check the session.user.email again
Q: How do you describe the experience?
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: