[TIL] Google Oauth2 with ReactJS x Django - The easy way

python 
Copy code
GOOGLE_OAUTH2_CLIENT_ID = "Your_google_client_id"
GOOGLE_OAUTH2_CLIENT_SECRET = "Your_google_client_secret"

javascript 
Copy code
const googleLogin = useGoogleLogin({
  onSuccess: async ({ code }) => {
    const tokens = await axios.post('http://localhost:5000/auth/google', {  // http://localhost:5000/auth/google backend that will exchange the code
      code,
    });

    console.log(tokens);
  },
  flow: 'auth-code',
});

python 
Copy code
# serializers.py
from rest_framework import serializers

class AuthSerializer(serializers.Serializer):
    code = serializers.CharField(required=True, allow_null=False, allow_blank=False)

python 
Copy code
# views.py
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework_simplejwt.tokens import RefreshToken
from libs.google import google_get_user_data

from ..models import User
from ..serializers import AuthSerializer

logger = logging.getLogger(__name__)


class GoogleLoginView(APIView):
    serializer_class = AuthSerializer

    def post(self, request, *args, **kwargs):
        auth_serializer = self.serializer_class(data=request.data)
        auth_serializer.is_valid(raise_exception=True)

        validated_data = auth_serializer.validated_data

        # get user data from google
        user_data = google_get_user_data(validated_data)

        # Creates user in DB if first time login
        user, _ = User.objects.get_or_create(
            email=user_data.get('email'),
            first_name=user_data.get('given_name'),
            last_name=user_data.get('given_name'),
            provider=User.PROVIDER_GOOGLE,
        )

        # generate jwt token for the user
        token = RefreshToken.for_user(user)
        response = {
            'access': str(token.access_token),
            'refresh': str(token),
        }

        return Response(response, status=200)

python 
Copy code
# libs/google.py
from typing import Any
from typing import Dict

import requests
from django.conf import settings
from rest_framework.exceptions import APIException

GOOGLE_ID_TOKEN_INFO_URL = 'https://www.googleapis.com/oauth2/v3/tokeninfo'
GOOGLE_ACCESS_TOKEN_OBTAIN_URL = 'https://accounts.google.com/o/oauth2/token'
GOOGLE_USER_INFO_URL = 'https://www.googleapis.com/oauth2/v3/userinfo'


# Exchange authorization token with access token
# https://developers.google.com/identity/protocols/oauth2/web-server#obtainingaccesstokens
def google_get_access_token(code: str, redirect_uri: str) -> str:
    data = {
        'code': code,
        'client_id': settings.GOOGLE_OAUTH2_CLIENT_ID,
        'client_secret': settings.GOOGLE_OAUTH2_CLIENT_SECRET,
        'redirect_uri': redirect_uri,
        'grant_type': 'authorization_code',
    }

    response = requests.post(GOOGLE_ACCESS_TOKEN_OBTAIN_URL, data=data)
    if not response.ok:
        raise APIException(f'Could not get access token from Google: {response.json()}')

    access_token = response.json()['access_token']

    return access_token


# Get user info from google
# https://developers.google.com/identity/protocols/oauth2/web-server#callinganapi
def google_get_user_info(access_token: str) -> Dict[str, Any]:
    response = requests.get(
        GOOGLE_USER_INFO_URL,
        params={'access_token': access_token},
    )

    if not response.ok:
        raise APIException('Could not get user info from Google: {response.json()}')

    return response.json()


def google_get_user_data(validated_data):
    # https://github.com/MomenSherif/react-oauth/issues/252
    redirect_uri = 'postmessage'

    code = validated_data.get('code')

    access_token = google_get_access_token(code=code, redirect_uri=redirect_uri)

    return google_get_user_info(access_token=access_token)