【Next.js】基礎から始めるNext.js API Routes【２１NextAuth SetUp】

【２１NextAuth SetUp】

YouTube: https://youtu.be/K9Ms_gU0EdM

https://youtu.be/K9Ms_gU0EdM

今回は「NextAuth.js」を使用して、簡単なログインフォームを作成しようと思います。

https://next-auth.js.org/

package.json

  "dependencies": {
    "next-auth": "^4.18.7",
  },

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

import NextAuth from 'next-auth'
import GithubProvider from 'next-auth/providers/github'

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

export default NextAuth(authOptions)

pages/api/auth/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}