Last Updated: January 22, 2019
· kriss

Create simple OAuth Vue Component with Oauth.i


Who doesn’t want to focus on creating product over dealing with OAuth logic in the code? Reduce the OAuth footprint in your code to a single request!

In this post, we will create a simple OAuth component in Vuejs with, the OAuth market player with over 100 providers! and easier use with 5 line

Setup User

Register yourself at, it’s free!

Upon login, you’ll get to the dashboard as shown below.

You can try any integration but set up the Integrated API first.


Click on Add APIs.

Select Facebook as a provider to the app.

Now, you need client_id and client_secret. So, create a Facebook app to get those credentials.

Go to to create an app and insert as the domain for the app.

Add callback URI as

Put the id and secret in the form at

Hit save, you can also add more APIs. Let’s make use of Facebook API first.

and the second service with Github

goto developer setting

create new app

fill app info

copy App_id and App_secret

and we get two service

Create a Vue Component

Create a Vue Component to use SDK. Documentation for is located at

For a quick demonstration, I’ll prepare a small component using Vue CLI in VS Code.

OAuth component structure

create OAuth.vue in the component folder and follow step by step

  1. import necessary CSS

@import "";
@import "";
@import "";

  1. import necessary class
import { OAuth } from "oauthio-web";
export default {

  1. Create props attribute to store service name that passing with props
props: ["provider"],

4.add data properties for concatenating bootstrap-social class and service name

data() {
 return {
 class1: "fa fa-" + this.provider,
 class2: "btn btn-block btn-social btn-" + this.provider
  1. Initialize OAuth-io SDK with initialize and add API-key from dashboard
created() {
  1. Create an OAuth handler method
methods: {
 Auth() {
 .done(res => {
 .fail(err => {
 //todo when the OAuth flow failed
  1. Render a login button and class, event handle
 <a @click="Auth();" :class="class2">
 <span :class="class1"></span> Sign in with {{ provider }}
  1. Lastly, import this component in App.vue
 <div class="container">
 <h1>Social Login with</h1>
 <div class="row">
 <div class="col-sm-4 social-buttons"></div>
 <div class="col-md-4 col-md-offset-3 social-buttons">

import OAuth from "./components/OAuth";

export default {
 name: "App",
 components: {
  1. Activate the component by placing it somewhere
<OAuth provider="facebook" />
<OAuth provider="github" />

view a live result on Codesandbox
<iframe src="" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

Wrapping up

That’s it for this tutorial!

We created a Vue OAuth component that renders a simple Facebook and Github login option using

Hope you had a good time, feel free to comment and ask anything. Show some support by clapping!