🙆
Next.jsで認証機能をNextAuthで実装する
npm install next-auth
pages/api/[...nextauth].tsファイルの作成
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";
import { db } from "../../../lib/prisma";
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID || "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
}),
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID || "",
clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
}),
],
callbacks: {
async signIn(user:any) {
const { email } = user.user;
await db.user.upsert({
where: { email },
update: {},
create: {
name: user.user.name,
email: user.user.email,
image: user.user.image,
admin: false,
},
});
return true;
},
async session({ session, token }:any) {
session.accessToken = token.accessToken;
session.user.id = token.id;
session.user.uid = token.uid;
return session;
},
async jwt({ token, user }:any) {
if (user) {
const userExist = await db.user.findUnique({
where: {
email: user.email,
},
});
token.uid = userExist?.id;
token.accessToken = user.access_token;
}
return token;
},
},
pages: {
signIn: '@/pages/signIn',
},
};
export default NextAuth(authOptions);
:::note info
Google、その他ログインについては次回の記事で紹介します
:::
pages/_app.tsxに以下を追記
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
pages/signin.tsxを作成
import Google from "next-auth/providers/google";
import { signIn } from "next-auth/react";
import Github from "next-auth/providers/github";
function signInPage() {
return (
<div>
<button onClick={() => signIn("google")}>Sign in with Google</button>
<button onClick={() => signIn("github")}>Sign in with GitHub</button>
</div>
);
}
export default signInPage;
Discussion