@abacritt/angularx-social-login
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Angular Social Login

    Use Discussions for questions.

    Social login and authentication module for Angular 13 & 14. Supports authentication with Google, Facebook, Amazon, Microsoft, and VK out of the box. Can be extended to other providers also.

    Check out the demo.

    Comatibility Matrix

    Library Version Angular Version
    @abacritt/angularx-social-login:1 13, 14
    angularx-social-login:4 12, 13
    angularx-social-login:3 9, 10, 11
    angularx-social-login:2 5, 6, 7, 8

    Getting started

    Install via npm

    npm i @abacritt/angularx-social-login

    Import the module

    In your AppModule, import the SocialLoginModule

    import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
    import {
      GoogleLoginProvider,
      FacebookLoginProvider
    } from 'angularx-social-login';
    
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        SocialLoginModule
      ],
      providers: [
        {
          provide: 'SocialAuthServiceConfig',
          useValue: {
            autoLogin: false,
            providers: [
              {
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                  'clientId'
                )
              },
              {
                id: FacebookLoginProvider.PROVIDER_ID,
                provider: new FacebookLoginProvider('clientId')
              }
            ],
            onError: (err) => {
              console.error(err);
            }
          } as SocialAuthServiceConfig,
        }
      ],
      bootstrap: [...]
    })
    export class AppModule { }

    Sign in and out users

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

    Refresh google Auth Token

    Once a user is logged in manual refresh token method can be triggered

    import { SocialAuthService } from "angularx-social-login";
    import { GoogleLoginProvider } from "angularx-social-login";
    
    @Component({
      selector: 'app-demo',
      templateUrl: './demo.component.html',
      styleUrls: ['./demo.component.css']
    })
    export class DemoComponent implements OnInit {
    
      constructor(private authService: SocialAuthService) { }
    
      refreshToken(): void {
        this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);
      }
    
    }

    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. along with the auth_token. You can communicate the auth_token to your server to authenticate the user in server and make API calls from server.

    import { SocialAuthService } 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 {
    
      user: SocialUser;
      loggedIn: boolean;
    
      constructor(private authService: SocialAuthService) { }
    
      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 scopes, fields etc. on initialization

    const fbLoginOptions = {
      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 = {
      scope: 'profile email'
    }; // https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2clientconfig
    
    const vkLoginOptions = {
      fields: 'photo_max,contacts', // Profile fields to return, see: https://vk.com/dev/objects/user
      version: '5.124', // https://vk.com/dev/versions
    }; // https://vk.com/dev/users.get
    
    let config = [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider("Google-OAuth-Client-Id", googleLoginOptions)
      },
      {
        id: FacebookLoginProvider.PROVIDER_ID,
        provider: new FacebookLoginProvider("Facebook-App-Id", fbLoginOptions)
      },
      {
        id: VKLoginProvider.PROVIDER_ID,
        provider: new VKLoginProvider("VK-App-Id", vkLoginOptions)
      },
    ];

    Specifying custom scopes, fields etc. on login

    const fbLoginOptions = {
      scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages'
    }; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11
    
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);

    Providers

    Provider Documentation
    MicrosoftLoginProvider Link

    Running the demo app

    ng build lib
    ng serve

    Install

    npm i @abacritt/angularx-social-login

    DownloadsWeekly Downloads

    3,631

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    377 kB

    Total Files

    35

    Last publish

    Collaborators

    • heatmanofurioso
    • jaibatrik