Google Oauth success redirect with React app

[philipshurpik]

Hi!
I'm mostly in ML/AI engineering now, but need to setup simple MVP for our product

Currently doing setup of Google OAuth using this docs:
https://fastapi-users.github.io/fastapi-users/latest/configuration/oauth/#beanie

Here is code for Google OAuth router:

google_oauth_client = GoogleOAuth2(settings.GOOGLE_OAUTH_CLIENT_ID, settings.GOOGLE_OAUTH_CLIENT_SECRET)
redirect_url = f"{settings.BACKEND_URL}{settings.API_PATH}/auth/google/callback"
app.include_router(
    fastapi_users.get_oauth_router(
        google_oauth_client,
        jwt_authentication,
        state_secret=settings.SECRET_KEY,
        associate_by_email=True,
        redirect_url=redirect_url
    ),
    prefix=f"{settings.API_PATH}/auth/google",
    tags=["auth"],
)

It works well on oauth callback - we get user login at backend
But on frontend user still gets on original http://localhost:8000/api/v1/auth/google/callback url.

So I found solution to handle redirect it in UserManager on_after_login method.
But :)
For frontend to work correctly we need somehow to send token to frontend and store it for example in LocalStorage.
So I implemented it that way:

class UserManager(ObjectIDIDMixin, BaseUserManager[UserModel, PydanticObjectId]):
    ...
    async def on_after_login(self, user: models.UP, request: Request, response: Response) -> None:
        if '/callback' in request.url.path:
            response.status_code = 303
            access_token = json.loads(response.body)['access_token']
            response.headers["Location"] = f"{settings.FRONTEND_URL}/oauth-success#{access_token}"

And then on frontend in React to handle /oauth-success route:
<Route path="/oauth-success" element={<OAuthSuccess />} />

And OAuthSuccess component where I handle token from location.hash and store to LocalStorage:

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const OAuthSuccess = () => {
  const navigate = useNavigate();

  useEffect(() => {
    try {
        const accessToken = window.location.hash.slice(1) || '';
        localStorage.setItem("token", accessToken);
        navigate('/');
      } catch (error) {
        console.error('Error handling OAuth success:', error);
        navigate('/login');
      }
  }, [navigate]);

  return <div>Loading...</div>;
};

export default OAuthSuccess;

And here is two questions:

1. Is it ok to do so and pass token in location.hash via redirect?

• Using https location.hash should be encrypted - so token shouldn't be visible "in the middle"
• This redirect url is not stored in browser history, and location hash should not appear in logs, etc.

• But it still seems not super secure to do that way :)

2. Is there some better options to handle such redirect, if we are using fastapi-users library?
   Because unfortunately there are actually nothing in tutorials or other guides about how to correctly implement this flow using fastapi-users and react web app :(

[hgalytoby]

I think this answers your question

#1154 (comment)

#906

[philipshurpik]

Thanks!
Nice solution to redirect to frontend, and then make request to backend and receive bearer token!

[philipshurpik]

Thanks, @hgalytoby for suggestion.

So here I will publish full React frontend solution for all, who will have such question in future :)
Here is full boilerplate implementation of fastapi-users + beanie + oauth + react:
https://github.com/philipshurpik/fastapi-oauth-mongo-react-starter

And here is simple part what we need to implement additionally to this docs:
https://fastapi-users.github.io/fastapi-users/latest/configuration/oauth/#beanie

1. Let's have React route:
   <Route path="/oauth-callback" element={<OAuthCallback />} />
   
2. Add backend OAuth router:

redirect_url = f"{settings.FRONTEND_URL}/oauth-callback"
app.include_router(
    fastapi_users.get_oauth_router(
        google_oauth_client,
        jwt_authentication,
        state_secret=settings.SECRET_KEY,
        associate_by_email=True,
        redirect_url=redirect_url,
    ),
    prefix=f"{settings.API_PATH}/auth/google",
    tags=["auth"],
)

3. Set in Google Cloud Console:
   Authorized redirect URIs as (for example for development): http://localhost:3000/oauth-callback

4. Now implement page.
   Here we:

• handle /oauth-callback url
• get oauth token from url: query = window.location.search
• make get request to our backend fastapi-users oauth callback route ${basePath}/auth/google/callback${query}
• store token where we need to store, for example in localStorage

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { basePath } from "../providers/env";

const OAuthCallback = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const handleOAuth = async () => {
      try {
        const query = window.location.search;
        const callbackUrl = `${basePath}/api/v1/auth/google/callback${query}`;
        const response = await fetch(callbackUrl, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        localStorage.setItem("token", data.access_token);
        navigate("/");
      } catch (error) {
        console.error("Error handling OAuth success:", error);
        navigate("/login");
      }
    };
    handleOAuth();
  }, [navigate]);

  return <div>Loading...</div>;
};

export default OAuthCallback;

[hgalytoby]

Thank you for the example.