Setting Up Nextjs Auth

November - 2021

This is an example with GitHub

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

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
})

Environmental Variables To Set

GITHUB_ID GITHUB_SECRET

or, something like this for twitter TWITCH_CLIENT_ID TWITCH_CLIENT_SECRET

These are set in your ~/config/msync-sandbox/env file (until you figure out how to move them into keychain access)

The app you're using on Twitch is in dev under:

account: TheIdOfAlan app: Auth Test 1


Note: doesn't look like netlify can use next-auth out of the box. Jumped over to using vercel to get the server side rendering. That worked first try (when I put in the proper providrers)


This is a scratchpad for how you setup next-auth for nextjs for twitch.

Notes aren't really in order.

setup the index.js and the

pages/api/auth/[...nextauth.js] files

And: https://next-auth.js.org/providers/twitch

In twich console set url up for the callback to:

https://upbeat-villani-a3178e-2bc417.netlify.live/api/auth/callback/twitch

(changing out the domain for whatever it comes back from via ngrok or netlify dev)

You don't create a page there. it comes up automatially via the [...nextauth.js] file


Set

netlify env:set NEXTAUTH_URL https://upbeat-villani-a3178e-2bc417.netlify.live

with the proper domain name that you're using


Set

netlify env:set TWITCH_CLIENT_ID ASDFASDFASDF
netlify env:set TWITCH_CLIENT_SECRET ASDFASDFASDF