google oauth
im using opensaas for my application. if i have the wasp web client env set up with ngrok and i log in with google oauth the application redirects to the ngrok URL after the authentication process, but in google console the authorized redirect URI is http://localhost:3001/auth/google/callback. what is causing this?
4 Replies
Hi @Bruno Njeru. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing is related to how OAuth redirects work in Wasp, particularly with Google authentication.
In Wasp 0.13.0 and newer versions, the OAuth providers were overhauled to use Arctic instead of Passport. With this change, the redirect URL format changed to
{serverUrl}/auth/{provider}/callback from the previous format.
For Google OAuth specifically, the authorized redirect URI should be set to <http://localhost:3001/auth/google/callback> in your Google Cloud Console (which you've correctly done), but there's also a server environment variable that needs to be properly configured.
The key environment variable that controls where you're redirected after authentication is WASP_SERVER_URL. This variable is used to generate the redirect URL for OAuth providers. In development, it defaults to <http://localhost:3001,> but when you're using ngrok, you need to set this to your ngrok URL.
You should update your .env.server file to include:
This will ensure that after Google authentication, you're properly redirected back to your ngrok URL instead of localhost.
Migration from 0.12.X to 0.13.X explains this change in the OAuth setup, specifically mentioning the need to define the WASP_SERVER_URL server environment variable.
Additionally, make sure that in your Google Cloud Console, you've added your ngrok URL as an authorized redirect URI alongside the localhost one, like:
<https://your-ngrok-url.ngrok.io/auth/google/callback>
This should resolve the redirection issue you're experiencing with Google OAuth in your OpenSaaS application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?it should redirect to http://localhost:3001/auth/google/callback but there's a mixup with the ngrok url when i have ngrok running, it redirects to the ngrok URL after the authentication process. if i comment out the wasp web client url, after authentication it redirects http://localhost:3001/auth/google/callback. can the oauth redirect work with ngrok running @kapa.ai
it should redirect to http://localhost:3001/auth/google/callback but there's a mixup with the ngrok url when i have ngrok running, it redirects to the ngrok URL after the authentication process. if i comment out the wasp web client url, after authentication it redirects http://localhost:3001/auth/google/callback. can the oauth redirect work with ngrok running @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, OAuth redirects can work with ngrok running, but you need to properly configure the environment variables to handle the redirection correctly.
Based on your description, it sounds like there's a conflict between your local development setup and the ngrok URL. When you're using ngrok, Wasp needs to know about both your server URL and your client URL to properly handle OAuth redirects.
Here's how to make it work:
1. In your
.env.server file, you need to set both environment variables:
2. In your Google Cloud Console, you should add both redirect URIs:
- <http://localhost:3001/auth/google/callback> (for local development)
- <https://your-server-ngrok-url.ngrok.io/auth/google/callback> (for ngrok)
The WASP_SERVER_URL is particularly important as it's used to generate the redirect URL for OAuth providers, as mentioned in the migration documentation.
If you're running both your client and server through ngrok (as some users have reported doing in the Discord discussions), you'll need to forward both ports:
And then set the appropriate environment variables as mentioned above.
This setup should allow OAuth redirects to work properly with ngrok running, giving you the flexibility to test your application with external access while maintaining the correct OAuth flow.
I hope this helps! Let me know if you have any further questions.
I'm here to help you with any Wasp-related questions you might have.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Bruno Njeru, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Hi, I'm unsure of what you want to achieve. You're asking Wasp to run on an ngrok domain name, but the Google redirect should go to the localhost name? Wouldn't this stop using ngrok? What's the usecase?