You forgot to wrap your app in <UserProvider>

Kvek commented 8 months ago

Checklist

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

Description

Same as this #1557.

Hi, I setup a new Next.js project (v14) and have been getting this error after following this guide up to this step.

Any help is appreciated. Thanks 😁

Reproduction

Set up a new app. npx create-next-app auth0-app

Install dependencies npm install @auth0/nextjs-auth0

Add .env.local with the correct appropriate values

AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://{yourDomain}'
AUTH0_CLIENT_ID='{yourClientId}'
AUTH0_CLIENT_SECRET='{yourClientSecret}'

Add app/api/auth/[auth0]/route.ts

import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

Add UseProvider

import { UserProvider } from '@auth0/nextjs-auth0/client';

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

Run the app

npm run dev

See this in the browser console.

Screenshot 2023-12-19 at 09 37 53

Additional context

package.json

{
  "name": "auth0-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^3.5.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "typescript": "^5"
  }
}

layout.tsx

import { UserProvider } from '@auth0/nextjs-auth0/client';
import { ReactNode } from 'react';

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

nextjs-auth0 version

@auth0/nextjs-auth0: "^3.5.0",

Next.js version

next: "14.0.4",

Node.js version

v20.10.0

Kvek commented 8 months ago

Tried this guide as well- https://developer.auth0.com/resources/guides/web-app/nextjs/basic-authentication.

Getting the same issue.

Jelenbl commented 1 month ago

having the same issue the app/api... and layout.jsx files look near identical.

auth0 / nextjs-auth0