Debugging AllAuth: social account not logging user in despite connecting successfully

Question

Clicking the facebook login button in the login form correctly brings up the fb login popup, but after entering credentials the pop-up closes and nothing happens.

Clicking the button again without reloading the pages confirms that the fb account is connected as browser console prints:

FB.login() called when user is already connected.

However no new entries appear in the user database, the user isn't redirected and is not signed in. So the problem appears to be with how AllAuth is handling things. There's no debug info appearing anywhere on the back-end though, making this somewhat difficult to figure out.

Here's the allauth settings:

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
DEFAULT_FROM_EMAIL = "[removed for stackoverflow]"

ACCOUNT_EMAIL_REQUIRED = True
SOCIALACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
SOCIALACCOUNT_EMAIL_VERIFICATION = "mandatory"

SOCIALACCOUNT_QUERY_EMAIL = True
SOCIALACCOUNT_PROVIDERS = \
    {'facebook':
       {'METHOD': 'oauth2',
        'SCOPE': ['email','public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'updated_time'],
        'EXCHANGE_TOKEN': True,
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.4'}}

and this is the js on the login page:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '[removed for stackoverflow]',
      xfbml      : true,
      version    : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Answer 1

Django-allauth Facebook Login

First, install django-allauth

$(venv) pip3 install django-allauth

now put these code on your installed apps in settings.py

'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.facebook',

Also, put code below to your settings.py

AUTHENTICATION_BACKENDS = (
    'allauth.account.auth_backends.AuthenticationBackend',
    'django.contrib.auth.backends.ModelBackend',
)

Also put these in the settings.py

SOCIALACCOUNT_PROVIDERS = \
    {'facebook':
       {'METHOD': 'oauth2',
        'SCOPE': ['email','public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'gender',
            'updated_time'],
        'EXCHANGE_TOKEN': True,
        'LOCALE_FUNC': lambda request: 'kr_KR',
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.4'}}

ID and Key can be found at https://developers.facebook.com/ create an app and go to DashBoard, you’ll see your’s

#facebook
SOCIAL_AUTH_FACEBOOK_KEY = 'secret!'  # App ID
SOCIAL_AUTH_FACEBOOK_SECRET ='secret!' #app key

You might want to add this

LOGIN_REDIRECT_URL = "/" 
#if you succeed in login, you'll be redirected to the main page.

Now we need to modify the urls.py Add this code to your urlpatterens

url(r'^accounts/',include('allauth.urls')),

Now go back to https://developers.facebook.com/ go to settings ,click “Add platform”, click website, put http://localhost:8000/ and click the quick start button. keep going and do what dev.facebook leads to.

Now you need to set your site id in settings.py

#site id
SITE_ID = <your local host site id> #i.e http://localhost:8000
# for the dev mode, you need to use localhost's id facebook does not support the name 127.0.0.1:8000
#little options for your page's signup.
ACCOUNT_EMAIL_REQUIRED=True

We need to register our site ID and Social application in our django admin First do migration & runserver

$(venv) python3 manage.py migrate

go to http://localhost:8000/admin/ and click site ID change example.com to http://localhost:8000 ( if you are already at production level , you might just use your page’s IP or domain.)

After saving the application, we are ready to login with facebook. Put these templates tags to top of a html where you want make your users to login.

{% load socialaccount %}
{% providers_media_js %}

and you can write this exact position where you want to make login button

<a href="{% provider_login_url "facebook" method="js_sdk" %}">Login Button image</a>

This send your request to accounts/login page which handles your login procedures.

Reference: https://medium.com/@jinkwon711/django-allauth-facebook-login-b536444cbc6b