`redirectUrl` in social auth adapter doesn't Support Interpolation with Env Variables?

[benoit.marcot]

It seems like redirectUrl doesn’t support interpolation with environment variables. The env variable is correctly defined because I can display it in the component, but when used in redirectUrl, after resolving the interpolation, the value is undefined.

Here’s my code:

const authAdapter = new AuthAdapter({
  loginSettings: {
    mfaLevel: MFA_LEVELS.NONE,
  },
  adapterSettings: {
    uxMode: UX_MODE.REDIRECT,
    replaceUrlOnRedirect: true, 
    redirectUrl: `https://${process.env.VERCEL_URL}/home`, 
    // Other settings...
  }
});

Is there a reason why process.env.VERCEL_URL isn’t resolving properly in this context? Any suggestions on how to make this work?

Thanks in advance!

[w3abot]

Hello Benny!

Thanks for reaching out with your question.

Based on the information you’ve provided, it seems like you’re using the Plug n Play SDK and having trouble with environment variable interpolation in your redirectUrl.

A few things to check and try:

1. Environment Variable Setup:

   • Ensure that VERCEL_URL is correctly defined and accessible in the environment where your application is running.
   • Double-check if your build process injects this environment variable correctly.

2. Alternative Approaches:

   • Try logging process.env.VERCEL_URL before using it in redirectUrl to ensure it holds the expected value.
   • As a fallback, you could try a different strategy for fetching environment variables. For example, assign the environment variable to a constant and use the constant in your URL:

   const vercelUrl = process.env.VERCEL_URL;
   const authAdapter = new AuthAdapter({
     adapterSettings: {
       redirectUrl: `https://${vercelUrl}/home`,
       // Other settings...
     }
   });
   

3. Build Configuration:

   • Ensure your build configuration supports environment variables in client-side code if you’re running this in a browser context.

If the Issue Persists:

• Console Output/Screenshots: Share any console output or error messages you see. Sometimes there’s more context provided in your console.
• Full Code Context: If possible, more of the code might help to diagnose, but be sure to remove any sensitive information.

If none of the above resolves the issue, it might be worth checking if your hosting platform (e.g., Vercel) provides any specific guidance on environment variables in client-side code, as different platforms have varied ways of handling them.

Let me know if you need further assistance, and I’ll be happy to help!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

[benoit.marcot]

@w3abot

process.env.VERCEL_URL

I assume this is not defined on the client side because it is called within a function, even though the same definition exists in a JSX element on the client side.

[benoit.marcot]

For the record; fixed in Vercel using NEXT_PUBLIC_VERCEL_URL.