Last Updated: October 18, 2020
· Khor

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


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 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.



"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

  1. Create Vue.js application.
  2. Add dependencies to your application.
  3. Integrate with Vue.js application.
  4. Sign up for to get API key.
  5. Create a GitHub App and link with your 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.


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="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">

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

<script src=""></script>

3. Integrate with Vue.js application

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

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

export default {
  props: {
    name: String
  methods: {
    signin() {
      // Initializes with API key
      // Sign-up an account to get one

      // 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 => {
          console.log("data: ", data);
          alert("Your Github 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);

Change code inside App.vue in the following way:

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

import GithubLogin from './components/GithubLogin.vue'

export default {
  name: 'app',
  components: {

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 API key.
Proceed to the next step and sign up for

4. Sign up for

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

5. Create Github App, Link with your

Create Github App

Github makes it so easy to create an OAuth developer app.
You can create one here:

Set "Authorization callback URL" to "". 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 on the next step.


The detailed step-by-step instructions are here

Link with your

Finally, link the Github app that you created with your account.


That's it! You now have your own fully working Github Social Login button.

If you face some issues during step 4 and 5, refer to this topic.

You can check different SDKs of here.