Wondering what’s next for npm?Check out our public roadmap! »

    angularx-social-auth
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.9 • Public • Published

    Angular 4 / 5 Social Login

    Social login and authentication module for Angular 4 / 5. 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-auth

    Import the module

    In your AppModule, import the SocialLoginModule

     
    import { SocialLoginModule, AuthServiceConfig, GoogleLoginProvider, FacebookLoginProvider, LoginOpt } from "angular4-social-auth";
     
    // OPTIONAL: custom config for login
    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)
      }
    ]);
     
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        SocialLoginModule.initialize(config)
      ],
      providers: [],
      bootstrap: [...]
    })
    export class AppModule { }

    Sign in and out users

    import { AuthService } from "angularx-social-auth";
    import { FacebookLoginProvider, GoogleLoginProvider } from "angularx-social-auth";
     
    @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);
      }
     
      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-auth";
    import { SocialUser } from "angularx-social-auth";
     
    @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>

    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-auth

    DownloadsWeekly Downloads

    0

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    9.82 MB

    Total Files

    21

    Last publish

    Collaborators

    • avatar