User authentication with Facebook

Building your own Facebook login with Perk is super easy. It's a four step process:

  1. Get the necessary API keys from Facebook (or whichever other supported third party service you want).
  2. Update your config/auth.js file or config/local.js file.
  3. Create a login button.
  4. Deploy to Production

1. Get API Keys

  1. Log in to Facebook.
  2. Go to the Facebook for Developers.

  3. Click Add a New App.

    Add a New App

  4. Click on the small link that says "Basic Setup."

    Basic Setup

  5. Fill out a Display Name and Category for your app. The rest can be left unchanged. Then click the "Create App ID" button.

    Create App ID

  6. Click on the Settings link on the left and then fill in your app domain (probably localhost for your dev environment) and site url. Click Save Changes.

    Save

  7. Stay on this page, we are going to use the App Id and App Secret.

2. Update your config/auth.js

Open up your config/auth.js file in a text editor. In the section that looks like this:

facebook: {
    clientID: '{{ Facebook OAuth2 Client ID }}',
    clientSecret: '{{ Facebook OAuth2 Client Secret }}',
    // https://developers.facebook.com/docs/facebook-login/permissions
    scope: [
        // 'email'
    ],
    requireEmail: true
},
  1. Replace {{ Facebook OAuth2 Client ID }} with the App Id that you just created.
  2. Replace {{ Facebook OAuth2 Client Secret }} with the App Secret that you just created.
  3. Specify any permissions that you want to request from your users and put then in the scope section. A full list of possible permissions for Facebook can be found here.

3. Create a login button

The last step is to create the actual login button. You can do this in any of your views. The only important part is that you redirect to /auth/facebook/login. For example:

<a href="/auth/facebook/login">Log in with Facebook</a>

Click on that button! You should be redirected to Facebook and asked to authorize the app.

4. Deploy to Production

Before you launch you app, you'll need to set up a few more configuration settings on the Facebook side. Go to developers.facebook.com and select your app.

  1. Click on Settings on the left
  2. Select the Advanced tab at the top
  3. Specify an Update Notification Email
  4. Specify Valid OAuth redirect URIs
    • This will be something like yourdomain.com/auth/facebook/callback
  5. Click Save Changes at the bottom of the page.

Deploy 1

Finally click on the App Review tab and toggle on the button next to the text Do you want to make this app and all its live features available to the general public?

Deploy 2