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.

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.

Click on Next, and now fill app details,

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.

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.

Now click Dashboard, scroll down, and setup 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

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.

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

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 :)

• Official doc: Facebook authentication
• Previous tutorial: Google authentication in Django with Django-allauth
• Django-allauth tutorial: https://www.codesnail.com/django-allauth-tutorial/