Implement social authentication in seconds

Lots of providers, with more to come!

Every product speaks to different audiences on different platforms.
You and your users deserve the freedom to choose the social network that works best for them.

That's why we support a variety of social OAuth providers.
From Facebook to GitHub to Instagram... our list is always expanding to keep up with your needs!

{
  "network": "facebook",
  "user": {
    "id": "1026983XXXXXX51213",
    "email": "alex.smith@me.com",
    "first_name": "Alex",
    "last_name": "Smith",
    "name": "Alex Smith",
    "name_format": "{first} {last}",
    "short_name": "Alex",
    "picture": {
      "data": {
        "height": 50,
        "is_silhouette": false,
        "url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=1026983XXXXXX51213&height=50&width=50",
        "width": 50
      }
    }
  }
}

Examples – Show, don't tell.

Attach in Seconds

Adding a Social SSO link with btn.social is just like adding any other HTML link:

<a href="https://login.btn.social/{APPID}/facebook">Login with Facebook</a>

You just need to include the JavaScript SDK once per page:

<a href="https://login.btn.social/{APPID}/facebook">Login with Facebook</a>
<a href="https://login.btn.social/{APPID}/google">Login with Google</a>

<script async src="https://btn.social/v1/web.js"></script>

This will allow the OAuth flow to work.

However, you must define an onlogin callback to receive the user's data upon successful logins. With the web SDK, this can be done by passing a data-jsonp attribute with the name of the callback function to run once the SDK has been initialized:

<a href="https://login.btn.social/{APPID}/facebook">Login with Facebook</a>
<a href="https://login.btn.social/{APPID}/google">Login with Google</a>

<!-- Call the "myCallback" global function when SDK is loaded -->
<script async data-jsonp="myCallback" src="https://btn.social/v1/web.js"></script>
<script defer>
  function myCallback() {
    console.log('the btn.social SDK is ready!');
    btnsocial.onlogin(function (payload) {
      let { network, user, token } = payload;
      console.log(`user logged in via "${network}" provider`, { user, token });
    });
  }
</script>

Fully Customizable

Because these are your links, you may customize the CSS and HTML to your heart's content.

<a class="btn social github" aria-label="login with github" href="https://login.btn.social/{APPID}/github">
  <svg>...</svg>
  <span>Login with GitHub</span>
</a>

<a class="btn social twitter" aria-label="login with twitter" href="https://login.btn.social/{APPID}/twitter">
  <svg>...</svg>
  <span>Login with Twitter</span>
</a>

<style>
  .btn.social {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all ease-in 300ms;
    border: 1px solid var(--c);
    background-color: white;
    padding: 0.6rem 1.2rem;
    text-align: center;
    margin: 0 0.25rem;
    color: var(--c);
  }
  .btn.social:hover {
    background-color: var(--c);
    color: white;
  }
  .btn.social.github {
    --c: #181717;
  }
  .btn.social.twitter {
    --c: #1DA1F2;
  }
  .btn.social span {
    margin-left: 0.5rem;
  }
  .btn.social svg {
    fill: currentColor;
    height: 20px;
    width: 20px;
  }
  @media screen and (max-width: 600px) {
    .btn.social span {
      display: none;
    }
  }
</style>

Configure "popup" Mode

Redirects are used by default. You may opt into the "popup" mode, which will house the OAuth workflow within a dialog window (if possible).

The dialog's dimensions are 500×600 pixels by default, but may be customized with the data-width and data-height script attributes for the Web SDK.

<a class="btn social twitter" href="https://login.btn.social/{APPID}/twitter">Login with Twitter</a>
<a class="btn social github" href="https://login.btn.social/{APPID}/github">Login with GitHub</a>

<!-- Enable "popup" mode via the <script> tag -->
<script async data-mode="popup" src="https://btn.social/v1/web.js"></script>

When using the npm package, you may programmatically call the btn.popup() method and customize the width and height options:

// Use "popup" mode via the "btn.social" package
import * as btn from 'btn.social';

/*
  HTML:
    <button class="btn social" data-network="twitter">Login with Twitter</button>
    <button class="btn social" data-network="github">Login with GitHub</button>
*/

const APPID = 'btn-social-appid';
$('.btn.social').on('click', async evt => {
  evt.preventDefault();

  let width = 500, height = 700;
  let provider = evt.target.getAttribute('data-network');

  if (provider === 'twitter') {
    height = 600;
    width = 400;
  }

  let { network, user, token } = await btn.popup(APPID, provider, { width, height });
  console.log(`user logged in via "${network}" provider`, { user, token });
});