How to fetch user picture and store it in DB while using Google OAuth2?

[jd-solanki]

Hi 👋🏻

I'm following the official guide and everything seems file. However, Logged in user picture/avatar is missing from my DB I inspected a lot but couldn't find how to implement it, Can somebody help?

Thanks 😇

[hgalytoby]

I don't save images/avatars to the database myself.

If you have successfully bound google oauth.

You can do this.

ref

https://fastapi-users.github.io/fastapi-users/latest/usage/current-user/

https://fastapi-users.github.io/fastapi-users/latest/configuration/oauth/#instantiate-an-oauth2-client

https://github.com/frankie567/httpx-oauth/blob/master/httpx_oauth/clients/google.py#L35

from httpx_oauth.clients.google import PROFILE_ENDPOINT, GoogleOAuth2


class MyGoogleOAuth2(GoogleOAuth2):
    async def get_photos(self, token: str) -> str:
        async with self.get_httpx_client() as client:
            response = await client.get(
                PROFILE_ENDPOINT,
                params={'personFields': 'photos'},
                headers={
                    **self.request_headers,
                    'Authorization': f'Bearer {token}',
                },
            )

            if response.status_code >= 400:
                # Show Error
                raise

            data = response.json()
            photos_url = next(photo['url'] for photo in data['photos'])
            return photos_url


google_oauth_client = MyGoogleOAuth2(client_id=..., client_secret=...)


@app.get('/oauth-google-photos')
async def oauth_google_photos(
    user: UserModel = Depends(current_active_verified_user),
) -> dict[str, str]:
    google = next(
        (
            oauth
            for oauth in user.oauth_accounts
            if oauth.oauth_name == 'google'
        ),
        None,
    )
    url = await google_oauth_client.get_photos(token=google.access_token)
    return {'url': url}

You can get

{"url": "https://lh3.googleusercontent.com/a/...=s100"}

If you want to change the size, set s=100, for example s=512

[jd-solanki]

Thanks, This is like making a completely different API call. Can we tell FastAPI users to grab picture with the email? Also, There are other values like name which are missing.

Are you aware of any way to modify the FastAPI user code or extend any base class so we get all the details without making extra API calls?

[hgalytoby]

Get picture from email.

Yes, you can build your own API to get the user information from the email provided by the client, and then call the user oauth access_token to get the related information from the google oauth api.

Missing name and other values, please refer to the documentation.

https://developers.google.com/people/api/rest/v1/people#resource:-person

params={'personFields': 'photos,names'}

Extend fastapi user

Yes, but I don't know which api you want to expand, it may involve a lot of associated fastapi-users function.

Since I'm not that familiar with OAuth, my approach is to make a separate API to meet my needs.

[jd-solanki]

Thanks, But still I'm not getting how can I tell fastapi-users to fetch pictures and all that additional information. I've used frontend solutions before and they used to fetch image and full name along with auth data.

@frankie567 shouldn't fastapi-users also auto fetch these additional details?

[jd-solanki]

I guess, I found it: https://github.com/frankie567/httpx-oauth/blob/master/httpx_oauth/clients/google.py#L61

But it looks like we can't tell fastapi-users to fetch additional data and store in OAuth table

[frankie567]

FastAPI Users only fetch the ID and the email from the external OAuth provider. If you need more, you'll need to implement it yourself.

The easiest way is probably to do it in the on_after_login method: https://fastapi-users.github.io/fastapi-users/latest/configuration/user-manager/#on_after_login

There, you have access to the user; so you can very well retrieve the Google's access token from the OAuthAccount table and make all the API requests you need to do, and save the response.

---

If you want to do it all at once, you can override the callback endpoint. Especially that part:

fastapi-users/fastapi_users/router/oauth.py

Lines 110 to 112 in 61dba26

	account_id, account_email = await oauth_client.get_id_email(
	token["access_token"]
	)

You can replace it with a custom API call to Google to retrieve all the data you need.

[jd-solanki]

So I've to override the function.

Thanks @hgalytoby @frankie567 🙏🏻