I am sure you’re trying to integrate a social login with your angular app. You’re in the right place, this page will guide you by demonstrating a simple Angular social login example.
Nowadays, we can see 90% of web applications are connected with the social media.
So, it’s important for you to use the easiest tutorial which can help you integrate social login in your Angular app effortlessly and in future, it can be expanded with other social login providers.
So, let’s get started.
1. Install Angular App
First of all, we’re going to create a simple Angular app using Angular CLI
[js]
ng new angular-social-login
[/js]
Note: Kindly note that I’m using Angular CLI 1.6 version. If you’re facing any issues like missing dependencies in terminal, you can make the “@angular/cli”: “^1.6.8” instead of “@angular/cli”: “1.6.8” in package.json and then do the npm update will solve your problem.
2. Install and Use Angular Social Login Module
Now, we need to install a module that can help you to integrate a social login in Angular app.
[js]
npm install –save angularx-social-login
[/js]
Here, we’ve installed the module. Now, we’d require to configure and then use the module in Angular app.
2.1 Configure App Module
Here, let’s import the necessary dependencies in App module.
[js]
import { SocialLoginModule, AuthServiceConfig } from “angularx-social-login”;
import { GoogleLoginProvider, FacebookLoginProvider } from “angularx-social-login”;
[/js]
Now, let’s provide the facebook and google app configuration in the app.
Here, you’d require to have a facebook app and google app that you can use it for login purpose.
Google developer console and Facebook developer console can help you to create a sample demo and then use it the credentials over here.
[js]
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(‘Your-Google-Client-ID’)
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider(‘Your-FACEBOOK-APP-ID’)
}
]);
[/js]
Now, we just need to initialize our social login module in the imports section.
[js]
SocialLoginModule.initialize(config)
[/js]
Basically, the app module will look like.
[js]
//Import core modules
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
//Import social login module
import { SocialLoginModule, AuthServiceConfig } from “angularx-social-login”;
//Import login providers
import { GoogleLoginProvider, FacebookLoginProvider } from “angularx-social-login”;
import { AppComponent } from ‘./app.component’;
//Auth service config
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(‘Your-Google-Client-ID’)
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider(‘Your-FACEBOOK-APP-ID’)
}
]);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SocialLoginModule.initialize(config)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
[/js]
2.2 Custom Scope For Facebook and Google [Optional]
Sometimes, we’d require defining a custom scope to fetch the additional data from user’s social account.
That’s where this custom approach to define the scope and then call the login provider will help us.
[js]
const fbLoginOptions: LoginOpt = {
scope: ’email’,
return_scopes: true,
enable_profile_selector: 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)
}
]);
[/js]
Now, we’re ready to use social login module.
2.3 Configure App Component
After configuring the app module, we can import the providers and use the social login functions in a component where we want to use the social login.
So, app component will look like below with functions that can handle the request of login actions.
Here, you can see the authService will handle the user’s login state.
[js]
import { AuthService } from “angularx-social-login”;
//Import angular social login providers
import { FacebookLoginProvider, GoogleLoginProvider } from “angularx-social-login”;
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Angular Social Login’;
private user: {};
private loggedIn: boolean;
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.authState.subscribe((user) => {
this.user = user;
this.loggedIn = (user != null);
});
}
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
signInWithFB(): void {
this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
}
signOut(): void {
this.authService.signOut();
}
}
[/js]
2.4 Configure App Template
Now, in the view part we need to check a simple condition whether user is logged in or not, based on that we can show the login or logout button.
[html]
Welcome to {{ title }}!
Not signed in
Sign in with
Social Login Demo
{{ user.name }}
{{ user.email }}
[/html]
Here, you can use the styles as per your need.
2.5 Configure App Styles
To configure the styles, don’t forget to import the necessary CSS/JS in header part of index.html
Here, I’ve used following CSS/JS to design my social login layout.
[html]
[/html]
That’s it, you’re ready with the Angular social login example.
Final step, just run your app.
[js]
ng serve
[/js]
And open your app at http://localhost:4200/.
Here, you can see the output look like (for applied design, you can download the Github code).
Furthermore, you can find the code over Github Repository.
Final words, I hope you liked this Angular social login tutorial. Don’t forget to share with your friends on below social media!
