Kinde•4mo ago

Cloudflare workers preview urls

Hi, I'm hooking up kinde with nextjs deployed on a cloudflare worker and I'm looking to see if I can get preview urls working. I've seen https://docs.kinde.com/developer-tools/sdks/backend/nextjs-sdk/#working-with-preview-urls for Vercel but I don't think cloudflare expose a preview url env var I could dynamically set. Wondered if there has been anyone that's got it working? Or if there was a best approach to follow?

8 Replies

Koosha-Kinde•4mo ago

Hi RedSkyRuler, Thanks for reaching out! I’m looking into this for you and will get back to you as soon as I have more details.

Koosha-Kinde•4mo ago

Hi RedSkyRuler, I tried this out and Cloudflare does give you a Preview URL pattern (e.g. *-next-cloudflare-test.arobce.workers.dev). You might be able to use that directly in Kinde by registering a wildcard callback like:

https://*-next-cloudflare-test.arobce.workers.dev/api/auth/kinde_callback

https://*-next-cloudflare-test.arobce.workers.dev/api/auth/kinde_callback

That should cover the different preview URLs Cloudflare generates. I haven’t tested this end-to-end myself yet, but thought it could be a good direction to try. Let me know if it doesn’t work and we can dig in further.

RedSkyRulerOP•4mo ago

Thanks for getting back to me, yeah that wildcard is all good for the callback url. The issue is the setting of the KINDE_SITE_URL , KINDE_POST_LOGOUT_REDIRECT_URL and KINDE_POST_LOGIN_REDIRECT_URL env vars in the nextjs app. They'd need to be dynamic to handle the different auth flow origin, otherwise I get the State Not Found error

Koosha-Kinde•3mo ago

Hi RedSkyRuler, Some research I did that might help your approach: - Cloudflare lets you set env variables for different environments in wrangler.jsonc:
https://developers.cloudflare.com/workers/configuration/environment-variables/ - You can also give aliases when uploading previews, that should give you a standard preview url to work with e.g.:
wrangler versions upload --preview-alias staging
https://developers.cloudflare.com/workers/configuration/previews/ - And here’s a community discussion around handling different env vars for preview URLs:
https://community.cloudflare.com/t/how-do-you-set-different-environment-variables-for-preview-urls/802898 Not sure if you’ve already tried these, but they look like the pieces Cloudflare provides to handle dynamic preview environments. Might be worth testing if they can help your setup. Other than that, I don’t believe anyone has implemented this yet with preview URLs, would love to hear how you got it working if you’re willing to share your approach.

RedSkyRulerOP•3mo ago

Thanks for the research! I haven't had time to investigate it just yet but i'll give it a go and can report back on here if I have any luck 🙂

Koosha-Kinde•3mo ago

Hi RedSkyRuler, Sounds great, thanks for letting me know! And it would be super helpful if you can share what you find once you’ve had a chance to try it out. I’m sure others running on Cloudflare would benefit from your experience too. Good luck with the testing! 🙂

RedSkyRulerOP•3mo ago

Update: I was able to work around this doing something similar to the vercel url logic. Cloudflare workers doesn't expose a url env var but it does expose a WORKERS_CI_BRANCH env var (https://developers.cloudflare.com/workers/ci-cd/builds/configuration/#default-variables). Which I was then able to use for the preview branch url. Note that cloudflare gives 2 preview urls, a version preview url and version preview alias url (which is the branch name). Meaning this approach only works for the preview alias url, not the version ID one. e.g.

Worker Version ID: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
Version Preview URL: https://XXXXXXXX-worker-name.account-name.workers.dev
Version Preview Alias URL: https://BRANCH-NAME-worker-name.account-name.workers.dev

Worker Version ID: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
Version Preview URL: https://XXXXXXXX-worker-name.account-name.workers.dev
Version Preview Alias URL: https://BRANCH-NAME-worker-name.account-name.workers.dev

So knowing that, here's my next.config.ts:

import type { NextConfig } from 'next';
import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';

function getKindeUrl(): string | undefined {
  // Return the URL for the local environment
  if (!process.env.CI) {
    return 'http://localhost:3000';
  }

  // Return the URL for the main prod CI branch
  if (process.env.WORKERS_CI_BRANCH === 'main') {
    return 'https://app.prod-domain.com';
  }

  // Return the URL for the current preview CI branch
  return `https://${process.env.WORKERS_CI_BRANCH}-worker-name.account-name.workers.dev`;
}

// https://nextjs.org/docs/app/api-reference/config/next-config-js
const nextConfig: NextConfig = {
  env: {
    KINDE_SITE_URL: getKindeUrl(),
    KINDE_POST_LOGOUT_REDIRECT_URL: getKindeUrl(),
    KINDE_POST_LOGIN_REDIRECT_URL: getKindeUrl()
  }
};

export default nextConfig;

initOpenNextCloudflareForDev();

import type { NextConfig } from 'next';
import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';

function getKindeUrl(): string | undefined {
  // Return the URL for the local environment
  if (!process.env.CI) {
    return 'http://localhost:3000';
  }

  // Return the URL for the main prod CI branch
  if (process.env.WORKERS_CI_BRANCH === 'main') {
    return 'https://app.prod-domain.com';
  }

  // Return the URL for the current preview CI branch
  return `https://${process.env.WORKERS_CI_BRANCH}-worker-name.account-name.workers.dev`;
}

// https://nextjs.org/docs/app/api-reference/config/next-config-js
const nextConfig: NextConfig = {
  env: {
    KINDE_SITE_URL: getKindeUrl(),
    KINDE_POST_LOGOUT_REDIRECT_URL: getKindeUrl(),
    KINDE_POST_LOGIN_REDIRECT_URL: getKindeUrl()
  }
};

export default nextConfig;

initOpenNextCloudflareForDev();

It can be reduced and you can make use of the your own env vars for local and prod if needed. Thought I'd just keep it explicit for better understanding

Koosha-Kinde•3mo ago

That’s awesome, thanks a lot for sharing the details! 🙌 This will definitely be helpful for anyone else trying to get preview URLs working on Cloudflare in the future. Really appreciate you documenting your approach so clearly.

Gaming

Programming

Cloudflare workers preview urls

Did you find this page helpful?