Angular Social Login Tutorial With Example [Angular 2+ Compatible]

I am sure you’re trying to integrate a social login with your angular app. You’re in the right place, this page will guide you by demonstrating a simple Angular social login example.

Nowadays, we can see 90% of web applications are connected with the social media.

So, it’s important for you to use the easiest tutorial which can help you integrate social login in your Angular app effortlessly and in future, it can be expanded with other social login providers.

So, let’s get started.

1. Install Angular App

First of all, we’re going to create a simple Angular app using Angular CLI

ng new angular-social-login

Note: Kindly note that I’m using Angular CLI 1.6 version. If you’re facing any issues like missing dependencies in terminal, you can make the “@angular/cli”: “^1.6.8” instead of “@angular/cli”: “1.6.8” in package.json and then do the npm update will solve your problem.

2. Install and Use Angular Social Login Module

Now, we need to install a module that can help you to integrate a social login in Angular app.

npm install --save angularx-social-login

Here, we’ve installed the module. Now, we’d require to configure and then use the module in Angular app.

2.1 Configure App Module

Here, let’s import the necessary dependencies in App module.

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";

Now, let’s provide the facebook and google app configuration in the app.

Here, you’d require to have a facebook app and google app that you can use it for login purpose.

Google developer console and Facebook developer console can help you to create a sample demo and then use it the credentials over here.

let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider('Your-Google-Client-ID')
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider('Your-FACEBOOK-APP-ID')
  }
]);

Now, we just need to initialize our social login module in the imports section.

SocialLoginModule.initialize(config)

Basically, the app module will look like.

//Import core modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Import social login module
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
//Import login providers
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";

import { AppComponent } from './app.component';

//Auth service config
let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider('Your-Google-Client-ID')
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider('Your-FACEBOOK-APP-ID')
  }
]);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SocialLoginModule.initialize(config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.2 Custom Scope For Facebook and Google [Optional]

Sometimes, we’d require defining a custom scope to fetch the additional data from user’s social account.

That’s where this custom approach to define the scope and then call the login provider will help us.

const fbLoginOptions: LoginOpt = {
  scope: 'email',
  return_scopes: true,
  enable_profile_selector: true
}; 
// https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11

const googleLoginOptions: LoginOpt = {
  scope: 'profile email'
};
// https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2clientconfig

let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("Google-OAuth-Client-Id", googleLoginOptions)
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("Facebook-App-Id", fbLoginOptions)
  }
]);

Now, we’re ready to use social login module.

2.3 Configure App Component

After configuring the app module, we can import the providers and use the social login functions in a component where we want to use the social login.

So, app component will look like below with functions that can handle the request of login actions.

Here, you can see the authService will handle the user’s login state.

import { AuthService } from "angularx-social-login";
//Import angular social login providers
import { FacebookLoginProvider, GoogleLoginProvider } from "angularx-social-login";
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Social Login';
  private user: {};
  private loggedIn: boolean;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  }

  signOut(): void {
    this.authService.signOut();
  }
}

2.4 Configure App Template

Now, in the view part we need to check a simple condition whether user is logged in or not, based on that we can show the login or logout button.

<div *ngIf="!user" class="card text-center">
  <h6 class="card-header">
    Welcome to {{ title }}!
  </h6>
  <div class="card-block">
    <h4 class="card-title">Not signed in</h4>
    <p class="card-text">Sign in with</p>
  </div>
  <div class="card-block">
    <button class="btn btn-social-icon btn-google" (click)="signInWithGoogle()"><span class="fa fa-google"></span></button>
    <button class="btn btn-social-icon btn-facebook" (click)="signInWithFB()"><span class="fa fa-facebook"></span></button>
  </div>
</div>
<div *ngIf="user" class="card text-center">
  <h6 class="card-header">
    Social Login Demo
  </h6>
  <div class="card-block">
  <img class="card-img-top img-responsive photo" height="100" width="100" src="{{ user.photoUrl }}">
  </div>
  <div class="card-block">
    <h4 class="card-title">{{ user.name }}</h4>
    <p class="card-text">{{ user.email }}</p>
  </div>
  <div class="card-block">
    <button class="btn btn-danger" (click)="signOut()">Sign out</button>
  </div>
</div>

Here, you can use the styles as per your need.

2.5 Configure App Styles

To configure the styles, don’t forget to import the necessary CSS/JS in header part of index.html

Here, I’ve used following CSS/JS to design my social login layout.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" rel="stylesheet">

That’s it, you’re ready with the Angular social login example.

Final step, just run your app.

ng serve

And open your app at http://localhost:4200/.

Here, you can see the output look like (for applied design, you can download the Github code).

Furthermore, you can find the code over Github Repository.

Final words, I hope you liked this Angular social login tutorial. Don’t forget to share with your friends on below social media!