Vercel deployment - Invalid callback url
Hi team, i just tried to deploy my app to vercel with kinde auth.
after follows all the steps on your youtube channel, but still get the error invalid callback url.
P/s: i update env and url settings on project already, is there any solution. thanks in advance
46 Replies
Hi, have you setup the callback URLs in the kinde dashboard for the application you're using?
yes, i set it up already. but still get invalid URL
here is my setup, just follow the guide of your team on kinde youtube channel.
here is the error screen when i tried to login
Are you using next.js? I also had a little trouble getting this to work originally and can probably help guide you through it
yes, i use nextjs 14 mate
Which video did you follow? can you link it so I can see what you did?
Kinde
YouTube
How to deploy a Kinde Next.js app with Vercel
Software engineer Peter takes you through how to deploy a Kinde app using Vercel, and covers the common pitfalls involved.
00:00 - App demo
0:46 - Creating a project on Vercel
1:19 - Initialising Github repo
2:49 - Setting up environment variables on Vercel
4:00 - Deploying and visiting the app on the Vercel Domain
5:13 - Updating environment ...
here is the video i just follow
Hm as far as I can tell that should be working.
Stupid question - you hit save after you set the callback url in the Kinde dashboard?
And your vercel env is set correctly?
yes, save and change the ENV already. im not stupid as that mate :D. thanks for reply
I didn't assume, nor insinuate that I think you're stupid. Sometimes with issues like this, simple things are missed or overlooked, I miss things like this all the time. It's always best to cover the simple bases first rather than digging into complex solutions when the issue is right under our noses.
oh sorry for my reading mistake.
i did all these stuffs but still get the error, and i have tried to searching for this term on google already but there is no answer for that. Maybe Kinde is quite new, i will try to do all the steps again.
Again, Thanks Joel.
Does it work for localhost?
yes, it does.
Have you tried something as simple as deleting the fuji-recipes entry from your callback settings in Kinde, then saving, then copying the url from the error screen back in?
Sometimes computers are weird and things like that work lol
i did it also, but still get it.
tried to close browser, switch to use other browsers too, LoL 😂
I also tried to log in on your app and it still didn't work
@Joel i just re-create the app and setup all the stuffs again.
Now it works, thanks for your times Joel. Have a great day
Computers are weird man, glad you got it working 😂
@DuocNgo hey man I'm facing the same issue, did you manage to know what the reason was? and by what do you mean by "re-create"ing the app?
First step, just check your kinde app name in local and the one on your host, if they are not the same, you should create new kinde app and setup the config again, hope you will resolve the error soon.
can you explain a little more please? I should compare my kinde project name to what in my code?
can you show me the snapshot of kinde auth screen on your local app and the one on vercel or somewhere
yeah sure, appreciate the help btw
can i see the fullpage of the 1st picture
let see the url, does it is the same with the link on your local environment?
in development everything works
yes, i understand, but when it navigate to the auth screen in dev env, please take a look at the url
does it is the same url on the development environment?
https://chatspdfauth.kinde.com/
yup same thingdo you use nextjs? at this modal which is the one do you choose to setup the kinde auth?
yeah I did
did you choose back-end web?
if not, you can add the new app with backend-end web type and setup the server again.
and that is all steps i had done to make my app works on vercel mate.
thanks man for me its backend and still didnt work but appreciate your help
If you have updated environment variables on vercel, you will have to redeploy your application for the env variables to update - maybe that'll do it?
Otherwise you might have to click save in the Kinde Settings after setting callback URLs
@peteswah fixed thanks!
I'm having the same trouble except I deployed my app on Amplify.
Hi @Lytemare ,
Have you redeployed since updating your environment variables on Amplify?
How did you fix the issue? Even after I redeploy get the same problem as above: invalid callback URL
Unfortunately I cannot get it to work in Amplify under production. Works perfectly well locally when I test it.
Can you share details @Lytemare of the callback URL you're getting?
I'm not even getting that error anymore. Just a blank page in Safari. In Chrome, get This page isn’t workingmain.dlrove54zv9py.amplifyapp.com is currently unable to handle this request.
HTTP ERROR 500. I don't understand why I have this problem. Works perfectly well localhost:3000. When I update callback url with app domain, it just will not work.
Wanted to know how to delete the business? Cannot find this info in any of the docs. I wanted to create a new one and try it that way?
Unfortnately Kinde is not going to work in Amplify. Get invalid callback again. Docs on Kinde site are not very helpful.
Hi, we run Kinde on amplify internally as part of our test suite, are you able to give more more details on the error you're getting? could you give me a screenshot of the error?
I cleared and re input environment variables in amplify and edited my build settings. Now I can get to the sign on page but when I try to sign on get the following error under url: mydomainname.com/api/auth/kinde_callback?code=w9L89j5MuU-oIBYTbU5k9jaoWMKGNuS9F9ZTI5xMfH0.A1Z0uExLWjmei1yUS_9L4jrgyauRp90T_pYuj-nwhko&scope=openid%20profile%20email%20offline&state=3ad123ca57d4c0c24b0fe9128310
Is this after the auth flow has been completed?
Are you able to send me a video? You can DM me if you would rather.
In sign up page <RegisterLink> I can input First Name, Last Name and email. I get the verification code. After I enter the verification code I get HTTP error 500
So I tried to deploy my app from vercel instead but I am having the same issue as above. Verified environmental variables. This same app tests perfectly locally