npm package: @swiftlyme/social-logins
Description: A configurable Angular component for Firebase (Google), LinkedIn, Facebook, and Twitter authentication.
Latest version: 1.0.1

# Angular Social Login Component

A configurable Angular component for Firebase (Google), LinkedIn, Facebook, and Twitter authentication.

This package exposes a configurable Angular social login component that supports Firebase (Google), LinkedIn, Facebook, and Twitter based on the inputs you provide.

## Overview

This library provides a standalone Angular component `<app-social-login>` that renders social login buttons and handles authentication flows using Firebase Authentication and LinkedIn OAuth. Consumers pass their own Firebase configuration and LinkedIn OAuth details, and receive success/failure events when a user logs in.

## Installation

- Install Firebase and Angular common dependencies in your app:
  - `firebase`
  - `@angular/common`
- Install this library from npm (replace with your real package name):
  - `npm install your-social-login-lib`

These dependencies are required because the component imports Firebase SDK functions and `CommonModule`.

## Firebase configuration

The component expects a Firebase configuration object via the `firebaseConfig` input with the following shape:

```ts
export interface FirebaseConfig {
  apiKey: string;
  authDomain: string;
  projectId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
  measurementId?: string;
}
```

Obtain these values from your Firebase project settings and pass them from your Angular app, typically via an environment file.

## Component inputs

`SocialLoginComponent` is declared as:

```ts
@Component({
  selector: 'app-social-login',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './social-login.html',
  styleUrl: './social-login.css',
})
export class SocialLoginComponent implements OnInit { ... }
```

Supported inputs:

- `firebaseConfig: FirebaseConfig` (required) – Firebase project configuration used to initialize the app and `Auth`.
- `linkedInClientId: string` – LinkedIn OAuth client id used when starting the LinkedIn auth flow.
- `linkedInRedirectUri: string` – Redirect URI registered in your LinkedIn app configuration.
- `enableGoogle: boolean = true` – Toggle Google login button.
- `enableLinkedIn: boolean = true` – Toggle LinkedIn login button.
- `enableFacebook: boolean = true` – Toggle Facebook login button.
- `enableTwitter: boolean = true` – Toggle Twitter login button.
- `googleButtonStyle: { [key: string]: string } = {}` – Inline styles for the Google button.
- `linkedInButtonStyle: { [key: string]: string } = {}` – Inline styles for the LinkedIn button.
- `facebookButtonStyle: { [key: string]: string } = {}` – Inline styles for the Facebook button.
- `twitterButtonStyle: { [key: string]: string } = {}` – Inline styles for the Twitter button.

These style inputs let you fully customize button appearance from the parent component.

## Outputs

The component emits events on success and failure of each provider:

- `loginSuccess: EventEmitter<any>` – Fired when a provider login completes successfully.
  - For Google: `{ provider: 'google', user }`.
  - For Facebook: `{ provider: 'facebook', user, token }`.
  - For Twitter: `{ provider: 'twitter', user, token, secret }`.
- `loginFailure: EventEmitter<any>` – Fired when login fails.
  - Shape: `{ provider: '<provider-name>', error }`.

Listen to these outputs in your parent component to handle user state and errors.

## Authentication flows

Internally, the component:

- Initializes Firebase in `ngOnInit` using `initializeApp(firebaseConfig)`, `getAnalytics`, and `getAuth`.
- Uses `signInWithPopup` with:
  - `GoogleAuthProvider` for Google.
  - `FacebookAuthProvider` for Facebook.
  - `TwitterAuthProvider` for Twitter.
- For LinkedIn:
  - Generates a random `state` using `crypto.randomUUID()`.
  - Stores it in `localStorage` under the key `li_oauth_state`.
  - Builds an authorize URL with `response_type=code`, `client_id`, `redirect_uri`, `scope=openid profile email`, and `state`.
  - Redirects the browser to `https://www.linkedin.com/oauth/v2/authorization?...`.

You must handle the LinkedIn redirect and token exchange on your backend or in another part of your app.

## Usage example

In a parent component template:

```html
<app-social-login [firebaseConfig]="firebaseConfig" [linkedInClientId]="linkedInClientId" [linkedInRedirectUri]="linkedInRedirectUri" [enableGoogle]="true" [enableLinkedIn]="true" [enableFacebook]="false" [enableTwitter]="true" [googleButtonStyle]="{ 'background-color': '#4285F4', color: '#fff' }" (loginSuccess)="onLoginSuccess($event)" (loginFailure)="onLoginFailure($event)"> </app-social-login>
```

In the parent TypeScript file, define the config values and handlers to integrate this component into your authentication flow.

## 📞 Support

For issues, questions, or feature requests, please visit (info@imminentideas.com)

## 🔗 Links

- [Documentation](https://swiftlyme.com/social-login)

- [NPM Package](https://www.npmjs.com/package/@swiftlyme/social-logins)