Issue with Ionic and Firebase Auth

Appflow
1

I am getting this when I add in the signInWithEmailAndPassword or createUserWithEmailAndPassword

Error: Uncaught (in promise): Error: Your API key is invalid, please check you have copied it correctly.

I am using firebase with ionic. I am using AngularFireAuth, and have the credentials in a const FIREBASE_CONFIG = {
apiKey: “XXXXXXXXXXX”,
authDomain: “XXXXXXXX”,
databaseURL: “XXXXXXXXX”,
projectId: “XXXXXXXXX”,
storageBucket: “XXXXXXXX”,
messagingSenderId: “XXXXXXXXX”
}
All of these copied from the firebase include in webapp. multiple times to make sure they are correct.

Has anyone else been experiencing issues with the latest update to firebase?

2

No. What’s your app.module.ts?

3

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { firebase } from “@firebase/app”;
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { FIREBASE_CONFIG } from ‘./app.firebase.config’;

@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(FIREBASE_CONFIG),
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

4

And you’re using the most recent AngularFire2, and the version of Firebase that is bundled with it?

5

yes just checked and installed again to make sure

6

That looks good. Maybe your sign in code has an issue?

7

this is the register.ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { AngularFireAuth } from ‘angularfire2/auth’;
import { User } from ‘…/…/models/user’;

/**

@IonicPage()
@Component({
selector: ‘page-register’,
templateUrl: ‘register.html’,
})
export class RegisterPage {

user = {} as User;

constructor(private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
}

async register(user: User) {
try {
const result = await this.afAuth.auth.createUserWithEmailAndPassword(user.email, user.password);
console.log(result);
}
catch (e) {
console.error(e);
}
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad RegisterPage’);
}

}

8

the login.ts is similar using signInWithEmailAndPassword(user.email, user.password) within a login function