In Nextjs, baseURL need to be retrievable dynamically from 'next/headers'

[gabor.ottlik.hun]

I want to retrieve the baseURL dynamically from nextjs new headers api.
My code looks like this:

import { initAuth0 } from '@auth0/nextjs-auth0';
import { headers } from 'next/headers';

function getSubdomain() {
	const host = headers()?.get('host');
	const [subdomain] = host?.split('.') || [];

	console.log('-- subdomain', subdomain);
	return subdomain || '*';
}

export default initAuth0({
	secret: process.env.AUTH0_SECRET,
	issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
	baseURL: `http://${getSubdomain()}.localhost:3001`,
	clientID: process.env.AUTH0_CLIENT_ID,
	clientSecret: process.env.AUTH0_CLIENT_SECRET,
});

The error I get is the following:
Error: headers was called outside a request scope. Read more: Dynamic API was called outside request | Next.js

Can you guys suggest a way where I can call headers() to define baseURL?

I need a dynamic way to set subdomains in the baseURL otherwise it would be to open with * and would result security issues.

[daniel40392]

Is this the same issue as not being able to access window.location or similar within a react component with NextJS? I managed to work around that previously by leveraging the use of the useEffect hook, which essentially waits for the client side aspect of NextJS to be available. Not sure if this may help you out.

[gabor.ottlik.hun]

As /auth0 is placed in route.ts file it will always be a server component so won’t be able to access to the DOM API.
I’ve found this workaround helpful, in the meantime.

Override AUTH0_BASE_URL during runtime

But my example above really should work.