🍓

NextjsのAppRouterとNextAuthでSessionProviderを使うときのメモ

2023/11/24に公開

環境:next "13.4.19", next-auth: "4.23.1", next-auth:seesion:strategu:"jwt", next-auth:providers:CredentialsProvider

NextjsのApp RouterでNextAuth.jsを使っていて、useSessionを使いたいときには以下のようにSessionProviderでラップするみたいですが、

layout.tsx

import { NextAuthProvider } from "./lib/Providers";
/// 省略///

export default async function RootLayout({ children, }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body >
        <NextAuthProvider>{children}</NextAuthProvider>
      </body>
    </html>
  )
}

NextAuthProvider.tsx

"use client";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
export const NextAuthProvider = ({ children　}:{　children: React.ReactNode　}) => {
  return (
    <SessionProvider> 
      {children}
    </SessionProvider>
  )
};

なんかこれだと、ブラウザ内のタブを移動したときやリロードしたときにクッキーが消えてしまうみたいで、以下のようにしたら、解消されました。

layout.tsx

import { NextAuthProvider } from "./lib/Providers";
import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]/route";
/// 省略///

export default async function RootLayout({ children, }: { children: React.ReactNode }) {
　const session = await getServerSession(authOptions);
  return (
    <html lang="ja">
      <body >
        <NextAuthProvider　session={session}>{children}</NextAuthProvider>
      </body>
    </html>
  )
}

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>
  )
};

NextjsのAppRouterとNextAuthでSessionProviderを使うときのメモ

参考

Discussion