0

I have Google OAuth working with FastAPI and authlib, following this example and building off the official security tutorial. This is working via FastAPI's built-in swagger UI, and I can see that I'm only able to access my protected routes if I have logged in with my google user via the fastapi.security.OAuth2PasswordBearer form, which is good.

However, I can't replicate this via my "frontend", which is just some html served by fastapi with a button that triggers the typical Google OAuth form. That is, the button contains <a href="/login">Google</a>. This ultimately takes me to my /token endpoint and prints the {"access_token": <my_token>, "token_type": "bearer"}, which seems good.

In reality, once this token is correctly received, I need to redirect to one of my protected routes. In order to redirect, I can't simply use that <a>. Instead, I need to bind an XMLHttpRequest() to onclick that simulate's the href="/login" with a GET and, if that goes well, then redirects to my protected route. But unfortunately that XMLHttpRequest() results in https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=<client_id>&redirect_uri=http%3A%2F%2F127.0.0.1%3A8004%2Fapi%2Fauth%2Fgoogle&scope=openid+email+profile&state=<state>' (redirected from 'http://127.0.0.1:8004/api/auth/login/google') from origin 'http://127.0.0.1:8004' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.. I have tried a variety of different headers and referrerPolicy, as well as CORSMiddleware but so far I am unable to simulate the <a> with my XMLHttpRequest() .

To be honest, I'm not sure I'm approaching this the right way. Ultimately I'm just trying to get your example code to work not just via swagger but also via my html.

Jaime Salazar
  • 349
  • 1
  • 2
  • 11

1 Answers1

0

The token is stored in session, and the session is simply a cookie. Normally, cookies are sent with synchronous http requests to the server that set that cookie. However if I understand correctly, you are making a asynchronous http request with fetch().
You can try to enable sending cookies with your fetch() requests by trying the code in this answer.

Simon
  • 2,328
  • 6
  • 26
  • 30
  • Thanks for the reply but adding `credentials: "same-origin"` or `credentials: "include"` is not helping. I suppose my first doubt is whether I should be using `mode: "no-cors"` or `mode: "cors"` because depending on that I get different errors in the console. For example it will, respectively, break at `https://accounts.google.com/v3/signin/identifier` with a 403 or at `https://accounts.google.com/o/oauth2/v2/auth` with `No 'Access-Control-Allow-Origin' header is present on the requested resource` (even though I've added it to my `fetch()`). – Jaime Salazar May 09 '23 at 09:29
  • @JaimeSalazar the final error you mention is a typical CORS error, so you should mode: "cors". The 403 error can maybe be caused by some wrong setting in your Google Cloud Project. – Simon May 09 '23 at 10:13
  • Ok but then it's likely that I will need `mode: "cors"`? FWIW right now the frontend is part of FastAPI, coming from the same IP and PORT, but in the future I will likely be building a separate frontend. Does that make a difference? – Jaime Salazar May 09 '23 at 11:41