{"_id":"@abuelwiss/angularx-social-login","name":"@abuelwiss/angularx-social-login","dist-tags":{"latest":"2.4.0"},"versions":{"2.4.0":{"name":"@abuelwiss/angularx-social-login","version":"2.4.0","description":"Social login and authentication module for Angular 19. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also. THis package is forked and upgraded from @abacritt/angularx-social-login","repository":{"type":"git","url":"git+https://github.com/WissamAbbara/angularx-social-login.git"},"author":{"name":"Jaibatrik Dutta","email":"jaibatrik@gmail.com"},"keywords":["angular","angular19","angular-social-login","social-authentication","social-login","google-authentication","facebook-authentication","amazon-authentication"],"license":"MIT","bugs":{"url":"https://github.com/WissamAbbara/angularx-social-login/issues"},"dependencies":{"tslib":">=2.6.3"},"peerDependencies":{"@angular/common":">=19.0.6","@angular/core":">=19.0.6"},"homepage":"https://github.com/WissamAbbara/angularx-social-login#readme","main":"bundles/abacrit-angularx-social-login.umd.js","module":"fesm2022/abuelwiss-angularx-social-login.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/abuelwiss-angularx-social-login.mjs"}},"sideEffects":false,"_id":"@abuelwiss/angularx-social-login@2.4.0","gitHead":"597569a945ed7ac8304d43692027f4d5efcf7223","_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-NvWPHOw4W63Ja1uEsGav+LEb3rU1wCTPl8rS+S11DtSADCBcDd3dSqoYEnAWcE3B7ttmVZswOxMgxAfCFnjhcQ==","shasum":"8a10926a2aa796aa81849072a82ec220f7fdab26","tarball":"https://registry.npmjs.org/@abuelwiss/angularx-social-login/-/angularx-social-login-2.4.0.tgz","fileCount":19,"unpackedSize":143299,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCPCueyheP4kmtsd4wP3QCiXF6RpZQ9/nuoisDmM7malQIhAOwD15cDkXwcQxkdftOPOVco7n6nyGa32cJo2Iq539tY"}]},"_npmUser":{"name":"abuelwiss","email":"wissamabbara@gmail.com"},"directories":{},"maintainers":[{"name":"abuelwiss","email":"wissamabbara@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angularx-social-login_2.4.0_1741004059048_0.07120890955799086"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-03T12:14:18.990Z","2.4.0":"2025-03-03T12:14:19.257Z","modified":"2025-03-03T12:14:19.493Z"},"maintainers":[{"name":"abuelwiss","email":"wissamabbara@gmail.com"}],"description":"Social login and authentication module for Angular 19. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also. THis package is forked and upgraded from @abacritt/angularx-social-login","homepage":"https://github.com/WissamAbbara/angularx-social-login#readme","keywords":["angular","angular19","angular-social-login","social-authentication","social-login","google-authentication","facebook-authentication","amazon-authentication"],"repository":{"type":"git","url":"git+https://github.com/WissamAbbara/angularx-social-login.git"},"author":{"name":"Jaibatrik Dutta","email":"jaibatrik@gmail.com"},"bugs":{"url":"https://github.com/WissamAbbara/angularx-social-login/issues"},"license":"MIT","readme":"# Angular Social Login\r\n\r\n> Use [Discussions](https://github.com/WissamAbbara/angularx-social-login/discussions) for questions.\r\n\r\nSocial login and authentication module for Angular 19. Supports authentication with **Google**, **Facebook**, **Amazon**, **Microsoft**, and **VK** out of the box. Can be extended to other\r\nproviders also.\r\nThis package is forked and upgraded from @abacritt/angularx-social-login\r\n\r\nCheck out the [demo](https://abacritt.github.io/angularx-social-login/).\r\n\r\n### Compatibility Matrix\r\n\r\n| Library Version                        | Angular Version |\r\n|----------------------------------------|-----------------|\r\n| @abuelwiss/angularx-social-login:2.4.X | 19              |\r\n| @abacritt/angularx-social-login:2.3.X  | 18              |\r\n| @abacritt/angularx-social-login:2.2.X  | 17              |\r\n| @abacritt/angularx-social-login:2.1.X  | 16, 17          |\r\n| @abacritt/angularx-social-login:2.0.X  | 15, 16          |\r\n| @abacritt/angularx-social-login:1      | 13, 14, 15      |\r\n| angularx-social-login:4                | 12, 13          |\r\n| angularx-social-login:3                | 9, 10, 11       |\r\n| angularx-social-login:2                | 5, 6, 7, 8      |\r\n\r\n## Getting started\r\n\r\n### Install via npm\r\n\r\n```sh\r\nnpm i @abuelwiss/angularx-social-login\r\n```\r\n\r\n### Import the module\r\n\r\nIn your `AppConfig`, import the `SocialLoginModule`\r\n\r\n```javascript\r\nimport { SocialLoginModule, SocialAuthServiceConfig } from '@abuelwiss/angularx-social-login';\r\nimport {\r\n  GoogleLoginProvider,\r\n  FacebookLoginProvider\r\n} from '@abuelwiss/angularx-social-login';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    ...\r\n  ],\r\n  imports: [\r\n    ...\r\n    SocialLoginModule\r\n  ],\r\n  providers: [\r\n    {\r\n      provide: 'SocialAuthServiceConfig',\r\n      useValue: {\r\n        autoLogin: false,\r\n        lang: 'en',\r\n        providers: [\r\n          {\r\n            id: GoogleLoginProvider.PROVIDER_ID,\r\n            provider: new GoogleLoginProvider(\r\n              'clientId'\r\n            )\r\n          },\r\n          {\r\n            id: FacebookLoginProvider.PROVIDER_ID,\r\n            provider: new FacebookLoginProvider('clientId')\r\n          }\r\n        ],\r\n        onError: (err) => {\r\n          console.error(err);\r\n        }\r\n      } as SocialAuthServiceConfig,\r\n    }\r\n  ],\r\n  bootstrap: [...]\r\n})\r\nexport class AppConfig { }\r\n```\r\n\r\n### Sign in with Facebook\r\n\r\n```javascript\r\n\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { FacebookLoginProvider } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent {\r\n\r\n  constructor(private authService: SocialAuthService) { }\r\n\r\n  signInWithFB(): void {\r\n    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);\r\n  }\r\n\r\n  signOut(): void {\r\n    this.authService.signOut();\r\n  }\r\n\r\n}\r\n```\r\n\r\n### Sign in with VK\r\n\r\n```javascript\r\n\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { VKLoginProvider } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent {\r\n\r\n  constructor(private authService: SocialAuthService) { }\r\n\r\n  signInWithVK(): void {\r\n    // default usage without defining access level\r\n    this.authService.signIn(VKLoginProvider.PROVIDER_ID);\r\n\r\n    // define access level\r\n    // https://dev.vk.com/reference/access-rights\r\n    this.authService.signIn(VKLoginProvider.PROVIDER_ID, ['offline', 'email']);\r\n  }\r\n\r\n  signOut(): void {\r\n    this.authService.signOut();\r\n  }\r\n\r\n}\r\n```\r\n\r\n### Sign in with Google\r\n\r\n`GoogleLoginProvider` has no `signIn()` method as other providers, the login flow is triggered by a button that the **gis client** is generating.\r\nCalling `SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)` will have no effect.\r\n\r\nInstead, make sure you [subscribed to the authentication state](#subscribe-to-the-authentication-state) and add the following `GoogleSigninButtonDirective` to your component template to wrap the 'Sign In With Google' button:\r\n\r\nALSO\r\n\r\nCheck out the [Google button generator](https://developers.google.com/identity/gsi/web/tools/configurator).\r\n[Link to Button attributes](https://developers.google.com/identity/gsi/web/reference/html-reference#element_with_class_g_id_signin)\r\n\r\n\r\n```html\r\n<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>\r\n```\r\nOptions:\r\n|  Name          | Type      | Value                                                     | Default       |\r\n|----------------|-----------|-----------------------------------------------------------|---------------|\r\n| type           | string    | 'icon' or 'standard'                                      | 'icon'        |\r\n| size           | string    |  'small', 'medium' or 'large'                             | 'medium'      |\r\n| shape          | string    |  'square','circle','pill' or 'rectangular'                | 'rectangular' |\r\n| text           | string    |  'signin_with','signup_with'or 'continue_with'            | 'signin_with' |\r\n| width          | string    |  '200 - 400 '                                             |               |\r\n| theme          | string    |  'outline','filled_blue' or 'filled_black'                | 'outline'     |\r\n| logo_alignment | string    |  'left' or 'center'                                       | 'left'        |\r\n\r\n\r\n\r\n\r\n\r\nThis will only work if the `GoogleLoginProvider` is registered in [SocialAuthServiceConfig](#import-the-module).\r\n\r\n### Refresh google Auth Token\r\n\r\nOnce a user is logged in manual refresh token method can be triggered\r\n\r\n```javascript\r\n\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { GoogleLoginProvider } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent implements OnInit {\r\n\r\n  constructor(private authService: SocialAuthService) { }\r\n\r\n  refreshToken(): void {\r\n    this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);\r\n  }\r\n\r\n}\r\n```\r\n\r\n### Request google Access Token\r\n\r\nOnce 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\r\n\r\n```typescript\r\n\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { GoogleLoginProvider } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent implements OnInit {\r\n\r\n  private accessToken = '';\r\n\r\n  constructor(private authService: SocialAuthService, private httpClient: HttpClient) { }\r\n\r\n  getAccessToken(): void {\r\n    this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken => this.accessToken = accessToken);\r\n  }\r\n\r\n  getGoogleCalendarData(): void {\r\n    if (!this.accessToken) return;\r\n\r\n    this.httpClient\r\n      .get('https://www.googleapis.com/calendar/v3/calendars/primary/events', {\r\n        headers: { Authorization: `Bearer ${this.accessToken}` },\r\n      })\r\n      .subscribe((events) => {\r\n        alert('Look at your console');\r\n        console.log('events', events);\r\n      });\r\n  }\r\n}\r\n```\r\n\r\n### Refresh google Access Token\r\n\r\nOnce a user is logged in and an access token was obtained, the access token can be refreshed (revoked)\r\n\r\n```typescript\r\n\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { GoogleLoginProvider } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent implements OnInit {\r\n\r\n  constructor(private authService: SocialAuthService) { }\r\n\r\n  refreshToken(): void {\r\n    this.authService.refreshAccessToken(GoogleLoginProvider.PROVIDER_ID);\r\n  }\r\n\r\n}\r\n```\r\n\r\n### Subscribe to the authentication state\r\n\r\nYou 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.\r\n\r\n```javascript\r\nimport { SocialAuthService } from \"@abuelwiss/angularx-social-login\";\r\nimport { SocialUser } from \"@abuelwiss/angularx-social-login\";\r\n\r\n@Component({\r\n  selector: 'app-demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.css']\r\n})\r\nexport class DemoComponent implements OnInit {\r\n\r\n  user: SocialUser;\r\n  loggedIn: boolean;\r\n\r\n  constructor(private authService: SocialAuthService) { }\r\n\r\n  ngOnInit() {\r\n    this.authService.authState.subscribe((user) => {\r\n      this.user = user;\r\n      this.loggedIn = (user != null);\r\n    });\r\n  }\r\n\r\n}\r\n```\r\n\r\n### Display the user information\r\n\r\n```html\r\n<img src=\"{{ user.photoUrl }}\" referrerpolicy=\"no-referrer\">\r\n<div>\r\n  <h4>{{ user.name }}</h4>\r\n  <p>{{ user.email }}</p>\r\n</div>\r\n```\r\n\r\n## Custom Provider\r\n\r\nWe can use a custom provider, implementing our own logic and needs like the following example:\r\n\r\n```typescript\r\n@Injectable({ providedIn: 'root' })\r\nexport class MyCustomLoginProvider extends BaseLoginProvider {\r\n  public static readonly PROVIDER_ID = 'CUSTOM' as const;\r\n\r\n  constructor(/* infinite list of dependencies*/) {}\r\n}\r\n```\r\n```typescript\r\n@NgModule({\r\n  declarations: [AppComponent, NavbarComponent, DemoComponent],\r\n  imports: [BrowserModule, FormsModule, SocialLoginModule],\r\n  providers: [\r\n    {\r\n      provide: 'SocialAuthServiceConfig',\r\n      useValue: {\r\n        autoLogin: true,\r\n        lang: 'en',\r\n        providers: [\r\n          {\r\n            id: MyCustomLoginProvider.PROVIDER_ID,\r\n            provider: MyCustomLoginProvider,\r\n          },\r\n        ],\r\n      } as SocialAuthServiceConfig,\r\n    },\r\n  ],\r\n```\r\n\r\n## Specifying custom scopes, fields etc. on initialization\r\n\r\n```javascript\r\nconst fbLoginOptions = {\r\n  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',\r\n  return_scopes: true,\r\n  enable_profile_selector: true\r\n}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11\r\n\r\nconst googleLoginOptions: GoogleInitOptions = {\r\n  oneTapEnabled: false, // default is true\r\n  scopes: 'https://www.googleapis.com/auth/calendar.readonly'\r\n}; // https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client\r\n\r\nconst vkLoginOptions = {\r\n  fields: 'photo_max,contacts', // Profile fields to return, see: https://vk.com/dev/objects/user\r\n  version: '5.131', // https://vk.com/dev/versions\r\n}; // https://vk.com/dev/users.get\r\n\r\nlet config = [\r\n  {\r\n    id: GoogleLoginProvider.PROVIDER_ID,\r\n    provider: new GoogleLoginProvider(\"Google-OAuth-Client-Id\", googleLoginOptions)\r\n  },\r\n  {\r\n    id: FacebookLoginProvider.PROVIDER_ID,\r\n    provider: new FacebookLoginProvider(\"Facebook-App-Id\", fbLoginOptions)\r\n  },\r\n  {\r\n    id: VKLoginProvider.PROVIDER_ID,\r\n    provider: new VKLoginProvider(\"VK-App-Id\", vkLoginOptions)\r\n  },\r\n];\r\n```\r\n\r\n## Specifying custom scopes, fields etc. on login\r\n\r\n```javascript\r\nconst fbLoginOptions = {\r\n  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages'\r\n}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11\r\n\r\nthis.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);\r\n```\r\n\r\n## Providers\r\n\r\n|Provider|Documentation|\r\n|-|-|\r\n|MicrosoftLoginProvider|[Link](microsoft-provider.md)|\r\n\r\n## Running the demo app\r\n\r\n```sh\r\nng build lib\r\nng serve\r\n```\r\n","readmeFilename":"README.md"}