Deploying on Cloudlfare Pages

[praagyajoshi]

Hello @meza! 👋

I'm using this library and while testing different deployment targets, I've managed to deploy to both Fly.io and Render.
For my use case, Cloudflare Pages is more suitable and to that end, I tried to deploy my app there.

Unfortunately, I'm running into an issue: post authentication when the app is redirected to /auth/callback endpoint, an error occurs and a redirection to /failure happens.

Some observations:

• According to Auth0, the authentication was successful
• The onSuccessRedirect URL (/success in my case) is never called
• There are no cookies created (I'm using createCookieSessionStorage as my session)

There are unfortunately no other logs present for me to debug this further.
These points make me think that something is going wrong while handling the callback within handleCallback.

Looking at the code, this could be because we're doing this within the library:

auth0-remix-server/src/index.ts

Line 1 in a22bff7

import { redirect } from '@remix-run/node';

My thought is to first validate my theory by forking the repo and replacing usage or @remix-run/node with @remix-run/cloudflare-pages.
Once validated, I guess a more longer term fix would be to provide a redirect to authenticator.handleCallback so that the library can be platform agnostic.

Please let me know what you think. Thank you!

[meza]

Hey, great point!

@sj-e2digital just pushed through a change that might fix it. Want to give it a whirl?

https://github.com/meza/auth0-remix-server/releases/tag/v2.0.3

[praagyajoshi]

Thanks for such a quick response @meza! 🙌

Oh, that's perfect timing! I just tried on my local env and it does seem to work ✨
I will also try deploying it and report back.

As a requirement for deploying, I will need to handle env variables properly. I appreciate my question is not directly related to this library, but would you have any recommendation for safely passing env variables when initialising Auth0RemixServer?

Looking at Remix's docs, env variables in a Cloudlfare Pages target have to be fetched from context: https://remix.run/docs/en/1.15.0/guides/envvars#local-development
But since we're initialising Auth0RemixServer outside of a loader or action, we can't access context. I'm not sure how to proceed in this case.

[meza]

That's a good question and you probably can find as many answers as many people you ask.

The way we do it on the trance stack is by baking the variables into the bundle at bundle time. This allows us to ship the code to environments where you can't have environment variables.
We use esbuild-plugin-environment

The alternative would be to use dotenv and use env variables.

[praagyajoshi]

Thanks for your response!

The alternative would be to use dotenv and use env variables.

Unfortunately, I don't think that's an option since process will not be defined — it doesn't exist in Cloudflare runtime.

The way we do it on the trance stack is by baking the variables into the bundle at bundle time. This allows us to ship the code to environments where you can't have environment variables.

That looks very interesting! However, I'm not sure how to reference env variables defined in a Cloudflare runtime (and locally via .dev.vars) through this 🤔

Another though I have is to initialise the authenticator each time I use it within a loader or action since I can access env variables easily at that point through the context object.

[meza]

That looks very interesting! However, I'm not sure how to reference env variables defined in a Cloudflare runtime (and locally via .dev.vars) through this 🤔

I'm not sure how you're deploying to Cloudflare but this "baking in" should ideally happen before Cloudflare gets involved. For us it happens during the npm run build step which means that the env variables need to exist on the github ci environment and not on the target (aws lambda) environment. The Lambda env has no variables on it at all.

[praagyajoshi]

Just to tie up the discussion, I went with this solution:

Another though I have is to initialise the authenticator each time I use it within a loader or action since I can access env variables easily at that point through the context object.