FakeSignup
← All posts

Fix Magic Link Emails Hardcoding Production Host

· FakeSignup
magic linkvercelemailQA

Magic link emails often hardcode the production host, breaking links when used with Vercel preview deployments. This occurs because the email generation logic is typically tied to a specific environment variable or configuration that points to your live site. When a preview deployment spins up, it gets its own unique URL, but the email still references the production domain, leading users to the wrong place.

To fix this, you need to ensure your email generation process dynamically uses the correct host for the environment the email is being sent from. This means configuring your application to use environment variables for the host URL and ensuring these variables are correctly set for both production and preview deployments.

Dynamic Host Configuration for Magic Links

The core of the solution lies in how your application constructs the magic link URL within your email sending service. Instead of embedding a static string like https://your-production-app.com, you should use a variable that reflects the current deployment's origin.

This typically involves:

  1. Environment Variables: Define an environment variable (e.g., APP_URL, PUBLIC_URL, VERCEL_URL) that holds the base URL of your application.
  2. Conditional Logic: In your backend code responsible for sending emails, access this environment variable and use its value to build the magic link.
  3. Deployment Configuration: Ensure this environment variable is correctly set for all your deployment targets: production, staging, and crucially, Vercel preview deployments. Vercel automatically provides VERCEL_URL for deployments, which is ideal for this purpose.

For example, if you’re using Node.js and a framework like Next.js, your backend code might look something like this:

const appUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.APP_URL;
const magicLink = `${appUrl}/verify-email?token=${token}`;

This snippet checks if VERCEL_URL is set (indicating a Vercel deployment) and uses it. Otherwise, it falls back to a general APP_URL variable.

Testing Magic Link Verifications in Previews

Testing magic link functionality on preview deployments is critical. Without proper configuration, these tests will fail because the generated links will point to production, not the ephemeral preview URL.

The process for testing involves triggering a signup or password reset flow that sends a magic link, then capturing that link and verifying it works on the intended preview deployment. This is where a tool like FakeSignup becomes invaluable.

Capturing and Verifying Magic Links with FakeSignup

When testing signup flows that rely on email verification, you need a way to intercept those emails and extract the magic links. Trying to manually check your inbox or a staging inbox can be slow and cumbersome, especially with frequent preview deployments.

FakeSignup provides a convenient way to handle this. It captures incoming emails directly in your browser, allowing you to quickly grab the magic link and test it.

Here's how you can use it for testing magic link verifications on preview deployments:

  1. Install the Extension: Get the FakeSignup on the Chrome Web Store.
  2. Generate a Temporary Email: Open the FakeSignup extension and generate a temporary email address.
  3. Trigger the Email: On your Vercel preview deployment, initiate the action that sends the magic link email (e.g., signup, password reset).
  4. Access the Inbox: Open the FakeSignup side panel. Your captured email should appear there.
  5. Extract the Magic Link: Click on the email to open it. Locate the magic link.
  6. Test the Link: Copy the magic link. If your dynamic host configuration is correct, this link should now point to your preview deployment's URL. Paste it into your browser's address bar and press Enter.
  7. Verify Success: Confirm that the link successfully directs you to the correct page on your preview deployment and completes the intended action (e.g., logging you in, resetting your password).

This workflow ensures that your magic links are correctly generated and functional for every preview, preventing broken user experiences before they reach production.

Handling Environment Variable Propagation

A common pitfall is not ensuring environment variables are correctly propagated to your build and runtime environments. For Vercel, this usually involves configuring them in your project settings.

  • Vercel Project Settings: Navigate to your project on Vercel. Go to "Settings" > "Environment Variables." Add your APP_URL or similar variable here.
  • Preview Deployment Specifics: Vercel automatically sets VERCEL_URL for preview deployments. Your code should be written to prefer this variable when available. If you have a separate staging environment, ensure its specific URL is configured in your environment variables as well.
  • Backend vs. Frontend: Be mindful of where your host URL is used. If it's only needed for email generation, it should be a backend environment variable. If it's also used in frontend code (e.g., for API calls), it needs to be exposed as a public environment variable.

Debugging Broken Magic Links

When magic links still fail after implementing dynamic host configuration, the debugging process should focus on the following:

  • Environment Variable Values: Double-check that the environment variables are set correctly in your Vercel project settings for all relevant environments (production, preview). Log the value of your host URL variable in your backend code during a preview deployment to confirm it's what you expect.
  • Email Service Configuration: Verify that your email sending service is correctly integrated with your application and is using the dynamically constructed URL. Some services might have caching or default configurations that need to be overridden.
  • URL Encoding: Ensure there are no issues with URL encoding for tokens or other parameters within the magic link.
  • Deployment Logs: Review the deployment logs on Vercel for any errors related to environment variable access or email sending.

By systematically checking these areas, you can pinpoint the cause of broken magic links and ensure a smooth user experience across all your deployments.