The Easiest Way to add Auth to a Next App

This video is part of the following playlists:

Next.js

Learn how to add auth to your next application using next auth and github login. All of the code examples are using next 13, but use the pages directory, not the app directory.

Note

unstable_getServerSession has now been renamed to getServerSession.

Warning

NEXTAUTH_SECRET needs to be added as an environment variable in production, but some people experience issues in development when they don't have this environment variable set. So just to be save, add NEXTAUTH_SECRET="some_secret" to your .env.local file. Then use openssl rand -base64 32 to generate a production secret when you deploy: https://next-auth.js.org/configuration/options#secret

Chapters:

0:00 Intro
1:31 Setup Next Auth
3:58 Setup Github Login
6:05 Session Provider
7:29 useSession
11:00 unstable_getServerSession
14:08 Restrict Pages
15:50 Nav Bar
17:17 Next Image
19:12 Restrict API
21:03 Summary

Code Examples

https://github.com/Sam-Meech-Ward/code_snippets_prisma_next_demo/tree/auth

// /pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}

export default NextAuth(authOptions)