authlib / authlib/demo-oauth-client

FastAPI google authlib doesn't work from html (works from swagger)

Open
#27 2 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.