Pattern for Sharing Session with Client Components in Next.js 13 App Directory

[bestickley]

Hi, I've come across a pattern for sharing session across client components in Next.js 13 app directory with route groups that I wanted to share and get feedback on. The key is to notice the server component providing the session with SessionProvider in app/(private)/layout.tsx and the client component consuming the session in app/(private)/dashboard/Dashboard.tsx.

• app/
  • (private)/
    • AppLayout.tsx
    • layout.tsx
    • SessionProvider.tsx
    • dashboard
      • page.tsx
      • Dashboard.tsx

// app/(private)/layout.tsx
import { authOptions } from "@/auth-options";
import { getServerSession } from "next-auth";
import { SessionProvider } from "./SessionProvider";
import type { ReactNode } from "react";
import AppLayout from "./AppLayout";

export default async function PrivateLayout({
  children,
}: {
  children: ReactNode;
}) {
  const session = await getServerSession(authOptions);
  return (
    <SessionProvider session={session}> //
      <AppLayout>{children}</AppLayout>
    </SessionProvider>
  );
}

// app/(private)/SessionProvider.tsx
"use client";

export { SessionProvider } from "next-auth/react";

// app/(private)/dashboard/page.tsx
import { useParams } from "next/navigation";
import { Dashboard } from "./Dashboard";

export default async DashboardPage() {
  const { id } = useParams();
  const data = await getData(id);
  return <Dashboard data={data} />
}

// app/(private)/dashboard/Dashboard.tsx
"use client";

export function Dashboard({ data }: { data: any }) {
  const session = useSession();
  console.log(session.user);
  return <div>My Dashboard Data: {JSON.stringify(data)}</div>
}

[hamirmahal]

I get console errors when I try to do

// https://github.com/nextauthjs/next-auth/discussions/7849#discussion-5322909
'use client'

export { SessionProvider } from 'next-auth/react'

in a src/app/SessionProvider.tsx file.

- event compiled successfully in 161 ms (270 modules)
[next-auth][warn][NO_SECRET] 
https://next-auth.js.org/warnings#no_secret
- error TypeError [ERR_INVALID_URL]: Invalid URL
    at __webpack_require__ (/home/hamir/repositories/job-board/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/SessionProvider.tsx:5:73)
    at (ssr)/./src/app/SessionProvider.tsx (/home/hamir/repositories/job-board/.next/server/app/page.js:1239:1)
    at __webpack_require__ (/home/hamir/repositories/job-board/.next/server/webpack-runtime.js:33:43)
- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 278 ms (511 modules)

I'm using "next": "13.4.19",.

[bestickley]

@hamirmahal, maybe you're missing NEXTAUTH_URL env var?

[hamirmahal]

I think that was the issue, thanks.

[hamirmahal]

I was eventually able to get next-auth working with Google sign-in.

[hamirmahal]

I initially tried using next-auth with LinkedIn, which didn't work.

[remarkablejames]

Love this! I using a longer way to achieve the same effect. Thank you!