Have ideas to improve npm?Join in the discussion! »

    angular-6-social-login-with-first-name-last-name
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

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

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

    AOT Compatible.

    Getting started

    Install via npm

    npm install --save angular-6-social-login-with-first-name-last-name

    Import the module

    In app.module.ts,

    ...
     
    import {
        SocialLoginModule,
        AuthServiceConfig,
        GoogleLoginProvider,
        FacebookLoginProvider,
    } from "angular-6-social-login-with-first-name-last-name";
     
     
    // 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-with-first-name-last-name';
     
    @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;
        if(socialPlatform == "facebook"){
          socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
        }else if(socialPlatform == "google"){
          socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
        } else if (socialPlatform == "linkedin") {
          socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
        }
        
        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>              

    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.

    Install

    npm i angular-6-social-login-with-first-name-last-name

    DownloadsWeekly Downloads

    3

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    48.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar