angularx-social-login-with-fixes

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angularx-social-login-with-fixes
1.2.74 years ago4 years agoMinified + gzip package size for angularx-social-login-with-fixes in KB

Readme

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

```sh npm install --save angularx-social-login-with-fix ```

Import the module

In your AppModule, import the SocialLoginModule ```javascript 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

```javascript 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. ```javascript 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

```html

{{ user.name }}

{{ user.email }}

```

Specifying custom scope

```javascript const fbLoginOptions: LoginOpt = { scope:
'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
returnscopes: true, enableprofileselector: 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

```sh cd demo npm install ng serve ```