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

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

    1.2.7 • Public • Published

    Angular 4 / 5 / 6 Social Login

    Original repo is (https://github.com/abacritt/angularx-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-with-fix

    Import the module

    In your AppModule, import the SocialLoginModule

    import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login-with-fix";
    import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login-with-fix";
     
     
    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-with-fix";
    import { FacebookLoginProvider, GoogleLoginProvider, LinkedInLoginProvider } from "angularx-social-login-with-fix";
     
     
    @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-with-fix";
    import { SocialUser } from "angularx-social-login-with-fix";
     
    @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-with-fixes

    DownloadsWeekly Downloads

    42

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    4.44 MB

    Total Files

    151

    Last publish

    Collaborators

    • avatar