{"id":13406770,"url":"https://github.com/abacritt/angularx-social-login","last_synced_at":"2026-04-02T16:36:15.794Z","repository":{"id":37549424,"uuid":"96634201","full_name":"abacritt/angularx-social-login","owner":"abacritt","description":"Social login and authentication module for Angular 19","archived":false,"fork":false,"pushed_at":"2025-04-24T14:35:59.000Z","size":7443,"stargazers_count":646,"open_issues_count":5,"forks_count":390,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-07T19:02:57.651Z","etag":null,"topics":["angular","facebook-authentication","facebook-login","google-authentication","google-login","social-login"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abacritt.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-08T17:36:31.000Z","updated_at":"2025-04-29T11:39:05.000Z","dependencies_parsed_at":"2023-12-11T23:25:15.334Z","dependency_job_id":"78568d9a-e6b1-4125-ab89-53f80102802f","html_url":"https://github.com/abacritt/angularx-social-login","commit_stats":{"total_commits":342,"total_committers":73,"mean_commits":4.684931506849315,"dds":0.5847953216374269,"last_synced_commit":"5276425e6dd67866079753d780e16a639628b993"},"previous_names":["abacritt/angular4-social-login"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abacritt%2Fangularx-social-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abacritt%2Fangularx-social-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abacritt%2Fangularx-social-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abacritt%2Fangularx-social-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abacritt","download_url":"https://codeload.github.com/abacritt/angularx-social-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253324483,"owners_count":21890854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","facebook-authentication","facebook-login","google-authentication","google-login","social-login"],"created_at":"2024-07-30T19:02:38.799Z","updated_at":"2026-04-02T16:36:15.221Z","avatar_url":"https://github.com/abacritt.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Security and Authentication"],"sub_categories":["Authentication"],"readme":"# Angular Social Login\n\n\u003e Use [Discussions](https://github.com/abacritt/angularx-social-login/discussions) for questions.\n\nSocial 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\nproviders also.\n\nCheck out the [demo](https://abacritt.github.io/angularx-social-login/).\n\n### Compatibility Matrix\n\n| Library Version                       | Angular Version |\n|---------------------------------------|-----------------|\n| @abacritt/angularx-social-login:2.5.X | 20              |\n| @abacritt/angularx-social-login:2.4.X | 19              |\n| @abacritt/angularx-social-login:2.3.X | 18              |\n| @abacritt/angularx-social-login:2.2.X | 17              |\n| @abacritt/angularx-social-login:2.1.X | 16, 17          |\n| @abacritt/angularx-social-login:2.0.X | 15, 16          |\n| @abacritt/angularx-social-login:1     | 13, 14, 15      |\n| angularx-social-login:4               | 12, 13          |\n| angularx-social-login:3               | 9, 10, 11       |\n| angularx-social-login:2               | 5, 6, 7, 8      |\n\n## Getting started\n\n### Install via npm\n\n```sh\nnpm i @abacritt/angularx-social-login\n```\n\n### Import the module\n\nIn your `AppModule`, import the `SocialLoginModule`\n\n```javascript\nimport { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';\nimport {\n  GoogleLoginProvider,\n  FacebookLoginProvider\n} from '@abacritt/angularx-social-login';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    SocialLoginModule\n  ],\n  providers: [\n    {\n      provide: 'SocialAuthServiceConfig',\n      useValue: {\n        autoLogin: false,\n        lang: 'en',\n        providers: [\n          {\n            id: GoogleLoginProvider.PROVIDER_ID,\n            provider: new GoogleLoginProvider(\n              'clientId'\n            )\n          },\n          {\n            id: FacebookLoginProvider.PROVIDER_ID,\n            provider: new FacebookLoginProvider('clientId')\n          }\n        ],\n        onError: (err) =\u003e {\n          console.error(err);\n        }\n      } as SocialAuthServiceConfig,\n    }\n  ],\n  bootstrap: [...]\n})\nexport class AppModule { }\n```\n\n### Sign in and out users\n\n```javascript\n\nimport { SocialAuthService } from \"@abacritt/angularx-social-login\";\nimport { FacebookLoginProvider } from \"@abacritt/angularx-social-login\";\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.css']\n})\nexport class DemoComponent {\n\n  constructor(private authService: SocialAuthService) { }\n\n  signInWithFB(): void {\n    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);\n  }\n\n  signOut(): void {\n    this.authService.signOut();\n  }\n\n}\n```\n\n### Sign in with google\n\n`GoogleLoginProvider` has no `signIn()` method as other providers, the login flow is triggered by a button that the **gis client** is generating.\nCalling `SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)` will have no effect.\n\nInstead make sure you [subscribed to the authentication state](#subscribe-to-the-authentication-state) and add the following `GoogleSigninButtonDirective` (exported from the `GoogleSigninButtonModule`) to your component template to wrap the 'Sign In With Google' button:\n\nALSO\n\nCheck out the [Google button generator](https://developers.google.com/identity/gsi/web/tools/configurator).\n[Link to Button attributes](https://developers.google.com/identity/gsi/web/reference/html-reference#element_with_class_g_id_signin)\n\n\n```html\n\u003casl-google-signin-button type='icon' size='medium'\u003e\u003c/asl-google-signin-button\u003e\n```\nOptions:\n|  Name          | Type      | Value                                                     | Default       |\n|----------------|-----------|-----------------------------------------------------------|---------------|\n| type           | string    | 'icon' or 'standard'                                      | 'icon'        |\n| size           | string    |  'small', 'medium' or 'large'                             | 'medium'      |\n| shape          | string    |  'square','circle','pill' or 'rectangular'                | 'rectangular' |\n| text           | string    |  'signin_with','signup_with'or 'continue_with'            | 'signin_with' |\n| width          | string    |  '200 - 400 '                                             |               |\n| theme          | string    |  'outline','filled_blue' or 'filled_black'                | 'outline'     |\n| logo_alignment | string    |  'left' or 'center'                                       | 'left'        |\n\n\n\n\n\nThis will only work if the `GoogleLoginProvider` is registered in [SocialAuthServiceConfig](#import-the-module).\n\n### Refresh google Auth Token\n\nOnce a user is logged in manual refresh token method can be triggered\n\n```javascript\n\nimport { SocialAuthService } from \"@abacritt/angularx-social-login\";\nimport { GoogleLoginProvider } from \"@abacritt/angularx-social-login\";\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.css']\n})\nexport class DemoComponent implements OnInit {\n\n  constructor(private authService: SocialAuthService) { }\n\n  refreshToken(): void {\n    this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);\n  }\n\n}\n```\n\n### Request google Access Token\n\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\n\n```typescript\n\nimport { HttpClient } from '@angular/common/http';\nimport { SocialAuthService } from \"@abacritt/angularx-social-login\";\nimport { GoogleLoginProvider } from \"@abacritt/angularx-social-login\";\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.css']\n})\nexport class DemoComponent implements OnInit {\n\n  private accessToken = '';\n\n  constructor(private authService: SocialAuthService, private httpClient: HttpClient) { }\n\n  getAccessToken(): void {\n    this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken =\u003e this.accessToken = accessToken);\n  }\n\n  getGoogleCalendarData(): void {\n    if (!this.accessToken) return;\n\n    this.httpClient\n      .get('https://www.googleapis.com/calendar/v3/calendars/primary/events', {\n        headers: { Authorization: `Bearer ${this.accessToken}` },\n      })\n      .subscribe((events) =\u003e {\n        alert('Look at your console');\n        console.log('events', events);\n      });\n  }\n}\n```\n\n### Refresh google Access Token\n\nOnce a user is logged in and an access token was obtained, the access token can be refreshed (revoked)\n\n```typescript\n\nimport { SocialAuthService } from \"@abacritt/angularx-social-login\";\nimport { GoogleLoginProvider } from \"@abacritt/angularx-social-login\";\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.css']\n})\nexport class DemoComponent implements OnInit {\n\n  constructor(private authService: SocialAuthService) { }\n\n  refreshToken(): void {\n    this.authService.refreshAccessToken(GoogleLoginProvider.PROVIDER_ID);\n  }\n\n}\n```\n\n### Subscribe to the authentication state\n\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.\n\n```javascript\nimport { SocialAuthService } from \"@abacritt/angularx-social-login\";\nimport { SocialUser } from \"@abacritt/angularx-social-login\";\n\n@Component({\n  selector: 'app-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.css']\n})\nexport class DemoComponent implements OnInit {\n\n  user: SocialUser;\n  loggedIn: boolean;\n\n  constructor(private authService: SocialAuthService) { }\n\n  ngOnInit() {\n    this.authService.authState.subscribe((user) =\u003e {\n      this.user = user;\n      this.loggedIn = (user != null);\n    });\n  }\n\n}\n```\n\n### Display the user information\n\n```html\n\u003cimg src=\"{{ user.photoUrl }}\" referrerpolicy=\"no-referrer\"\u003e\n\u003cdiv\u003e\n  \u003ch4\u003e{{ user.name }}\u003c/h4\u003e\n  \u003cp\u003e{{ user.email }}\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Custom Provider\n\nWe can use a custom provider, implementing our own logic and needs like the following example:\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class MyCustomLoginProvider extends BaseLoginProvider {\n  public static readonly PROVIDER_ID = 'CUSTOM' as const;\n\n  constructor(/* infinite list of dependencies*/) {}\n}\n```\n```typescript\n@NgModule({\n  declarations: [AppComponent, NavbarComponent, DemoComponent],\n  imports: [BrowserModule, FormsModule, SocialLoginModule],\n  providers: [\n    {\n      provide: 'SocialAuthServiceConfig',\n      useValue: {\n        autoLogin: true,\n        lang: 'en',\n        providers: [\n          {\n            id: MyCustomLoginProvider.PROVIDER_ID,\n            provider: MyCustomLoginProvider,\n          },\n        ],\n      } as SocialAuthServiceConfig,\n    },\n  ],\n```\n\n## Specifying custom scopes, fields etc. on initialization\n\n```javascript\nconst fbLoginOptions = {\n  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',\n  return_scopes: true,\n  enable_profile_selector: true\n}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11\n\nconst googleLoginOptions: GoogleInitOptions = {\n  oneTapEnabled: false, // default is true\n  scopes: 'https://www.googleapis.com/auth/calendar.readonly'\n}; // https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client\n\nconst vkLoginOptions = {\n  fields: 'photo_max,contacts', // Profile fields to return, see: https://vk.com/dev/objects/user\n  version: '5.124', // https://vk.com/dev/versions\n}; // https://vk.com/dev/users.get\n\nlet config = [\n  {\n    id: GoogleLoginProvider.PROVIDER_ID,\n    provider: new GoogleLoginProvider(\"Google-OAuth-Client-Id\", googleLoginOptions)\n  },\n  {\n    id: FacebookLoginProvider.PROVIDER_ID,\n    provider: new FacebookLoginProvider(\"Facebook-App-Id\", fbLoginOptions)\n  },\n  {\n    id: VKLoginProvider.PROVIDER_ID,\n    provider: new VKLoginProvider(\"VK-App-Id\", vkLoginOptions)\n  },\n];\n```\n\n## Specifying custom scopes, fields etc. on login\n\n```javascript\nconst fbLoginOptions = {\n  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages'\n}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11\n\nthis.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);\n```\n\n## Providers\n\n|Provider|Documentation|\n|-|-|\n|MicrosoftLoginProvider|[Link](microsoft-provider.md)|\n\n## Running the demo app\n\n```sh\nng build lib\nng serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabacritt%2Fangularx-social-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabacritt%2Fangularx-social-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabacritt%2Fangularx-social-login/lists"}