Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Understanding SessionProvider error message (useSession is not a function)

I am fairly new to React and NextJS, but I manage to glue pieces of things together with the knowledge I have.

So I have implemented social login using Lucia auth, and I want to implement a session provider to be able to get the session throughout the web application.

This is my SessionContext.tsx file:

"use client";

import { createContext, useContext } from "react";
import { validateRequest } from "@/lib/lucia";

type ContextType = Awaited<ReturnType<typeof validateRequest>>;

const SessionContext = createContext<ContextType>({
    session: null,
    user: null,
});

export const useSession = () => {
    console.log("useSession function called");
    useContext(SessionContext);
};

export const SessionProvider = ({
    children,
    value,
}: React.PropsWithChildren<{ value: ContextType }>) => {
    return (
        <SessionContext.Provider value={value}>
            {children}
        </SessionContext.Provider>
    );
};

layout.tsx

import { SessionProvider } from "./SessionContext";
import { validateRequest } from "@/lib/lucia";

export default async function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const session = await validateRequest();

    return (
        <html lang="en">
            <body>
                <SessionProvider value={session}>{children}</SessionProvider>
            </body>
        </html>
    );
}

And then I have tested this on a simple test page:

page.tsx

import { useSession } from "../SessionContext";

export default function UserPage() {
    const { session } = useSession();

    return <pre>{JSON.stringify(session, null, 2)}</pre>;
}

But this page returns an error on the useSession() declaration:

Error: (0 , _SessionContext__WEBPACK_IMPORTED_MODULE_1__.useSession) is not a function

I am not sure why this happens. I followed this guide to implement the context provider.

Tags:

2

Answers


  1. 0

    There are two types of components in nextjs13: client component, server component. You can use any of them depending of your preferences. As I can see, you’ve used useSession into a server component "simple test page". You should use validateRequest() to get user data and session on the server side and use useSession() to get information on the client side.

    to explicitly declare a component as a client component use "use client" at the top of the component and "use server" at the top of a server component.

    Login or Signup to reply.
  2. 0

    "Don’t do this; it will make every single page dynamic, causing you to lose the benefits of static rendering. Instead, use an API route to check authentication.

    Using the cookie function makes the page dynamic. You can see this if you use the next build command, as the pages are all rendered dynamically due to the cookie request in the root layout. Next.js will rerender the pages on every request.

    That’s why it’s best to use an API route if you need user information in elements like a header while keeping the rest of the page as static content, such as a front page. This approach is acceptable for a dashboard. Next.js dynamic rendering will still occur server-side but on every request, if that makes sense.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search