# angularx-social-login

> Social login and authentication module for Angular 12. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also.

Latest version **4.1.0** (published 2022-03-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install angularx-social-login
pnpm add angularx-social-login
yarn add angularx-social-login
bun add angularx-social-login
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2022-03-20 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 358.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 661 |
| Author | Jaibatrik Dutta |
| Maintainers | jaibatrik |
| Keywords | angular, angular4, angular8, angular9, angular10, angular11, angular12, angular-social-login, social-authentication, social-login, google-authentication, facebook-authentication, amazon-authentication |

## Links

- npm: https://www.npmjs.com/package/angularx-social-login
- Repository: https://github.com/abacritt/angularx-social-login
- Homepage: https://github.com/abacritt/angularx-social-login#readme
- Issues: https://github.com/abacritt/angularx-social-login/issues
- npm.io page: https://npm.io/package/angularx-social-login

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2022-03-20
- 4.0.1 — 2021-07-03
- 4.0.0 — 2021-07-02
- 3.5.7 — 2021-05-15
- 3.5.6 — 2021-04-26
- 3.5.5 — 2021-04-03
- 3.5.4 — 2020-12-07
- 3.5.3 — 2020-12-07
- 3.5.2 — 2020-12-02
- 3.5.1 — 2020-12-01
- 3.4.1 — 2020-11-08
- 3.3.1 — 2020-10-25
- 3.2.2 — 2020-09-12
- 3.2.1 — 2020-07-26
- 3.2.0 — 2020-07-05
- … 40 more at https://npm.io/package/angularx-social-login/versions

## README

# Angular Social Login

> Use [Discussions](https://github.com/abacritt/angularx-social-login/discussions) for questions.

Social login and authentication module for Angular 12. Supports authentication with **Google**, **Facebook**, **Amazon**, **Microsoft**, and **VK** out of the box. Can be extended to other providers also.

Check out the [demo](https://abacritt.github.io/angularx-social-login/).

### Comatibility Matrix

| Library Version | Angular Version |
| --------------- | --------------- |
| 4               | 12              |
| 3               | 9, 10, 11       |
| 2               | 5, 6, 7, 8      |

## Getting started

### Install via npm

```sh
npm i angularx-social-login
```

### Import the module

In your `AppModule`, import the `SocialLoginModule`

```javascript
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')
          }
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [...]
})
export class AppModule { }
```

### Sign in and out users

```javascript

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

```javascript

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.

```javascript
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

```html
<img src="{{ user.photoUrl }}">
<div>
  <h4>{{ user.name }}</h4>
  <p>{{ user.email }}</p>
</div>
```

## Specifying custom scopes, fields etc. on initialization

```javascript
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 = [
  {
    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

```javascript
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](microsoft-provider.md)|

## Running the demo app

```sh
ng build lib
ng serve
```

---
_Source: https://npm.io/package/angularx-social-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._