How to Create a Simple OAuth Angular Component with Oauth.io

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, the OAuth market player with over 100 providers! and easier use with 5 line

Setup OAuth.io User

Register yourself at Oauth.io, it’s free!

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

You can can try any integration, but setup the Integreted API first.

Add API

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 https://developers.facebook.com to create an app and insert oauth.io as the domain for the app.

Add callback URI as oauth.io/auth

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

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 an Angular Component

Create an Angular Component to use Oauth.io SDK. Documentation for oauth.io is located at http://docs.oauth.io

For a quick demonstration, I’ll prepare a small component using Codesandbox.

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

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

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

import { OAuth } from "oauthio-web";

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

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

})

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

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

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

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

1. 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_
      });
  }

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

1. 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 {}

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

https://medium.com/media/aed8afcfe1ebfc128984f57c40319748/href

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

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

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +415,678 people.

Subscribe to receive our top stories here.

---