angularx-social-login-fork-gb
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.11 • Public • Published

    Angular 4 / 5 / 6 Social Login

    Social login and authentication module for Angular 4 / 5 / 6. Supports authentication with Google and Facebook. Can be extended to other providers also.

    Check out the demo.

    Getting started

    Install via npm

    npm install --save angularx-social-login

    Import the module

    In your AppModule, import the SocialLoginModule

    import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
    import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";
     
     
    let config = new AuthServiceConfig([
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
      },
      {
        id: FacebookLoginProvider.PROVIDER_ID,
        provider: new FacebookLoginProvider("Facebook-App-Id")
      },
      {
        id: LinkedInLoginProvider.PROVIDER_ID,
        provider: new LinkedInLoginProvider("LinkedIn-client-Id", false, 'en_US')
      }
    ]);
     
    export function provideConfig() {
      return config;
    }
     
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        SocialLoginModule
      ],
      providers: [
        {
          provide: AuthServiceConfig,
          useFactory: provideConfig
        }
      ],
      bootstrap: [...]
    })
    export class AppModule { }

    Sign in and out users

     
    import { AuthService } from "angularx-social-login";
    import { FacebookLoginProvider, GoogleLoginProvider, LinkedInLoginProvider } from "angularx-social-login";
     
     
    @Component({
      selector: 'app-demo',
      templateUrl: './demo.component.html',
      styleUrls: ['./demo.component.css']
    })
    export class DemoComponent implements OnInit {
     
      constructor(private authService: AuthService) { }
     
      signInWithGoogle(): void {
        this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
      }
     
      signInWithFB(): void {
        this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
      }
      
      signInWithLinkedIn(): void {
        this.authService.signIn(LinkedInLoginProvider.PROVIDER_ID);
      }  
     
      signOut(): void {
        this.authService.signOut();
      }
     
    }

    Subscribe to the authentication state

    You are notified when user logs in or logs out. You receive a SocialUser object when the user logs in and a null when the user logs out. SocialUser object contains basic user information such as name, email, photo URL, etc.

    import { AuthService } from "angularx-social-login";
    import { SocialUser } from "angularx-social-login";
     
    @Component({
      selector: 'app-demo',
      templateUrl: './demo.component.html',
      styleUrls: ['./demo.component.css']
    })
    export class DemoComponent implements OnInit {
     
      private user: SocialUser;
      private loggedIn: boolean;
     
      constructor(private authService: AuthService) { }
     
      ngOnInit() {
        this.authService.authState.subscribe((user) => {
          this.user = user;
          this.loggedIn = (user != null);
        });
      }
     
    }

    Display the user information

    <img src="{{ user.photoUrl }}">
    <div>
      <h4>{{ user.name }}</h4>
      <p>{{ user.email }}</p>
    </div>

    Specifying custom scope

    const fbLoginOptions: LoginOpt = {
      scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
      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)
      }
    ]);

    Building with AoT

    If you are facing issue in building your app with AoT, check this document.

    Running the demo app

    cd demo
    npm install
    ng serve

    Install

    npm i angularx-social-login-fork-gb

    DownloadsWeekly Downloads

    8

    Version

    1.2.11

    License

    MIT

    Unpacked Size

    4.2 MB

    Total Files

    22

    Last publish

    Collaborators

    • jgcolo