How to use sendEmailVerification() function in angular

Question

I'm trying to make an email verification email using Angular and Google Firebase API. I found sendEmailVerification() function from this link but I'm not sure how it should be used or where to put that function so i just made a new function in my service.ts file and am not sure either i write the function correctly or not. Can someone help me, please?

//auth.service.ts
private authState: any = null;

get currentUserId(): string {
  return (this.authState !== null) ? this.authState.uid : ''
}

signUpWithEmail(email: string, password: string) {
  return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
    .then((user) => {
      this.authState;
    })
    .catch(error => {
      console.log(error)
      throw error
    });
}

emailVerfication() {
  this.authState.auth.getAuth().auth.sendEmailVerification();
}

//app.component.ts
onSignUp(): void {
  //this.clearErrorMessage()
  if (this.validateForm(this.email, this.password)) {
    this.AuthService.signUpWithEmail(this.email, this.password).catch(error => {
      this.error = error
    });
    //this.AuthService.emailVerfication();
  } else {
    this.AuthService.emailVerfication();
  }
}

<form (ngSubmit)="onSignUp()">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="email" required [(ngModel)]="email">
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" required [(ngModel)]="password">
  </div>

  <button type="submit" class="btn btn-success">Register</button>
</form>

I got no error message, but the verification email didn't appear to my email account. Please let me know if more snippets are needed.

Answer 1

I know this is a old question but thought I would throw up this answer in case anyone stumbles with the same problem. I have been working on the same issue myself the last couple of days. I am no expert with Angular and Typescript so if there is any mistakes I apologise in advance. Anyway here is how I accomplished it.

First in my AuthService I have my signup function which calls the Firebase function 'createUserWithEmailAndPassword' then I grab the current user and run the 'sendEmailVerification' function this can be seen below.

signup(email: string, password: string) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
        .then(() => this.afAuth.auth.currentUser.sendEmailVerification()
            .then(() => {
                console.log('Please verify your email');
                alert('Please verify your email');
            }).catch((error) => {
                console.log('Error: ' + error);
            }));
}

This worked grand and would send a verification email, but users were still able to navigate through the application even if they had not verified the email address yet. To prevent this I created a route guard which implements CanActivate as follows.

@Injectable()
export class RouteGuard implements CanActivate {

    constructor(private authService: AuthService, private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (!this.authService.authenticated) {
            this.router.navigate(['/']);
        }
        return this.authService.authenticated;
    }
}

Add the route guard to your providers:[] in your app-module file.

providers: [
    RouteGuard,
    ...
]

Then within app-routing.module.ts I added the route guard to the paths I wanted to secure.

const appRoutes: Routes = [
    {path: 'welcome', component: WelcomeComponent},
    {path: 'login', component: LoginComponent},
    {path: 'signup', component: SignUpComponent},
    {path: 'home', component: HomeComponent},
    {path: 'messages', component: MessagesComponent, canActivate: [RouteGuard]},
    {path: 'private', component: PrivateComponent, canActivate: [RouteGuard]},
    {path: '**', redirectTo: 'welcome', pathMatch: 'full'}
];

Hope that this helps.