Fixing wrapping userProvider with auth0 and nextjs

I've ran into an error with my code when trying to access basic user information from a component file. When calling to get the userdata to then parse and return a basic login function, an error keeps popping up that says it is not wrapped in a userProvider.

This is the error that kept coming up:

error - Error: You forgot to wrap your app in <UserProvider>
    at Object.get user [as user] (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\@auth0\nextjs-auth0\dist\client\use-user.js:41:15)
    at Username (webpack-internal:///./pages/userComponenets.js:18:13)
    at renderWithHooks (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5661:16)
    at renderIndeterminateComponent (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5734:15)
    at renderElement (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5949:7)
    at renderNodeDestructiveImpl (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:6107:11)
    at renderNodeDestructive (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:6079:14)

Here is the code that this comes from: (Component File)

import {useUser } from '@auth0/nextjs-auth0/client';
import React,{ Component } from 'react';
import styles from '../styles/Home.module.css';
  const  Username = () => {
    const{user, error, isLoading } = useUser();
    if (isLoading) {
      return (<div>Loading...</div>  );}
    if (error){
      return (<div>{error.message}</div>);}
    if (user) {
        return (<div href="/api/auth/logout" className={styles.NavTextRight}>Logout</div>);
    }
    return (<div href="/api/auth/login" className={styles.NavTextRight}>Login</div>);
    };
  export default Username;

(Index file up to the display)

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Script from 'next/script';
import Username from '../pages/userComponenets';
import { Component,React } from 'react';
export default function Home() {
  
  return (
    <div className={styles.container}>
       <Head className ={styles.main}>
        <title>Running Tracker | Home</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
            <link
          rel="stylesheet"
          href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <Script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        </Script>
        <Script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
        </Script>
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="\">Running Tracker</a>
            </div>
            <ul class="nav navbar-nav">
              <li><a href="\" className={styles.Navtext}>Home</a></li>
              <li><a href="\profile" className={styles.Navtext}>Profile</a></li>
              <li><a href="\teams" className={styles.Navtext}>Team</a></li>
              <li><a href="\races" className={styles.Navtext}>Races</a></li>
              <li>
              <Username />
              </li>

For reference I do have closing tags under it in the actual file, but its content that doesn't affect the auth0 and is basic html. Is there anything that I am missing or a reference to a place that may have a solution?

Solution

It looks like you are using the new file structure that nextjs version 13 introduced.

As such you don't have an _app.[js|jsx|ts|tsx] file and can't wrap it as per the instructions.

At this time, I don't think that Auth0 supports the new file structure, and from what've heard won't be until it is out of beta.

There are more details about this as well as a workaround in this github thread https://github.com/auth0/nextjs-auth0/issues/889

Here it is if you just want to skip to the answer. I found that it works, but I'm sure there is a better way.

import { UserProfile } from '@auth0/nextjs-auth0/client'

const getUser = async (): Promise<UserProfile | null> => {
  const sessionCookie = cookies().get('appSession')?.value
  if (sessionCookie === undefined) return null
  const res = await fetch(`${process.env.AUTH0_BASE_URL}/api/auth/me`, {
    headers: {
      cookie: `appSession=${sessionCookie}`,
    },
  })
  return await (res.status === 200 ? res.json() : null)
}

const Home = async () => {
  const user = await getUser();

  return (
    <p>
      {JSON.stringify(user)}
      <br/>
      <a href="/api/auth/login">LOG IN</a>
    </p>
  )
};

export default Home