'Google Authenticaon in Django and React

Using django-allauth I've enabled google authentication on backend. I can sign in to my Django project and everything.

Now, I want to connect that authentication with my React frontend, so I can login/register using google on http://127.0.0.1:3000.

What do I need to do?



Solution 1:[1]

You can use Google libraries for javascript or some npm library that does that for you.

After logging in through Google account and getting associated authentication keys / data on front-end side, you send them to Django and django-allauth should handle that data for you - you have to have specific view for that linked in urls.py.

After such request either new social account will be created or already existing logged in.

It might be required to adapt some of original social account management views to handle data that you send from React.

Keep in mind that at the moment Google is switching to Google Identity Services, which works a little bit differently than old method implemented in django-allauth - there is already an issue raised in the repository.

https://github.com/pennersr/django-allauth/issues/3074

To use Google Identity you can try to use:

https://www.npmjs.com/package/@react-oauth/google

or any other library that supports this

After that if you want to do this yourself new way on Django side, you can send JWT token that comes from Google to Django, validate it based on Google documentation and then create social account / sign in. That currently requires overriding some of original django-allauth views / forms for social accounts.

https://developers.google.com/identity

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Krzysiek Kucharski