DEV Community: Vaclav Svara

[Boost]

Vaclav Svara — Sat, 21 Feb 2026 19:42:09 +0000

Firebase Push Notifications in Capacitor Angular Apps: The Complete Implementation Guide

Vaclav Svara ・ Feb 21

#angular #capacitor #firebase #webdev

Firebase Push Notifications in Capacitor Angular Apps: The Complete Implementation Guide

Vaclav Svara — Sat, 21 Feb 2026 09:52:14 +0000

Published: February 16, 2026
Author: Václav Švára
Generated with assistance from: Claude (Anthropic AI)

Introduction
Architecture Overview
Prerequisites
Firebase Project Setup
iOS Configuration
- The APNs Certificate vs Authentication Key Dilemma
- Creating APNs Certificates
- iOS Native Implementation
Android Configuration
Angular Service Implementation
Backend Integration
Testing Push Notifications
Common Issues and Solutions
Production Considerations
Conclusion

Introduction

Push notifications are essential for modern mobile applications, enabling real-time communication with users even when the app isn't running. However, implementing Firebase Cloud Messaging (FCM) in a Capacitor Angular application involves navigating platform-specific requirements, native code integration, and several potential pitfalls.

This guide provides a complete, production-ready implementation of Firebase push notifications for Capacitor Angular apps, covering both iOS and Android platforms.

What You'll Learn

Complete Firebase project setup for mobile apps
iOS APNs certificate configuration (the right way)
Native iOS implementation with Swift
Android Firebase integration
Angular service for cross-platform notifications
Backend integration for sending notifications
Testing strategies and troubleshooting

Architecture Overview

High-Level Flow

┌─────────────────────────────────────────────────────────┐
│                    Your Backend API                     │
│  - Stores FCM tokens in database                        │
│  - Sends notifications via Firebase Admin SDK           │
└────────────────────┬────────────────────────────────────┘
                     │
                     ↓
┌─────────────────────────────────────────────────────────┐
│           Firebase Cloud Messaging (FCM)                │
│  - Routes notifications to correct platform             │
│  - Handles delivery and retries                         │
└────────────┬────────────────────────────┬───────────────┘
             │                            │
             ↓                            ↓
    ┌────────────────┐           ┌───────────────┐
    │      iOS       │           │    Android    │
    │  (via APNs)    │           │  (via FCM)    │
    └────────┬───────┘           └───────┬───────┘
             │                           │
             ↓                           ↓
    ┌────────────────┐           ┌───────────────┐
    │  Capacitor     │           │  Capacitor    │
    │  Plugin        │           │  Plugin       │
    └────────┬───────┘           └───────┬───────┘
             │                           │
             └───────────┬───────────────┘
                         ↓
                ┌─────────────────┐
                │ Angular Service │
                │  - Token mgmt   │
                │  - Listeners    │
                └─────────────────┘

Token Flow

App Launch: Angular service initializes notification system
Permission Request: User grants notification permission
Native Token Generation:
- iOS: APNs generates device token
- Android: FCM generates token directly
FCM Token Creation: Firebase SDK converts platform tokens to FCM tokens
Token Storage: Angular service receives FCM token
Backend Registration: Token sent to your backend API
Notification Sending: Backend sends notification via Firebase Admin SDK
Platform Routing: FCM routes to APNs (iOS) or FCM (Android)
Delivery: Notification appears on device

Prerequisites

Required Accounts

Firebase Account: Free tier available at firebase.google.com
Apple Developer Account: $99/year (for iOS push notifications)
Google Developer Account: One-time $25 fee (for Android deployment)

Development Environment

# Node.js and npm
node --version  # v18+ recommended
npm --version

# Angular CLI
npm install -g @angular/cli

# Capacitor CLI
npm install -g @capacitor/cli

# Physical devices for testing
# - iOS Simulator does NOT support push notifications
# - Android Emulator with Google Play Services (API 24+)

Required Packages

# Firebase Messaging plugin for Capacitor
npm install @capacitor-firebase/messaging

# Capacitor platforms
npm install @capacitor/ios @capacitor/android

Firebase Project Setup

Step 1: Create Firebase Project

Go to Firebase Console
Click "Add project"
Enter project details:

   Project name: YourApp
   Enable Google Analytics: Yes (recommended)

Click "Create project"

Step 2: Add iOS App

In Firebase Console → Project Overview → Add app → iOS
Enter configuration:

   iOS bundle ID: com.yourcompany.yourapp
   App nickname: YourApp iOS (optional)
   App Store ID: Leave empty

Download GoogleService-Info.plist
Save file for later - you'll add it to Xcode project

Step 3: Add Android App

In Firebase Console → Project Overview → Add app → Android
Enter configuration:

   Android package name: com.yourcompany.yourapp
   App nickname: YourApp Android (optional)
   SHA-1: Optional for testing

Download google-services.json
Save file for later - you'll add it to Android project

Step 4: Enable Cloud Messaging

Firebase Console → Project Settings → Cloud Messaging
Note the Server Key (for backend integration)
We'll configure APNs in the next section

iOS Configuration

The APNs Certificate vs Authentication Key Dilemma

CRITICAL DISCOVERY: Firebase Cloud Messaging campaigns have different behavior depending on authentication method:

Method	Firebase Console Campaigns	Direct API Calls	Expiration
APNs Certificates (.p12)	✅ Works perfectly	✅ Works	1 year
APNs Authentication Keys (.p8)	❌ Fails silently	✅ Works	Never

⚠️ CRITICAL: Use APNs Certificates, NOT Authentication Keys!

As of February 2026, APNs Authentication Keys (.p8) do NOT work with Firebase Console test messages and campaigns. They fail silently with "0 sends" despite correct configuration.

The Problem: This is a known Firebase SDK issue (GitHub Issue #4042) that has not been resolved. Firebase Console campaigns require APNs Certificates (.p12).

The Solution: Always use APNs Certificates (.p12) for reliable delivery across all scenarios.

Important Notes:

APNs Certificates expire after 1 year and must be renewed
APNs Authentication Keys never expire but don't work with Firebase Console
Direct FCM API calls work with both, but Firebase Console campaigns require Certificates

Creating APNs Certificates

Step 1: Register App ID in Apple Developer

Go to Apple Developer Console
Click "+" → "App IDs" → "App"
Configure:

   Description: YourApp
   Bundle ID: com.yourcompany.yourapp (Explicit)
   Capabilities: Enable "Push Notifications"

Click "Register"

Step 2: Generate Certificate Signing Request (CSR)

On your Mac:

Open Keychain Access (Applications → Utilities)
Menu: Keychain Access → Certificate Assistant → Request a Certificate From a Certificate Authority...
Fill in:

   User Email Address: your.email@example.com
   Common Name: YourApp Push Certificate
   CA Email Address: Leave empty
   Request is: Saved to disk

Check "Let me specify key pair information"
Click "Continue"
Save as: YourAppPush.certSigningRequest
Key Pair Information:

   Key Size: 2048 bits
   Algorithm: RSA

Click "Continue" → "Done"

Step 3: Create APNs Certificate

Go to Apple Developer Console
Click "+" to create new certificate
Select "Apple Push Notification service SSL (Sandbox & Production)"
Click "Continue"
Select your App ID: com.yourcompany.yourapp
Click "Continue"
Upload the CSR file: YourAppPush.certSigningRequest
Click "Continue"
Download the certificate: aps.cer

Step 4: Install Certificate to Keychain

Double-click aps.cer file
Certificate automatically installs to Keychain Access
Open Keychain Access → login keychain → My Certificates
Find "Apple Push Services: com.yourcompany.yourapp"
Expand it (click triangle) → verify private key is underneath

Step 5: Export as .p12 File

In Keychain Access, select the certificate (top level, not private key)
Right-click → "Export..."
Configure export:

   File Format: Personal Information Exchange (.p12)
   Save As: YourAppPushCert.p12

Enter a password (remember this! e.g., YourApp2026)
Click "Save"
Enter your Mac password to allow export

You now have YourAppPushCert.p12 ready for Firebase.

Step 6: Upload to Firebase Console

Firebase Console → ⚙️ Settings → Project settings → Cloud Messaging
Scroll to "Apple app configuration"
Expand "APNs Certificates" section (NOT Authentication Key!)
Click "Upload" for Production certificate:

   Certificate file: YourAppPushCert.p12
   Password: YourApp2026 (your password)

Click "Upload"

Optional: Upload same .p12 for Development certificate if needed

Step 7: Remove APNs Authentication Keys (If Present)

CRITICAL: If you have APNs Authentication Keys configured, Firebase will ignore certificates!

In same "Apple app configuration" section
Find "APNs Authentication Key" section
Click "Delete" for ALL keys (Development and Production)
Confirm deletion

Firebase will now use APNs Certificates exclusively.

iOS Native Implementation

Step 1: Add GoogleService-Info.plist to Xcode

cd your-app
npx cap open ios

In Xcode:

Right-click App folder (under App.xcodeproj)
Select "Add Files to 'App'..."
Select GoogleService-Info.plist
Check "Copy items if needed"
Target: Check "App"
Click "Add"

Verify: File should be in App/App/ directory

Step 2: Install Firebase Pods

Edit ios/App/Podfile:

platform :ios, '13.0'
use_frameworks!

target 'App' do
  capacitor_pods

  # Firebase dependencies
  pod 'Firebase/Messaging'
  pod 'Firebase/Core'
end

Install pods:

cd ios/App
pod install

IMPORTANT: Always open .xcworkspace file after installing pods:

open App.xcworkspace

Step 3: Enable Capabilities in Xcode

Select App target
Go to "Signing & Capabilities" tab
Click "+ Capability"
Add "Push Notifications"
Add "Background Modes"
- Check "Remote notifications"

Step 4: Configure Info.plist

Add to ios/App/App/Info.plist:

<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
</array>

Step 5: Implement AppDelegate.swift

Replace ios/App/App/AppDelegate.swift with:

import UIKit
import Capacitor
import FirebaseCore
import FirebaseMessaging
import UserNotifications

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate, MessagingDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Initialize Firebase
        FirebaseApp.configure()

        // Set notification delegate
        UNUserNotificationCenter.current().delegate = self

        // Set messaging delegate
        Messaging.messaging().delegate = self

        // Request notification permissions
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: { granted, error in
                if granted {
                    print("✅ Notification permission granted")
                } else {
                    print("❌ Notification permission denied: \(String(describing: error))")
                }
            }
        )

        // Register for remote notifications
        application.registerForRemoteNotifications()

        return true
    }

    // MARK: - Push Notification Registration

    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        // Convert to hex for logging
        let tokenHex = deviceToken.map { String(format: "%02x", $0) }.joined()
        print("=================================")
        print("✅ APNs Device Token (HEX):")
        print(tokenHex)
        print("=================================")

        // Set APNs token to Firebase
        Messaging.messaging().apnsToken = deviceToken
        print("✅ APNs token set to Firebase Messaging")

        // Explicitly fetch FCM token
        Messaging.messaging().token { token, error in
            if let error = error {
                print("❌ Error fetching FCM token: \(error)")
            } else if let token = token {
                print("=================================")
                print("✅ FCM TOKEN:")
                print(token)
                print("=================================")
                print("Use this token for testing")
            }
        }

        // Notify Capacitor
        NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken)
    }

    func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
        print("❌ Failed to register for remote notifications: \(error)")
        NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
    }

    // MARK: - UNUserNotificationCenterDelegate

    // Foreground notification handling
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                willPresent notification: UNNotification,
                                withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        let userInfo = notification.request.content.userInfo
        print("📬 Notification received (foreground): \(userInfo)")

        // Show notification even in foreground
        completionHandler([[.banner, .badge, .sound]])
    }

    // Notification tap handling
    func userNotificationCenter(_ center: UNUserNotificationCenter,
                                didReceive response: UNNotificationResponse,
                                withCompletionHandler completionHandler: @escaping () -> Void) {
        let userInfo = response.notification.request.content.userInfo
        print("📬 Notification tapped: \(userInfo)")

        // TODO: Handle navigation based on notification data
        // Example: Extract deep link and navigate

        completionHandler()
    }

    // MARK: - MessagingDelegate

    // FCM token refresh
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("=================================")
        print("✅ FCM Token Refreshed:")
        print(fcmToken ?? "nil")
        print("=================================")

        // Notify Angular app
        let dataDict: [String: String] = ["token": fcmToken ?? ""]
        NotificationCenter.default.post(
            name: Notification.Name("FCMToken"),
            object: nil,
            userInfo: dataDict
        )
    }

    // MARK: - URL Handling (Keep existing deep link code if you have MSAL)

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        print("🔗 App opened with URL: \(url.absoluteString)")

        // Handle deep links (MSAL, etc.)
        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
    }

    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
    }
}

Key Points:

Firebase initialized on app launch
APNs token automatically set to Firebase SDK
FCM token explicitly fetched and logged
Notifications shown even when app is in foreground
Token refresh automatically handled

Android Configuration

Android setup is simpler than iOS - no certificates required!

Step 1: Add google-services.json

Place google-services.json in:

your-app/android/app/google-services.json

Step 2: Configure build.gradle Files

Project-level android/build.gradle:

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:8.2.1'
        classpath 'com.google.gms:google-services:4.4.0'  // ADD THIS
    }
}

App-level android/app/build.gradle:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'  // ADD THIS

android {
    // ... existing config
}

dependencies {
    // ... existing dependencies
    implementation platform('com.google.firebase:firebase-bom:32.7.0')
    implementation 'com.google.firebase:firebase-messaging'
}

Step 3: Sync Capacitor

npx cap sync android

That's it for Android! Firebase handles everything else automatically.

Angular Service Implementation

Create a universal push notification service that works on both platforms.

File: `src/app/services/push-notification.service.ts`

import { Injectable } from '@angular/core';
import { FirebaseMessaging } from '@capacitor-firebase/messaging';
import { Capacitor } from '@capacitor/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PushNotificationService {
  private isNative = Capacitor.isNativePlatform();

  constructor(private http: HttpClient) {}

  /**
   * Initialize push notifications
   * Call this on app startup (after user is authenticated)
   */
  async initialize(): Promise<void> {
    console.log('[PushNotificationService] Initializing...');

    // Only on native platforms
    if (!this.isNative) {
      console.log('[PushNotificationService] Web platform - push notifications not available');
      return;
    }

    console.log('[PushNotificationService] Platform:', Capacitor.getPlatform());

    try {
      // Request permissions
      const permissionResult = await FirebaseMessaging.requestPermissions();
      console.log('[PushNotificationService] Permission result:', permissionResult);

      if (permissionResult.receive !== 'granted') {
        console.warn('[PushNotificationService] Permission denied');
        return;
      }

      // Get FCM token
      const { token } = await FirebaseMessaging.getToken();
      console.log('=================================');
      console.log('[PushNotificationService] FCM Token:', token);
      console.log('=================================');

      // Send token to backend
      await this.registerTokenWithBackend(token);

      // Setup listeners
      this.setupListeners();

      console.log('[PushNotificationService] Initialization complete');
    } catch (error) {
      console.error('[PushNotificationService] Initialization error:', error);
    }
  }

  /**
   * Setup notification event listeners
   */
  private setupListeners(): void {
    // Token refresh listener
    FirebaseMessaging.addListener('tokenReceived', async (event) => {
      console.log('[PushNotificationService] Token refreshed:', event.token);
      await this.registerTokenWithBackend(event.token);
    });

    // Foreground notification listener
    FirebaseMessaging.addListener('notificationReceived', (event) => {
      console.log('[PushNotificationService] Notification received (foreground):', event.notification);

      // TODO: Show in-app notification
      // Example: Display toast, update badge, etc.
      this.handleForegroundNotification(event.notification);
    });

    // Notification tap listener
    FirebaseMessaging.addListener('notificationActionPerformed', (event) => {
      console.log('[PushNotificationService] Notification tapped:', event);

      // TODO: Handle navigation
      // Example: Navigate to specific screen based on notification data
      this.handleNotificationTap(event);
    });
  }

  /**
   * Register FCM token with your backend
   */
  private async registerTokenWithBackend(token: string): Promise<void> {
    try {
      const platform = Capacitor.getPlatform(); // 'ios' or 'android'

      await firstValueFrom(
        this.http.post('/api/push-tokens', {
          token,
          platform
        })
      );

      console.log('[PushNotificationService] Token registered with backend');
    } catch (error) {
      console.error('[PushNotificationService] Failed to register token:', error);
    }
  }

  /**
   * Handle foreground notification
   */
  private handleForegroundNotification(notification: any): void {
    console.log('[PushNotificationService] Handling foreground notification');

    // Example: Show toast notification
    // You can use a toast/notification library here
    const title = notification.title || 'New Notification';
    const body = notification.body || '';

    // TODO: Display in-app notification
    console.log(`Notification: ${title} - ${body}`);
  }

  /**
   * Handle notification tap (user tapped notification)
   */
  private handleNotificationTap(event: any): void {
    console.log('[PushNotificationService] Handling notification tap');

    const data = event.notification?.data;

    if (data) {
      // Example: Navigate based on notification data
      if (data.screen) {
        console.log(`Navigate to: ${data.screen}`);
        // TODO: Use Angular Router to navigate
        // this.router.navigate([data.screen]);
      }

      if (data.itemId) {
        console.log(`Open item: ${data.itemId}`);
        // TODO: Navigate to item detail
        // this.router.navigate(['/items', data.itemId]);
      }
    }
  }

  /**
   * Get delivered notifications (notifications in notification center)
   */
  async getDeliveredNotifications(): Promise<any[]> {
    try {
      const result = await FirebaseMessaging.getDeliveredNotifications();
      console.log('[PushNotificationService] Delivered notifications:', result.notifications);
      return result.notifications;
    } catch (error) {
      console.error('[PushNotificationService] Error getting delivered notifications:', error);
      return [];
    }
  }

  /**
   * Remove delivered notifications by IDs
   */
  async removeDeliveredNotifications(ids: string[]): Promise<void> {
    try {
      await FirebaseMessaging.removeDeliveredNotifications({
        notifications: ids.map(id => ({ id }))
      });
      console.log('[PushNotificationService] Removed notifications:', ids);
    } catch (error) {
      console.error('[PushNotificationService] Error removing notifications:', error);
    }
  }

  /**
   * Remove all delivered notifications
   */
  async removeAllDeliveredNotifications(): Promise<void> {
    try {
      await FirebaseMessaging.removeAllDeliveredNotifications();
      console.log('[PushNotificationService] All notifications removed');
    } catch (error) {
      console.error('[PushNotificationService] Error removing all notifications:', error);
    }
  }

  /**
   * Cleanup listeners (call on app destroy if needed)
   */
  async cleanup(): Promise<void> {
    await FirebaseMessaging.removeAllListeners();
    console.log('[PushNotificationService] Listeners removed');
  }
}

Initialize Service in App Component

File: src/app/app.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { PushNotificationService } from './services/push-notification.service';
import { AuthService } from './services/auth.service'; // Your auth service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private pushService = inject(PushNotificationService);
  private authService = inject(AuthService);

  ngOnInit(): void {
    // Wait for user authentication before initializing push
    this.authService.isAuthenticated$.subscribe(async (isAuthenticated) => {
      if (isAuthenticated) {
        console.log('[App] User authenticated, initializing push notifications');
        await this.pushService.initialize();
      }
    });
  }
}

Why wait for authentication?

Associate FCM token with specific user
Avoid requesting permissions before user sees value
Better UX - permission request at appropriate time

Backend Integration

Database Schema

Create table to store FCM tokens:

CREATE TABLE push_tokens (
    id SERIAL PRIMARY KEY,
    user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    token VARCHAR(255) NOT NULL UNIQUE,
    platform VARCHAR(10) NOT NULL CHECK (platform IN ('ios', 'android')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),

    -- Ensure one token per user per platform
    UNIQUE (user_id, platform)
);

CREATE INDEX idx_push_tokens_user_id ON push_tokens(user_id);
CREATE INDEX idx_push_tokens_token ON push_tokens(token);

API Endpoint to Save Token

C# (.NET) Example:

[HttpPost("api/push-tokens")]
[Authorize]
public async Task<IActionResult> RegisterPushToken([FromBody] RegisterPushTokenRequest request)
{
    var userId = User.GetUserId();

    await _pushTokenService.UpsertTokenAsync(userId, request.Token, request.Platform);

    return Ok(new { message = "Token registered successfully" });
}

public class RegisterPushTokenRequest
{
    public required string Token { get; set; }
    public required string Platform { get; set; } // 'ios' or 'android'
}

Install Firebase Admin SDK

For .NET Backend:

dotnet add package FirebaseAdmin

For Node.js Backend:

npm install firebase-admin

Initialize Firebase Admin SDK

C# Example:

using FirebaseAdmin;
using FirebaseAdmin.Messaging;
using Google.Apis.Auth.OAuth2;

public class FirebaseService
{
    private readonly FirebaseApp _firebaseApp;

    public FirebaseService(IConfiguration configuration)
    {
        var credentialPath = configuration["Firebase:ServiceAccountKeyPath"];

        _firebaseApp = FirebaseApp.Create(new AppOptions
        {
            Credential = GoogleCredential.FromFile(credentialPath)
        });
    }

    public async Task<string> SendNotificationAsync(
        string fcmToken,
        string title,
        string body,
        Dictionary<string, string>? data = null)
    {
        var message = new Message
        {
            Token = fcmToken,
            Notification = new Notification
            {
                Title = title,
                Body = body
            },
            Data = data,
            // Platform-specific configuration
            Android = new AndroidConfig
            {
                Priority = Priority.High,
                Notification = new AndroidNotification
                {
                    Sound = "default",
                    ChannelId = "default"
                }
            },
            Apns = new ApnsConfig
            {
                Aps = new Aps
                {
                    Sound = "default",
                    Badge = 1,
                    ContentAvailable = true
                }
            }
        };

        var response = await FirebaseMessaging.DefaultInstance.SendAsync(message);
        Console.WriteLine($"✅ Notification sent: {response}");
        return response;
    }

    public async Task<bool> SendNotificationToUserAsync(
        Guid userId,
        string title,
        string body,
        Dictionary<string, string>? data = null)
    {
        // Get user's tokens from database
        var tokens = await _pushTokenRepository.GetTokensByUserIdAsync(userId);

        if (!tokens.Any())
        {
            Console.WriteLine($"⚠️ User {userId} has no push tokens");
            return false;
        }

        var tasks = tokens.Select(token =>
            SendNotificationAsync(token.Token, title, body, data)
        );

        await Task.WhenAll(tasks);
        return true;
    }
}

Example Usage

// Send notification when a new document is processed
await _firebaseService.SendNotificationToUserAsync(
    userId: user.Id,
    title: "Document Processed",
    body: "Your invoice has been successfully processed",
    data: new Dictionary<string, string>
    {
        { "screen", "/documents" },
        { "documentId", document.Id.ToString() },
        { "action", "view_document" }
    }
);

Testing Push Notifications

Test from Firebase Console

Firebase Console → Engage → Messaging
Click "Create your first campaign" → "Firebase Notification messages"
Fill in notification:

   Title: Test Notification
   Text: This is a test push notification

Click "Send test message"
Paste FCM token (from Xcode/Android Studio logs or Angular service)
Click "Test"

Expected Result: Notification appears on device

Test Scenarios

1. Foreground Notification (App Open)

App is running and visible
Notification should trigger notificationReceived listener
iOS: Banner shows by default (due to completionHandler in AppDelegate)
Android: Banner shows automatically

2. Background Notification (App in Background)

App is running but not visible (Home button pressed)
Notification appears in system tray
Tapping notification triggers notificationActionPerformed listener
App opens and navigates (if implemented)

3. Killed App Notification (App Closed)

App is completely closed (swiped away)
Notification still appears in system tray
Tapping notification opens app and triggers listener

Debugging Tips

iOS - Xcode Console:

Look for these logs:
✅ APNs Device Token (HEX): xxx
✅ FCM TOKEN: xxx
📬 Notification received (foreground): {...}
📬 Notification tapped: {...}

Android - Logcat:

Filter by: FirebaseMessaging
Look for token generation and notification delivery logs

Common Issues and Solutions

Issue 1: "0 sends" in Firebase Console

Symptom: Firebase Console shows "Completed" with 0 sends

Cause: APNs Authentication Keys configured instead of Certificates

Solution:

Create APNs Certificate (.p12) as described above
Upload to Firebase Console → APNs Certificates section
DELETE all APNs Authentication Keys
Retry sending notification

Reference: GitHub Issue firebase/firebase-ios-sdk#4042

Issue 2: iOS Notifications Not Appearing

Checklist:

✅ Physical device (not simulator)
✅ APNs Certificate uploaded to Firebase
✅ APNs Authentication Keys deleted
✅ Certificate not expired
✅ Push Notifications capability enabled in Xcode
✅ Background Modes → Remote notifications enabled
✅ Device notification permissions granted
✅ GoogleService-Info.plist in Xcode project
✅ Bundle ID matches Firebase and Apple Developer

Debug Command:

# Check APNs token in Xcode console
# Should see: "✅ APNs Device Token (HEX): xxx"

Issue 3: FCM Token is null/undefined

Causes:

Firebase not initialized: Check GoogleService-Info.plist / google-services.json is present
Permissions denied: User declined notification permission
Network issue: Device offline during token generation
Google Play Services (Android): Update required

Solution:

// Add error handling
try {
  const { token } = await FirebaseMessaging.getToken();
  if (!token) {
    console.error('FCM token is null - check Firebase configuration');
    return;
  }
  console.log('FCM Token:', token);
} catch (error) {
  console.error('Error getting FCM token:', error);
}

Issue 4: Notifications Work Sometimes

Cause: Token refresh not handled

Solution: Implement tokenReceived listener:

FirebaseMessaging.addListener('tokenReceived', async (event) => {
  console.log('Token refreshed:', event.token);
  await this.registerTokenWithBackend(event.token);
});

FCM tokens can be refreshed by Firebase SDK periodically or after app reinstall.

Issue 5: Android Notifications Don't Vibrate/Sound

Cause: Notification channel not configured

Solution: Configure Android notification channel in backend:

Android = new AndroidConfig
{
    Priority = Priority.High,
    Notification = new AndroidNotification
    {
        Sound = "default",
        ChannelId = "high_importance_channel",  // Must match app's channel
        DefaultSound = true,
        DefaultVibrateTimings = true
    }
}

Or create channel in Android app (optional):

// Android native code (MainActivity.kt)
val channel = NotificationChannel(
    "high_importance_channel",
    "Important Notifications",
    NotificationManager.IMPORTANCE_HIGH
).apply {
    description = "Channel for important notifications"
    enableVibration(true)
    enableLights(true)
}
notificationManager.createNotificationChannel(channel)

Production Considerations

1. Certificate Expiration Management

APNs Certificates expire after 1 year.

Strategy:

// Backend: Track certificate expiration
interface ApnsCertificate {
  id: number;
  certificatePath: string;
  password: string;
  expirationDate: Date;
  notificationSentAt?: Date;
}

// Cron job: Check 30 days before expiration
async function checkCertificateExpiration() {
  const certificates = await db.query(
    'SELECT * FROM apns_certificates WHERE expiration_date <= NOW() + INTERVAL \'30 days\''
  );

  for (const cert of certificates) {
    // Send email alert to admin
    await sendAdminAlert(`APNs certificate expires on ${cert.expirationDate}`);
  }
}

Renewal Reminder: Set calendar reminder for March 2027 (or 1 month before expiration).

2. Token Management Best Practices

Database Schema:

-- Track token lifecycle
ALTER TABLE push_tokens ADD COLUMN last_used_at TIMESTAMP;
ALTER TABLE push_tokens ADD COLUMN error_count INTEGER DEFAULT 0;
ALTER TABLE push_tokens ADD COLUMN is_valid BOOLEAN DEFAULT true;

-- Cleanup old tokens (cron job)
DELETE FROM push_tokens
WHERE last_used_at < NOW() - INTERVAL '90 days';

Handle Invalid Tokens:

try {
    await FirebaseMessaging.DefaultInstance.SendAsync(message);
    await UpdateTokenLastUsed(token);
} catch (FirebaseMessagingException ex) {
    if (ex.ErrorCode == MessagingErrorCode.Unregistered ||
        ex.ErrorCode == MessagingErrorCode.InvalidArgument) {
        // Token is invalid - remove from database
        await DeleteToken(token);
    }
}

3. Notification Delivery Tracking

Add analytics:

public class NotificationLog
{
    public int Id { get; set; }
    public Guid UserId { get; set; }
    public string Title { get; set; }
    public string Body { get; set; }
    public DateTime SentAt { get; set; }
    public DateTime? DeliveredAt { get; set; }
    public DateTime? OpenedAt { get; set; }
    public string? ErrorMessage { get; set; }
}

Track in Angular:

FirebaseMessaging.addListener('notificationActionPerformed', async (event) => {
  // Track notification open
  await this.http.post('/api/analytics/notification-opened', {
    notificationId: event.notification.data?.notificationId,
    timestamp: new Date().toISOString()
  }).toPromise();
});

4. Rate Limiting

Prevent notification spam:

public class NotificationRateLimiter
{
    private readonly Dictionary<Guid, Queue<DateTime>> _userNotifications = new();
    private readonly int _maxNotificationsPerHour = 10;

    public bool CanSendNotification(Guid userId)
    {
        if (!_userNotifications.ContainsKey(userId))
        {
            _userNotifications[userId] = new Queue<DateTime>();
        }

        var queue = _userNotifications[userId];
        var oneHourAgo = DateTime.UtcNow.AddHours(-1);

        // Remove notifications older than 1 hour
        while (queue.Count > 0 && queue.Peek() < oneHourAgo)
        {
            queue.Dequeue();
        }

        if (queue.Count >= _maxNotificationsPerHour)
        {
            return false; // Rate limit exceeded
        }

        queue.Enqueue(DateTime.UtcNow);
        return true;
    }
}

5. User Preferences

Allow users to control notifications:

// Settings UI
interface NotificationPreferences {
  enablePushNotifications: boolean;
  notifyOnNewDocuments: boolean;
  notifyOnComments: boolean;
  notifyOnUpdates: boolean;
  quietHoursStart?: string; // "22:00"
  quietHoursEnd?: string;   // "08:00"
}

// Backend: Check preferences before sending
async function sendNotificationIfAllowed(
  userId: Guid,
  notificationType: string
) {
  const prefs = await getUserNotificationPreferences(userId);

  if (!prefs.enablePushNotifications) {
    return false; // User disabled all notifications
  }

  if (notificationType === 'new_document' && !prefs.notifyOnNewDocuments) {
    return false;
  }

  if (isQuietHours(prefs)) {
    return false; // User in quiet hours
  }

  return await sendNotification(userId, ...);
}

Conclusion

Implementing Firebase push notifications in a Capacitor Angular app requires careful attention to platform-specific requirements, particularly on iOS where the choice between APNs Certificates and Authentication Keys can make or break your implementation.

Key Takeaways

Use APNs Certificates (.p12) for iOS, not Authentication Keys - they're more reliable with Firebase Console
Test on physical devices - iOS Simulator doesn't support push notifications
Implement token refresh - FCM tokens can change, handle tokenReceived event
Handle all notification states - foreground, background, and killed app
Track certificate expiration - APNs Certificates expire yearly
Store tokens securely - associate with user accounts in your backend
Respect user preferences - allow users to control notification types and timing
Monitor delivery - track sent, delivered, and opened notifications

What We Built

✅ Complete Firebase project setup
✅ iOS APNs Certificate configuration
✅ iOS native implementation (Swift)
✅ Android Firebase integration
✅ Cross-platform Angular service
✅ Backend integration with Firebase Admin SDK
✅ Testing strategies
✅ Production-ready error handling

Next Steps

Implement deep linking for notification actions
Add rich notifications with images/actions
Create notification categories/channels
Build admin panel for sending custom notifications
Add A/B testing for notification content
Implement notification scheduling

Resources

Published: February 16, 2026
Author: Václav Švára
Generated with assistance from: Claude (Anthropic AI)
License: MIT

Questions or issues? Share your experience in the comments below!

Microsoft Authentication (MSAL) in Capacitor Angular Apps: A Complete Guide

Vaclav Svara — Fri, 20 Feb 2026 16:00:13 +0000

Published: February 16, 2026
Author: Václav Švára
Generated with assistance from: Claude (Anthropic AI)

Introduction
The Challenge
🔴 CRITICAL: CapacitorHttp Configuration
Architecture Overview
Prerequisites
Azure AD App Registration
MSAL Configuration
Authentication Service Implementation
Deep Link Handling (iOS)
Deep Link Handling (Android)
Login Flow
Token Management
HTTP Interceptor
Testing the Implementation
Troubleshooting
Security Best Practices
Conclusion

Introduction

Implementing Microsoft Authentication (MSAL) in a Capacitor Angular application presents unique challenges compared to standard web applications. The combination of native mobile platforms (iOS/Android) with web technologies requires special handling of authentication flows, deep links, and token management.

This comprehensive guide walks you through every step of implementing MSAL authentication in a Capacitor Angular app, from Azure AD configuration to production-ready code.

⚠️ IMPORTANT: Before starting, read the CRITICAL: CapacitorHttp Configuration section. This single configuration prevents the #1 cause of MSAL authentication failures in Capacitor apps (CORS errors).

The Challenge

Why is MSAL different in Capacitor?

Custom URL Schemes: Capacitor apps run on capacitor://localhost instead of https:// domains
Deep Link Redirects: OAuth redirects must be handled by native app deep links
Browser Context: MSAL expects a standard browser environment, but Capacitor uses a WebView
Token Storage: Secure token storage differs between web and native platforms
Silent Token Refresh: Silent refresh in iframes doesn't work in native WebViews

What we'll build

A complete authentication solution that:

✅ Works on iOS, Android, and Web (PWA)
✅ Bypasses CORS issues with CapacitorHttp (critical!)
✅ Handles OAuth2 redirect flow properly
✅ Stores tokens securely
✅ Automatically refreshes expired tokens
✅ Attaches JWT tokens to API requests
✅ Handles login/logout gracefully

🔴 CRITICAL: CapacitorHttp Configuration

⚠️ READ THIS FIRST - Authentication Will Fail Without It!

This is the #1 reason MSAL fails in Capacitor apps. Before implementing anything else, you MUST configure CapacitorHttp, or authentication will fail with CORS errors.

The Problem

Azure AD (login.microsoftonline.com) rejects the capacitor://localhost origin during MSAL token exchange:

MSAL.js → fetch('https://login.microsoftonline.com/token')
Request Origin: capacitor://localhost
Azure AD Response: ❌ CORS error (Origin not allowed)
Result: ❌ Authentication fails

The Solution

Enable CapacitorHttp in your Capacitor config. This automatically patches ALL HTTP requests (including MSAL's token exchange) to use native HTTP, which bypasses CORS entirely:

MSAL.js → CapacitorHttp patch → Native HTTP (no Origin header)
Azure AD Response: ✅ 200 OK
Result: ✅ Authentication succeeds!

Required Configuration

File: capacitor.config.ts

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'YourApp',
  webDir: 'dist',

  plugins: {
    CapacitorHttp: {
      enabled: true, // 🔴 CRITICAL: Enable native HTTP (bypasses CORS)
    },
  },
};

export default config;

Why This Works

✅ Zero code changes - MSAL.js works without modifications
✅ Automatic patching - All fetch/XHR/HttpClient requests use native HTTP
✅ No CORS errors - Native HTTP doesn't send Origin header
✅ Transparent - Your Angular code doesn't know the difference

What Gets Automatically Patched

With CapacitorHttp: { enabled: true }, these are automatically converted to native HTTP:

✅ MSAL.js token requests (Azure AD communication)
✅ Angular HttpClient (your API calls)
✅ JavaScript fetch() (any library using fetch)
✅ XMLHttpRequest (legacy AJAX)
✅ All third-party libraries (automatic)

❌ Common Mistakes

DON'T create wrapper services:

// ❌ WRONG - Unnecessary and won't help MSAL
export class HttpWrapperService {
  // Wrapper services don't help because MSAL uses fetch() directly
}

DON'T add capacitor://localhost to backend CORS:

// ❌ WRONG - Will never be used with CapacitorHttp enabled
builder.Services.AddCors(options => {
    options.AddPolicy("AllowCapacitor", policy => {
        policy.WithOrigins("capacitor://localhost")  // ❌ Useless
    });
});

Backend CORS Configuration

With CapacitorHttp: { enabled: true }, your backend doesn't need CORS configuration for native apps because:

Native HTTP doesn't send Origin header
CORS is a browser security feature, not a native app concern

You only need CORS if:

Testing in web browser (development)
Supporting web version (PWA) alongside mobile

// ASP.NET Core - ONLY for web browser/PWA support
builder.Services.AddCors(options => {
    options.AddPolicy("AllowWeb", policy => {
        policy.WithOrigins("http://localhost:4200")  // Web dev server only
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

app.UseCors("AllowWeb");

Verification

After enabling CapacitorHttp, verify it's working:

Build and run on device:

   npm run build
   npx cap sync
   npx cap run ios  # or android

Check console logs:

   ✅ [MSAL] Token acquired successfully
   ✅ [AuthService] Login successful: user@example.com

If you see CORS errors, CapacitorHttp is NOT enabled correctly.

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                    Angular Application                       │
│  ┌──────────────────────────────────────────────────────┐  │
│  │              Authentication Service                   │  │
│  │  - Login / Logout                                    │  │
│  │  - Token acquisition                                 │  │
│  │  - Silent refresh                                    │  │
│  └──────────────────┬───────────────────────────────────┘  │
│                     │                                        │
│  ┌──────────────────▼───────────────────────────────────┐  │
│  │           MSAL Angular Library                        │  │
│  │  (@azure/msal-angular, @azure/msal-browser)          │  │
│  └──────────────────┬───────────────────────────────────┘  │
└────────────────────┼────────────────────────────────────────┘
                     │
         ┌───────────┴───────────┐
         │                       │
    ┌────▼─────┐          ┌─────▼────┐
    │   Web    │          │  Native  │
    │ (PWA)    │          │ (iOS/    │
    │          │          │ Android) │
    │ Standard │          │  Deep    │
    │ Redirect │          │  Links   │
    └────┬─────┘          └─────┬────┘
         │                      │
         └──────────┬───────────┘
                    │
         ┌──────────▼──────────┐
         │   Azure AD / Entra  │
         │  OAuth2 Provider    │
         └─────────────────────┘

Prerequisites

Required Knowledge

Angular (v16+)
TypeScript
Capacitor basics
OAuth2 / OpenID Connect concepts

Required Tools

# Node.js and npm
node --version  # v18+ recommended
npm --version

# Angular CLI
npm install -g @angular/cli

# Capacitor CLI
npm install -g @capacitor/cli

# Xcode (macOS, for iOS)
# Android Studio (for Android)

Required Packages

# MSAL packages
npm install @azure/msal-browser @azure/msal-angular

# Capacitor core
npm install @capacitor/core @capacitor/cli

# Capacitor platforms
npm install @capacitor/ios @capacitor/android

# RxJS (usually already in Angular)
npm install rxjs

Azure AD App Registration

Step 1: Create App Registration

Go to Azure Portal
Navigate to Azure Active Directory → App registrations
Click "New registration"

Configuration:

Name: My Mobile App
Supported account types: Accounts in any organizational directory and personal Microsoft accounts
Redirect URI: Leave empty for now (we'll add later)

Click "Register"

Step 2: Note Application (client) ID

After registration, you'll see:

Application (client) ID: 12345678-1234-1234-1234-123456789abc
Directory (tenant) ID: common (for multi-tenant)

Save these values - you'll need them for configuration.

Step 3: Add Redirect URIs

Go to Authentication → Add a platform

For Web (PWA):

Platform: Single-page application (SPA)
Redirect URI: http://localhost:4200
              https://yourapp.com

For iOS:

Platform: iOS / macOS
Redirect URI: msauth.com.yourcompany.yourapp://auth

For Android:

Platform: Android
Redirect URI: msauth://com.yourcompany.yourapp/signature-hash

Platform-agnostic (Capacitor):

Platform: Single-page application (SPA)
Redirect URI: capacitor://localhost

Step 4: Configure Token Settings

Authentication → Implicit grant and hybrid flows:

✅ Access tokens (used for implicit flows)
✅ ID tokens (used for implicit and hybrid flows)

Authentication → Advanced settings:

Allow public client flows: Yes

Step 5: Expose API (Optional, for custom scopes)

If your app has a backend API:

Expose an API → Add a scope

Scope name: api_access
Display name: Access API
Description: Allows the app to access the backend API
State: Enabled

Note the scope URI:

api://12345678-1234-1234-1234-123456789abc/api_access

MSAL Configuration

Environment Configuration

Create environment files with MSAL config:

src/environments/environment.ts (Development)

export const environment = {
  production: false,

  auth: {
    clientId: '12345678-1234-1234-1234-123456789abc',
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: 'http://localhost:4200',
    postLogoutRedirectUri: 'http://localhost:4200/login',
    scopes: [
      'user.read',
      'api://12345678-1234-1234-1234-123456789abc/api_access'
    ]
  },

  api: {
    baseUrl: 'http://localhost:5000/api'
  }
};

src/environments/environment.capacitor.ts (Capacitor/Native)

export const environment = {
  production: true,

  auth: {
    clientId: '12345678-1234-1234-1234-123456789abc',
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: 'msauth.com.yourcompany.yourapp://auth',  // iOS
    // redirectUri: 'msauth://com.yourcompany.yourapp/signature', // Android
    postLogoutRedirectUri: 'msauth.com.yourcompany.yourapp://auth',
    scopes: [
      'user.read',
      'api://12345678-1234-1234-1234-123456789abc/api_access'
    ]
  },

  api: {
    baseUrl: 'https://api.yourapp.com/api'
  }
};

MSAL Configuration Factory

Create a factory function for MSAL configuration:

src/app/auth/msal-config.factory.ts

import { InjectionToken } from '@angular/core';
import {
  IPublicClientApplication,
  PublicClientApplication,
  BrowserCacheLocation,
  LogLevel,
  Configuration
} from '@azure/msal-browser';
import { Capacitor } from '@capacitor/core';
import { environment } from '../../environments/environment';

export const MSAL_INSTANCE = new InjectionToken<IPublicClientApplication>('MSAL_INSTANCE');

export function MSALInstanceFactory(): IPublicClientApplication {
  const isNative = Capacitor.isNativePlatform();

  const msalConfig: Configuration = {
    auth: {
      clientId: environment.auth.clientId,
      authority: environment.auth.authority,
      redirectUri: environment.auth.redirectUri,
      postLogoutRedirectUri: environment.auth.postLogoutRedirectUri,
      navigateToLoginRequestUrl: false  // Important for Capacitor!
    },
    cache: {
      cacheLocation: isNative ? BrowserCacheLocation.LocalStorage : BrowserCacheLocation.SessionStorage,
      storeAuthStateInCookie: false
    },
    system: {
      loggerOptions: {
        loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {
          if (containsPii) return;
          switch (level) {
            case LogLevel.Error:
              console.error('[MSAL]', message);
              break;
            case LogLevel.Warning:
              console.warn('[MSAL]', message);
              break;
            case LogLevel.Info:
              console.info('[MSAL]', message);
              break;
            case LogLevel.Verbose:
              console.debug('[MSAL]', message);
              break;
          }
        },
        logLevel: LogLevel.Verbose
      },
      allowNativeBroker: false,  // Important for mobile
      windowHashTimeout: 60000,
      iframeHashTimeout: 6000,
      loadFrameTimeout: 0
    }
  };

  return new PublicClientApplication(msalConfig);
}

Key Configuration Points:

navigateToLoginRequestUrl: false - Prevents MSAL from navigating after login (we handle it manually)
cacheLocation - LocalStorage for native (persistent), SessionStorage for web
allowNativeBroker: false - Disables native broker (Authenticator app) which doesn't work in WebView
windowHashTimeout/loadFrameTimeout - Adjusted for mobile performance

Authentication Service Implementation

Create a comprehensive authentication service:

src/app/auth/auth.service.ts

import { Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
import {
  IPublicClientApplication,
  AuthenticationResult,
  AccountInfo,
  InteractionRequiredAuthError,
  SilentRequest,
  PopupRequest,
  EndSessionRequest
} from '@azure/msal-browser';
import { BehaviorSubject, Observable, from, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Capacitor } from '@capacitor/core';
import { Browser } from '@capacitor/browser';
import { MSAL_INSTANCE } from './msal-config.factory';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private msalInstance = inject(MSAL_INSTANCE);
  private router = inject(Router);

  private isNative = Capacitor.isNativePlatform();

  // Observable state
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  private currentUserSubject = new BehaviorSubject<AccountInfo | null>(null);

  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
  public currentUser$ = this.currentUserSubject.asObservable();

  constructor() {
    this.initializeAuth();
  }

  /**
   * Initialize authentication state on app startup
   */
  private async initializeAuth(): Promise<void> {
    console.log('[AuthService] Initializing authentication...');

    if (this.isNative) {
      // Check for pending redirect (deep link)
      await this.handleRedirectPromise();
    } else {
      // Web: Standard MSAL redirect handling
      await this.msalInstance.handleRedirectPromise();
    }

    // Set initial auth state
    const accounts = this.msalInstance.getAllAccounts();
    if (accounts.length > 0) {
      this.msalInstance.setActiveAccount(accounts[0]);
      this.isAuthenticatedSubject.next(true);
      this.currentUserSubject.next(accounts[0]);
      console.log('[AuthService] User authenticated:', accounts[0].username);
    } else {
      console.log('[AuthService] No authenticated user found');
    }
  }

  /**
   * Handle redirect promise (deep link on native, standard redirect on web)
   */
  private async handleRedirectPromise(): Promise<AuthenticationResult | null> {
    try {
      if (this.isNative) {
        // Native: Check localStorage for pending redirect URL
        const pendingUrl = localStorage.getItem('msal_pending_redirect_url');

        if (pendingUrl) {
          console.log('[AuthService] Processing pending redirect:', pendingUrl);
          localStorage.removeItem('msal_pending_redirect_url');

          // Process the URL with MSAL
          const result = await this.msalInstance.handleRedirectPromise(pendingUrl);

          if (result) {
            this.msalInstance.setActiveAccount(result.account);
            this.isAuthenticatedSubject.next(true);
            this.currentUserSubject.next(result.account);
            console.log('[AuthService] Login successful:', result.account.username);

            // Navigate to home after successful login
            this.router.navigate(['/']);

            return result;
          }
        }
      } else {
        // Web: Standard MSAL redirect handling
        const result = await this.msalInstance.handleRedirectPromise();

        if (result) {
          this.msalInstance.setActiveAccount(result.account);
          this.isAuthenticatedSubject.next(true);
          this.currentUserSubject.next(result.account);
          console.log('[AuthService] Login successful:', result.account.username);

          return result;
        }
      }

      return null;
    } catch (error) {
      console.error('[AuthService] Error handling redirect:', error);
      return null;
    }
  }

  /**
   * Login - opens browser for authentication
   */
  async login(): Promise<void> {
    console.log('[AuthService] Starting login...');

    const loginRequest: PopupRequest = {
      scopes: environment.auth.scopes,
      prompt: 'select_account'
    };

    try {
      if (this.isNative) {
        // Native: Open system browser
        await this.loginWithBrowser(loginRequest);
      } else {
        // Web: Use redirect flow
        await this.msalInstance.loginRedirect(loginRequest);
      }
    } catch (error) {
      console.error('[AuthService] Login error:', error);
      throw error;
    }
  }

  /**
   * Native login: Open system browser for OAuth
   */
  private async loginWithBrowser(loginRequest: PopupRequest): Promise<void> {
    try {
      // Build OAuth authorization URL
      const authUrl = await this.buildAuthUrl(loginRequest);
      console.log('[AuthService] Opening browser with URL:', authUrl);

      // Open system browser
      await Browser.open({ url: authUrl });

      // Note: Deep link will be caught by native app and handled in AppDelegate/MainActivity
    } catch (error) {
      console.error('[AuthService] Error opening browser:', error);
      throw error;
    }
  }

  /**
   * Build OAuth authorization URL manually
   */
  private async buildAuthUrl(request: PopupRequest): Promise<string> {
    const params = new URLSearchParams({
      client_id: environment.auth.clientId,
      response_type: 'code',
      redirect_uri: environment.auth.redirectUri,
      scope: request.scopes?.join(' ') || 'openid profile',
      prompt: request.prompt || 'select_account',
      state: this.generateRandomString(32),
      nonce: this.generateRandomString(32)
    });

    return `${environment.auth.authority}/oauth2/v2.0/authorize?${params.toString()}`;
  }

  /**
   * Generate random string for state/nonce
   */
  private generateRandomString(length: number): string {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
  }

  /**
   * Logout - clears session and redirects to login
   */
  async logout(): Promise<void> {
    console.log('[AuthService] Logging out...');

    const logoutRequest: EndSessionRequest = {
      account: this.msalInstance.getActiveAccount() || undefined,
      postLogoutRedirectUri: environment.auth.postLogoutRedirectUri
    };

    try {
      // Clear local state
      this.isAuthenticatedSubject.next(false);
      this.currentUserSubject.next(null);

      if (this.isNative) {
        // Native: Clear cache and navigate
        await this.msalInstance.clearCache();
        this.router.navigate(['/login']);
      } else {
        // Web: Standard MSAL logout (redirects to Azure AD)
        await this.msalInstance.logoutRedirect(logoutRequest);
      }
    } catch (error) {
      console.error('[AuthService] Logout error:', error);
      throw error;
    }
  }

  /**
   * Get access token (silent or interactive)
   */
  getAccessToken(scopes?: string[]): Observable<string> {
    const account = this.msalInstance.getActiveAccount();

    if (!account) {
      console.error('[AuthService] No active account');
      return of('');
    }

    const silentRequest: SilentRequest = {
      scopes: scopes || environment.auth.scopes,
      account: account,
      forceRefresh: false
    };

    return from(this.msalInstance.acquireTokenSilent(silentRequest)).pipe(
      map((result: AuthenticationResult) => {
        console.log('[AuthService] Token acquired silently');
        return result.accessToken;
      }),
      catchError((error) => {
        console.warn('[AuthService] Silent token acquisition failed:', error);

        if (error instanceof InteractionRequiredAuthError) {
          // Interaction required - redirect to login
          console.log('[AuthService] Interaction required, redirecting to login...');
          this.login();
        }

        return of('');
      })
    );
  }

  /**
   * Get current account info
   */
  getAccount(): AccountInfo | null {
    return this.msalInstance.getActiveAccount();
  }

  /**
   * Check if user is authenticated
   */
  isAuthenticated(): boolean {
    return this.msalInstance.getAllAccounts().length > 0;
  }
}

Deep Link Handling (iOS)

iOS requires native code to handle deep links (OAuth redirects).

Step 1: Configure Info.plist

ios/App/App/Info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>msauth.com.yourcompany.yourapp</string>
        </array>
    </dict>
</array>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>msauthv2</string>
    <string>msauthv3</string>
</array>

Step 2: Handle Deep Links in AppDelegate

ios/App/App/AppDelegate.swift

import UIKit
import Capacitor

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        return true
    }

    // MARK: - Deep Link Handling

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        print("🔗 [DEEP LINK] App opened with URL: \(url.absoluteString)")

        // Check if it's an MSAL redirect
        if url.absoluteString.contains("msauth.com.yourcompany.yourapp://auth") {
            print("✅ [DEEP LINK] MSAL redirect detected")

            // Get Capacitor WebView
            if let bridge = (window?.rootViewController as? CAPBridgeViewController)?.bridge,
               let webView = bridge.webView {

                let fullUrl = url.absoluteString

                // Store URL in localStorage and reload
                let jsCode = """
                (function() {
                    console.log('🔗 [iOS→JS] Storing MSAL URL in localStorage: \(fullUrl)');
                    localStorage.setItem('msal_pending_redirect_url', '\(fullUrl)');
                    console.log('✅ [iOS→JS] Stored, reloading page...');
                    window.location.reload();
                })();
                """

                webView.evaluateJavaScript(jsCode) { result, error in
                    if let error = error {
                        print("❌ [DEEP LINK] Failed to execute JS: \(error)")
                    } else {
                        print("✅ [DEEP LINK] Successfully stored URL and triggered reload")
                    }
                }
            } else {
                print("⚠️ [DEEP LINK] Could not get Capacitor bridge or WebView")
            }
        }

        // Capacitor's default deep link handler
        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
    }

    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        // Universal Links handling
        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
    }
}

What this does:

Intercepts deep link URL when app opens
Stores the OAuth redirect URL in localStorage
Reloads the page so MSAL can process the redirect

Deep Link Handling (Android)

Android requires similar deep link handling in MainActivity.

Step 1: Configure AndroidManifest.xml

android/app/src/main/AndroidManifest.xml

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
    android:theme="@style/AppTheme"
    android:windowSoftInputMode="adjustResize">

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

    <!-- Deep Link Intent Filter for MSAL -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="msauth"
            android:host="com.yourcompany.yourapp"
            android:path="/signature" />
    </intent-filter>
</activity>

Step 2: Handle Deep Links in MainActivity

android/app/src/main/java/com/yourcompany/yourapp/MainActivity.java

package com.yourcompany.yourapp;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Handle deep link on app launch
        handleDeepLink(getIntent());
    }

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);

        // Handle deep link when app is already running
        handleDeepLink(intent);
    }

    private void handleDeepLink(Intent intent) {
        if (intent == null) return;

        Uri data = intent.getData();
        if (data != null) {
            String url = data.toString();
            Log.d(TAG, "🔗 [DEEP LINK] Received: " + url);

            // Check if it's an MSAL redirect
            if (url.contains("msauth://com.yourcompany.yourapp")) {
                Log.d(TAG, "✅ [DEEP LINK] MSAL redirect detected");

                // Store URL in localStorage via JavaScript
                String jsCode = String.format(
                    "(function() {" +
                    "  console.log('🔗 [Android→JS] Storing MSAL URL: %s');" +
                    "  localStorage.setItem('msal_pending_redirect_url', '%s');" +
                    "  console.log('✅ [Android→JS] Stored, reloading...');" +
                    "  window.location.reload();" +
                    "})();",
                    url, url
                );

                bridge.getWebView().post(() -> {
                    bridge.getWebView().evaluateJavascript(jsCode, null);
                });
            }
        }
    }
}

Login Flow

Login Component

src/app/pages/login/login.component.ts

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../auth/auth.service';

@Component({
  selector: 'app-login',
  template: `
    <div class="login-container">
      <div class="login-card">
        <h1>Welcome</h1>
        <p>Please sign in to continue</p>

        <button
          class="btn-login"
          (click)="login()"
          [disabled]="isLoggingIn">
          <span *ngIf="!isLoggingIn">Sign in with Microsoft</span>
          <span *ngIf="isLoggingIn">Signing in...</span>
        </button>

        <p class="error" *ngIf="errorMessage">
          {{ errorMessage }}
        </p>
      </div>
    </div>
  `,
  styles: [`
    .login-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .login-card {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
      text-align: center;
      max-width: 400px;
      width: 100%;
    }

    h1 {
      margin-bottom: 0.5rem;
      color: #333;
    }

    p {
      color: #666;
      margin-bottom: 2rem;
    }

    .btn-login {
      background: #0078d4;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      width: 100%;
      transition: background 0.3s;
    }

    .btn-login:hover:not(:disabled) {
      background: #006cbd;
    }

    .btn-login:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .error {
      color: #d32f2f;
      margin-top: 1rem;
    }
  `]
})
export class LoginComponent {
  private authService = inject(AuthService);
  private router = inject(Router);

  isLoggingIn = false;
  errorMessage = '';

  async login(): Promise<void> {
    try {
      this.isLoggingIn = true;
      this.errorMessage = '';

      await this.authService.login();

      // Note: Redirect will happen automatically after OAuth completes
    } catch (error: any) {
      this.errorMessage = 'Login failed. Please try again.';
      console.error('[Login] Error:', error);
      this.isLoggingIn = false;
    }
  }
}

Auth Guard

Protect routes that require authentication:

src/app/auth/auth.guard.ts

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';
import { AuthService } from './auth.service';
import { map, take } from 'rxjs/operators';

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  return authService.isAuthenticated$.pipe(
    take(1),
    map(isAuthenticated => {
      if (isAuthenticated) {
        return true;
      } else {
        console.log('[AuthGuard] User not authenticated, redirecting to login');
        router.navigate(['/login']);
        return false;
      }
    })
  );
};

Usage in routes:

import { Routes } from '@angular/router';
import { authGuard } from './auth/auth.guard';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [authGuard]  // Protected route
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '**', redirectTo: '/login' }
];

Token Management

HTTP Interceptor

Automatically attach JWT tokens to API requests:

src/app/auth/auth.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { switchMap, take, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);

  // Skip token for non-API requests
  if (!req.url.includes('/api/')) {
    return next(req);
  }

  // Get token and attach to request
  return authService.getAccessToken().pipe(
    take(1),
    switchMap(token => {
      if (token) {
        const clonedRequest = req.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
        return next(clonedRequest);
      } else {
        return next(req);
      }
    }),
    catchError(error => {
      console.error('[AuthInterceptor] Error getting token:', error);
      return throwError(() => error);
    })
  );
};

Register interceptor in app config:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './auth/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor])
    )
  ]
};

Testing the Implementation

Manual Testing Checklist

Web (Browser)

Login Flow:

   npm start
   # Navigate to http://localhost:4200
   # Click "Sign in with Microsoft"
   # Should redirect to Microsoft login
   # After login, should redirect back to app

Check Console:

   [AuthService] Initializing authentication...
   [AuthService] Login successful: user@example.com
   [AuthService] Token acquired silently

Verify Token:
- Open DevTools → Application → Local Storage
- Should see MSAL cache entries

iOS

Build and Run:

   npm run build
   npx cap sync ios
   npx cap open ios
   # Run from Xcode on physical device or simulator

Test Login:
- Tap "Sign in with Microsoft"
- Should open Safari browser
- Complete login
- Should redirect back to app
- Check Xcode console for deep link logs
Expected Console Output:

   🔗 [DEEP LINK] App opened with URL: msauth.com.yourcompany.yourapp://auth?code=...
   ✅ [DEEP LINK] MSAL redirect detected
   ✅ [DEEP LINK] Successfully stored URL and triggered reload
   [AuthService] Processing pending redirect
   [AuthService] Login successful: user@example.com

Android

Build and Run:

   npm run build
   npx cap sync android
   npx cap open android
   # Run from Android Studio on emulator or device

Test Login:
- Same flow as iOS
- Check Android Logcat for deep link logs

Automated Tests

Unit test for AuthService:

import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
import { MSAL_INSTANCE } from './msal-config.factory';

describe('AuthService', () => {
  let service: AuthService;
  let msalInstanceMock: any;

  beforeEach(() => {
    msalInstanceMock = {
      getAllAccounts: jasmine.createSpy('getAllAccounts').and.returnValue([]),
      handleRedirectPromise: jasmine.createSpy('handleRedirectPromise').and.returnValue(Promise.resolve(null)),
      setActiveAccount: jasmine.createSpy('setActiveAccount')
    };

    TestBed.configureTestingModule({
      providers: [
        AuthService,
        { provide: MSAL_INSTANCE, useValue: msalInstanceMock }
      ]
    });

    service = TestBed.inject(AuthService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should initialize with no authenticated user', (done) => {
    service.isAuthenticated$.subscribe(isAuth => {
      expect(isAuth).toBeFalse();
      done();
    });
  });
});

Troubleshooting

Common Issues

1. "Redirect URI mismatch"

Error:

AADSTS50011: The redirect URI 'msauth.com.yourcompany.yourapp://auth'
specified in the request does not match the redirect URIs configured
for the application.

Solution:

Double-check redirect URI in Azure AD App Registration
Ensure it exactly matches the one in your code
iOS: Check Info.plist CFBundleURLSchemes
Android: Check AndroidManifest.xml intent-filter

2. Deep link not opening app

iOS:

Verify URL scheme is registered in Info.plist
Check that AppDelegate.swift handles the URL
Test with: xcrun simctl openurl booted "msauth.com.yourcompany.yourapp://auth"

Android:

Verify intent-filter in AndroidManifest.xml
Check MainActivity.java handles the intent
Test with: adb shell am start -W -a android.intent.action.VIEW -d "msauth://com.yourcompany.yourapp/signature"

3. Token acquisition fails silently

Cause: MSAL silent token refresh requires iframe, which doesn't work in Capacitor WebView

Solution:

// In auth.service.ts, modify acquireTokenSilent:
const silentRequest: SilentRequest = {
  scopes: scopes || environment.auth.scopes,
  account: account,
  forceRefresh: true  // Always use refresh token, not iframe
};

4. "localStorage not defined" error

Cause: MSAL tries to access localStorage before it's available

Solution:

// In msal-config.factory.ts:
cache: {
  cacheLocation: typeof localStorage !== 'undefined'
    ? BrowserCacheLocation.LocalStorage
    : BrowserCacheLocation.MemoryStorage,
  storeAuthStateInCookie: false
}

5. CORS errors with MSAL and API

This is the #1 issue when implementing MSAL in Capacitor!

Cause: Azure AD (login.microsoftonline.com) rejects capacitor://localhost origin during MSAL token exchange

🔴 SOLUTION: See the CRITICAL: CapacitorHttp Configuration section at the top of this guide.

Quick summary:

Native apps MUST enable CapacitorHttp in capacitor.config.ts. This automatically patches ALL HTTP requests (including MSAL token exchange with Azure AD!) to use native HTTP which bypasses CORS completely.

⚠️ WITHOUT THIS CONFIG, MSAL AUTHENTICATION WILL FAIL WITH CORS ERROR!

The problem:

MSAL.js → fetch('https://login.microsoftonline.com/token')
Request Origin: capacitor://localhost
Azure AD Response: CORS error (Origin not allowed)
Result: Authentication fails ❌

The solution:

MSAL.js → CapacitorHttp patch → Native HTTP (no Origin header)
Azure AD Response: 200 OK ✅
Result: Authentication succeeds!

File: capacitor.config.ts

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'YourApp',
  webDir: 'dist',

  plugins: {
    CapacitorHttp: {
      enabled: true, // 🔴 CRITICAL: Enable native HTTP (bypasses CORS)
    },
  },
};

export default config;

Why this works:

✅ Zero code changes - MSAL.js works without modifications
✅ Automatic patching - All fetch/XHR/HttpClient requests use native HTTP
✅ No CORS errors - Native HTTP doesn't send Origin header
✅ Transparent - Your Angular code doesn't know the difference

What gets automatically patched:

✅ MSAL.js token requests
✅ Angular HttpClient
✅ JavaScript fetch()
✅ XMLHttpRequest
✅ All third-party libraries

❌ DON'T create wrapper services - they're unnecessary and won't help with MSAL!

Note about Backend CORS:

With CapacitorHttp: { enabled: true }, your backend doesn't need CORS configuration for native apps because:

Native HTTP doesn't send Origin header
CORS is a browser security feature, not native app concern

You only need CORS if:

Testing in web browser (not native app)
Supporting web version of your app alongside mobile

// ASP.NET Core - ONLY if you also have a web version
builder.Services.AddCors(options => {
    options.AddPolicy("AllowWeb", policy => {
        policy.WithOrigins("http://localhost:4200")  // Web dev server only
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials();
    });
});

// ❌ Don't add capacitor://localhost - it's never used with CapacitorHttp enabled!

Security Best Practices

1. Token Storage

DO:

✅ Use LocalStorage for native apps (persistent across restarts)
✅ Use SessionStorage for web apps (cleared on browser close)
✅ Let MSAL handle token storage (it encrypts sensitive data)

DON'T:

❌ Store tokens in plain cookies
❌ Store tokens in unencrypted files
❌ Log tokens to console in production

2. Scope Management

Principle of Least Privilege:

// Request only scopes your app needs
scopes: [
  'user.read',                    // User profile
  'api://your-api/api_access'     // Your API access
]

// Don't request excessive scopes
// ❌ scopes: ['user.read', 'mail.send', 'files.readwrite', ...]

3. Token Refresh

Proactive refresh before expiration:

getAccessToken(scopes?: string[]): Observable<string> {
  const silentRequest: SilentRequest = {
    scopes: scopes || environment.auth.scopes,
    account: account,
    forceRefresh: false,  // Let MSAL decide based on token expiry
    // MSAL automatically refreshes if token expires in <5 minutes
  };

  return from(this.msalInstance.acquireTokenSilent(silentRequest)).pipe(
    map(result => result.accessToken)
  );
}

4. Logout Cleanup

Always clear all auth state:

async logout(): Promise<void> {
  // 1. Clear MSAL cache
  await this.msalInstance.clearCache();

  // 2. Clear local state
  this.isAuthenticatedSubject.next(false);
  this.currentUserSubject.next(null);

  // 3. Clear any app-specific storage
  localStorage.removeItem('user_preferences');

  // 4. Navigate to login
  this.router.navigate(['/login']);
}

5. Production Configuration

Disable verbose logging:

system: {
  loggerOptions: {
    logLevel: environment.production ? LogLevel.Error : LogLevel.Verbose
  }
}

Use HTTPS in production:

// environment.prod.ts
auth: {
  redirectUri: 'https://yourapp.com',  // Not http://
  postLogoutRedirectUri: 'https://yourapp.com/login'
}

Conclusion

Implementing MSAL authentication in a Capacitor Angular app requires careful handling of platform differences, deep links, and token management. This guide covered:

✅ Azure AD app registration
✅ MSAL configuration for web and native
✅ Authentication service with platform detection
✅ Deep link handling (iOS and Android)
✅ Login/logout flows
✅ Token management and refresh
✅ HTTP interceptor for API requests
✅ Testing and troubleshooting
✅ Security best practices

Key Takeaways

🔴 CapacitorHttp is MANDATORY - Enable CapacitorHttp in capacitor.config.ts or MSAL will fail with CORS errors. This is the #1 issue and must be configured first.
Platform Detection is Critical - Always check Capacitor.isNativePlatform() and handle web/native differently
Deep Links Are Essential - Native apps can't use standard redirects; OAuth must go through deep links
localStorage Bridge - Use localStorage to pass OAuth redirects from native code to MSAL
Silent Refresh Requires Refresh Tokens - iframes don't work in WebView, so use refresh tokens
Test on Physical Devices - Simulators/emulators may not handle deep links correctly

Next Steps

Add biometric authentication (fingerprint/Face ID)
Implement token caching optimization
Add offline authentication support
Set up automated E2E tests
Monitor authentication analytics

Resources

Published: February 16, 2026
Author: Václav Švára
Generated with assistance from: Claude (Anthropic AI)
License: MIT

Did you find this guide helpful? Share your experience or questions in the comments below!

DEV Community: Vaclav Svara

[Boost]

Firebase Push Notifications in Capacitor Angular Apps: The Complete Implementation Guide

Vaclav Svara ・ Feb 21

Firebase Push Notifications in Capacitor Angular Apps: The Complete Implementation Guide

Table of Contents

Introduction

What You'll Learn

Architecture Overview

High-Level Flow

Token Flow

Prerequisites

Required Accounts

Development Environment

Required Packages

Firebase Project Setup

Step 1: Create Firebase Project

Step 2: Add iOS App

Step 3: Add Android App

Step 4: Enable Cloud Messaging

iOS Configuration

The APNs Certificate vs Authentication Key Dilemma

Creating APNs Certificates

Step 1: Register App ID in Apple Developer

Step 2: Generate Certificate Signing Request (CSR)

Step 3: Create APNs Certificate

Step 4: Install Certificate to Keychain

Step 5: Export as .p12 File

Step 6: Upload to Firebase Console

Step 7: Remove APNs Authentication Keys (If Present)

iOS Native Implementation

Step 1: Add GoogleService-Info.plist to Xcode

Step 2: Install Firebase Pods

Step 3: Enable Capabilities in Xcode

Step 4: Configure Info.plist

Step 5: Implement AppDelegate.swift

Android Configuration

Step 1: Add google-services.json

Step 2: Configure build.gradle Files

Step 3: Sync Capacitor

Angular Service Implementation

File: src/app/services/push-notification.service.ts

Initialize Service in App Component

Backend Integration

Database Schema

API Endpoint to Save Token

Install Firebase Admin SDK

Initialize Firebase Admin SDK

Example Usage

Testing Push Notifications

Test from Firebase Console

Test Scenarios

1. Foreground Notification (App Open)

2. Background Notification (App in Background)

3. Killed App Notification (App Closed)

Debugging Tips

Common Issues and Solutions

Issue 1: "0 sends" in Firebase Console

Issue 2: iOS Notifications Not Appearing

Issue 3: FCM Token is null/undefined

Issue 4: Notifications Work Sometimes

Issue 5: Android Notifications Don't Vibrate/Sound

Production Considerations

1. Certificate Expiration Management

2. Token Management Best Practices

3. Notification Delivery Tracking

4. Rate Limiting

5. User Preferences

Conclusion

Key Takeaways

What We Built

Next Steps

Resources

Microsoft Authentication (MSAL) in Capacitor Angular Apps: A Complete Guide

Table of Contents

Introduction

The Challenge

Why is MSAL different in Capacitor?

What we'll build

🔴 CRITICAL: CapacitorHttp Configuration

File: `src/app/services/push-notification.service.ts`