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

Well. After much searching and trying, i came up with this option.
Solution: JWT with Google OAuth via Custom Pipeline & Cookie-Based Refresh.
In settings.py, set up the SOCIAL_AUTH_PIPELINE:

SOCIAL_AUTH_PIPELINE = (
    "social_core.pipeline.social_auth.social_details",
    "social_core.pipeline.social_auth.social_uid",
    "social_core.pipeline.social_auth.auth_allowed",
    "social_core.pipeline.social_auth.social_user",
    "social_core.pipeline.social_auth.associate_by_email",
    "social_core.pipeline.user.create_user",
    "social_core.pipeline.social_auth.associate_user",
    "social_core.pipeline.social_auth.load_extra_data",
    "social_core.pipeline.user.user_details",
    "users.pipeline.get_token_google_oauth",  # <— Your custom step
)

Custom pipeline function: get_token_google_oauth

# users/pipeline.py
from django.shortcuts import redirect
from rest_framework_simplejwt.tokens import RefreshToken

def get_token_google_oauth(strategy, details, user=None, *args, **kwargs):
    """
    After Google auth, generate JWT and send to client via cookies and redirect.
    """
    if not user:
        return redirect("http://127.0.0.1:5173/auth/error")

    refresh = RefreshToken.for_user(user)
    access = str(refresh.access_token)
    refresh_t = str(refresh)

    response = redirect("http://127.0.0.1:5173/")
    response.set_cookie(
        "refresh_token",
        refresh_t,
        httponly=True,
        secure=False,
        samesite="Lax",
        path="/api/v1/auth/token/refresh/",
    )
    # Optionally expose the access token
    response.set_cookie(
        "access_token",
        access,
        httponly=False,
        secure=False,
        samesite="Lax",
    )
    return response

This pipeline step:
1. Creates JWT tokens (access + refresh).
2. Stores refresh_token as an HttpOnly cookie scoped to refresh URL.
3. Exposes access_token to front-end via a non-HttpOnly cookie.
4. Redirects the user to your React app

Refresh endpoint: TokenRefreshFromCookieView

# urls.py
from django.urls import path, include
from rest_framework_simplejwt.views import TokenRefreshView
from .views import TokenRefreshFromCookieView

urlpatterns = [
    path("api/v1/auth/", include("social_django.urls", namespace="social")),
    path(
        "api/v1/auth/token/refresh/",
        TokenRefreshFromCookieView.as_view(),
        name="token_refresh",
    ),
]

Custom view to refresh tokens via cookies:

# views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from rest_framework.exceptions import AuthenticationFailed
from rest_framework_simplejwt.serializers import TokenRefreshSerializer

class TokenRefreshFromCookieView(APIView):
    """
    Refresh access token using a refresh token from cookie or request body.
    """
    def post(self, request, *args, **kwargs):
        refresh = request.data.get("refresh") or request.COOKIES.get("refresh_token")
        if not refresh:
            raise AuthenticationFailed("No refresh token provided.")

        serializer = TokenRefreshSerializer(data={"refresh": refresh})
        serializer.is_valid(raise_exception=True)
        access = serializer.validated_data["access"]
        new_refresh = serializer.validated_data.get("refresh", refresh)

        resp = Response({"access": access}, status=status.HTTP_200_OK)
        resp.set_cookie(
            "refresh_token",
            new_refresh,
            httponly=True,
            secure=False,
            samesite="Lax",
            path="/api/v1/auth/token/refresh/",
        )
        return resp

Flow Summary:

1. User logs in via /auth/login/google-oauth2/.

2. The pipeline creates JWT, sets cookies, and redirects to React.

3. Front-end reads access_token from cookie and uses it for API requests.

4. After expiration, front-end triggers:
   POST /api/v1/auth/token/refresh/
   browser automatically sends the HttpOnly

   5. View returns a new access token (and optionally a new refresh) in cookies and body.

If you see any problems or have any suggestions, I'd be happy to hear them.

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 resolve 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.