social login django+react — I

In this tutorial, we will learn to create social logins with Django and React, the first part will describe hosting social logins using Django rest framework and the second part is about a react based web app which will handle the frontend and generate the access token in order to make the login/signup work, let’s get started

Django Configuration

This tutorial assumes that you have basic knowledge of Django and know how to create a project and an app, we will use django-rest-auth which depends on django-allauth as our authentication library and django-rest-framework for handling the API requests, Create a project called drf_social and an app inside it called social_login , once done let’s get started step by step

1. Configure the django-rest-framework,django-allauth, and django-rest-auth by adding them to installed apps in settings.py, once done it should look like the one below, adding this will also support registration and login without social apps too

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',#django rest framework
     'rest_framework',
     'rest_framework.authtoken',
     'rest_auth',#for social login
     'django.contrib.sites',
     'allauth',
     'allauth.account',
     'rest_auth.registration',
     'allauth.socialaccount',
     'allauth.socialaccount.providers.facebook',
     'allauth.socialaccount.providers.google',
]

2. To the settings.py, we add a line as below, the value of the table will depend on the Id of an entry in the table so the value may change, and the reason will be explained later in this article

SITE_ID = 1

3. We will configure views.py to render the dialog for Facebook and Google login, once done it would look like this,

from allauth.socialaccount.providers.facebook.views import FacebookOAuth2Adapter
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from rest_auth.registration.views import SocialLoginViewclass FacebookLogin(SocialLoginView):
    adapter_class = FacebookOAuth2Adapterclass GoogleLogin(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter

4. To render these views we will change urls.py inside our project and add the following lines,

urlpatterns = [path('admin/', admin.site.urls),
# Add these linespath('rest-auth/facebook/', FacebookLogin.as_view(), name='fb_login'),path('rest-auth/google/', GoogleLogin.as_view(), name='google_login')]

5. Now we will run the migrations to reflect the changes to our database with the command python manage.py migrate .

6. Create a superuser and login to the Django admin panel at localhost:8000/admin. To the site model, we will add a new entry for localhost:8000 , the Id of this entry is provided as SITE_ID variable insettings.py which we have discussed in step 2.

7. We now add Facebook and Google credentials to our social application model as shown below, the credentials can be obtained from the hyperlinks for Facebook and Google, remember these credentials will only work for the website you add in the sites field.

Once done now we should be able to log in users with our API, navigate to http://localhost:8000/rest-auth/facebook/ and you should be able to see the following screen,

The API is ready to accept social authentications which you can check by providing an access token in the field above, we can also use a frontend technology to generate the access tokens and supply to the backend for this, In the next part of this tutorial, we will be integrating this backend with our React frontend and make it work end to end.