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

2022/12/30に公開約1,000字

【21NextAuth 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>
  )
}

Discussion

ログインするとコメントできます