Last Updated: December 30, 2020
· Khor

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


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



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:

Feel free to try and tweak the code!

General Steps

  1. Create Angular application.
  2. Add dependencies to Angular application.
  3. Integrate with Angular application.
  4. Sign up for to get API key.
  5. Create a GitHub App and link with your 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.


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="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

3. Integrate 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;

  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 = '';


  handleClick(e) {
    // Prevents page reload

    // Initializes 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 => {
        console.log('data: ', data);
        alert('Welcome ' + + '!');

      // 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="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Since 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 API key.
Proceed to the next step and sign up for

4. Sign up for

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

5. Create Github App, Link with your

Create Github App

Github makes it so easy to create an OAuth developer app.
You can create one here:

Set "Authorization callback URL" to "". 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 on the next step.


The detailed step-by-step instructions are here

6. Link with your

Finally, link the Github app that you created with your account.


That's it! You now have your own fully working Github Social Login button created using AngularJS.

If you face some issues in this step, refer to this.

You can check different SDKs of here.