Angular 14 Facebook & Google Login SDK Project to Display User Profile Using angularx-social-login Library

Welcome folks today in this blog post we will be integrating google and facebook login sdk project to display user profile using angularx-social-login library in typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

After that you need to install the below libraries using the below command as shown below

npm i angularx-social-login

After that you will see the below directory structure of the angular app as shown below

And now we need to go to app.component.html file and copy paste the following code

app.component.html

<div class="jumbotron bg-transparent text-center">
  <div *ngIf="!user" class="card text-center">
    <h6 class="card-header">
      Social Login Demo
    </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"></div>
    <img class="card-img-top img-responsive photo" src="{{ user.photoUrl }}">
    <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>
</div>

Social Login Demo

</h6>

<h4 class="card-title">Not signed in</h4>

</div>

</div>

Social Login Demo

</h6>

<p class="card-text">{{ user.email }}</p>

</div>

</div>

As you can see we are having two social login buttons styled inside the bootstrap container. We have google and facebook login buttons. And after that we are displaying the dynamic information such as the email and then name of the user. And also we have the signOut button as well.

And then we need to go to index.html and copy paste the below bootstrap css cdn as shown below

index.html

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Angular 4 Social Login</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
	 crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
	 crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
	 crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
	 crossorigin="anonymous"></script>

	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
	 crossorigin="anonymous">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" rel="stylesheet">
</head>

<body>
	<app-root></app-root>
</body>

</html>

<!doctype html>

<head>

<title>Angular 4 Social Login</title>

crossorigin="anonymous">

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous"></script>

crossorigin="anonymous">

</head>

<body>

<app-root></app-root>

</body>

</html>

And now we need to go to app.module.ts file and copy paste the following code

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SocialLoginModule } from 'angularx-social-login';
import { AuthServiceConfig, GoogleLoginProvider, FacebookLoginProvider  } from 'angularx-social-login';


const config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider('##googleclientid##')
  },
   {
     id: FacebookLoginProvider.PROVIDER_ID,
     provider: new FacebookLoginProvider('##facebookappid##')
   }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

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

import { SocialLoginModule } from 'angularx-social-login';

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

const config = new AuthServiceConfig([

{

id: GoogleLoginProvider.PROVIDER_ID,

provider: new GoogleLoginProvider('##googleclientid##')

{

id: FacebookLoginProvider.PROVIDER_ID,

provider: new FacebookLoginProvider('##facebookappid##')

}

]);

export function provideConfig() {

return config;

}

@NgModule({

declarations: [

AppComponent,

imports: [

BrowserModule,

FormsModule,

SocialLoginModule

providers: [

{

provide: AuthServiceConfig,

useFactory: provideConfig

}

bootstrap: [AppComponent]

})

export class AppModule { }

As you can see we are importing the angularx-social-login module and then you need to replace the google client id and the facebook client id when you make the apps inside the developer sections. We can get this information as shown below

Getting Google Client ID

Now first of all create a new project inside the google cloud console and then create new google client id as shown below

Here you need to replace your application url where you will host your website and then you will get the client id as shown below

Getting the Facebook Login App ID

Now first of all you need to create a new app inside the facebook developer and then go to facebook login settings as shown below

And then we need to copy paste the live application url to the allowed domains section and also enable the Login with Javascript SDK option to yes as shown below

And then you can copy paste the APP ID of the app as shown below

Just replace it with your own values in the above code and now we need to to go to app.component.ts file and copy paste the following code

app.component.ts

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

import { AuthService } from 'angularx-social-login';
import { SocialUser } from 'angularx-social-login';
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider } from 'angularx-social-login';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  user: SocialUser;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      console.log(user);
    });
  }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(x => console.log(x));
  }

  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID).then(x => console.log(x));
  }

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

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

import { AuthService } from 'angularx-social-login';

import { SocialUser } from 'angularx-social-login';

import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider } from 'angularx-social-login';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app works!';

user: SocialUser;

constructor(private authService: AuthService) { }

ngOnInit() {

this.authService.authState.subscribe((user) => {

this.user = user;

console.log(user);

});

}

signInWithGoogle(): void {

this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(x => console.log(x));

}

signInWithFB(): void {

this.authService.signIn(FacebookLoginProvider.PROVIDER_ID).then(x => console.log(x));

}

signOut(): void {

this.authService.signOut();

}

As you can see we have defined all the methods for signing with google and facebook and then we are also having the signOut() method as well. And then after granting the access we are getting the user profile and showing it inside the html as shown below