Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@abacritt/angularx-social-login
Advanced tools
Social login and authentication module for Angular 18. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also.
Use Discussions for questions.
Social login and authentication module for Angular 16. Supports authentication with Google, Facebook, Amazon, Microsoft, and VK out of the box. Can be extended to other providers also.
Check out the demo.
Library Version | Angular Version |
---|---|
@abacritt/angularx-social-login:2.1.X | 16 |
@abacritt/angularx-social-login:2.0.X | 15, 16 |
@abacritt/angularx-social-login:1 | 13, 14, 15 |
angularx-social-login:4 | 12, 13 |
angularx-social-login:3 | 9, 10, 11 |
angularx-social-login:2 | 5, 6, 7, 8 |
npm i @abacritt/angularx-social-login
In your AppModule
, import the SocialLoginModule
import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import {
GoogleLoginProvider,
FacebookLoginProvider
} from '@abacritt/angularx-social-login';
@NgModule({
declarations: [
...
],
imports: [
...
SocialLoginModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
lang: 'en',
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'clientId'
)
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider('clientId')
}
],
onError: (err) => {
console.error(err);
}
} as SocialAuthServiceConfig,
}
],
bootstrap: [...]
})
export class AppModule { }
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { FacebookLoginProvider } from "@abacritt/angularx-social-login";
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent {
constructor(private authService: SocialAuthService) { }
signInWithFB(): void {
this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
}
signOut(): void {
this.authService.signOut();
}
}
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { VKLoginProvider } from "@abacritt/angularx-social-login";
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent {
constructor(private authService: SocialAuthService) { }
signInWithVK(): void {
// default usage without defining access level
this.authService.signIn(VKLoginProvider.PROVIDER_ID);
// define access level
// https://dev.vk.com/reference/access-rights
this.authService.signIn(VKLoginProvider.PROVIDER_ID, ['offline', 'email']);
}
signOut(): void {
this.authService.signOut();
}
}
GoogleLoginProvider
has no signIn()
method as other providers, the login flow is triggered by a button that the gis client is generating.
Calling SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)
will have no effect.
Instead, make sure you subscribed to the authentication state and add the following GoogleSigninButtonDirective
to your component template to wrap the 'Sign In With Google' button:
ALSO
Check out the Google button generator. Link to Button attributes
<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>
Options:
Name | Type | Value | Default |
---|---|---|---|
type | string | 'icon' or 'standard' | 'icon' |
size | string | 'small', 'medium' or 'large' | 'medium' |
shape | string | 'square','circle','pill' or 'rectangular' | 'rectangular' |
text | string | 'signin_with','signup_with'or 'continue_with' | 'signin_with' |
width | string | '200 - 400 ' | |
theme | string | 'outline','filled_blue' or 'filled_black' | 'outline' |
logo_alignment | string | 'left' or 'center' | 'left' |
This will only work if the GoogleLoginProvider
is registered in SocialAuthServiceConfig.
Once a user is logged in manual refresh token method can be triggered
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/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);
}
}
Once a user is logged in an access token can be requested for the scopes we specified in GoogleInitOptions.scopes
, you can then reuse this access token to make calls to google apis
import { HttpClient } from '@angular/common/http';
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
private accessToken = '';
constructor(private authService: SocialAuthService, private httpClient: HttpClient) { }
getAccessToken(): void {
this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken => this.accessToken = accessToken);
}
getGoogleCalendarData(): void {
if (!this.accessToken) return;
this.httpClient
.get('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
headers: { Authorization: `Bearer ${this.accessToken}` },
})
.subscribe((events) => {
alert('Look at your console');
console.log('events', events);
});
}
}
Once a user is logged in and an access token was obtained, the access token can be refreshed (revoked)
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/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.refreshAccessToken(GoogleLoginProvider.PROVIDER_ID);
}
}
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 "@abacritt/angularx-social-login";
import { SocialUser } from "@abacritt/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);
});
}
}
<img src="{{ user.photoUrl }}" referrerpolicy="no-referrer">
<div>
<h4>{{ user.name }}</h4>
<p>{{ user.email }}</p>
</div>
We can use a custom provider, implementing our own logic and needs like the following example:
@Injectable({ providedIn: 'root' })
export class MyCustomLoginProvider extends BaseLoginProvider {
public static readonly PROVIDER_ID = 'CUSTOM' as const;
constructor(/* infinite list of dependencies*/) {}
}
@NgModule({
declarations: [AppComponent, NavbarComponent, DemoComponent],
imports: [BrowserModule, FormsModule, SocialLoginModule],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: true,
lang: 'en',
providers: [
{
id: MyCustomLoginProvider.PROVIDER_ID,
provider: MyCustomLoginProvider,
},
],
} as SocialAuthServiceConfig,
},
],
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: GoogleInitOptions = {
oneTapEnabled: false, // default is true
scopes: 'https://www.googleapis.com/auth/calendar.readonly'
}; // https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client
const vkLoginOptions = {
fields: 'photo_max,contacts', // Profile fields to return, see: https://vk.com/dev/objects/user
version: '5.131', // https://vk.com/dev/versions
}; // https://vk.com/dev/users.get
let config = [
{
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)
},
];
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);
Provider | Documentation |
---|---|
MicrosoftLoginProvider | Link |
ng build lib
ng serve
FAQs
Social login and authentication module for Angular 18. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also.
The npm package @abacritt/angularx-social-login receives a total of 11,922 weekly downloads. As such, @abacritt/angularx-social-login popularity was classified as popular.
We found that @abacritt/angularx-social-login demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.