Description
Description
In production and in preview environments, we configured Vercel AUTH0_BASE_URL=VERCEL_URL env var. It works fine in production, but on preview it changes the domain, because VERCEL_URL doesn't use a custom domain name but the domain dynamically generated for the deployment.
We're not using initAuth0 in the app and we rely on the AUTH0_BASE_URL, but I believe we need to make an exception in the preview environment by detecting the current domain and configure Auth0 to redirect to that same domain after being authenticated.
I tried to adapt our [...auth0].ts file to handle that edge case, but it didn't seem to work as I get TypeError: "baseURL" is required. (I've disabled AUTH0_BASE_URL for the Vercel preview environment)
Reproduction
HomeScreen.tsx
export function HomeScreen() {
const {role, handleRoleChange} = useHomeScreen();
const hostname =
typeof window !== 'undefined' ? window?.location?.hostname : '';
return (
<Layout>
<a href={`/api/auth/login?role=${role}&hostname=${hostname}`}>
<button disabled={!role}>Login</button>
</a>
</Layout>
);
}
[...auth0.ts]
export default handleAuth({
async login(req, res) {
try {
const previewEnvBaseUrl =
process.env.VERCEL_ENV === 'preview'
? `https://${req?.query?.hostname}` || ''
: '';
const ADMIN_USER_ROLES = [USER_ROLES.SPOTTED_OWNER, USER_ROLES.SPOTTED];
const returnToPath = ADMIN_USER_ROLES.includes(req.query.role as string)
? ADMINROUTES.HOME
: '/profile';
console.log('previewEnvBaseUrl', previewEnvBaseUrl);
console.log('returnToPath', returnToPath);
initAuth0({
baseURL: previewEnvBaseUrl, // This doesn't seem to set "baseURL"
});
await handleLogin(req, res, {
returnTo: returnToPath,
authorizationParams: {
role: req.query.role,
},
});
} catch (error) {
res.status(error.status || 500).end(error.message);
}
},
async callback(req, res) {
try {
await handleCallback(req, res, {afterCallback});
} catch (error) {
res.status(error.status || 500).end(error.message);
}
},
async logout(req, res) {
try {
res.setHeader('Set-Cookie', [
'internalId=deleted; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
'role=deleted; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
'key=deleted; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
]);
await handleLogout(req, res);
} catch (error) {
res.status(error.status || 500).end(error.message);
}
},
});I assumed using initAuth0 and providing a baseURL value would work.
initAuth0({
baseURL: previewEnvBaseUrl,
});I'm a bit confused by how handleAuth HOC works and I might not be doing things correctly. The previewEnvBaseUrl contains the expected value, so the issue lies in how to configure Auth0 to use the proper domain.
Environment
Please provide the following:
- Version of this library used: "@auth0/nextjs-auth0": "^1.3.0"