Django Google Login with React Frontend

Question

This question may be super simple but I've been googling for a while now and haven't found an exact solution.

I'm trying to implement a Google Login using React for the frontend and Django for the backend.

How exactly would I do this? I have seen solutions where a token is sent over to the backend which then retrieves the necessary information from the Google API and either creates or retrieves a user from the database based on the token. However, this seemed to be based on JWT and I was wondering if it is possible to implement the same with the simple Django Auth Token?

Maybe I'm just really blind but I really wasn't able to find a suitable solution.

Thanks for your help!

Answer 1

I was actually working on this a few moments ago, after many fails in the past. It's quite a headache really trying to find a solution that works with React. I have however managed to easily setup google login on the React front end side with https://www.npmjs.com/package/react-google-login. This should be the first step you will need to take.

After that you will need to setup social login on the Django backend using django_allauth. Basically, the idea is once a user logs in via google or to be precise, clicks on the Login With Google button on the front end, a google access_token will be retrieved from Google and saved in local storage together with some other data. Only the access_token is of interest here. So you will then need to take this access_token and send it to the Django backend via a Rest API of a view that you will have setup. That will get the google user data saved in the database under social accounts, ultimately login them in the application. Everything from then on should continue as per your normal logins with email and username. That is if using JWT, a jwt token will be returned from the backend which you hopefully should be able to save in local storage. In my React app, I authenticate against this token, so as long as I have the token in local storage, a user is logged in.

Pratik Singh Chauhan does a good job explaining this in his Part 1 tutorial here -> https://medium.com/@pratique/social-login-with-react-and-django-i-c380fe8982e2 and Part 2 here -> https://medium.com/@pratique/social-login-with-react-and-django-ii-39b8aa20cd27

UPDATE: June 2022

Since Google is now moving to (GIS) Google Identity Services sign-in SDK, this method, although it works is now deprecated.

Here is a good link to help you setup react login with the new google GIS.

https://github.com/MomenSherif/react-oauth/issues/12#issuecomment-1131408898

There are 2 methods you can use depending on your workflow, implicit or authorization. To maintain a similar workflow that the above code achieved, implicit workflow is the one that can give you both access_token and refresh_token that you will send to your backend api.

Here is another link with sample code for both workflows.

https://react-oauth.vercel.app/

Note you will need to use @react-oauth/google to configure the Google workflows in your code.

Refer to this:

https://reactjsexample.com/google-oauth2-using-the-new-google-identity-services-sdk-for-react/