How to configure baseUrl when using Vercel preview environment, to stay on the same domain?

[Vadorequest]

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"

[adamjmcgrath]

Hey @Vadorequest

When instantiating the SDK you can either use the named exports (eg, handleAuth) and we create a instance of the SDK for you, or you create an instance yourself const auth0 = initAuth0(); auth0.handleAuth(); (more info here). So you can't use them together, eg:

export default handleAuth({ // Creates an instance of the SDK
  async login(req, res) {
    initAuth() // Creates another instance of the SDK

You're getting TypeError: "baseURL" is required because handleAuth is trying to create an instance of the SDK, but you haven't specified the baseUrl env var.

You could lazily create an insance of the SDK on the first request, eg

let instance;
export default (req, res) {
  ...
  instance = instance || initAuth0({ baseURL: previewEnvBaseUrl });
  return instance.handleAuth(...)(req, res);
};

But there is probably a better solution around figuring out the url at build or boot time - is there no way you can derive the preview url from VERCEL_URL? What is a typical value for VERCEL_URL for a preview deploy and what is a typical value for previewEnvBaseUrl?

[Vadorequest]

But there is probably a better solution around figuring out the url at build or boot time - is there no way you can derive the preview url from VERCEL_URL? What is a typical value for VERCEL_URL for a preview deploy and what is a typical value for previewEnvBaseUrl?

I don't believe that's possible. That's because when using custom domain (eg: domain name based on the git branch), it redirects from something like git-fix-auth0.vercel.app to ai7826jdsjs.vercel.app). The VERCEL_URL is ai7826jdsjs.vercel.app.

This is an issue that's bound to happen with any website that has several domains attached to it, I need the user to stay on the same domain.

[adamjmcgrath]

This is an issue that's bound to happen with any website that has several domains attached to it, I need the user to stay on the same domain.

I'm confused - what do you want the baseUrl to be in your example? git-fix-auth0.vercel.app? If so, could you not construct that from ${VERCEL_GIT_COMMIT_REF}.vercel.app?

[Vadorequest]

It would work but only solves half of the problem. My goal is to stay on the same domain, not to hardcode the domain. Vercel provides several domain aliases and it shouldn't switch from one domain to another during navigation.

…

On Fri, Jun 18, 2021, 18:14 Adam Mcgrath ***@***.***> wrote: This is an issue that's bound to happen with any website that has several domains attached to it, I need the user to stay on the same domain. I'm confused - what do you want the baseUrl to be in your example? git-fix-auth0.vercel.app? If so, could you not construct that from ${VERCEL_GIT_COMMIT_REF}.vercel.app? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#420 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5BRYRRCUEYLCJANOV3DQLTTNWFVANCNFSM465ZTS2Q> .

[Vadorequest]

So, my above strategy was to detect the domain on the front-end and pass it down to the backend API call, but I've been unsuccessful so far because Auth0 doesn't easily allow to use a dynamic domain. On Fri, Jun 18, 2021, 19:09 Ambroise Dhenain ***@***.***> wrote:

…

It would work but only solves half of the problem. My goal is to stay on the same domain, not to hardcode the domain. Vercel provides several domain aliases and it shouldn't switch from one domain to another during navigation. On Fri, Jun 18, 2021, 18:14 Adam Mcgrath ***@***.***> wrote: > This is an issue that's bound to happen with any website that has several > domains attached to it, I need the user to stay on the same domain. > > I'm confused - what do you want the baseUrl to be in your example? > git-fix-auth0.vercel.app? If so, could you not construct that from > ${VERCEL_GIT_COMMIT_REF}.vercel.app? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#420 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AA5BRYRRCUEYLCJANOV3DQLTTNWFVANCNFSM465ZTS2Q> > . >

[Vadorequest]

This answer looks like what I was looking for.

#108 (comment)

[adamjmcgrath]

@Vadorequest - yep, if you don't know the URL until request time - then that would work

Closing this - feel free to ping me if oyu'd like to discuss further

[ADTC]

Worth noting what's here on this example page. (You can skip modding the build command and output directory.)