Django REST social login with dj_rest_auth does not authenticate the user

Question

I am building an application. The client is built with Next.js and the backend with Django and Django REST framework.

In this application, I would like to have social login.

So far, my situation is this.

1. I have set up the OAuth on the Google dashboard
2. On the client, I am using next-auth - The client is successfully calling Google and getting an access token from there.
3. On the client, the callback that runs after getting the access token from Google makes a call my Django API.
4. I have set up the backend with dj_rest_auth - My settings are almost identical to the ones described here.
5. Once the client callback runs and calls my Django API with the access token from Google, I successfully get on the client an access token and a refresh token.
6. If it is a new user loggin in the first time, a new user is created in Djangos DB

          const response = await fetch(`${djangoAPIurl}/api/social/login/google/`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              access_token: accessToken,
              id_token: idToken
            })
          });

          const data = await response.json();
          const { access_token, refresh_token } = data;

Both access_token and refresh_token are defined and appear to be valid tokens.

So far, everything happens as expected. My issue appears after this point.

In my api, I have another view defined.

@api_view(['GET'])
@authentication_classes([SessionAuthentication, BasicAuthentication, TokenAuthentication])
@permission_classes([IsAuthenticated])
def test_view(request):
    current_user = request.user
    print('current_user.auth: ', current_user.is_authenticated)
    response = JsonResponse({"received": True})
    return response

From my client, I am attempting to call this view in the following way.

const response = await fetch(`${djangoAPIurl}/api/test/test_view/`, {
    headers: new Headers({
        Authorization: `Bearer ${session.accessToken}`
    })
});

The header is constructed correctly, with session.accessToken being the value I got from the api/social/login/google/ call and the request is routed correctly, however, it fails with Forbidden 403 because the user is not authenticated. I have removed the authentication and permission decrators and the request ends up being processed by the view, and there, upon inspection of the user, it is an Anonymous user. I have also tried changing Bearer to Token, to no avail.

Do you have any advice what I might be doing wrong or missing? Have I completely missunderstood how to use the token I get back from api/social/login/google/? All advice is much appreicated!

Answer 1

I think this is because your secret for hashing JWTS on the client side and server side is not same. Next-Auth automatically creates a secret key for hashing jwt's and dj_rest_auth does the same, unless you explicitly tell them both to use the same secret for hashing jwts. I'm a bit late to answer this, but Hope this will help future people.