Slack + Auth0

slack-auth0.md

1. Install the Custom Social Connections extension
2. Click on the Slack button to install the Slack connection
3. Enter a Slack Client ID and Secret. To get those go to: https://api.slack.com/apps/new. Fill the fields and pay special attention to the Redirect URI. Enter: https://YOURS.auth0.com/login/callback. See screenshots below.
4. Click on App Credentials on the left and copy the Client ID and Client Secret and paste them on the Auth0 dashboard
5. Click Save and then try the flow using the Try button. You should get back the full profile from Slack, including email, team and avatars.

Note: you can change the scopes on the Scope field on Auth0 and include any of these: https://api.slack.com/docs/oauth-scopes

You can now use the Slack connection using any Auth0 client library. Example:

<script src="http://cdn.auth0.com/w2/auth0-7.0.js"></script>
<script type="text/javascript">
  var auth0 = new Auth0({
    domain:       'YOURS.auth0.com',
    clientID:     'AUTH0 CLIENTID',
    callbackOnLocationHash: true
  });

   $('.login-slack').click(function () {
    auth0.login({
      connection: 'slack'
    });
  });

  $(function () {
    var result = auth0.parseHash(window.location.hash);

    //use result.idToken to call your rest api

    if (result && result.idToken) {
    // optionally fetch user profile
    auth0.getProfile(result.idToken, function (err, profile) {
      alert('hello ' + profile.name);
    });

    // If offline_access was a requested scope
    // You can grab the result.refresh_token here

    } else if (result && result.error) {
        alert('error: ' + result.error);
    }
   });
</script>

You could also add a button to Lock https://auth0.com/docs/libraries/lock/ui-customization#adding-a-new-ui-element-using-javascript

The resulting profile looks something like this:

{
  "name": "Foo Bar",
  "email": "[email protected]",
  "image_24": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=24&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0018-24.png",
  "image_32": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=32&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0018-32.png",
  "image_48": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=48&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0018-48.png",
  "image_72": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F3654%2Fimg%2Favatars%2Fava_0018-72.png",
  "image_192": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=192&d=https%3A%2F%2Fa.slack-edge.com%2F7fa9%2Fimg%2Favatars%2Fava_0018-192.png",
  "image_512": "https://secure.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1.jpg?s=512&d=https%3A%2F%2Fa.slack-edge.com%2F7fa9%2Fimg%2Favatars%2Fava_0018-512.png",
  "slack_id": "U0AAAAH2U",
  "team": {
    "id": "T03GFRH2E",
    "name": "Foo Bar Team",
    "domain": "foobar",
    "image_34": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_34.jpg",
    "image_44": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_44.jpg",
    "image_68": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_68.jpg",
    "image_88": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_88.jpg",
    "image_102": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_102.jpg",
    "image_132": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_132.jpg",
    "image_original": "https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-01-30/3568392874_109f467eb1a3a9efc8da_original.jpg"
  },
  "clientID": "15J4IrnfXxf86nDC5ajwhHUVJfjBhRnv",
  "updated_at": "2016-05-15T21:26:12.753Z",
  "picture": "https://s.gravatar.com/avatar/5196c6f42d47f5583bbce2120affd4b1?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fmw.png",
  "user_id": "oauth2|slack|U0AAAAH2U",
  "nickname": "matias",
  "identities": [
    {
      "provider": "oauth2",
      "access_token": "xoxp-3559867082--REDACTED-43092912710-5628baf147",
      "user_id": "slack|U0AAAAH2U",
      "connection": "slack",
      "isSocial": true
    }
  ],
  "created_at": "2016-05-15T21:26:12.753Z",
  "sub": "oauth2|slack|U0AAAAH2U"
}

Note the identities[0].access_token is the Slack token you can use to call the Slack API furthermore.

Appendix

Create Slack App

Get Client ID and Secret