2

I'm running into an odd problem with my Ionic/angular app. I'm using

  • "@angular/core": "~13.2.2"
  • "@capacitor/core": "3.4.0"
  • "@capacitor/ios": "3.4.0"
  • "@angular/fire": "^7.2.0"
  • "firebase": "^9.6.6",

It works well on the web-version and Android, but when I compile to iOS, I only get a blank screen. I've narrowed the problem down to the auth-guard

I have tried using

  • the @angular/fire/compat/authguard - blank screen
  • not using any guard - works fine
  • writing my own guard and always returning true - works fine
  • writing my own guard, code below - blank screen

Here are the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../guards/auth.guard';
import { AutoLoginGuard } from '../guards/auto-login.guard';
import { TabsPage } from './tabs.page';
const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },
      {
        path: 'dashboard',
        loadChildren: () =>
          import('../pages/dashboard/dashboard.module').then(
            (m) => m.DashboardPageModule
          ),
        canActivate: [AuthGuard],
      },
      {
        path: 'welcome',
        loadChildren: () =>
          import('../pages/welcome/welcome.module').then(
            (m) => m.WelcomePageModule
          ),
        canActivate: [AutoLoginGuard],
      },
      {
        path: 'login',
        loadChildren: () =>
          import('../pages/login/login.module').then((m) => m.LoginPageModule),
        canActivate: [AutoLoginGuard],
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}

and the auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Auth, onAuthStateChanged } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private auth: Auth, private router: Router) {}

  canActivate(): Promise<boolean> {
    return new Promise(async (resolve, reject) => {
      onAuthStateChanged(this.auth, async (user) => {
        if (user) {
          console.log('User authenticated');
          resolve(true);
        } else {
          console.log('User redirected to login');
          this.router.navigateByUrl('/', { replaceUrl: true });
          reject(false);
        }
      });
    });
  }
}

Any idea what might be causing this issue?

Dennis V
  • 51
  • 3

1 Answers1

3

Found the answer (or rather Simon Grimm did): it's a bug in the capacitor SDK. When initializing the auth module you have to adjust for Capacitor:

app.module.ts:

import { Capacitor } from '@capacitor/core';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { getApp } from 'firebase/app';

...
imports: [ ...

provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
...
]
Dennis V
  • 51
  • 3