Google Auth Redirection Not Working (Netlify & AWS)

[Bojun-Feng]

Describe the bug

I am currently trying to deploy an app built with Open-Saas on Netlify and AWS EC2 instance with Nginx. Everything was working in the developer environment, but when I try logging in via Google it breaks. The Google Auth screen shows up normally and gives a response that results in several redirects, but after signing in it eventually redirects to https://myapp.netlify.app/oauth/callback, where it is met with a 404 (the same redirection returns a 304 in local developing environment). I have posted the screenshots from Google Dev console. At the time of failure, the url showing up in chrome is https://myapp.netlify.app/oauth/callback#{long_token}

To Reproduce Use the Open Saas Template to deploy a project frontend on Netlify and Docker container on an AWS EC2 instance with Nginx using Google Auth. The Http requests will break due to Netlify's security policy (Https requests will also be banned if you use a self-generated certificate), so add a custom domain name and use openssl to generate a trusted certificate and host a redirect on CloudFront.

Signing in via Google Auth will result in an error. In partilcular, it will result in a Netlify's "This page does not exist" error.

Expected behavior Signing in via Google Auth results in a website error page / redirects to the example ai app.

Screenshots Here is the error page I got:

Here is the expected error page (Ideally it should sign me in and go to the app but even if Google Auth fails we should see this error instead of the previous one):

Here are the two redirect requests being met with different responses:

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version Version: 129.0.6668.91 (Official Build) (arm64)

Additional context I went though the docs and previous questions but was not able to find much helpful information. I imagine it has something to do with the netlify.toml file but am not sure what to change. Please let me know if there are any other information I can provide. Any suggestion would be much appreciated!

[Bojun-Feng]

Additionally, when I try to directly enter https://myapp.netlify.app/oauth/callback, it gives the Netlify “page not exist” error page. When I enter http://localhost:3000/oauth/callback in the local dev environment, however, it brings me to the ai demo app page (if I signed in) or to a error page still with the web app’s nav bar (if I did not sign in)

This leads me to hypothesize that the front end code might just be built incorrectly. Does this auth/callback URL correspond to a webhook or a file? (I am new to this so sorry in advance for the dumb question) Any suggestions on how to debug it?

[Bojun-Feng]

Hmm tired to run the built version for front end locally and http://localhost:3000/oauth/callback also brings me to the app or the error page. Seems like there is something wrong with either the router or building the oauth callback page. This bug is quite mysterious so far, not sure what could have gone wrong. Any advice is appreciated!

[Bojun-Feng]

I asked the question on Discord and got a solution:

I was originally building the app on push not through the Netlify CLI's terminal command, but through linking Netlify with the Git Repo and using a hacky deploy command through their web interface on each Git push:

curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v 0.15.0
&& /opt/buildhome/.local/bin/wasp build
&& cd .wasp/build/web-app
&& npm install
&& REACT_APP_API_URL=https://server.com/ npm run build

For some reason, this does NOT build the OAuthCallbackPage correctly and results in the issue.

The issue is fixed when I switched to using the Netlify CLI's terminal command in Github Actions to deploy. Here is my Github Action file for deploying frontend, people may find this useful:

Github Action

``` name: Deploy Client to Netlify on: push: branches: - main # Deploy on every push to the main branch jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v2 - name: Setup Node.js id: setup-node uses: actions/setup-node@v4 with: node-version: '20' - name: Docker setup uses: docker/setup-buildx-action@v3 - name: Install Wasp run: curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v 0.15.0 # Change to your WASP version - name: Wasp Build run: cd ./app && wasp build - name: Install dependencies and build Vite project run: | cd ./app/.wasp/build/web-app npm install REACT_APP_API_URL=${{ secrets.WASP_SERVER_URL }} npm run build - name: Deploy to Netlify run: | cd ./app/.wasp/build/web-app npm install -g netlify-cli netlify deploy --prod --dir=build --auth=$NETLIFY_AUTH_TOKEN --site=$NETLIFY_SITE_ID env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} ```

[Bojun-Feng]

The original issue is closed but I think it would make sense in the Docs to explicitly mention to NOT deploy through the Netlify auto deploy on push option on the Netlify website, which seems very tempting since it is a lot less work than typing up a Github Action yml file. This is generally the default option for most people building site there).

I originally encountered this issue yesterday at 3pm (that's when I asked in Discord) and the issue is solved at 3am today. Now when I look back, a small update in the Docs would really save me a lot of time. Especially because I originally thought it was a backend network issue in the AWS EC2 instance (there's no documentation on deploying via AWS) and completely overengineered my nginx setting 😅

If possible, I would like to update the docs myself - I think this project is really cool and am excited to contribute to it! However, I'm not sure if this issue only applies to projects built upon the Open Saas template, or whether it applies to all Wasp projects in general. If I am to update the docs, should I update the docs for the Open Saas project or just for Wasp?

[Martinsos]

I answered in more details here: https://discord.com/channels/686873244791210014/1296568113692938272/1296926685735817308 ! Super short: Problem is that for wasp to work on Netlify, since Wasp is SPA, we need Netlify to redirect requests to index.html in correct way. Wasp comes withi netlify.toml for that, but one needs to make sure to use that file or set the setting another way. Related issue: https://github.com/wasp-lang/wasp/issues/1982 .