We have all been there where we pore over poorly documented OAuth API endpoints, some of which are already deprecated or even discontinued, before finding one that we believe can return some data that we want about a user, or can perform something on behalf of the user. Before we can test that endpoint, we spent more countless hours hacking together a social login button on our front-end code, which will communicate with the back-end, to complete the OAuth flow to acquire access token from the OAuth provider, e.g., Facebook, Twitter, Github, etc., and then finally, the moment of truth - calling the API endpoint with the access token.

And THEN - the endpoint does not do what we expected because its behavior has changed or the documentation is inaccurate.

No developer should EVER have to go through this! Thus we cobbled together a site with all the ready-made OAuth snippets to create a social login bootstrap button for every single popular provider, but that's not all, the site includes a snippet for calling every popular API endpoint of those providers.

Sounds unbelievable? Let's spin the wheel to pick a random action to perform on an OAuth provider.

Here we go.......... . . . . . .'Search for repository in Github'

You can head over here to test the Javascript snippet to 'search for repository in Github' instantly, and also tweak it to call other Github API endpoints.

If you want to jump the gun, and test other OAuth providers, head over here.

Here is a brief description of the working code.

Firstly, the code is short, i.e., < 15 lines, all front-end Javascript, with no backend. Secondly, it has few external requirements.

$('#github-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('txp2rKYpuKZXaaYC5kB-m13KnVE');

  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('github').then(provider => {

    // Got the OAuth provider object, which contains access token, etc.
    console.log('provider:', provider);

    provider.get('/search/repositories?q=oauth-io').then(data =>            {
      console.log('Repositories:', data);
    });
  });
})

Necessary requirements:

• CSS for creating the social button
  • bootstrap - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  • bootstrap-social - https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css
  • font-awesome - https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
• DOM manipulation
  • jQUery - https://code.jquery.com/jquery-3.2.1.min.js
• OAuth magic by OAuth.io
  • OAuth.io Javascript library - https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

If you want to use the Javascript snippet on your own webpage, you can just copy-and-paste it but note that you need https://oauth.io to make it work. If you are interested in the entire setup, I can do a separate post.