In this video, I will show you how to configure HybridAuth to support logging in to the site using a Facebook account.

Enable Facebook as an "Authentication Provider"

  • Go to "Configuration => People => HybridAuth" (admin/config/people/hybridauth)
  • Authentication providers: [x] Facebook (In this video, I'll select Facebook. In the next two videos I'll also walk through setting up Twitter and Google authentication.)
    • (Save configuration)
  • Click "Settings" next to Facebook
    • Application settings (In this tab, we'll need to provide the application ID and consumer secret key. In order to get these, we'll need to register a new Facebook application.)

Each of the identity providers requires that we create an external application to link our site to their APIs. These external applications ensure that users are logging into the proper Web site and allow identity providers to send the user back to the correct Web site after successfully authenticating their accounts.

To get started, you'll need to upgrade your personal Facebook account to a Facebook Developer account. (If you have issues, you may need to do this using your personal Facebook account and not a business account.)

Create a new Facebook Application

  • In a new tab, go to developers.facebook.com
  • Click the "Apps" dropdown, then click "Create New App"
    • Display Name: Modules Unraveled Login App (Choose a name for your application)
    • (Optional) Namespace: mu-login-app (Provide a unique namespace used to identify your application)
    • Category: Business (Choose a category)
  • (Create App)
  • To verify that you are human, enter the text that you see in the box
  • (Submit)

We now have a new Facebook application. On the dashboard, you'll see the App ID represented by a numeric identifier and App Secret which is auto-generated by Facebook. The App Secret authenticates requests made by your application to Facebook servers and should be treated with confidentiality. So, let's switch back to our Drupal site and enter the application ID and application consumer secret.

Application settings

  • Switch back to the settings page on your site
  • Application ID: (Copy and paste from your Twitter app.)
  • Application consumer secret: (Copy and paste from your Twitter app.)
  • (Save configuration)

Now let's add our contact email to the app and specify that this app will be used on a website.

  • Switch back to the Facebook dashboard
  • In the sidebar on the left, select "Settings"
    • Contact Email: (Enter your email address)
    • Click "+ Add Platform"
    • Choose "website"
    • Site URL: https://modulesunraveled.com (enter your site URL)
    • (Save Changes)
  • Then click "Status & Review" and check the option to make the app public

And that's all there is to it! Now, if we go to our, we'll see the HybridAuth block we enabled in the last video. If you go this route, you'll probably want to change or remove the "Or log in with..." text to something like "Login with one of the following", or something like that. But I'm just going to use the standard login block, so I'll disable this one.

  • Go to "Structure => Blocks" (admin/structure/block)
    • Block: User login - HybridAuth widget only
    • Region: Choose " - None - "
  • (Save blocks)

Let's try logging in now. I'll use my own account.

In the next video, we'll take a look at creating a Twitter app and configure HybridAuth so that users can login with their Twitter account.