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:

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:

@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:

<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 ([email protected])

🔗 Links

• Documentation

• NPM Package