Create simple OAuth Vue Component with Oauth.io
Tags: oauth, vuejs2, javascript, vue
Published: 2019-01-22 08:15:19

---
title: Create simple OAuth Vue Component with Oauth.io
published: true
tags: oauth,vuejs-2,javascript,vuejs
canonical_url: https://medium.com/swlh/create-simple-oauth-vue-component-with-oauth-io-6898f29977de
---

![](https://cdn-images-1.medium.com/max/1024/1*Q4tNREv5fyicOw6ary1fdQ.png)

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 [Oauth.io](https://oauth.io/?utm_source=medium&utm_medium=post&utm_content=krissanawat&utm_campaign=oauthio-vuejs), the OAuth market player with over 100 providers! and easier use with 5 line

![](https://cdn-images-1.medium.com/max/1024/1*R3h8Mx4qcMOA7M79Nf9j7g.png)

#### Setup OAuth.io User

Register yourself at [Oauth.io](https://oauth.io/?utm_source=medium&utm_medium=post&utm_content=krissanawat&utm_campaign=oauthio-vuejs), it’s free!

![](https://cdn-images-1.medium.com/max/1024/1*rTy_GtdeT73XwMbve0yfwg.png)

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

![](https://cdn-images-1.medium.com/max/1024/1*gnKQjLS0NnZ-3hIEaL8X1A.png)

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

### Add API

Click on Add APIs.

![](https://cdn-images-1.medium.com/max/1024/1*JilVHXNjaxNppV5W8ZSEVA.png)

Select Facebook as a provider to the app.

![](https://cdn-images-1.medium.com/max/605/1*9VX-OCgYs1x1ODen8VukFw.png)

Now, you need client\_id and client\_secret. So, create a Facebook app to get those credentials.

![](https://cdn-images-1.medium.com/max/1024/1*Qq2UeIwpy0hdKyfs-bVacg.png)

Go to [https://developers.facebook.com](https://developers.facebook.com) to create an app and insert oauth.io as the domain for the app.

![](https://cdn-images-1.medium.com/max/983/1*Ar4YNmOvpaJ8jegUxgHDVg.png)

Add callback URI as oauth.io/auth

![](https://cdn-images-1.medium.com/max/971/1*qt_lmdY4h9dXDf6r963Bsw.png)

Put the id and secret in the form at OAuth.io.

![](https://cdn-images-1.medium.com/max/1024/1*DPGZKxFh3eGG7BlakFFk9A.png)

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

![](https://cdn-images-1.medium.com/max/1024/1*wAfILm_KlKIXdJpYIOymow.png)

and the second service with Github

goto [developer setting](https://github.com/settings/developers)

![](https://cdn-images-1.medium.com/max/1024/1*Ah0JPt1AagAaYNfrYBiRuw.png)

create new app

![](https://cdn-images-1.medium.com/max/1024/1*qHHjSFngsbwG8akJ5gBA1A.png)

fill app info

![](https://cdn-images-1.medium.com/max/801/1*AsWSpMCmCSxh63ITB67jHQ.png)

copy App\_id and App\_secret

![](https://cdn-images-1.medium.com/max/1024/1*TJgKHTdopOddyA00lS0Gyw.png)

and we get two service

![](https://cdn-images-1.medium.com/max/1024/1*ChSRAQ0fVsF4pBgAh87HVw.png)

### Create a Vue Component

Create a Vue Component to use Oauth.io SDK. Documentation for oauth.io is located at [http://docs.oauth.io](http://docs.oauth.io/)

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

![](https://cdn-images-1.medium.com/max/1024/1*f0_ZHtY6AKHuO4GdIr_tkA.png)

OAuth component structure

![](https://cdn-images-1.medium.com/max/263/1*8xXx3SHoBkbJPYGgYBBQqQ.png)

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

1. import necessary CSS

```css
<style>

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css";
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

</style>
```

2. import necessary class

```javascript
<script>
import { OAuth } from "oauthio-web";
export default {

};
</script>
```

3. Create props attribute to store service name that passing with props

```javascript
props: ["provider"],
```

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

```javascript
data() {
 return {
 class1: "fa fa-" + this.provider,
 class2: "btn btn-block btn-social btn-" + this.provider
 };
 },
```

5. Initialize OAuth-io SDK with initialize and add API-key from OAuth.io dashboard

```javascript
created() {
 OAuth.initialize("API-Key");
}
```

5. Create an OAuth handler method

```javascript
methods: {
 Auth() {
 OAuth.popup(this.provider)
 .done(res => {
 console.log(res.access\_token);
 })
 .fail(err => {
 //todo when the OAuth flow failed
 });
 }
 }
```

6. Render a login button and class, event handle

```javascript
<template>
 <a @click="Auth();" :class="class2">
 <span :class="class1"></span> Sign in with {{ provider }}
 </a>
</template>
```

7. Lastly, import this component in App.vue

```javascript
<template>
 <div class="container">
 <h1>Social Login with OAuth.io</h1>
 <div class="row">
 <div class="col-sm-4 social-buttons"></div>
 <div class="col-md-4 col-md-offset-3 social-buttons">
 </div>
 </div>
 </div>
</template>

<script>
import OAuth from "./components/OAuth";

export default {
 name: "App",
 components: {
 OAuth
 }
};
</script>
```

8. Activate the component by placing it somewhere

```javascript
<OAuth provider="facebook" />
<OAuth provider="github" />
```
{% codesandbox 32qnq0y8vm %}

### Wrapping up

That’s it for this tutorial!

We created a Vue OAuth component that renders a simple Facebook and Github login option using [Oauth.io](https://oauth.io/?utm_source=medium&utm_medium=post&utm_content=krissanawat&utm_campaign=oauthio-vuejs)

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



* * *