@valcome/ng-social-login v4.3.1
Angular 9 / 10 Social Login
Social login and authentication module for Angular 9 / 10. Supports authentication with Google, Facebook, and Amazon. Can be extended to other providers also.
Check out the demo.
Note: For compatibility with older versions Angular (e.g. Angular 8 and older), please use an older version of the library. Check this comment on the compatibility with Angular versions and this comment on how to use the older version of the library.
Getting started
Install via npm
npm i angularx-social-login
Import the module
In your AppModule
, import the SocialLoginModule
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import {
GoogleLoginProvider,
FacebookLoginProvider,
AmazonLoginProvider,
} 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'),
},
{
id: AmazonLoginProvider.PROVIDER_ID,
provider: new AmazonLoginProvider(
'clientId'
),
},
],
} 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();
}
}
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
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)
}
]);
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);
Running the demo app
ng serve
6 months ago
8 months ago
9 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago