Introduction

Social login uses existing login information from a social network provider (i.e. Facebook, Linkedin or Google, etc...) The user can sign into a third-party website instead of creating a new account specifically on that website.
Step 1
Create your Angular app using the following command:
Social Media Authentication In Angular
Step 2
Open the above-created project in Visual Studio and install the npm using this command: “ npm i angular-6-social-login”
Social Media Authentication In Angular
Step 3
Once you install the npm file, add a reference to your app.module.ts file
  1. import {SocialLoginModule, AuthServiceConfig,GoogleLoginProvider,FacebookLoginProvider,} from "angular-6-social-login";

How to get Facebook API key

To open the Facebook developer page, click here
Once the URL is open, sign into your Facebook account with your username and password. After you are successfully logged in, you can create the new app, refer to the below screenshot.
Social Media Authentication In Angular
Once you have processed your Facebook ID, generate for your app page, refer to the below screenshot.
Social Media Authentication In Angular

How to get Google API key

To open Google developer console page, click here.
Sign into your Google account. Once done the login process, you can create the app. Refer to the below screenshot.
Social Media Authentication In Angular
Once you have credited the app by enabling Gmail, select OAuth client. After generating your client ID, refer to the below screenshot:
Social Media Authentication In Angular
Step 4
Once you get the Facebook ID and the Google account ID, you can paste the app.module.ts code:
  1. let config = new AuthServiceConfig(
  2. [
  3. {
  4. id: FacebookLoginProvider.PROVIDER_ID,
  5. provider: new FacebookLoginProvider("Your Facebook App Id")
  6. },
  7. {
  8. id: GoogleLoginProvider.PROVIDER_ID,
  9. provider: new GoogleLoginProvider("Your Google Client Id")
  10. }
  11. ]);
  12. export function getAuthServiceConfigs() {
  13. return config;
  14. }
Step 5
You can add the service config file provided below.
  1. providers: [
  2. {
  3. provide: AuthServiceConfig,
  4. useFactory: getAuthServiceConfigs
  5. },
  6. ],

Providers

Providers are services present in one of the modules that are to be used in the other modules or components. Once a service is included in the providers, it becomes accessible in all parts of that application.
Social Media Authentication In Angular
Step 6
Open your appcomponent.ts, add the reference file using the below code:
  1. import { Component } from '@angular/core';
  2. import { AuthService,FacebookLoginProvider,GoogleLoginProvider,} from 'angular-6-social-login';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  10. export class AppComponent {
  11. title = 'SocialMediaAuthentication';
  12. constructor(
  13. private socialservice:AuthService
  14. )
  15. {
  16. }
Step 7
The next step is to add an app.component.html file by pasting the below code
  1. <img src="{{userimage}}">
  2. <div class="wrap-input100 validate-input m-b-23" data-validate = "Username is reauired">
  3. <span class="label-input100">Username</span>
  4. <input class="input100" id="name" id="name" type="text" [(ngModel)]="username" name="username" placeholder="Type your username">
  5. <span class="focus-input100" data-symbol=""></span>
  6. </div>
  8. <div class="wrap-input100 validate-input" data-validate="Password is required">
  9. <span class="label-input100">Password</span>
  10. <input class="input100" [(ngModel)]="pass" type="password" name="passd" id="passd" placeholder="Type your password">
  11. <span class="focus-input100" data-symbol=""></span>
  12. </div>
  14. <div class="text-right p-t-8 p-b-31">
  16. </div>
  18. <div class="container-login100-form-btn">
  19. <div class="wrap-login100-form-btn">
  20. <div class="login100-form-bgbtn"></div>
  21. <button (click)="loginbtn()" class="login100-form-btn">
  22. Create
  23. </button>
  24. </div>
  25. </div>
  27. <div class="txt1 text-center p-t-54 p-b-20">
  28. <span>
  29. Or Sign Up Using
  30. </span>
  31. </div>
  33. <div class="flex-c-m">
  34. <a (click)="socialsigin('facebook')" class="login100-social-item bg1">
  35. <i class="fa fa-facebook" style="color: #fff;"></i>
  36. </a>
  37. <a (click)="socialsigin('gmail')" class="login100-social-item bg3">
  38. <i class="fa fa-google" style="color: #fff;"></i>
  39. </a>
  41. </div>
Step 8
Open app.component.ts, add the sign method using the below code.
  1. socialsigin(platform:string)
  2. {
  3. let socialPlatformProvider;
  4. if(platform=="facebook"){
  5. socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
  6. }
  7. else if(platform=="gmail")
  8. {
  9. socialPlatformProvider=GoogleLoginProvider.PROVIDER_ID;
  10. }
  11. this.socialservice.signIn(socialPlatformProvider).then((userdata)=>
  12. {
  13. this.assginuseerdetails=userdata
  14. });
  15. }
Step 9
Once completed up to this step, finally, you can assign the account details for two data binds:
  1. this.userimage=this.assginuseerdetails.image
  2. this.username=this.assginuseerdetails.email
Social Media Authentication In Angular
Step 10
Now execute the following command: ng serve --open
The app will open in your default browser:
Social Media Authentication In Angular
Step 11
Now click the Facebook icon popup page. You can login to your Facebook ID once you finished the authentication.
Social Media Authentication In Angular
Next, click the Gmail icon in the popup and enter your Google account details. Once done, the authentication gets the account details, refer to the below screenshot.
Social Media Authentication In Angular

Summary

In this article, we have learned how to authenticate social media in Angular and how to get an API key.