How can I resolve "Error: You forgot to wrap your app in <UserProvider>" in NextJS 14 app

I am creating a NextJS 14 app that uses next-auth with the Auth0 provider to implement authentication. I am getting the error "You forgot to wrap your app in ". I am currently using NextJS 14.1.4, with src directory and app router.

The following code is from my page.jsx. This was following a guide from the Auth0 docs.

"use client"

import ActionBar from '@/app/components/ActionBar';
import classes from './styles.module.css';
import Link from 'next/link';
import { useUser } from '@auth0/nextjs-auth0/client';
import { redirect } from "next/navigation";

function Card(props) {
  var title = props.title;
  var url = props.url;

  return (
    <Link href={url} className={classes.accountCardItems}>
      <button type="button" className={classes.btn}>{title}</button>
    </Link>
  )
}

export default function Account() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (!user) {
    redirect("../api/auth/login");
  }


  return (
    <main>
      <ActionBar title="Account" disableBack={true} />
      <h1><b>{user.given_name}</b></h1>
      <h1><b>{user.given_name} {user.family_name}</b></h1>
      <p>{user.email}</p>

      <br></br>

      <div className={classes.summaryCard}>
        <div className={classes.cardTitle}>Account</div>
        <div className={classes.accountCard}>
          <Card title="Edit Profile" url="/dashboard/account/profile" />
        </div>
      </div>
        
        <br></br>

      <div className={classes.summaryCard}>
        <div className={classes.cardTitle}>General</div>
        <div className={classes.accountCard}>
          <div>Support</div>
          <div>Terms of Services</div>
          <div>Invite Friends</div>
        </div>
      </div>

        <br></br>

      <div className={classes.summaryCard}>
        <div className={classes.cardTitle}>Login</div>
        <div className={classes.accountCard}>
          <Card title="Logout" url="../api/auth/logout" />
        </div>
      </div>
    </main>
  );
}

Solution

For anyone looking at this later, I was able to figure this out. I was able to wrap the body in <UserProvider> in the layout file. More in the Auth0 Docs.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <UserProvider>
        <body>
          {children}
        </body>
      </UserProvider>
    </html>
  )
}