Menu
This is the first time I use, NextAuth, and with the major changes of Nextjs 13. I have no idea how to set up nextauth on my project. I have read the documentation here
Somehow not sure how to set it up for nextjs 13. How can I make it work? [...nextauth].ts file setup
import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";
export const authOptions = {
// Configure one or more authentication providers
providers: [
FacebookProvider({
clientId: process.env.FACEBOOK_CLIENT_ID,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET
}),
],
}
export default NextAuth(authOptions)
Errors so far: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322) oauth.d.ts(83, 5): The expected type comes from property 'clientId' which is declared here on type 'OAuthUserConfig'
layout.tsx page
import { Outfit } from "@next/font/google";
import "../styles/globals.css";
import Header from "./components/Header/Header";
import { SessionProvider } from "next-auth/react";
// Outfit Font
const outfit = Outfit();
export default function RootLayout({
children,
pageProps: { session, ...pageProps },
}: {
children: React.ReactNode;
}) {
return (
<SessionProvider session={session}>
<html>
<head></head>
<body lang="en" className={outfit.className}>
<Header />
{children}
</body>
</html>
</SessionProvider>
);
}
In the layout file it tells me that Property 'pageProps' does not exist on type '{ children: ReactNode; }
I would appreciate any help to setup this up.
357
asked Sep 11 '26 13:09
To use next-auth with nextjs13, first wrap your mail layout into a session provider (SessionProvider has to be called in a client component, so either make your layout component a client one, or create a provider as shown in Christian Pham answer):
"use client";
import "./global.css";
import { SessionProvider } from "next-auth/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fr">
<body>
<SessionProvider>
{children}
</SessionProvider>
</body>
</html>
);
}
Then you can access session in both server side components and API routes handler using getServerSession:
import { authOptions } from "../../../../pages/api/auth/[...nextauth]"
// Server Component example
export default async function AdventureEditorPage({ params }) {
const session = await getServerSession(authOptions);
if (!session) {
redirect("/");
}
return (<>OK<>);
}
// Route handler example
export async function PUT(request: Request) {
const session = await getServerSession(authOptions);
if (!session) {
return new NextResponse(null, { status: 403 });
}
//...
}
And client side components using useSession:
"use client";
import { useSession } from "next-auth/react";
export function Header() {
const { data: session } = useSession();
return (
<>
{session && <>Logged in<>}
</>
);
}
signIn and signOut method husage have not changed.
For more information, I think next-auth will soon be updated for nextjs13. You can also take a look at my project https://github.com/mathieuguyot/adventures which is using next-auth for both server and client side components and also experimental app directory.
About your first error, typescript indicates that process.env.FACEBOOK_CLIENT_ID may be not set. You can a check to overpass the error:
process.env.FACEBOOK_CLIENT_ID ? process.env.FACEBOOK_CLIENT_ID : ""
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With