NextAuthを使ってAPIで認証するのに苦戦したので雑にメモ。
環境変数
よくわかってないけど設定しないとうまく動かない。
これが原因と分からずずっと動かなかった。
・NEXTAUTH_URL
認証系のURLの設定
https://next-auth.js.org/configuration/options#nextauth_url
・NEXTAUTH_SECRET
認証してJWTをなんやかんやするのに必要らしい
https://next-auth.js.org/configuration/options#nextauth_secret
.env
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=secret
オプション作る
NextAuthの設定的なもの。
src\lib\nextAuthOptions.ts
import { NextAuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github"
import CredentionsProvider from 'next-auth/providers/credentials'
const authOptions: NextAuthOptions = {
secret: process.env.NEXTAUTH_SECRET,
// 必要なプロバイダーは複数設定できる
providers: [
// Githubの認証
GithubProvider({
clientId: process.env.GITHUB_ID || '',
clientSecret: process.env.GITHUB_SECRET || '',
}),
// Credentialsは普通のIDパスワード方式
CredentionsProvider({
name: 'Credentials',
credentials: {
username: {
label: 'Username',
type: 'text',
placeholder: 'username'
},
password: {
label: 'Password',
type: 'password'
}
},
async authorize(credentials, req) {
// ここでユーザー認証を行う
// テスト用のユーザー
const user = { id: '1', name: 'Taro', email: 'test@example.com' }
if (user) {
return user
} else {
return null
}
}
})
],
// ログインページとかのURLを変えたい場合pagesを設定する
// pages: {
// signIn: '/auth/signin',
// signOut: '/auth/signout',
// error: '/auth/error', // Error code passed in query string as ?error=
// verifyRequest: '/auth/verify-request', // (used for check email message)
// newUser: '/auth/new-user'
// }
}
export default authOptions;
ハンドラー作る
AppRouterを使う場合はRoute Handlerというやつを使うらしい。
src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import authOptions from "@/lib/nextAuthOptions";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST }
Provider
アプリ内でセッションが使えるようにする。
NextAuthProvider.tsx
"use client";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
export const NextAuthProvider = ({
children,
session,
}: {
children: React.ReactNode;
session: Session | null;
}) => {
return (
<SessionProvider session={session} refetchOnWindowFocus={false}>
{children}
</SessionProvider>
);
};
ルートのレイアウトでプロバイダーを使用
src\app\layout.tsx
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const session = await getServerSession(authOptions);
return (
<html lang="ja">
<body className={inter.className}>
<NextAuthProvider session={session}>{children}</NextAuthProvider>
</body>
</html>
);
}
ページとか
signInには引数でプロバイダーを指定できる。
signIn()でログインページに飛ぶ
ExampleTopPage.tsx
'use client'
import React from 'react'
import { signIn, signOut } from 'next-auth/react'
function page(req, res) {
const onClickLogin = async () => {
signIn()
};
const onClickLogout = async () => {
signOut()
}
return (
<div>
<div>
<button onClick={onClickLogin}>ログイン</button>
</div>
<div>
<button onClick={onClickLogout}>ログアウト</button>
</div>
</div>
)
}
export default page
API入口
認証で制限をかけたAPI。
ログインできていたらデータが取れる。
ResponseではなくNextResponseで作成しないとエラーが出る。
api/api-test/route.ts
import { getServerSession } from 'next-auth/next';
import { NextApiRequest, NextApiResponse } from 'next'
import authOptions from '@/NextAuthConfig/Option'
export const GET = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getServerSession(authOptions)
console.log(session);
if (session) {
return NextResponse.json({ data: "Protected data" })
}
return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
}