twitter
Social Logins

How To Add Twitter Social Login Button

February 7, 2018 by oauthio Leave a comment

Purpose

Hi there! In this post, we’ll show you how easy it is to add a Twitter login button to your app or website 🙂

We’ve been told that this is the simplest Javascript step-by-step guide with full working code (< 15 lines) to create a Social Login Button for Twitter!

Outcome

twitter_button.png

Fully Functional Code

To demonstrate the simplicity of this solution, let us look at the final code we create. You can try out the code instantly here: https://jsfiddle.net/a787Lkq2/1/

HTML

<a id="twitter-button" class="btn btn-block btn-social btn-twitter">
  <i class="fa fa-twitter"></i> Sign in with Twitter
</a>

CSS

None

JS

$('#twitter-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('gZeK0rjdjMpH70JACRM_kaKLUIc');
  // Use popup for OAuth
  OAuth.popup('twitter').then(twitter => {
    console.log(twitter);
    // Retrieves user data from oauth provider
    console.log(twitter.me());
  });
})

External Resources

  • jQuery: https://code.jquery.com/jquery-3.2.1.min.js
  • oauth.io JS: https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js
  • Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  • Font-Aweseome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  • Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css

General Steps

  1. Create Twitter app
  2. Create OAuth.io account
  3. Link Twitter app keys to oauth.io account
  4. Create social login button in HTML/CSS/JS with oauth.io app key

1. Create Twitter app

Goto https://apps.twitter.com/ and click ‘Sign in’ on the top right.

twitter1.png

If you are not yet logged in to Twitter, you will be prompted to.

Click on ‘Create App’.

twitter2.png

Fill out the form with your details. The website should be https://oauth.io and the Callback URL should be https://oauth.io/auth

Click to agree to the Developer Agreement and then click ‘Create your Twitter application’

twitter3.png

You have successfully created your Twitter app. Click on ‘manage keys and access tokens’.

twitter4.png

Here you have the Consumer Key and Consumer Secret which you need to add to your OAuth.io dashboard.

twitter5.png

2. Create OAuth.io Account

Create an account at https://oauth.io/signup.

oauthio_signup.png

On the main dashboard, click on ‘Integrated APIs’ on the left menu.

oauthio_general.png

On the ‘Integration APIs’ dashboard, click ‘Add APIs’.

oauthio_api_integration.png

Select ‘Twitter’ as the OAuth provider that you want to add.

twitter6.png

3. Link Twitter app keys to oauth.io account

From your Twitter app page, copy the Twitter ‘Consumer Key’ and ‘Consumer Secret’ that you noted earlier into ‘client_id’, and ‘client_secret’ fields, respectively and then click ‘Save’.

twitter7.png

Click on ‘Try Auth’ to see if you have configured oauth.io to access your Twitter app correctly.

4. Create social login button in HTML/CSS/JS with oauth.io app key

Host the code below on your server. If you have no server yet, you can test the code here: https://jsfiddle.net/a787Lkq2/1/

<html>
  <header>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
  </header>

  <body>
    <a id="twitter-button" class="btn btn-block btn-social btn-twitter">
      <i class="fa fa-twitter"></i> Sign in with Twitter
    </a>

    <script>
      $('#twitter-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for OAuth
        OAuth.popup('twitter').then(twitter => {
          console.log(twitter);
          // Retrieves user data from oauth provider
          console.log(twitter.me());
        });
      })
    </script>
  </body>
</html>

Should you have any further questions, just ask our team on our live chat.