Facebook Login in Angular 20 Using Standalone Components

Learn how to integrate Facebook Login into your Angular 20 app using modern standalone components and the latest version of @abacritt/angularx-social-login.

Prerequisites

• Node.js 18+

• Angular CLI 20+

• A Facebook Developer App ID

1. Set up the Facebook App

To set up a Facebook App and get an App ID/Secret, go to the Facebook Developers Dashboard. Log in with your Facebook developer account or credentials.

Click the `+ Add a New App` button. Enter the display name (we use `AngularAuth` name), then click the `Create App ID` button. Make sure to use the valid name that is allowed by Facebook Developers.

After checking the captcha dialog and clicking the submit button, now, you can now see App ID and Secret. write them to your notepad.

Click the Settings menu on the left menu, then click Basic. Scroll down, then click the `+ Add Platform` button, then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL We are using this callback URL: 

http://127.0.0.1:1337/auth/facebook/callback

Click the `Save Changes` button, and don't forget to write down the App ID and App Secret in your notepad.

2. Create a New Angular Project

We have to create a new Angular application using this command.

ng new fb-login-app --routing --style scss
cd fb-login-app

Run the application for the first time.

ng serve

Now, open the browser, then go to `http://localhost;4200/` and you will see the standard Angular page.

3. Install Required Dependencies

The easy way to integrate Sign In With Facebook is to use the angularx-social-login. For that, install that module using this command.

npm install @abacritt/angularx-social-login
npm install @types/facebook-js-sdk --save-dev

Then add the Facebook JS SDK type to your tsconfig.app.json:

{
  "compilerOptions": {
    "types": ["facebook-js-sdk"]
  }
}

4. Create the Facebook Login Component

Create src/app/facebook-login.component.ts:

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  SocialAuthService,
  SocialLoginModule,
  SocialUser,
  FacebookLoginProvider,
} from '@abacritt/angularx-social-login';

@Component({
  selector: 'app-facebook-login',
  standalone: true,
  imports: [CommonModule, SocialLoginModule],
  template: `
    <div class="container">
      <h1>Facebook Login with Angular 20</h1>
      <button *ngIf="!loggedIn" (click)="signInWithFB()">Login with Facebook</button>

      <div *ngIf="loggedIn">
        <img [src]="user?.photoUrl" alt="Avatar" width="60" height="60" />
        <h3>{{ user?.name }}</h3>
        <p>{{ user?.email }}</p>
        <button (click)="signOut()">Logout</button>
      </div>
    </div>
  `,
})
export class FacebookLoginComponent implements OnInit {
  private authService = inject(SocialAuthService);

  user?: SocialUser;
  loggedIn = false;

  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = !!user;
    });
  }

  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  }

  signOut(): void {
    this.authService.signOut();
  }
}

5. Configure Providers in main.ts

Edit src/app.config.ts to bootstrap with providers:

import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { FacebookLoginProvider, SocialAuthServiceConfig, SocialLoginModule } from '@abacritt/angularx-social-login';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(SocialLoginModule),
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('YOUR_FACEBOOK_APP_ID'),
          },
        ],
        onError: (err) => console.error(err),
      } as SocialAuthServiceConfig,
    },
  ]
};

Replace 'YOUR_FACEBOOK_APP_ID' With your actual Facebook App ID.

6. Add Basic Styling (Optional)

Add this in src/styles.scss:

.container {
  text-align: center;
  margin-top: 3rem;
}
button {
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
}
img {
  border-radius: 50%;
  margin-top: 1rem;
}

7. Run Your App

We have to run the Angular application using this command.

ng serve

And you will see the change of the Angular main page as below, which now has a Sign In with Facebook button.

That's the Angular Tutorial of the Facebook Login example. You can find the full source code on our GitHub.

If you don’t want to waste your time designing your front-end or your budget to spend by hiring a web designer, then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That's just the basics. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

• Master en JavaScript: Aprender JS, jQuery, Angular 8, NodeJS
• Angular 8 - Complete Essential Guide
• Learn Angular 8 by creating a simple full-stack web App
• Angular 5 Bootcamp FastTrack
• Angular 6 - Soft & Sweet
• Angular 6 with TypeScript

Thanks!