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
Вернуться на верх