Create a Social Login Button any OAuth Provider using Angular.js

#oauth

#oauth2

#javascript

#angular

Overview

This is a 5-minute step-by-step guide with full working code to create a Social Login Button for any OAuth provider (Facebook, Twitter, Instagram, Google, etc.) in Angular from scratch. This tutorial uses an OAuth service called OAuth.io because it has a Javascript library that enables you to implement social login using only front-end code (no backend code) to complete the OAuth authentication/authorization process in less than 15 lines of code.
OAuth.io supports 100+ OAuth providers such as Reddit, Github, Tumblr, etc., and they have SDKs available in many programming JavaScript, NodeJS, PHP, iOS, Android so you are well-covered.

We will be using "Sign in with Github" social login button as an example for this guide.

Outcome

With this social login button, your user will be signed-up to your site in a single click (almost), without having to choose a username/password, etc.

Live Working Code!

Check out the working code here: https://jsfiddle.net/27zxjbs3/

Feel free to try and tweak the code!

General Steps

Create Angular application.
Add dependencies to Angular application.
Integrate OAuth.io with Angular application.
Sign up for OAuth.io to get API key.
Create a GitHub App and link with your OAuth.io account.

Let's get started!

1. Create Angular application

Let's create a single-page Angular application first.

Please, make sure that you have Node.js and npm installed.

Angular-CLI

You should have the latest version of Angular-CLI. Learn more about Angular CLI here, and find the instructions for installation.

npm install -g @angular/cli

We will use angular-cli to create and generate our components. It will generate services, router, components, and directives.

To create a new Angular project with Angular-cli, just run:

ng new github-login-demo
cd github-login-demo

2. Add Dependencies to Angular application

We are going to integrate Bootstrap into the application.
In order to do this, please, add this dependencies to app.component.html file.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

3. Integrate OAuth.io with Angular application

Modify app.component.ts to display GitHub Login Component.

import {Component, OnInit} from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit(): void {
    const oauthScript = document.createElement('script');
    oauthScript.src = 'https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js';

    document.body.appendChild(oauthScript);
  }

  handleClick(e) {
    // Prevents page reload
    e.preventDefault();

    // Initializes OAuth.io with API key
    // Sign-up an account to get one
    _window().OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');

    // Popup Github and ask for authorization
    _window().OAuth.popup('github').then((provider) => {

      // Prompts 'welcome' message with User's name on successful login
      // Check console logs for additional User info
      provider.me().then((data) => {
        console.log('data: ', data);
        alert('Welcome ' + data.name + '!');
      });

      // You can also call Github's API using .get()
      provider.get('/user').then((data) => {
        console.log('self data:', data);
      });
    });
  }
}

Modify app.component.html to look like this:

<!--The content below is only a placeholder and can be replaced.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<a href="" (click)="handleClick($event)" class="btn btn-primary">Sign in with Github</a>

Since OAuth.io is not hosted on npmJS yet, we include the CDN manually.

Run Program

Viola! You now have a working Github Login button on Angular.

npm start

Take note that the code snippet above is using my own personal OAuth.io API key.
Proceed to the next step and sign up for OAuth.io.

4. Sign up for OAuth.io

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

5. Create Github App, Link with your OAuth.io

Create Github App

Github makes it so easy to create an OAuth developer app.
You can create one here: https://github.com/settings/applications/new

Set "Authorization callback URL" to "https://oauth.io/auth". 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 OAuth.io on the next step.