INCOMPABILITY OF USERPROVIDER WITH NEXT.JS 13 NEW APP DIRECTORY

[Leonardll]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

I'm currently using the latest version of Next.js (v13) and the @auth0/nextjs-auth0 package for authentication in my application. I'm experiencing an issue with the UserProvider hook when using the new app directory structure introduced in Next.js 13.

The error message I'm receiving is: Error: You forgot to wrap your app in .

Here's a brief overview of my directory structure:

• app
  • api
  • components
  • hooks
  • utils
  • page.tsx
  • layout.tsx

I have wrapped my application with the UserProvider in my _app.tsx file as follows:
`
import { UserProvider } from "@auth0/nextjs-auth0/client";

function MyApp({ Component, pageProps }) {
return (

<Component {...pageProps} />

);
}

export default MyApp;
`

However, I'm still receiving the error message. I've tried various solutions, including moving the UserProvider to different components and ensuring that the useUser hook is being called within a component that is a child of the UserProvider. However, none of these solutions have resolved the issue.

I suspect that this issue may be related to the new app directory structure in Next.js 13, as the page.tsx file seems to be expected to be the one with the UserProvider.

I would appreciate any guidance or assistance in resolving this issue. Thank you.

Reproduction

Here's a brief overview of my directory structure:

• app
  • api
  • components
  • hooks
  • utils
  • page.tsx
  • layout.tsx
  • _app.tsx

I have wrapped my application with the UserProvider in my _app.tsx file as follows:
`
import { UserProvider } from "@auth0/nextjs-auth0/client";

function MyApp({ Component, pageProps }) {
return (

<Component {...pageProps} />

);
}

export default MyApp;
`
2nd case

app directory

• app
  • api
  • components
  • hooks
  • utils
  • page.tsx
  • layout.tsx
    I also tried wrapping the UserProvider in my layout.tsx file

`
import "./globals.css"
import { Inter } from "next/font/google"
import { UserProvider } from "@auth0/nextjs-auth0/client"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (


{children}


)
}

3rd case i have also tried to create a custom hook and wrap my page.tsx component with it as follow
// hooks/useAuthUser.tsx
import { useUser, UserProvider } from "@auth0/nextjs-auth0/client";
import { FC, ReactNode } from "react";

export const useAuthUser = () => {
const { user, error, isLoading } = useUser();
return { user, error, isLoading };
};

interface AuthUserProviderProps {
children: ReactNode;
}

export const AuthUserProvider: FC = ({ children }) => {
return {children};
};

`

However, I'm still receiving the error message. I've tried various solutions, including moving the UserProvider to different components and ensuring that the useUser hook is being called within a component that is a child of the UserProvider. However, none of these solutions have resolved the issue.

I suspect that this issue may be related to the new app directory structure in Next.js 13, as the page.tsx file seems to be expected to be the one with the UserProvider.

I would appreciate any guidance or assistance in resolving this issue. Thank you.

Additional context

typescript

nextjs-auth0 version

@auth0/nextjs-auth0

Next.js version

13.4.1

Node.js version

18.12.0

[Widcket]

Hi @Leonardll, support for the app directory is currently in beta. Check out more info about installing the beta release here: #1235

[Leonardll]

thanks a million @Widcket , have lovely day. :)

[barnent1]

I'm using the pages directory and I get a build error trying to use the useUser() method.

8:41 Error: React Hook "useUser" is called in function "members" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

Package.json

{
  "name": "nextjs-auth0",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^3.0.0",
    "@prisma/client": "^5.0.0",
    "@types/auth0": "^3.3.3",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "@vercel/postgres": "^0.4.1",
    "autoprefixer": "10.4.14",
    "cloudinary-react": "^1.8.1",
    "dotenv": "^16.3.1",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intersection-observer": "^9.5.2",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "prisma": "^5.0.0"
  }
}

Code that fails:

import React from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
import NavbarMembers from "@/components/navbar/navbar-members";
import Image from "next/image";
import Link from "next/link";

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

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

     if (user) { ...

[adamjmcgrath]

Hi @barnent1 - take another look at your error message

React Hook "useUser" is called in function "members" ... React component names must start with an uppercase letter.

[barnent1]

exactly my point! useUser is not my function it's AuthO's. it returns {user, error, isLoading} So tell me how is one to use an uppercase when the function is defined in a lowercase?

[adamjmcgrath]

Hi @barnent1 - The React component that needs to start with an uppercase letter is your members function

[barnent1]

Adam, Thank You Very much for pointing out what an IDIOT I am. lol sometimes the most obvious things escape me.

I appreciate your tolerance!!

Glen