Error: You cannot mix creating your own instance with `initAuth0` and using named exports like `import { handleAuth } from '@auth0/nextjs-auth0'`

[MattEzekiel]

Checklist

• [X] I have looked into the Readme 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

Looking in the documentation I could find why I'm getting this error: My nextjs is a fresh start. /api/auth/[...auth0].js

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

export default handleAuth({
    secret: 'hello',
});

Error: You cannot mix creating your own instance with initAuth0 and using named exports like import { handleAuth } from '@auth0/nextjs-auth0'

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source pages\api\auth[...auth0].js (3:26) @ eval

  1 | import { handleAuth } from "@auth0/nextjs-auth0";
  2 | 
> 3 | export default handleAuth({
    |                      ^
  4 | secret: 'hello',
  5 | });
  6 | 

Reproduction

1. imported handleAuth
2. Asked for a secret: I gave it
3. ask for issueBaseURL
4. I gave one
5. Then in other documentation they said you should creat auth0.js with:

   
   import { initAuth0 } from "@auth0/nextjs-auth0";

export default initAuth0({ secret: process.env.REACT_APP_AUTH0_SECRET, issuerBaseURL: process.env.REACT_APP_AUTH0_ISSUER_BASE_URL, baseURL: process.env.REACT_APP_AUTH0_BASE_URL, clientID: process.env.REACT_APP_AUTH0_CLIENT_ID, clientSecret: process.env.REACT_APP_AUTH0_CLIENT_SECRET, });

6. Initialize in [...auth0].js

import auth0 from "../../../lib/auth0"; export default auth0.handleAuth();

And I get this error

### Additional context

_No response_

[adamjmcgrath]

Thanks for raising this @MattEzekiel

In your reproduction steps you're creating your own instance of the SDK:

import auth0 from "../../../lib/auth0";
export default auth0.handleAuth();

But the error message says your using the instance the SDK creates for you:

  1 | import { handleAuth } from "@auth0/nextjs-auth0";
  2 | 
> 3 | export default handleAuth({
    |                      ^
  4 | secret: 'hello', // 👈 also, you don't supply the secret here
  5 | });
  6 | 

If you can share your repo, I'd be happy to show you where you're going wrong. But, as the error suggests it will certainly be because you are mixing creating your own instance with initAuth0and using named exports like import { handleAuth } from '@auth0/nextjs-auth0' in the same project.

[MattEzekiel]

Thanks @adamjmcgrath heres my repo: https://github.com/MattEzekiel/demo

[adamjmcgrath]

Hi @MattEzekiel

You don't provide the "secret" by passing it to handleAuth as you are doing here.

if I provide the secret and other required configuration in an .env.local file per https://auth0.com/docs/quickstart/webapp/nextjs/interactive#configure-the-sdk I'm able to successfully login to your app

[MattEzekiel]

Even when I provide it, I still getting an error: TypeError: "issuerBaseURL" is required

This error happened while generating the page. Any console logs will be displayed in the terminal window. The issuerBaseUrl it's a localhost/error page

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

export default handleAuth({
    secret: process.env.AUTH0_SECRET,
    issuerBaseURL: process.env.AUTH0_ISSUE_BASE_URL,
    baseURL: process.env.AUTH0_BASE_URL,
    clientID: process.env.AUTH0_CLIENT_ID,
    clientSecret: process.env.AUTH0_CLIENT_SECRET,
});

https://github.com/MattEzekiel/demo/blob/DEV/pages/api/auth/%5B...auth0%5D.js#L4

[adamjmcgrath]

Hi @MattEzekiel

You don't provide the "secret" (or any other config) by passing it to handleAuth.

Create an .env.local file and populate with the following environment variables

AUTH0_SECRET={A long secret value used to encrypt the session cookie.}
AUTH0_BASE_URL={The base URL of your application.}
AUTH0_ISSUER_BASE_URL={The URL of your Auth0 tenant domain. }
AUTH0_CLIENT_ID={Your Auth0 application's Client ID.}
AUTH0_CLIENT_SECRET={Your Auth0 application's Client Secret.}

Then you can invoke handleAuth with no arguments, and the SDK will get it's config from the env vars

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

export default handleAuth();

These steps are described in more detail in the quickstart https://auth0.com/docs/quickstart/webapp/nextjs/interactive

[MattEzekiel]

With my .env.local like this:

AUTH0_CLIENT_ID={ my client id}
AUTH0_CLIENT_SECRET={ my client secret }
AUTH0_BASE_URL=http://localhost:3000
AUTH0_SECRET={ my secret }
AUTH0_ISSUER_BASE_URL=http://localhost:3000/error

The result is this error while the page exists: LoginHandlerError: Login handler failed. CAUSE: Discovery requests failing for http://localhost:3000/error, expected 200 OK, got: 404 Not Found

[adamjmcgrath]

@MattEzekiel - I encourage you to read the instructions more carefully, then your development workflow will improve.

AUTH0_ISSUER_BASE_URL={The URL of your Auth0 tenant domain. }

http://localhost:3000/error is not the URL of your Auth0 tenant domain - the URL of your Auth0 tenant domain will look something like https://my-tenant.my-region.auth0.com

[adamjmcgrath]

Closing as I believe https://github.com/auth0-samples/auth0-nextjs-samples/issues/129#issuecomment-1674939551 answers your question