Tips/strategies for working with Vercel deployments

With the recent changes to the lib, it's now possible to have Authkit working for Vercel previews deployments, which is awesome. 🎉

Because I couldn't find much discussion about how to get this working when I was setting it up, I wanted to shared a few strategies I have found that work as a reference for anyone looking for help on the subject. Notably, this is about how to handle dynamic redirect URLs (which for every Vercel deployment) and leverage the Vercel system environment variables.

Strategies

Below are several strategies using the middleware helper, next.config.js and .env files

Middleware helper `redirectUri` option (my preference)

With the most recent changes, my suggested approach is to just define the variable programmatically in your middleware file. For example, in our application it looks like this:

const REDIRECT_PATHNAME = "/api/auth/callback";

const REDIRECT_ORIGIN =
  process.env.VERCEL_ENV === "production"
    ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
    : process.env.VERCEL_ENV === "preview"
      ? `https://${process.env.VERCEL_URL}`
      : "http://localhost:3001";

const REDIRECT_URI = new URL(REDIRECT_PATHNAME, REDIRECT_ORIGIN);

const auth = authkitMiddleware({
  redirectUri: REDIRECT_URI.href,
  middlewareAuth: {
    enabled: true,
    unauthenticatedPaths: [],
  },
  debug: process.env.VERCEL_ENV !== "production",
});

`next.config.js`

You can set the env variable dynamically in your Next Config file instead of using redirectUri

/** @type {import("next").NextConfig} */
const nextConfig = {
  env: {
    NEXT_PUBLIC_WORKOS_REDIRECT_URI:
      process.env.VERCEL_ENV === "production"
        ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/api/auth/callback`
        : process.env.VERCEL_ENV === "preview"
          ? `https://${process.env.VERCEL_URL}/api/auth/callback`
          : "http://localhost:3001/api/auth/callback",
  },
};

module.exports = nextConfig;

`.env` variable expansion

for preview deployments ONLY, does not work for prod deployments since the VERCEL_URL changes for every deployment and you cannot add wildcard domains for production in your WorkOS dashboard

Assuming that you use Vercel's environment variable UI for your prod deployment variable, then you can get the correct dynamic value for preview deployments by adding to your .env files:

# .env
NEXT_PUBLIC_WORKOS_REDIRECT_URI="http://localhost:3001/api/auth/callback"

# .env.production
## Note: If you want to run a production build locally (with `next start`) you can comment this out
NEXT_PUBLIC_WORKOS_REDIRECT_URI="https://${VERCEL_URL}/api/auth/callback"

workos / authkit-nextjs