Facebook Authentication in Django using Django-allauth

Hello internet programmer. Almost every app provides social authentication, especially Facebook authentication right. Let’s add Facebook authentication in Django app with Django-allauth package so users can log in via Facebook in your Django app.

Here we are continuing the last tutorial and we added local authentication and Google authentication, but don’t worry you can still follow this for your project directly.

Installation

pip install django-allauth

Setup django-allauth

Open settings.py and do the following changes (Important – Please note ‘django.contrib.sites’ is required as INSTALLED_APPS)

Add the following lines in INSTALLED_APPS

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    'django.contrib.sites', # must
    'allauth', # must
    'allauth.account', # must
    'allauth.socialaccount', # must
    'allauth.socialaccount.providers.google', # google provider
    'allauth.socialaccount.providers.facebook', # new (facbook provider)
]

You can see we include Facebook providers for authentication. In the previous tutorial, we added google provider.

Then at the bottom of settings.py we need to specify that we’re using the allauth backend, add a SITE_ID since allauth uses this, and configure a redirect to the homepage upon successful login.

SITE_ID = 1

AUTHENTICATION_BACKENDS = [
    # Needed to login by username in Django admin, regardless of `allauth`
    'django.contrib.auth.backends.ModelBackend',

    # `allauth` specific authentication methods, such as login by e-mail
    'allauth.account.auth_backends.AuthenticationBackend',
]

ACCOUNT_EMAIL_VERIFICATION = 'none'

LOGIN_REDIRECT_URL = '/'

Now open urls.py of the main project and add this,

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),
]

Connecting to Facebook

Go to developers.facebook.com and login, click My apps, and create a new one.

Create new app on developer.facebook.com, facebook authentication django django-allauth

Create a new app on developer.facebook.com

The initial step is to identify the kind of app you want to create. In our case, we will create a consumer app as shown below.

Consumer app facebook authentication django

Consumer app

Click on Next, and now fill app details,

app detail facbook social auth in django app with django-allauth

app detail

and click on Create app. It will ask you for your Facebook account password and enter it and submit it.

Now, let’s create the test app it’s for development purposes.

test app facebook auth django

test app

create test app facebook auth django

create a test app

Okay now go to settings -> basic and copy your App ID and Secret key, click on Show to get the app secret key. Also, add the app domains and save the changes, if you’re in development use your domain.

basic settings facebook authentication

basic settings

Now click Dashboard, scroll down, and setup Facebook login.

facebook login django

Facebook login

Then pick Web. For Site Url set http://localhost:8000 (it doesn’t accept http://127.0.0.1:8000), Save and Continue.

Add a social app in Django admin

Now run migrate

python manage.py migrate

assuming you’ve already created a superuser if not then create using,

python manage.py createsuperuser

Now run the server using python manage.py runserver and open admin. Go to this page http://localhost:8000/admin/sites/site/1/change/ and make these changes, if you’re currently in production, you can use the IP or domain name of your page

site settings django admin

site settings

Then, click on Social Applications click Add and fill in the details as follows

  1. Provider: Facebook
  2. Name: OAuth App
  3. Client id: [YOUR FACEBOOK APP ID]
  4. Secret key: [YOUR FACEBOOK APP SECRET]
  5. Sites: 127.0.0.1:8000

and save it.

Add facebook in social applications in Django admin

Add Facebook in social applications in Django admin

Now logout yourself because you logged in as a superuser and open http://localhost:8000/accounts/login/ and you can see Facebook login option.

Facebook login option on the login page, django social auth with facebook

Facebook login option on the login page

Okay now run the server and now use this URL http://localhost:8000/accounts/login/. Facebook login work with localhost and test login.

If you have customized django-allauth templates then you can directly use this code in your template.

{% load socialaccount %}
{% providers_media_js %}
<a href="{% provider_login_url 'facebook' method='js_sdk' %}">Facebook Login</a>
Note: if you're also using Google authentication with Facebook authentication, change 127.0.0.1 to localhost in the google cloud app so you can use both but with http://localhost:8000 URL

Okay, that’s it. Happy Coding :)