Problemas con Firebase App Check en iOS Usando Capacitor

La implementación de Firebase App Check en proyectos que utilizan Capacitor puede presentar desafíos, especialmente cuando se trata de aplicaciones para iOS. Este artículo se centra en los problemas potenciales al integrar App Check y proporciona sugerencias sobre cómo resolverlos.

Integración de Firebase App Check en Angular

Al trabajar con Capacitor y Angular, la estructura del código se comparte tanto para la aplicación web como para la aplicación de iOS. La configuración inicial para la versión web incluye la llamada a provideAppCheck() en la sección de imports de tu módulo Angular. A continuación se muestra un ejemplo de cómo se configura:

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => initializeAppCheck(undefined, {
  provider: new ReCaptchaV3Provider('KEY'),
  isTokenAutoRefreshEnabled: true 
})),
provideAuth(() => {
  if (Capacitor.isNativePlatform()) {
    return initializeAuth(getApp(), {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    return getAuth();
  }
}),
provideDatabase(() => getDatabase()),

Esta configuración permite que la aplicación web acceda a la Base de Datos en Tiempo Real con App Check activado.

Implementación en iOS con @capacitor-firebase/app-check

Para la versión de iOS, es recomendable usar @capacitor-firebase/app-check. La inicialización se lleva a cabo en el constructor de AppModule, junto con la configuración necesaria en Xcode:

export class AppModule {
  constructor() {
    if (Capacitor.getPlatform() !== 'web') {
      this.initialize_app_check();
    }
  }

  private async initialize_app_check() {
    try {
      const options: InitializeOptions = {
        debug: false,
      };
      await FirebaseAppCheck.initialize(options);

      const toOptions: GetTokenOptions = {
        forceRefresh: true,
      };

      const { token } = await FirebaseAppCheck.getToken(toOptions);
      console.log(token);
    } catch (e) {
      console.error(e);
    }
  }
}

Problemas con el Token de App Check en iOS

Aunque FirebaseAppCheck.initialize() genera un token que se muestra en la consola, al intentar acceder a la Base de Datos en Tiempo Real desde la aplicación de iOS, aparece un aviso de que no existe un token y, por lo tanto, se bloquea el acceso.

Incluso al verificar manualmente el token antes de hacer la solicitud a la base de datos, el problema persiste:

const token = await this.getAppCheckToken();
if (!token) {
  console.error('Missing App Check token');
  return;
}

const lp_ref = ref(this.database, `/functionale/${this.current_app}/home/last_published`);
const snapshot = await get(lp_ref);

El mensaje que se registra es: @firebase/database: FIREBASE WARNING: Missing appcheck token. A pesar de la correcta generación del token, la llamada a la base de datos sigue fallando.

Solicitudes de Asistencia

Si estás enfrentando problemas similares, aquí hay algunas preguntas que pueden guiar tu búsqueda de soluciones:

• ¿Por qué el token no es reconocido en iOS, a pesar de que aparece en los registros?
• ¿Cómo se puede adjuntar correctamente el token de App Check a las solicitudes de Firebase Database en aplicaciones Angular basadas en Capacitor?

Resolver estos problemas es fundamental para asegurar que tu aplicación mantenga su seguridad y funcionalidad en diferentes plataformas. Es recomendable revisar la documentación de Firebase y Capacitor, así como consultar la comunidad y foros relacionados para obtener más información y ayuda.