angular-6-social-login-fixed

Original project : sabyasachibiswal https://github.com/sabyasachibiswal/angular5-social-login

Social login api for Angular 6. Includes Facebook, Google and Linkedin.

AOT Compatible.

Getting started

Install via npm

npm install --save angular-6-social-login-fixed

Import the module

In app.module.ts,

...
 
import {
    SocialLoginModule,
    AuthServiceConfig,
    GoogleLoginProvider,
    FacebookLoginProvider,
    LinkedinLoginProvider,
} from "angular-6-social-login-fixed";
 
 
// Configs 
export function getAuthServiceConfigs() {
  let config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider("Your-Facebook-app-id")
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider("Your-Google-Client-Id")
        },
          {
            id: LinkedinLoginProvider.PROVIDER_ID,
            provider: new LinkedinLoginProvider("1098828800522-m2ig6bieilc3tpqvmlcpdvrpvn86q4ks.apps.googleusercontent.com")
          },
      ];
  );
  return config;
}
 
@NgModule({
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    ...
    {
      provide: AuthServiceConfig,
      useFactory: getAuthServiceConfigs
    }
  ],
  bootstrap: [...]
})
 
export class AppModule { }
 

Usage :

In signin.component.ts,

import {Component, OnInit} from '@angular/core';
import {
    AuthService,
    FacebookLoginProvider,
    GoogleLoginProvider
} from 'angular-6-social-login-fixed';
 
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
 
 
export class SigninComponent implements OnInit {
 
  constructor( private socialAuthService: AuthService ) {}
  
  public socialSignIn(socialPlatform : string) {
    let socialPlatformProvider;
        switch (socialPlatform) {
        case 'facebook':
            socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
            break;
        case 'google':
            socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
            break;
        case 'linkedin':
            socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
            break;
        }
    
    this.socialAuthService.signIn(socialPlatformProvider).then(
      (userData) => {
        console.log(socialPlatform+" sign in data : " , userData);
        // Now sign-in with userData
        // ...
            
      }
    );
  }
  
}

In signin.component.html,

<h1>
     Sign in
</h1>
 
<button (click)="socialSignIn('facebook')">Sign in with Facebook</button>
<button (click)="socialSignIn('google')">Sign in with Google</button>
<button (click)="socialSignIn('linkedin')">Sign in with Google</button>         

Facebook App Id :

You need to create your own app by going to Facebook Developers page. Add Facebook login under products and configure Valid OAuth redirect URIs.

Google Client Id :

Follow this official documentation on how to Create a Google API Console project and client ID.