React doesn’t receive API tokens after Google OAuth redirect via social_django/drf-social-oauth2

I'm implementing Google OAuth2 for my Django REST API with a React frontend. The basic flow is set up correctly. I have routes for:

urlpatterns = [
    path("admin/", admin.site.urls),
    path("api/v1/", include((v1_patterns, "v1"))),
    path("api/v1/auth/", include("social_django.urls", namespace="social")),
    path("api/v1/auth/token/", include("drf_social_oauth2.urls", namespace="oauth2")),
]

Also I have:

INSTALLED_APPS = [
    ...
    "drf_yasg",
    "social_django",
    "oauth2_provider",
    "drf_social_oauth2",
    ...
]

SOCIAL_AUTH_URL_NAMESPACE = "social"

AUTHENTICATION_BACKENDS = (
    "django.contrib.auth.backends.ModelBackend",
    "social_core.backends.google.GoogleOAuth2",
    "drf_social_oauth2.backends.DjangoOAuth2",
)

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = config("GOOGLE_OAUTH_CLIENT_ID")
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = config("GOOGLE_OAUTH_CLIENT_SECRET")

SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = ["email", "profile"]
SOCIAL_AUTH_GOOGLE_OAUTH2_EXTRA_DATA = [
    "email",
    "first_name",
    "last_name",
    "picture",
]

LOGIN_REDIRECT_URL = "http://127.0.0.1:5173"

# REST Framework general settings
REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "oauth2_provider.contrib.rest_framework.OAuth2Authentication",
        "drf_social_oauth2.authentication.SocialAuthentication",
    )
}

For login, I sent a GET request from browser to http://localhost:8000/api/v1/auth/login/google-oauth2/

After sending the request, in the console I get:

api_container | [24/Jun/2025 13:04:19] "GET /api/v1/auth/login/google-oauth2/ HTTP/1.1" 302 0
api_container | [24/Jun/2025 13:04:20] "GET /api/v1/auth/complete/google-oauth2/?state=KYTUm5yi1NheUmc095zaRqIc3mZjsOLp&code=4%2F0AUJR-x4dcWMTghJHjPc1QbiPrCFo5lo2u9l1cYJ47F61fB0kIkQe4I0DFAt33UZOPBBI8g&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none HTTP/1.1" 302 0

After a successful login, I get redirected to my React app (127.0.0.1:5173) — but the problem is, no tokens (access or refresh) are passed to the client. I don’t know how to retrieve or send them so that React can authenticate future API calls.

I can confirm that after login, the database records email, picture, first_name, last_name, and an access token (from Google), but React receives nothing.
The data, i have in database on extra_data field:

{
  "hd": "domain",
  "email": "my_email",
  "expires": 3599,
  "picture": "link",
  "auth_time": 1750762274,
  "last_name": "Doe",
  "first_name": "John",
  "token_type": "Bearer",
  "access_token": "token"
}

What I need help with:

1. How can I extract and send backend-generated access/refresh tokens to React after a successful login?
2. Should I use convert-token endpoint? If yes — what request should I make and where?
3. Or should I modify the redirect flow to include tokens in the URL fragment or similar?

I'd like to learn how to integrate the full flow — from Google login → React POST to /convert-token/ → store tokens → use tokens in authenticated API calls.

What I’ve tried so far:

• Configured social_django and drf-social-oauth2
• Verified redirect cycles and database fields
• Examined docs, but no working React integration example

The reason your React application is not receiving any tokens following Google login is that Django manages the OAuth flow and authenticates the user, but it does not automatically transmit the access or refresh tokens from your backend to the frontend.

Once Google redirects back to Django, it simply logs the user in and redirects to your LOGIN_REDIRECT_URL (which is your React application), but does not include any tokens.

To solve this issue, you must introduce an additional step: develop a custom Django view that intercepts the redirect, retrieves the Google access token from the logged-in user’s social authentication data, and subsequently redirects to your React application with that token included in the URL (for example, ?google_token=...). Within your React application, extract that token from the URL and promptly send a POST request to /api/v1/auth/token/convert-token/, including your client_id, client_secret, backend=google-oauth2, and the token you received.

This endpoint will provide you with your own API's access and refresh tokens, which you can then store and utilize for all subsequent authenticated API requests. Essentially, Django has completed its task; now React simply needs to invoke /convert-token/ to finalize the process.