Need an email verification request through firebase

Need help with sending email verification upon user sign up. Here is the code in provider/user.ts:

onCreate(form: NgForm) {
var user = new User();
user.name = form.value.name;
user.email = form.value.email;
user.contact = form.value.contact;

if(form.value.gender == "male") {
  user.gender = "male";
} else {
  user.gender = "female"
}
let loading = this.mProv.getLoader('Creating your account...', 0);
loading.present();
this.afAuth.auth.createUserWithEmailAndPassword(form.value.email, form.value.password)
.then( res=> {
  let user = firebase.auth().currentUser;
  user.sendEmailVerification();
})
  .then(data => {
    user.id = data.uid;
    this.userProvider.addUser(user)
      .then(_ =>
        loading.dismiss()
      )
      .catch(error => {
        loading.dismiss();
        this.mProv.showAlertOkMessage('Error','Sign up error. Please try again later.');
      });
  })
  .catch(error => {
    loading.dismiss();
    this.mProv.showAlertOkMessage('Error','Sign up error. Please try again later.');
  });
}

Struggling to find the right place to put user.sendEmailVerification, as data.uid shows red underline when placed within:

 .then( res=> {
  let user = firebase.auth().currentUser;
  user.sendEmailVerification();
})

Your assistance would be greatly appreciated.

Answer №1

When you utilize .then(data => { ... }), the value for data is determined by what was returned from the preceding step in the sequence. However, the addition of user.sendEmailVerification() does not yield any output. If you prefer not to wait for the completion of user.sendEmailVerification(), consider integrating that code into the subsequent step instead of creating a separate stage:

this.afAuth.auth.createUserWithEmailAndPassword(form.value.email, form.value.password)
  .then(data => {
    let firebaseUser = firebase.auth().currentUser;
    firebaseUser.sendEmailVerification();
    user.id = data.uid;
    this.userProvider.addUser(user)
      .then(_ =>
        loading.dismiss()
      )
      .catch(error => {
        loading.dismiss();
        this.mProv.showAlertOkMessage('Error','Sign up error. Please try again later.');
      });
  })
  .catch(error => {
    loading.dismiss();
    this.mProv.showAlertOkMessage('Error','Sign up error. Please try again later.');
  });

Alternatively, you could opt for using async/await in place of then for a more straightforward programming approach. Check out this basic tutorial on the topic or conduct a simple web search for additional resources.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a string array to an object leads to an issue where the element implicitly has an 'any' type, as the expression of type 'string' cannot be used to index the type '{}'

Hey there, I have some code that looks like this: export type Options = Record<string, string> export type CheckboxValue<T extends Options> = Partial< Record<keyof T, boolean> > export type Checkbox<T extends Options> = ...

Understanding how to infer the type of a function when it is passed as an argument

Looking at the images below, I am facing an issue with my function that accepts options in the form of an object where one of the arguments is a transform function. The problem is that while the type of the response argument is correctly inferred for the e ...

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Struggling to get my Sony Z2 smartphone app running. Command used: ionic build android --prod --release Error displayed in console: typescript error Type CirckelmovementPage in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/cir ...

What kind of registration does React Hook Form use?

When utilizing react-hook-form alongside Typescript, there is a component that passes along various props, including register. The confusion arises when defining the type of register within an interface: export interface MyProps { title: string; ... ...

What is the best way to store the outcome of a promise in a variable within a TypeScript constructor?

Is it possible to store the result of a promise in a variable within the constructor using Typescript? I'm working with AdonisJS to retrieve data from the database, but the process involves using promises. How do I assign the result to a variable? T ...

Zod data structure featuring optional fields

Is there a more efficient way to define a Zod schema with nullable properties without repeating the nullable() method for each property? Currently, I have defined it as shown below: const MyObjectSchema = z .object({ p1: z.string().nullable(), p2 ...

"In the realm of RxJS, there are two potent events that hold the power to

In my current situation, I encountered the following scenario: I have a service that makes Http calls to an API and requires access to user data to set the authentication header. Below is the function that returns the observable used in the template: get ...

The Firebase function operates without issue on local environments but encounters an "error":"MODULE_NOT_FOUND" when accessing the deployed version on the server

Whenever I make a GET request to call a Firebase function that has been deployed, I receive an error message saying "MODULE_NOT_FOUND". Strangely, when I run the function locally using firebase emulators:start, everything works perfectly. What could be c ...

Executing methods sequentially in the ngOnInit lifecycle hook consecutively

Working with Angular15 has presented me with a challenge. In my app.component.ts file, I have two methods: “ngOnInit()”, as shown below. public ngOnInit(): void { this.getToken(); this.UserLoggedIn(); } I am looking to run the above two functions in ...

The synchronization between Typescript and the HTML view breaks down

I am currently working on an application that retrieves user event posts from MongoDB and displays them in HTML. In the Event-post.ts file, inside the ngOnInit() function, I have written code to retrieve the posts using the postsService.getPosts() method. ...

Issues with React Material UI Select functionality not performing as expected

I've been working on populating a Select Component from the Material UI library in React, but I'm facing an issue where I can't choose any of the options once they are populated. Below is my code snippet: import React, { useState, useEffect ...

Utilize the global theme feature within React Material-UI to create a cohesive

I'm feeling a bit lost when it comes to setting up React Material-UI theme. Even though I've tried to keep it simple, it's not working out for me as expected. Here is the code snippet I have: start.tsx const theme = createMuiTheme({ ...

Using React-Bootstrap with TypeScript in your project

I'm currently working on creating a navigation bar using react-bootstrap. I've already installed the node-module as follows: "@types/react-bootstrap": "^0.32.11",. However, when I try to use it in my hello.tsx component, I encounter a compile err ...

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

combine string inputs when ng-click is triggered

Is there a way to pass a concatenated string using ng-click to MyFunction(param: string)? I have tried but so far, no luck: <input id="MeasurementValue_{{sample.Number}}_{{$index}}" ng-click="Vm.MyFunction('MeasurementValue_{{sample.Number ...

Avoid including any null or undefined values within a JSON object in order to successfully utilize the Object.keys function

My JSON data structure appears as follows: { 'total_count': 6, 'incomplete_results': false, 'items': [ { 'url': 'https://api.github.com/repos/Samhot/GenIHM/issues/2', 'repository_url' ...

What could be causing the TypeScript exhaustive switch check to malfunction?

How come the default case in the switch statement below does not result in an exhaustive check where 'item' is correctly identified as of type 'never'? enum Type { First, Second } interface ObjectWithType { type: Type; } c ...

Inquiry regarding the return value of 'async-lock' in nodejs

I am utilizing the async-lock module in my typescript project to handle concurrency. However, I am encountering difficulties with returning the result within lock.acquire(...) {...}. Any guidance on how to resolve this issue would be greatly appreciated. ...

What is the best way to destructure a blend of React props and my own custom props in my code?

I have a requirement to develop a custom React component that serves as a wrapper for the Route component in order to create secure routes. The challenge I am facing is how to access the element property, which is typically specified in the <Route> e ...