W
Wasp-lang•4mo ago
Jeremy_Xie

OAuth Login Error with Google Credentials in Local Environment

Hello everyone, I need a bit of help. In my local environment, I've correctly set up the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in my .env.server file and also configured the WASP_WEB_CLIENT_URL to http://localhost:3000. Despite this, after attempting to log in, I'm encountering an error that says, 'An unknown error occurred while trying to log in with the OAuth provider.' Could anyone please advise on what might be going wrong? Thank you in advance for your assistance!
19 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Jeremy_Xie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- There could be several reasons why you're encountering this error. Here are a few things you can check: 1. Google OAuth App Configuration: Ensure that you've correctly set up your Google OAuth app. The Authorized redirect URIs should include <http://localhost:3001/auth/google/callback> for your local environment. Once your app is deployed, you should also add the URL(s) where your API server will be deployed, for example, <https://your-server-url.com/auth/google/callback.> You can refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/social-auth/google#3-creating-a-google-oauth-app) for more details. 2. Email Login: If you've previously logged in with the same email address using the Email method, this could cause issues. You can check this by running wasp db studio and deleting the user if it exists, then try logging in again. 3. Wasp Auth Configuration: Check your main.wasp file, specifically the auth methods section. Ensure that you've added google:{} and correctly configured it. You can refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/social-auth/google#conclusion) for more details. 4. Environment Variables: Make sure that you've correctly set the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your .env.server file. If these are not set correctly, you might encounter an error saying that the Google auth provider requires a clientID provided via environment variables. If you've checked all of these and you're still encountering the error, it might be helpful to share more details about your setup or any error messages you're seeing in the console. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jeremy_Xie, 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?
miho
miho•4mo ago
Could you share a bit more about your Wasp file and what how did you set up the Gooogle Auth?
terrence
terrence•4mo ago
I'm having same problem, followed instruction on the doc, but shows validation failed, cannot read properties of undefined (reading '0') And both server and browser does not print any error info, don't know where is the problem
miho
miho•3mo ago
Maybe you need to set up the scopes? https://wasp-lang.dev/docs/auth/social-auth/google#overrides That's why I'm asking for your setup 🙂
Google | Wasp
Wasp supports Google Authentication out of the box.
terrence
terrence•3mo ago
I did add scope
No description
No description
Jeremy_Xie
Jeremy_Xie•3mo ago
Everything has been done according to the documentation at https://wasp-lang.dev/docs/auth/social-auth/google, but the problem still persists. Is OpenSaaS currently suitable for building a formal production system?
terrence
terrence•3mo ago
I fixed it by adding a _redirects file under build, I think the problem is route redirection, right now it can correctly login and get out of infos from google oath
Jeremy_Xie
Jeremy_Xie•3mo ago
Hi Terrence, thanks for sharing your solution about using a _redirects file for fixing the route redirection issue with Google OAuth. Could you please provide more details on how exactly you set up the _redirects file? I'm trying to implement a similar solution and would appreciate any specific steps or configurations you used. Thanks in advance for your help!
miho
miho•3mo ago
I'm not sure what do you mean by "formal" production system? We have a lot of people using Wasp already for their internal tools, SaaS businesses, side projects etc. It's just React and Node.js underneath, so what goes for those techs (battle tested), goes for Wasp. Although, Wasp is in beta so we are moving fast and trying to find the best DX we can. That's why, there will be some breaking changes, but we provide guides for migration. Hm, which Wasp version are you using? Are you using the Open SaaS template?
terrence
terrence•3mo ago
I pushed my production code to netlify, and I found that it cannot handle routing very well, It needs to be handled by wasp, because the build code only has one index.html file, so you need redirect all the routes into index.html instead of netlify figure out the target page, so here is the step: cd into your build folder for me is like:"/app/.wasp/build/web-app/build/ then create a file named just "_redirects" the contents: /* /index.html 200 just like this, and push deploy it into netlify with cli
terrence
terrence•3mo ago
like this
No description
miho
miho•3mo ago
This means we should update the Wasp docs with your suggestion! https://wasp-lang.dev/docs/advanced/deployment/manually#netlify-client
Deploying Manually | Wasp
This document explains how to build and prepare your Wasp app for deployment.
miho
miho•3mo ago
We had an old netlify.toml file in the web-app with the following contents, but that's no longer relevant it seems.
[build]
publish = "build/"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
[build]
publish = "build/"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
terrence
terrence•3mo ago
I also had this file, but it's useless, I have to create a file separately
miho
miho•3mo ago
You tried using the file and it didn't work or it did work but you needed different redirects?
miho
miho•3mo ago
GitHub
Update docs on deploying to Netlify · Issue #1999 · wasp-lang/wasp
It seems that OAuth redirects don't work properly without using a special _redirect file to set up the redirect on Netlify. Discord thread: https://ptb.discord.com/channels/686873244791210014/1...
terrence
terrence•3mo ago
it works for me now with "_redirects" file
Jeremy_Xie
Jeremy_Xie•3mo ago
I am currently using version 0.13.2 of Wasp, and yes, I am using the Open SaaS template.My issue seems different from terrence's. I can't log in using Google OAuth in my local environment, but strangely, it works fine once deployed to fly.io.
miho
miho•3mo ago
@Jeremy_Xie is this issue still present for you? If you don't mind you can share your repository with me in the DM and I'll try running it locally and see what's up