I’m trying to use Firebase authentication in Ionic TypeScript application
Here is signIn()
, checks if email verified with condition if (this.authService.userEmailVerified)
:
async signIn() {
const loading = await this.loadingController.create();
await loading.present();
this.authService.signIn(this.credentialForm.value).then(
(res) => {
loading.dismiss();
if (this.authService.userEmailVerified) {
this.router.navigateByUrl(
'/home/' + this.credentialForm.value.email,
{
replaceUrl: true,
}
);
} else {
window.alert('Email is not verified');
return false;
}
},
async (err) => {
loading.dismiss();
const alert = await this.alertController.create({
header: 'Error',
message: err.message,
buttons: ['OK'],
});
await alert.present();
}
);
}
requesting public authService: AuthenticationService
load import { AuthenticationService } from '../shared/auth.service';
in auth.service.ts
:
get userEmailVerified(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return user.emailVerified !== false ? true : false;
}
Email is verified, and now with browser load, I’m trying to signIn()
, but Chrome console shows error:
ERROR Error: Uncaught (in promise): TypeError: Cannot
read property ‘emailVerified’ of null TypeError: Cannot read property
‘emailVerified’ of null
at AuthenticationService.get userEmailVerified [as userEmailVerified]
with second attempt signIn()
is successful and this.authService.userEmailVerified
value is true
.
Then signOut()
and again signIn()
and same way error appears, seems like uncatchable with if (this.authService.userEmailVerified == null)
or === null
before if (this.authService.userEmailVerified)
, with return user.emailVerified !== false ? true : false;
from auth.service.ts
, and then again error just disappears with second click attempt, successfully signIn()
.
login.page.ts
signUp()
:
async signUp() {
const loading = await this.loadingController.create();
await loading.present();
this.authService.signUp(this.credentialForm.value).then(
(user) => {
loading.dismiss();
this.authService.SendVerificationMail();
this.router.navigate(['verify-email']);
},
async (err) => {
loading.dismiss();
const alert = await this.alertController.create({
header: 'Sign up failed',
message: err.message,
buttons: ['OK'],
});
await alert.present();
}
);
}
and auth.service.ts
:
export class AuthenticationService {
userData: any;
constructor(
public afStore: AngularFirestore,
public ngFireAuth: AngularFireAuth,
public router: Router,
public ngZone: NgZone
) {
this.ngFireAuth.authState.subscribe((user) => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
});
}
get userEmailVerified(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return user.emailVerified !== false ? true : false;
}
SignOut(): Promise<void> {
return this.ngFireAuth.signOut().then(() => {
localStorage.removeItem('user');
this.router.navigate(['login']);
});
}
async signUp({ email, password }) {
const credential = await this.ngFireAuth.createUserWithEmailAndPassword(
email,
password
);
const uid = credential.user.uid;
return this.afStore
.doc('users/${uid}')
.set({ uid, email: credential.user.email });
}
async signIn({ email, password }) {
return this.ngFireAuth.signInWithEmailAndPassword(email, password);
}
}
Advice would be helpful