Implement Social Login Button for Any OAuth Provider Using Vue.js

#oauth

#oauth2

#javascript

#vue

Overview

This is a simple 5-minute step-by-step guide with full working code to create a Social Login Button for any OAuth provider (Facebook, Twitter, Gitbhu, etc.) in Vue.js from scratch. This tutorial uses an OAuth service called OAuth.io which provides instant integrations to 100+ OAuth providers such as Google, Reddit, Tumblr, and a lot more. They have SDKs available as well for JavaScript, NodeJS, PHP, iOS, Android, as per their documentation.

We will be using "Sign in with Github" social login button as an example for this guide.

Outcome

"What can I do with this button?"

You can put this on your log-in page as an additional option to the traditional username and password.
A lot of applications these days offer social login as way to signup/signin to their system, you may have already seen one!

General Steps

Create Vue.js application.
Add dependencies to your application.
Integrate OAuth.io with Vue.js application.
Sign up for OAuth.io to get API key.
Create a GitHub App and link with your OAuth.io account.

Let's get started!

1. Create Vue.js application

Let's create a single-page Vue.js application first.

Please, make sure that you have Node.js and npm installed.

**Vue-CLI*

You should have the latest version of Vue-CLI. Learn more about Vue.js CLI here, and find the instructions for installation.

npm install -g @vue/cli

We will use Vue-cli to create and generate our components.

To create a new Vue.js project with Vue-cli, just run:

vue create github-login-example
cd github-login-example

It will generate following file structure:

2. Add Dependencies to your application

We are going to integrate Bootstrap and font-awesome into the application.
In order to do this, please, add this dependencies to public/index.html file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Also, we need to include OAuth.io CDN manually, since it is not hosted on npmJS yet.

<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>

3. Integrate OAuth.io with Vue.js application

Lets create GithubLogin component inside src/components and make it look like this:

<template>
  <a @click="signin" class="btn btn-social btn-github">
    <i class="fa fa-github"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sign in with {{name}}
  </a>
</template>

<script>
export default {
  props: {
    name: String
  },
  methods: {
    signin() {
      // Initializes OAuth.io with API key
      // Sign-up an account to get one
      window.OAuth.initialize('BTfcjv51Sd9sJJrfLVp8QyIBZUM');

      // Popup facebook and ask for authorization
      window.OAuth.popup('github').then((github) => {
        console.log('github:', github);
        // Prompts 'welcome' message with User's name on successful login
        // #me() is a convenient method to retrieve user data without requiring you
        // to know which OAuth provider url to call
        github.me().then((data) => {
          console.log("data: ", data);
          alert("Your Github email: " + data.email + ".\nCheck console logs for more info.");
        });

        // You can also call Github's API using #.get()
        github.get('/user').then(data => {
          console.log('self data:', data);
        });
      });
    }
  }
}
</script>

Change code inside App.vue in the following way:

<template>
  <div id="app">
    <GithubLogin name="Github"></GithubLogin>
  </div>
</template>

<script>
import GithubLogin from './components/GithubLogin.vue'

export default {
  name: 'app',
  components: {
    GithubLogin
  }
}
</script>

Run Program

Viola! You now have a working Github Login button on Vue.js.

npm run serve

Take note that the code snippet above is using my own personal OAuth.io API key.
Proceed to the next step and sign up for OAuth.io.

4. Sign up for OAuth.io

This step should be pretty straightforward. Sign up an account for OAuth.io and replace the API key on app.component.ts.

5. Create Github App, Link with your OAuth.io

Create Github App

Github makes it so easy to create an OAuth developer app.
You can create one here: https://github.com/settings/applications/new

Set "Authorization callback URL" to "https://oauth.io/auth". Fill up the rest of the fields base on your own data.

Under 'Settings' -> 'Developer Settings' -> 'OAuth App's, select the app you just created and you can see you "Client ID" and "Client Secret" which we will use to integrate with OAuth.io on the next step.