Nextjs14&NextAuth.js

codershisho

google側（Google API）の設定

下記サイトを参考にさせてもらいました。
参考にさせてもらったサイト

codershisho

環境変数の設定

Next用のsecretを生成
```
openssl rand -base64 32
```

.envに記述

GOOGLE_CLIENT_ID="<※GoogleAPIの手順で生成したclient_id>"
GOOGLE_CLIENT_SECRET="<※GoogleAPIの手順で生成したsecret>"

NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="<※上記で生成したsecret>"

codershisho

NextAuth.jsのインストール

npm install next-auth

codershisho

Dynamic Routes

[...nextauth]は、Dynamic Segmentsと呼ばれ、ルート階層が深くなってもリクエストできるような仕組み

app/api/auth/[...nextauth]/route.ts

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const handler = NextAuth({
    secret: process.env.NEXTAUTH_SECRET,
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID ?? '',
            clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',
        }),
    ]
});
export { handler as GET, handler as POST };

codershisho

Session Provider

providers/NextAuth.tsx

'use client';

import { SessionProvider } from 'next-auth/react';
import { ReactNode } from 'react';

const NextAuthProvider = ({ children }: { children: ReactNode }) => {
    return <SessionProvider>{children}</SessionProvider>;
};

export default NextAuthProvider;

codershisho

layout.tsxに反映

import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";
import Header from "@/components/layouts/header/Header";
import NextAuthProvider from "@/providers/NextAuth"; {/** add */}

const noto_sans_jp = Noto_Sans_JP({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Kanban App",
  description: "kanban app with Nextjs",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={`${noto_sans_jp.className} min-h-screen transition`}>
        <NextAuthProvider> {/** add */}
          <Header />
          <main className="px-24 pt-8">{children}</main>
        </NextAuthProvider> {/** add */}
      </body>
    </html>
  );
}