Angular Social Login
Social login and authentication module for Angular 9+. Supports authentication with Google, Facebook, Amazon, and VK out of the box. 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
} 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')
}
]
} 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 = 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)
},
{
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