What I'm using
- Angular
- Firebase
What I have
- Some HTML that allows the user to change their email by entering a new email and their existing password
- When the new email and password are entered, they are passed to an auth service to run the updateEmail method
- If the user enters and incorrect password, the console logs the following error:
core.es5.js:1020 ERROR O {code: "auth/wrong-password", message: "The password is invalid or the user does not have a password."}
Question
- How can I present an error message like this, or a custom one when this error happens? (through a standard JS alert)
My Auth Service
updateEmailAddress(email: string, password: string) {
const currentUser = firebase.auth().currentUser;
const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);
currentUser.reauthenticateWithCredential(credentials).then(function () {
currentUser.updateEmail(email).then(function () {
currentUser.sendEmailVerification().then(function () {
// Email Sent
}).catch(function (error) {
// An error happened.
});
}).catch(function (error) {
// An error happened.
});
});
}
Update
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class AuthService {
user: Observable<firebase.User>;
redirectUrl: string;
constructor(
private firebaseAuth: AngularFireAuth,
private router: Router) {
this.user = firebaseAuth.authState;
}
// Login Form
login(email: string, password: string): Observable<boolean> {
this.firebaseAuth.auth
.signInWithEmailAndPassword(email, password)
.then(value => {
this.router.navigate(['projects']);
return Observable.of(true);
})
.catch(err => {
console.log('Something went wrong:', err.message);
return Observable.of(false);
});
return;
}
// Account Management - Re-authenticate the user using the current email and current password, then call the update email and email verification methods
updateEmailAddress(email: string, password: string) {
const currentUser = firebase.auth().currentUser;
const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);
currentUser.reauthenticateWithCredential(credentials).then(function () {
currentUser.updateEmail(email).then(function () {
currentUser.sendEmailVerification().then(function () {
// Email Sent
}).catch(function (error) {
// An error happened.
});
}).catch(function (error) {
// An error happened.
alert(ErroAuthEn.convertMessage(error['code']));
});
});
}
// Log out of Apollo
logout() {
this.firebaseAuth.auth.signOut();
this.router.navigate(['login']);
}
// A method to use to check if the user is logged in or not
isLoggedIn(): boolean {
console.log(!!this.firebaseAuth.auth.currentUser);
return !!this.firebaseAuth.auth.currentUser;
}
}
export namespace ErroAuthEn {
export function convertMessage(code: string): string {
console.log('called');
switch (code) {
case 'auth/user-disabled': {
return 'Sorry your user is disabled.';
}
case 'auth/user-not-found': {
return 'Sorry user not found.';
}
case 'auth/wrong-password': {
return 'Sorry, incorrect password entered. Please try again.';
}
default: {
return 'Login error try again later.';
}
}
}
}