# ng-social-auth

> Help to use social authentication by connecting to different providers

Latest version **0.0.7** (published 2020-05-11) · GPL-3.0+ license · 0 weekly downloads

## Install

```sh
npm install ng-social-auth
pnpm add ng-social-auth
yarn add ng-social-auth
bun add ng-social-auth
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-05-11 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | GPL-3.0+ |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 270.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | titouan13 |

## Links

- npm: https://www.npmjs.com/package/ng-social-auth
- Repository: https://github.com/titouan13/ng-social-auth
- Homepage: https://github.com/titouan13/ng-social-auth#readme
- Issues: https://github.com/titouan13/ng-social-auth/issues
- npm.io page: https://npm.io/package/ng-social-auth

## Recent versions

- 0.0.7 (latest) — 2020-05-11
- 0.0.6 — 2020-05-11
- 0.0.5 — 2020-05-08
- 0.0.4 — 2020-05-08
- 0.0.3 — 2020-04-18
- 0.0.2 — 2020-03-31
- 0.0.1 — 2020-03-31

## README

# NgSocialAuth
This lib willingly avoid using official libs provided by companies. This is what keeps this lib lightweight and guarantees that your social auth won't be blocked by extensions such as ghostery, adblock, ublock etc.

## Installation
Create a configuration file SocialAuthConfig containing configuration for the appropriate provider(s)  
For example:  
```javascript
export const SocialAuthConfig = {
  google: {
    clientId: 'XXXX.apps.googleusercontent.com',
    redirectUri: 'YYY',
    scope: 'email',
    responseType: 'token'
  }
}
```


In you app.module.ts, import the NgSocialAuth lib with SocialAuthConfig under imports: 
```javascript
import { SocialAuthModule } from 'ng-social-auth/src/lib/social-auth.module';
import { SocialAuthConfig } from './PATH_TO_CONFIG/social-auth.config';
(...)
imports: [
...
SocialAuthModule.forRoot(SocialAuthConfig),
]
```


## How to use
Get user consent from the appropriate provider:  
getGoogleUserConsent()  
getMicrosoftUserConsent()  
getLinkedinUserConsent()  
getFacebookUserConsent()
You can pass scope as arg of any of these functions. Useful when you need 2 scopes, one for signup and the other one for login.

On your redirect URI, in the constructor  
```javascript
  constructor(
    private socialAuthService: SocialAuthService
  ) {
  socialAuthService.getParsedResponse()
  .subscribe(data => {
            // DO STUFF
          },
          error => {
            // Manage errors
              if (error !== null) {
                console.log(error);
              }
          });
  }
```
  
getParsedResponse will parse the URL returned and sent back all information.  


## Google
Create an account on https://console.cloud.google.com/  
Set up redirect_uri  
Get client_id and scope you need from https://developers.google.com/identity/protocols/googlescopes  

Configuration:
```javascript
  // Mandatory
  clientId: string;
  scope: string;
  responseType: string;
  redirectUri: string;
  // Optional
  includeGrantedScopes: boolean;
  loginHint: string;
  prompt: string;
```

## Microsoft
Create an account following this tutorial https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-microsoft-account  

Get the scope (space-separated) you need from https://docs.microsoft.com/en-us/graph/permissions-reference  

Configuration:
```javascript
  // Mandatory
  clientId: string;
  scope: string;
  responseType: string;
  // Optional for user but set up by lib
  nonce: string;
  // Optional
  responseMode: string;
  redirectUri: string;
  loginHint: string;
  domainHint: string;
  prompt: string;
  tenant: string;
```

## Linkedin
Create an app here https://www.linkedin.com/developers/developer/apps  
Set up redirect_uri  
Get client_id  

Configuration:
```javascript
  // Mandatory
  clientId: string;
  redirectUri: string;
  scope: string;
```

## Facebook
Create an account following this tutorial https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-microsoft-account  
Set up redirect_uri  
Get client_id and scope you need from https://developers.facebook.com/docs/facebook-login/permissions/  

Configuration:
```javascript
  // Mandatory
  clientId: string;
  redirectUri: string;
  // Optional
  responseType: string;
  scope: string;  
```

## Nonce & CSRF
You can access nonce & csrf value before calling getParsedResponse(). They are stored in localStorage under the respective name csrf_social_nonce & csrf_social_csrf.

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