Verify registration by sending an email to an alternate email address through Angular Firebase

I have implemented email verification for users before registration. However, I would like to receive a verification email to my own email address in order to finalize the registration process. I want to be notified via email and only after my approval should the registration process be completed. The file where I have checked the email verification is: auth-service.ts

 async SignIn(email,password)
    {
     const loading =await this.LoadingCtrl.create({
       message:'Authenticating..',
       spinner:"crescent",
       showBackdrop:true
     });
     loading.present();
     this.afauth.setPersistence(firebase.default.auth.Auth.Persistence.LOCAL)
     .then(()=>{
       this.afauth.signInWithEmailAndPassword(email,password)
       .then((data)=>{
         if(!data.user.emailVerified){
           loading.dismiss();
           this.toast('Please check your credentials','warning');
           this.afauth.signOut();
         }else{
           loading.dismiss();
           this.router.navigate(['/home']);
         }
       })
       .catch(error=>{
         loading.dismiss();
         this.toast(error.message,'danger');
       })
     })
     .catch(error=>{
       loading.dismiss();
       this.toast(error.message,'danger');
     });
    } 

In order to register:

async register(){
    if(this.firstname && this.lastname && this.email && this.password){
      const loading =await this.loadingCtrl.create({
        message:'Processing...',
        spinner:'crescent',
        showBackdrop:true
      });
      loading.present();
      
      this.afauth.createUserWithEmailAndPassword(this.email,this.password)
      .then((data)=>{
        data.user.sendEmailVerification();
        this.afs.collection('user').doc(data.user.uid).set({
          'userId':data.user.uid,
          'userEmail':this.email,
          'userFirstname':this.firstname,
          'userLastname':this.lastname
        })
        .then(()=>{
          loading.dismiss();
          this.toast('Registration Success','success');
          this.router.navigate(['/login']);
        })
        .catch(error=>{
          loading.dismiss();
          this.toast(error.message,'danger')
        })
      })
    }
  }

Answer №1

It seems like you are interested in ensuring that users can only access your app once they have been approved, rather than just verifying their email address.

While this scenario is valid, Firebase Authentication does not have built-in features to handle this specific situation.

Firebase Authentication primarily focuses on the authentication aspect of user login, which involves providing and verifying credentials. Implementing a system where only users with verified email addresses or approval from you can use the app falls under the category of authorization, requiring custom application logic to be developed.

The typical approach for allowing approved users to access the app/data includes:

  1. Maintaining a list of approved users in the database or incorporating an isApproved field within the user profile document that cannot be modified by users themselves.
  2. In the application code, after authenticating the user, verify if they are included in the list of permitted users before granting access to the next screen in the app.
  3. Ensure that your database security rules restrict data reading permissions to only those on the approved users list.
  4. In any custom backend functionality, validate whether the user has been approved before processing their request.

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

Is there a way to incorporate both duration and easing effects when using slideToggle()?

I am currently working on a sliding menu with jQuery and the bounce jQuery UI effect. The issue I am encountering is that the hover event does not trigger when I hover over the first li element. Here is the snippet of my JavaScript code: $(document).ready ...

Is Javascript automatically generated by asp.net?

If I were to initialize a fresh VS project and paste the subsequent sample code into a freshly created page default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> <!DOCTYPE ...

Handling exceptions in AngularJS router-ui resolve functionality

In my app, I have the parent route listed below: .state('app',{ url: '/app', templateUrl: 'views/app.html', resolve: loadSequence('modernizr','moment'), ...

Transmit an array of JavaScript objects using Email

Within the code layout provided with this post, I have executed various operations in JavaScript which resulted in an array of objects named MyObjects. Each object within MyObjects contains properties for Name and Phone, structured as follows: MyObject ...

Best practices for displaying a Multidimensional JSON Object using JavaScript

Within my current project, I have a JSON object structured as follows: { "face": [ { "attribute": { "age": { "range": 5, "value": 35 }, "gender": { "confidence ...

Performing a conditional query on a Many-to-Many relationship in TypeORM

Operating under a many-to-many relationship between Category and Product entities In need of filtering products based on category ID Attempted to implement the following code after referring to some examples, but encountered difficulties in making it fun ...

Implementing validation and displaying fields with v-model in vue.js

Looking at this code snippet: <button type="button @click="editing=true">Edit</button> <form v-show="editing" @submit="onSubmit"> <textarea v-model="text"></textarea> </form> <div> Current value: {{text}} </ ...

What sets babel.config.js apart from vue.config.js and is it possible to merge both files together?

When setting up my Vue application using the Vue cli, I noticed that there was already a babel.config.js file in the directory created by the cli. However, I also added a vue.config.js file. I’m curious about the difference between these two files and wh ...

Would it be advisable to store HTML data in a database?

Currently, I am in the process of developing a blog-app project using Angular 7. For the backend, I am utilizing firebase cloud functions and performing CRUD operations by storing HTML content in firebase with the help of Angular - CKEditor component. Whe ...

Creating a Social Media Platform with JavaScript, Bootstrap, JQuery, PHP, and Mysqil

I am currently in the process of developing a social networking platform that will have similar features as Instagram. Users will be able to log in, create posts, leave comments, like content, share posts, and send data to a server for storage or display p ...

The 'data' variable is not defined in the React custom hook Pagination

I am currently working with an API that shows music categories on a browser, and I'm attempting to create a custom pagination hook. However, I keep encountering an error stating "object is not iterable." I am new to custom hooks and would appreciate a ...

What is the best way to insert a JavaScript button before an HTML button on a webpage?

Currently, I am working on creating a calculator using JavaScript and HTML. My goal is to add memory buttons (MS, MC, MR) before the clear button (C) on the calculator interface. Despite trying various methods, I am facing some challenges in achieving this ...

Issue with host header detected in MERN stack configuration

"proxy": "https://mango-artist-rmdnr.pwskills.app:5000", While attempting to establish a connection between my frontend and backend, I encountered an issue with an invalid host header. The backend is operating on port 5000, and the fr ...

How can I filter out undefined and null values in an Angular Material Table?

Looking for assistance. I want to filter out any values that are undefined or null. Meaning, if the cell value is either null or undefined, I don't want it to show up when the user types "null" or "undefined" in the search input. Here is the incoming ...

Choose a value to apply to the dropdown menus

I've encountered an issue with the following code - it only seems to work once and not every time: var selectedVal = $('#drpGender_0').find("option:selected").text(); if (selectedVal == "Male") { $('#drpGender_1').fi ...

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Uncertain about the optimal approach, I am looking to create a component and leverage some object level variables. Consider the example below: import Vue from "vue" import * as paper from "paper" export default Vue.extend({ template: ` <d ...

Discovering feedback from JavaScript

I have been attempting to call JavaScript from a Visualforce page. The code snippet below shows a sample of the Visualforce page where I am trying to call a get method and am curious to see the response. Once I click on preview in the developer console, th ...

Using Typescript: Attempted to change the property type from a library and received the error "Subsequent property declarations must have the same

Is there a way to override the property type from a library declaration? I attempted to do so using an interface but received an error stating Subsequent property declarations must have the same type. How can this issue be resolved? // Library Declaration ...

what sets apart parseint from minus

Typically, my approach for parsing numbers in JavaScript involves the following code snippet: var x = "99" var xNumber = x - 0 as opposed to using: var xNumber = parseInt(x) I am curious to know if there are any potential issues with this method in ter ...

"Unindexing data in Angular: A step-by-step guide

Can someone help me figure out how to delete an item by index in Angular? I have a parameter and a remove button, but when I tried putting my parameter inside the remove button it didn't work. How can I fix this? deleteRowFiles(rowIndex: number){ th ...