Email + Social Logins in Django - Step-by-Step Guide

Email and social logins are essential authentication methods for modern web applications. Email login requires users to provide their email address and password, while social login allows users to authenticate using their existing accounts from platforms like Google or Facebook. In this tutorial, we'll implement both authentication methods in Django using the Django-allauth package.

Installation

First, install the django-allauth package using pip ?

pip install django-allauth

Project Setup

Step 1: Configure Settings

Add the required configurations to your settings.py file ?

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    
    # allauth apps
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.facebook',
]

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

SITE_ID = 1

# Email backend for development
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

# Social account providers
SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'APP': {
            'client_id': 'YOUR_GOOGLE_CLIENT_ID',
            'secret': 'YOUR_GOOGLE_SECRET_KEY',
            'key': ''
        }
    },
    'facebook': {
        'APP': {
            'client_id': 'YOUR_FACEBOOK_CLIENT_ID',
            'secret': 'YOUR_FACEBOOK_SECRET_KEY',
            'key': ''
        }
    }
}

Step 2: Configure URLs

Include the allauth URLs in your main urls.py file ?

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

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

Step 3: Run Migrations

Create the necessary database tables by running migrations ?

python manage.py makemigrations
python manage.py migrate

Social Provider Configuration

Google OAuth Setup

To enable Google login, you need to ?

• Go to the Google Developer Console
• Create a new project or select existing one
• Enable the Google+ API
• Create OAuth 2.0 credentials
• Add your domain to authorized redirect URIs
• Copy the Client ID and Secret to your settings

Facebook OAuth Setup

For Facebook login ?

• Visit Facebook for Developers
• Create a new app
• Add Facebook Login product
• Configure Valid OAuth Redirect URIs
• Copy App ID and App Secret to your settings

Creating Login Templates

Create a simple login template at templates/account/login.html ?

<!-- templates/account/login.html -->
<h2>Login</h2>

<!-- Email Login Form -->
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign In</button>
</form>

<!-- Social Login Links -->
<h3>Or sign in with:</h3>
<a href="{% url 'account_login' %}?provider=google">Login with Google</a>
<a href="{% url 'account_login' %}?provider=facebook">Login with Facebook</a>

<p><a href="{% url 'account_signup' %}">Don't have an account? Sign up</a></p>

Testing the Implementation

Start the development server to test your authentication setup ?

python manage.py runserver

Navigate to http://localhost:8000/accounts/login/ to see your login page with both email and social login options.

Key Configuration Options

Conclusion

Django-allauth provides a comprehensive solution for implementing both email and social authentication in Django applications. By following these steps, you can offer users multiple convenient ways to register and log into your application, improving user experience and reducing barriers to entry.