How to sign up only the users who have verified thier email addresses using the email link in Firebase javascript?

Question

I'm using Vue and this is my sign up method, What it does is sign up any email id... meaning it signs up even email id's that i do not own like "test@example.com" because there is no email verification..

I have configured email verification in the Firebase console. Now i want the sign up method to send a verification mail and only register the user if he/she has verified the email .

how should i modify my existing code? I'm confused.

import firebase from 'firebase'
export default {
  name: 'signup',
  data: function () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signup: function (e) {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert(`Account created for ${user.user.email}`)
          this.$router.go({ path: this.$router.path })
        },
        err => {
          alert(err.message)
        })
      e.preventDefault()
    }
  }
}

Renaud Tarnec · Accepted Answer · 2020-03-28T17:05:16.843

1

The standard way to send a verification email is to use the sendEmailVerification() method.

So you would adapt your code as follows:

methods: {
   signup: function (e) {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(userCredential => {
            return userCredential.user.sendEmailVerification()
         })
         .then(function() {
            alert(`Account created for ${userCredential.user.email}`)
            this.$router.go({ path: this.$router.path })
         })
         .catch(err => {
            alert(err.message)
         })
      e.preventDefault()
   }
}

You will find more details in the documentation in particular on the parameter of type ActionCodeSettings that you can pass to the method.

Note also that you can customize the content of the email in the Firebase console.

edited Mar 28 '20 at 17:05

answered Mar 28 '20 at 16:37

Renaud Tarnec

79,263
10
95
121

1

`firebase.auth().createUserWithEmailAndPassword` this method actually creates a user and also logs me in... so what is happening is its sending email verification but also logging me in with that email which should'nt happen.. – Ali Khan Mar 29 '20 at 09:08
2

Actually you don't need to have a verified email in order to login, this is how it is implemented by Firebase. If you want to restrict the access to your database (or cloud storage buckets) only to users with a verified email, you have to write your security rules accordingly, see https://firebase.google.com/docs/rules/rules-and-auth. In other words, the check of email verified in terms of access rights is at the level of the authorization, not authentication. – Renaud Tarnec Mar 29 '20 at 09:14
2

PS: in your front end you can use the [`emailVerified`](https://firebase.google.com/docs/reference/js/firebase.User#email-verified) method, in order to display (or not) the correct UI elements, but the real security is at the level of the Security Rules. – Renaud Tarnec Mar 29 '20 at 09:18
1

Thanks for your help.. :) and since i am using `vue js` i will try to restrict access with my `router.ts` file by restricting access from there with `emailVerified` method – Ali Khan Mar 29 '20 at 10:04
2

My pleasure Ali. Please note that restricting access just through your Vue.js application is probably not sufficient. You need to write Security Rules that protects you back end. – Renaud Tarnec Mar 29 '20 at 10:46
1

Sure will do that – Ali Khan Mar 29 '20 at 10:50
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210524/discussion-between-ali-khan-and-renaud-tarnec). – Ali Khan Mar 29 '20 at 11:00

How to sign up only the users who have verified thier email addresses using the email link in Firebase javascript?

1 Answers1

Linked