ngx-social-auth2

The Angular library provides opportunity to authenticate users by using social identity providers.

Supported providers

Demo

ngx-social-auth2

Install

NPM: npm install ngx-social-auth2 --save

Yarn: yarn add ngx-social-auth2

Usage

Import NgxSocialAuthModule to your working module

import {NgxSocialAuthModule} from 'ngx-social-auth2';

@NgModule({
  imports: [
    NgxSocialAuthModule.forRoot({
      providers: [
        new NgxSocialAuthProvider(NgxSocialAuthProviderType.Google, {
          client_id: 'YOUR_CLIENT_ID'
        }),
        new NgxSocialAuthProvider(NgxSocialAuthProviderType.Facebook, {
          appId: 'YOUR_APP_ID', 
          status: true, 
          version: 'v9.0'
        }),
        new NgxSocialAuthProvider(NgxSocialAuthProviderType.Microsoft, {
          auth: {
            clientId: 'YOUR_CLIENT_ID', 
            postLogoutRedirectUri: 'YOUR_REDIRECT_URI_AFTER_LOGOUT'
          }
        })
      ]
    }),
  ]
})
export class AppModule { }

Use NgxSocialAuthService to authenticate user

import {NgxSocialAuthProviderType, NgxSocialAuthService} from 'ngx-social-auth2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private readonly ngxSocialAuthService: NgxSocialAuthService) {
  }

  signIn(): void {
    this.ngxSocialAuthService.signIn(NgxSocialAuthProviderType.Google).subscribe(authResponse => {
      // do something
    });
  }

  signOut(): void {
    this.ngxSocialAuthService.signOut(NgxSocialAuthProviderType.Google).subscribe(() => {
      // do something
    });
  }

  getState(): void {
    this.ngxSocialAuthService.getState(NgxSocialAuthProviderType.Google).subscribe(authResponse => {
      // do something
    });
  }
}

Every method in NgxSocialAuthService supports the second optional argument according to the specific provider. You can pass it to provide additional functionality.

this.ngxSocialAuthService.signIn(NgxSocialAuthProviderType.Google, { redirect_uri: 'YOUR_REDIRECT_URI' }).subscribe(authResponse => {
  // do something
});

More examples you can find in demo app

Documentation

Docs site

result-matching ""

    No results matching ""