authlib / authlib/demo-oauth-client
FastAPI google authlib doesn't work from html (works from swagger)
- Dominant language
- Python
- Stars
- 287
- Forks
- 102
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I'm not getting much help from google or stackoverflow so I hope you can help.
I have Google OAuth working with FastAPI and authlib, following [your example](https://github.com/authlib/demo-oauth-client/blob/master/fastapi-google-login/app.py) and building off the official [security tutorial](https://fastapi.tiangolo.com/tutorial/security/oauth2-jwt/). 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 `Google`. This ultimately takes me to my `/token` endpoint and prints the `{"access_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 ``. 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=&redirect_uri=http%3A%2F%2F127.0.0.1%3A8004%2Fapi%2Fauth%2Fgoogle&scope=openid+email+profile&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 `` 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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the referenced fastapi-google-login/app.py example and the FastAPI security OAuth2-JWT tutorial. Reproduce the HTML anchor flow and the XMLHttpRequest flow against /login, /token, and the protected route, then inspect the reported Google OAuth redirect and CORS preflight failure. Done is not defined until the project specifies the supported browser flow or documents why this request pattern is unsupported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- fastapi, python
- Domain
- api, authentication, backend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100