Firebase enables email verification and user login for secure access to the page

I have developed a form "main.html#!/register" where users can input their first name, last name, email, and login details. Once these details are entered, an email verification is sent before they can proceed to the page "main.html#!/success".

The positive aspect is: If users try to access the page from the login page without confirming their email, they will be denied access. The downside is: Immediately after registering, users can navigate to "main.html#!/success" without verifying their email.

Use case: Users cannot reach "main.html#!/success" without completing registration. Users cannot access "main.html#!/success" from the login page "main.html#!/login" if they have not verified their email address. The issue lies in: Users can view "main.html#!/success" right after registering without confirming their email.

Question: How can I utilize the email verification condition user.emailVerified and the user authentication method $requireSignIn() to grant access to the page "main.html#!/success"? I have implemented a resolve function to restrict unauthorized entry.

Here are my code snippets: 1-resolve function: Authentication is a service I have established

 when('/success', {
  templateUrl: 'views/success.html',
  controller: 'SuccessController',
  resolve: {
    currentAuth: function(Authentication) {
    return Authentication.requireAuth();
    } //currentAuth
  }//resolve
}).

2-code within the Authentication service

requireAuth: function() {
    return auth.$requireSignIn();
}, //require Authentication

3- the register function (located within the service)

register: function(user) {   
  auth.$createUserWithEmailAndPassword(
    user.email,
    user.password
  ).then(function(regUser) {
    var regRef = ref.child('users')
      .child(regUser.uid).set({
        date: firebase.database.ServerValue.TIMESTAMP,
        regUser: regUser.uid,
        firstname: user.firstname,
        lastname: user.lastname,
        email: user.email 
      }); //userinfo
    regUser.sendEmailVerification().then(function() {
      // Email sent.
        alert("your Email is verified: " + regUser.emailVerified) ;
    }).catch(function(error) {
      // An error happened.
        alert(error);
    });
  }).catch(function(error) {
    $rootScope.message = error.message;
  }); //createUserWithEmailAndPassword
} //register

4- login function

login: function(user) {
            auth.$signInWithEmailAndPassword(
            user.email,
            user.password
          ).then(function(user) {
                if(user.emailVerified){
                  $location.path('/success');
                }
                else{
                $rootScope.message= "Please validate your registration first : "+user.emailVerified;
                }
          }).catch(function(error) {
            $rootScope.message = error.message;
          }); //signInWithEmailAndPassword
}, //login

Answer №1

Your approach is currently focused on client-side enforcement, but it would be more secure to enforce access for verified signed-in users using your Firebase rules. Here's an example:

".write": "$user_id === auth.uid && auth.token.email_verified == true"

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

Exporting and importing modules in Angular 1 using Webpack 2

Seeking clarification on why the current implementation is not working as expected. It seems like a simple oversight, especially since it works fine without Webpack. I prefer to stick with the current implementation, where each component/controller/etc is ...

Having trouble with AngularJS ngdialog watch function not working properly?

I inserted a plugin on my webpage. Inside a popup, I added a search box but the watch function is not working for the search box within the popup. However, if I place the search box outside of the popup, the watch function works fine. How can I resolve thi ...

Tips for verifying if JavaScript has modified HTML after receiving an AJAX response

We are experimenting with scraping a website using Selenium and Java. For example, we want to change the product color on this page. How can we determine when the website's JavaScript has altered the HTML after an AJAX response? And how long should we ...

Experiencing challenges with the functionality of the submit button

Every time I try to save the content from the second textarea field by clicking 'submit', it ends up saving the content from the first textarea instead. I am struggling to understand how to properly connect the buttons to their respective textare ...

Issues arise with objects disappearing when zooming out in Three.js

In my current three.js project, I have encountered an issue with the z position of my camera. Whenever the z position is set too high, the scene turns completely black when zooming out, which is not the desired outcome. Specifically, with camera.position. ...

Showcasing JSON HTML content within a container

I'm currently facing a challenge in my web development project where I am attempting to render HTML content from a JSON file into a specific div on my website. Despite my efforts, all I've achieved so far is displaying it in the console rather th ...

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

I'm looking for guidance on how to customize the appearance of a Google Custom Searchbar on my website. Is it feasible to style it using CSS3 and Bootstrap 3 like the example in the image below? Any assistance is greatly appreciated. ...

Authentication Error (401) in WordPress JWT

Recently, I came across WordPress and started using it. However, I encountered some issues while trying to integrate JWT with a custom endpoint. Despite configuring my API and JWT correctly, I faced an authentication problem during my AJAX request. It&ap ...

Problems with Key Presses in Form Verification

Yesterday evening, our supervisor called me to report an issue with our app. He mentioned that when he tried to log in using a dummy password, the validation was successful. It seems that clicking on the mouse to authenticate the password was working corr ...

Updating the cx and cy attributes dynamically based on screen size changes in D3.js integrated with React

I'm facing an issue with the dynamic adjustment of cx and cy attributes based on window.innerHeight/window.innerWidth. I am passing window.innerHeight/window.innerWidth as height/width to the component, and here is the implementation: const UpdatedCha ...

You can submit a photo to a form as an attached file

I had a code that looked like this My goal is to simplify the process for users by allowing them to fill out additional information in a form without having to upload an image separately. I want to display the canvas image from the previous page in the fo ...

The POST request to the localhost API endpoint resulted in a 404 Not Found error

Whenever I try to send a POST request to "/api/auth/signup" in my JavaScript application, I keep getting a 404 Not Found error. My goal is to create a MERN application for a Modern Real Estate Marketplace. This is the code snippet causing the is ...

stop a element from being removed from the document

Is there a way to stop an element from being removed using something similar to preventDefault()? For example: myNode.on("remove", (e) => { e.preventDefault(); }); I have tried using MutationObserver to detect the removal, but so f ...

How to incorporate Vue3 into Django using CDN without the need for a NodeJs bundler?

When working with Vue2, all I had to do was add the CDN and then Vue would be available in my JavaScript files. However, when trying to use Vue3, my JavaScript files are not detecting Vue. How can I troubleshoot this issue and start using Vue3 successful ...

React: The error message "p is not defined" is showing up in the component file due to the no-undef

In my React application, I am looking to display a list of menu items from an array and show the detailed description of each item upon clicking. The array of menu items is stored in a separate file called dishes.js. The menu items are rendered using a Me ...

Having a problem editing text fields while implementing state-based validation in ReactJS

I'm currently working on developing a React Form for submitting simple data to a post web service. I've set up the form, but I'm encountering issues when trying to edit the textfields. The problem lies in me updating the state variables as t ...

The suggestions for Google Places Autocomplete in Angular 2 are failing to display

I'm currently implementing Google Places Autocomplete using the AGM library. Below is the input section in my component HTML for search functionality. <form #addressForm="ngForm" novalidate name="AddressForm"> <div class="form-group"&g ...

Encountering issues with Google authentication functionality while using AngularFire2

Currently in the process of setting up Google Authentication with Firebase and AngularFire2. The setup seems to be partially functional, however, there are some unusual behaviors that I am encountering. Upon the initial loading of the app, the Login button ...

Workaround for syncing MobX observables when toggling a select/deselect all checkbox

In my application, there is a checkbox list with a 'Select All' checkbox at the top. The list is populated by an observable array of strings. When the user clicks on 'Select All', it should check all checkboxes; subsequent clicks should ...

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...