How can I use Firebase's signInWithCustomToken method with Angular 17 and @angular/fire 17.0.0?

Question

So, I have some firebase functions and endpoints I want to send requests to from my angular frontend. One of the endpoints creates a custom token via createCustomToken and returns it to the frontend. Then from the frontend I want to use the signInWithCustomToken method to authenticate the token. The issue is I'm getting this error:

AngularFireModule has not been provided in your AppModule (this can be done manually or 
implictly using provideFirebaseApp) or you're calling an AngularFire method outside of 
an NgModule (which is not supported).

I can't figure it out at all, my app.config.ts is this:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { DatePipe } from '@angular/common';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { firebaseConfig } from '../../firebase.config';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    importProvidersFrom(
      provideFirebaseApp(
        () => initializeApp(firebaseConfig)
      ), provideFirestore(
        () => getFirestore()
      ), provideStorage(
        () => getStorage()
      ), provideAuth(
        () => getAuth()
      )),
    provideAnimations(),
    provideHttpClient(),
    DatePipe
  ],
};

and I'm trying to call the method in my frontend service file like this:

import { getAuth, signInWithCustomToken } from "@angular/fire/auth";
// rest of component...
signInWithCustomToken(getAuth(), this.getToken())

Answer 1

There is no need to add importProvider when using provideFirebaseApp.

Remove importProvider from the below code and try:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
      provideFirebaseApp(
        () => initializeApp(firebaseConfig)
      ), 
      provideFirestore(
        () => getFirestore()
      ), 
      provideStorage(
        () => getStorage()
      ), 
      provideAuth(
        () => getAuth()
      ),
    provideAnimations(),
    provideHttpClient(),
    DatePipe
  ],
};