Cannot login when doing local development on mobile device
I am doing local development, so I've added the following as my allowed callback URLs:
http://localhost:3000/api/auth/kinde_callback
http://192.168.8.167:3000/api/auth/kinde_callback (my macbook's local IP)
When I'm testing on desktop, I connect using localhost, and logging in with Kinde works perfectly.
However, when trying to login on mobile, I have to use my Macbook's local address, and it doesn't work properly. After login using Kinde's hosted UI, I get redirected to localhost, instead of the local IP (which doesnt show anything, of course)
Is there a way to address this issue? It seems like Kinde should know I came from the local IP, instead of localhost, and redirect me there.
3 Replies
Let me chat with the team and come back with some advice for you
It seems like you're running into a common issue with local development and testing on multiple devices. When you're testing on your mobile device, it doesn't recognize "localhost" as your computer, but as the device itself.
Please follow the below instructions, after installation of Ngrok, you'd need to create an account + verify a token. Follow the rest of the steps + change the values in .env and in Kinde admin callback urls section + access it via the ngrok generated link for web + mobile testing.
One way to address this issue is to use a service like ngrok. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. This means you can use the same URL for both desktop and mobile testing.
Here's how you can do it:
Install ngrok.
Start your local server (let's say it's running on port 3000).
In a new terminal window, start ngrok by running ngrok http 3000.
Ngrok will provide a URL (for example, http://abc123.ngrok.io). Use this URL as your callback URL in Kinde settings.
Now you can use this ngrok URL on both your desktop and mobile device for testing.
Remember to update the callback URLs in your Kinde application settings with the ngrok URL. Also, keep in mind that the ngrok URL is temporary for the free version, so you'll need to update the callback URLs in Kinde each time you restart ngrok.
Let us know how you go
I've set it up and its working great, thank you 🙏
Yay! Thats awesome to hear @internetjohnny