Error '500 - Invalid URL string' with Nuxt + Cloudflare
I'm trying out Kinde in Nuxt, but when deployed, trying to log in (or sign up) returns an error 500 Invalid URL string.
The thing is, this only happens when I deploy it to Cloudflare Pages (my go-to service to deploy this app). Deploying the same exact project in Vercel works just fine.
It seems like something is going wrong with the environment variables in Cloudflare, although I'm setting them up just the same in Vercel.
Anyone suggestions?
6 Replies
(This also happens with Kinde's Nuxt starter kit)
Hey @Thiago awesome to hear that you are giving Kinde a go with Nuxt.
It sounds like there might be an issue with how the environment variables are being set or read in Cloudflare Pages. Here are a few things you can check:
Ensure that the environment variables are correctly set in Cloudflare Pages. They should match the ones you have in your .env file.
Make sure that the environment variables are being read correctly in your application. In Nuxt, you can access environment variables using process.env.YOUR_VARIABLE.
Check the format of your callback and logout URLs. They should be in the format http://localhost:3000/api/auth/callback and http://localhost:3000 respectively.
If you're using dynamic URLs, you might need to add some additional configuration. Kinde's NextJS SDK provides a way to handle dynamic URLs with Vercel, but you might need to do something similar for Cloudflare Pages. https://kinde.com/docs/developer-tools/nextjs-sdk/#redirecting-after-authentication
Also double check that you dont have an empty spaces in your Callbacks.
Let me know how you go and if still having issues, we will dig deeper.
Kinde Docs
NextJS App Router SDK v2 - Developer tools - Help center
Our developer tools provide everything you need to get started with Kinde.
@Thiago just an FYI we have also setup an example app on Cloudflare with React if you want to compare your setup https://4e967664.viv-cf-2.pages.dev/ and you should checkout this doc as well. https://developers.cloudflare.com/workers/configuration/environment-variables/
React App
Web site created using create-react-app
Environment variables · Cloudflare Workers docs
Attach text strings and JSON values as environment variables to your Worker.
Decided to give this a try almost one month later... 😅
Turns out that if you define these values in the nuxt.config file with the env variables values, it works.
No clue why this seems to only happen with CloudFlare, but it's fixed.
Awesome to know that its work for you now @Thiago cc @Daniel_Kinde
Thats great! Thanks for letting us know.