Ionic 8 Tutorial: Facebook Login with Angular 19

In this updated tutorial, we'll show you how to add Facebook authentication to your Ionic 8 application built with Angular 19 and Capacitor. Leveraging the latest Ionic CLI and Angular framework, you'll implement native Facebook login across iOS and Android platforms using the @capacitor-community/facebook-login plugin.

Prerequisites

• Node.js v18+ and npm

• Ionic CLI v8.x (npm install -g @ionic/cli)

• Angular CLI v19.x (npm install -g @angular/cli)

• Xcode (macOS) or Android Studio

• A Facebook Developer account and app credentials (App ID)

Set up a Facebook App

1. Go to Facebook Developers Dashboard and create a new app.

2. Add the Facebook Login product and configure it for iOS and Android:

• iOS Bundle ID: e.g., com.yourcompany.myapp

• Android Package Name: same as your Capacitor Android ID

• Generate and add Key Hashes for Android development:

keytool -exportcert -alias androiddebugkey \
  -keystore ~/.android/debug.keystore \
  | openssl sha1 -binary | openssl base64

3. Copy your App ID for later.

Create a New Ionic 8 + Angular 19 App

We will use the above latest Ionic CLI to create a new Ionic Angular app. Type this command to create a new Ionic Angular app from your projects folder.

ionic start myionicfacebook blank --type=angular

Next, go to the newly created Ionic project folder.

cd ./myionicfacebook

Ensure Ionic and Angular versions

ionic info

Ionic:

   Ionic CLI                     : 7.2.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 8.5.8
   @angular-devkit/build-angular : 19.2.14
   @angular-devkit/schematics    : 19.2.14
   @angular/cli                  : 19.2.14
   @ionic/angular-toolkit        : 12.2.0

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v23.11.0 (/opt/homebrew/Cellar/node/23.11.0/bin/node)
   npm    : 10.9.2
   OS     : macOS Unknown

Initialize Capacitor:

ionic capacitor add android
ionic capacitor add ios

Next, run the Ionic application for the first time using this command.

ionic serve

 

The Ionic application will open automatically in your default web browser.

Install and Configure the Facebook Login Plugin

Install the Capacitor plugin and peer dependencies:

npm install @capacitor-community/facebook-login
npm install @capacitor/core @capacitor/android @capacitor/ios

Configure the plugin in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'MyFacebookApp',
  webDir: 'www',
  plugins: {
    FacebookLogin: {
      appId: 'YOUR_FACEBOOK_APP_ID',
    }
  }
};

export default config;

Sync Capacitor:

npx cap sync

Implement Login and Logout

Update App Component

In src/app/app.module.ts, add nothing—Capacitor plugins do not require module imports.

Home Page Logic

In src/app/home/home.page.ts:

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
  FacebookLogin,
  FacebookLoginResponse,
} from '@capacitor-community/facebook-login';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [CommonModule, IonCardContent, IonCardSubtitle, IonCardTitle, IonCardHeader, IonCard, IonButton, IonIcon, IonContent, IonTitle, IonToolbar, IonHeader,],
})
export class HomePage implements OnInit {
  public isLoggedIn = false;
  public user: any = null;

  async ngOnInit() {
    const status = await FacebookLogin.getCurrentAccessToken();
    this.isLoggedIn = !!status?.accessToken;
    if (this.isLoggedIn) {
      this.loadProfile();
    }
  }

  async fbLogin() {
    const result: FacebookLoginResponse =
      await FacebookLogin.login({ permissions: ['public_profile', 'email'] });

    this.isLoggedIn = result.accessToken != null;
    if (this.isLoggedIn) {
      this.loadProfile();
    }
  }

  async loadProfile() {
    // Use Facebook Graph API
    const token = (await FacebookLogin.getCurrentAccessToken()).accessToken;
    const response = await fetch(
      `https://graph.facebook.com/me?fields=id,name,email,picture&type=large&access_token=${token}`
    );
    this.user = await response.json();
  }

  async logout() {
    await FacebookLogin.logout();
    this.isLoggedIn = false;
    this.user = null;
  }
}

Home Page Template

In src/app/home/home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Facebook Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div *ngIf="!isLoggedIn">
    <ion-button expand="full" color="primary" (click)="fbLogin()">
      <ion-icon slot="start" name="logo-facebook"></ion-icon>
      Login with Facebook
    </ion-button>
  </div>

  <div *ngIf="isLoggedIn">
    <ion-card>
      <img [src]="user.picture.data.url" alt="{{ user.name }}" />
      <ion-card-header>
        <ion-card-title>{{ user.name }}</ion-card-title>
        <ion-card-subtitle>{{ user.email }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-button expand="full" color="secondary" (click)="logout()">
          Logout
        </ion-button>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

Run and Test the App

Build and deploy to Android or iOS:

ionic capacitor build android
ionic capacitor run android
ionic capacitor build ios
ionic capacitor run ios

For web preview:

ionic serve

You can see how to run this Ionic Angular Facebook app in this video.

Conclusion

In this tutorial, you learned how to integrate Facebook login into an Ionic 8 + Angular 19 application using Capacitor. You created a new project, configured the Facebook plugin, and implemented login, profile fetching, and logout functionality. This modern setup ensures compatibility with the latest Ionic and Angular frameworks, providing a seamless authentication experience on both mobile platforms.

You can grab the full source code from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advanced Ionic Template.

That's just the basics. If you need more deep learning about Ionic, Angular, and TypeScript, you can take the following cheap course:

• IONIC 4 Design Hybrid Mobile Applications IOS & Android
• WordPress Rest API and Ionic 4 (Angular) App With Auth
• Mobile App from Development to Deployment - IONIC 4
• Ionic 4 Crash Course with Heartstone API & Angular
• Ionic 4 Mega Course: Build 10 Real World Apps

Thanks!