The Easiest Way to add Auth to a Next App

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.

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)