CODEWITHSUNDEEP
next.jsauth0next-auth
barmiedev
barmiedev

Reputation: 31

Auth0 UserProvider with NextJS app router

I'm rewriting my company's whole React application onto NextJS 13.4.8 using app/ directory. We are using Auth0 as an auth provider (no plans for NextAuth) and from the documentation of the nextjs-auth with app router (currently in beta, https://github.com/auth0/nextjs-auth0/tree/beta#app-router) I assume it should work... somehow. As of now, it is a plain NextJS app so it's an open sandbox.

The problem is that the app itself compiles but when going to the browser I'm having the following error:

- error TypeError: Cannot read properties of undefined (reading 'auth0')
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:49:47)
    at step (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.es6.mjs:260:23)
    at Object.eval [as next] (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.es6.mjs:201:20)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.es6.mjs:179:71)
    at new Promise (<anonymous>)

I've done the following (with the use of docs on their gh):

// app/api/auth/[auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

// src/app/layout.tsx
import './globals.css';
import { UserProvider } from '@auth0/nextjs-auth0/client';

export const metadata = {
  ...
};

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

// src/app/login/page.tsx
'use client'
import { useUser } from '@auth0/nextjs-auth0/client';
...

export default function Login() {
  ...
  const { user, error, isLoading } = useUser();
  ...
  return (
    <a href='/api/auth/login'>
      <Button size='lg'>
         Login
      </Button>
    </a>
  )
}

Is there something wrong with my solution, or there is a bug in this integration, or maybe there is some other problem that you see here?

Upvotes: 3

Views: 1518

Answers (3)

bradleygriffith
bradleygriffith

Reputation: 979

I'm pretty certain your issue is/was that you are using import { UserProvider } from '@auth0/nextjs-auth0/client'; (e.g.; the client-side package) from your src/app/layout.tsx file, which is not, or at least from the provided code does not seem to be, flagged as use client, and hence is on the server-side of the setup.

You can fix it by using the UserProvider in a client side component (possibly just a child of your layout.tsx but marked as use client).

Upvotes: 0

Devin McQueeney
Devin McQueeney

Reputation: 1287

make the route:

app/api/auth/route.ts

not

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

Upvotes: 0

gyinshen
gyinshen

Reputation: 39

I had the same problem and I solved it by upgrading my auth0 @auth0/nextjs-auth0 to 3.0.0-beta.3

Try this

npm i @auth0/[email protected]

https://www.npmjs.com/package/@auth0/nextjs-auth0?activeTab=versions

Upvotes: 0

Related Questions