How to Create a Simple OAuth Angular Component with Oauth.io
Tags: oauthangularcompon, angular4, angular, javascript
Published: 2019-03-17 08:12:42

---
title: How to Create a Simple OAuth Angular Component with Oauth.io
published: true
tags: oauth-angular-compon,angular-4,angularjs,javascript
canonical_url: https://medium.com/swlh/how-to-create-a-simple-oauth-angular-component-with-oauth-io-ca92e77590fd
---

![](https://cdn-images-1.medium.com/max/1024/1*hqbjDPmFXcm-uXjR6GgXfw.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 Angular with [OAuth.io](https://oauth.io?utm_source=medium&utm_medium=post&utm_content=krissanawat&utm_campaign=oauthio-angularjs), 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, 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 can try any integration, but setup the Integreted 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 an Angular Component

Create an Angular 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 Codesandbox.

![](https://cdn-images-1.medium.com/max/288/1*3eLL_rJjo-LGBkGYWKb9Jw.png)

1. open oauth.component.css and import necessary CSS

```
@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";
```

2. open oauth.component.ts and import necessary class

```
import { Component, Input } from "@angular/core";

import { OAuth } from "oauthio-web";
```

3. construct component with name selector and include a template file

```
@Component({
  selector: "oauth",
  templateUrl: "./oauth.component.html",
  styleUrls: ["./oauth.component.css"]

})
```

4. Create class and props attribute to store service name that passing with props

```
**export**  **class** OauthComponent {
  @Input() provider: string;
}
```

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

```
**constructor** () {
    OAuth.initialize("Fcdn9FAU7dhM0TzQ7umztVA28NM");
  }
```

6. Create an OAuth handler method

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

7. add a login button and class, event handle to oauth.component.html and concatenate prop and class

```
<a (click)="Auth();" class="btn btn-block btn-social btn-{{provider}}">
<span class="fa fa-{{provider}}"></span> Sign in with {{ provider }}
</a>
```

8. import and register this component in app.module.ts

```
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
**import { OauthComponent } from "./oauth/oauth.component";**
@NgModule({
  declarations: [AppComponent, **OauthComponent**],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

9. Lastly,Activate the component by placing in app.component.html

```
<div class="container">
<div class="row">
<h1>Social login with OAuth.io</h1>
<div class="row">
<div class="col-sm-4 col-md-offset-4">
<oauth provider='facebook'></oauth>
<hr>
<oauth provider='github'></oauth>
</div>
</div>
</div>
```

view a live result on Codesandbox

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F7z431xzvq0&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F7z431xzvq0&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F7z431xzvq0%2Fscreenshot.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codesandbox" width="1000" height="500" frameborder="0" scrolling="no"><a href="https://medium.com/media/aed8afcfe1ebfc128984f57c40319748/href">https://medium.com/media/aed8afcfe1ebfc128984f57c40319748/href</a></iframe>
### Wrapping up

That’s it for this tutorial!

We created an Angular 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-angularjs)

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

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

#### This story is published in [The Startup](https://medium.com/swlh), Medium’s largest entrepreneurship publication followed by +415,678 people.

#### Subscribe to receive [our top stories here](http://growthsupply.com/the-startup-newsletter/).

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

* * *