Firebase email verification workflow

Question

I have a simple input box asking for users emails.

I want them to input something, for me to check it is a string, and then send a verification email to their email address entered.

Then once verified within users mail client and the link is clicked, I want the user to be added to my Firebase users.

At the moment, I am just testing without any email sending via SMTP, just adding data to Firebase. However, no emails I add are being added to my Firebase database.

Current code in the bottom of the body of the HTML, before the other script tags (should this be in the head?):

<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "myapikey",
            authDomain: "mydomain.firebaseapp.com",
            databaseURL: "https://mydomain.firebaseio.com",
            storageBucket: "mydomain.appspot.com",
            messagingSenderId: "mymessagesenderid"
        };
        firebase.initializeApp(config);
    </script>
    <script src="assets/js/saveEmail.js" type="text/javascript"></script>

Then I have an input box:

     <div class="mtb">
   <h2 class="signup-title">Sign up for updates on our project</h2>
   <p id="signup-success" class="text-success"></p>
   <p id="signup-error" class="text-danger"></p>
   <form class="signup-form form-inline" id="signup-form" role="form" onsubmit="return signup(this)">
      <div id="div">
         <input type="email" name="email" class="subscribe-input" placeholder="Enter your e-mail address..." required>
         <button class='btn btn-conf btn-yellow' id="signup-button" type="submit">Submit
         </button>
      </div>
   </form>
</div>

And this is saveEmail.js:

var signupForm = document.getElementById('signup-form');
var signupSuccess = document.getElementById('signup-success');
var signupError = document.getElementById('signup-error');
var signupBtn = document.getElementById('signup-button');
var onSignupComplete = function (error) {
    signupBtn.disabled = false;
    if (error) {
        signupError.innerHTML = 'Sorry. Could not signup.';
    } else {
        signupSuccess.innerHTML = 'Thanks for signing up!';
        // hide the form
        signupForm.style.display = 'none';
    }
};

function signup(formObj) {
    // Store emails to firebase
    var myFirebaseRef = new Firebase("https://mydomain.firebaseio.com/signups");
    myFirebaseRef.push({
        email: formObj.email.value,
    }, onSignupComplete);
    signupBtn.disabled = true;
    return false;
}

I know that the signup function is being called as I tried a simple JS alert, which does pop up when the submit button is clicked. However, I am seeing nothing change in my Firebase data dashboard under the /signups section. Also, the URL changes to:

http://localhost:5000/?email=theemailthatwasputintothebox

I modified my rules to:

{"rules": 
 {".read": true, 
   ".write": true 
 } 
}

So I assume this is not about rules as I have enabled everything for testing purposes.

How can I achieve what I want to achieve (without, and then with the email confirmation part)?

What is going wrong with the existing setup, without email confirmation via SendGrid etc?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I have a simple input box asking for users emails.

I want them to input something, for me to check it is a string, and then send a verification email to their email address entered.

Then once verified within users mail client and the link is clicked, I want the user to be added to my Firebase users.

I do not think Firebase works that way. Unless the user is registered, you cannot send a verification email to an arbitrary email address. The sendEmailVerification method works on a currentUser.

According to the docs:

You can send an address verification email to a user with the sendEmailVerification method

Now, to your snippet, aren't you simply trying to take a user input and save it to the database? With the recent SDK, you can try this, as per docs

....

var database = firebase.database();

function signup(formObj) {
    // Store emails to firebase
    database.ref('signups')
      .push({
         email: formObj.email.value,
      })
      .then(function(res) {
         console.log(res)
         // call whatever callback you want here
      })
      .catch( .... )
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 22, 2016 at 6:13

KhoPhi

9,57718 gold badges88 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhruv Ghulati Over a year ago

Thanks @Rexford, this is perfect. How do I preserve uniqueness in my emails? The Firebase IDs that are pushed are unique, but they are not tied to the emails I push in. I want to only allow unique emails, and alert the user if that email is already signed up on the HTML page.

ostergaard Over a year ago

@DhruvGhulati the Firebase function for create user from email and password will return a duplicate email error if the error already exists.

JackMahoney · Accepted Answer · 2017-12-27 15:26:29Z

0

FYI if you are using Firebase email verification think about testing it during your end-to-end or smoke tests.

Use a service like emaile2e.com to generate random email addresses during a test which you can send and receive from. That way you can verify users during a test programmatically.

answered Dec 27, 2017 at 15:26

JackMahoney

3,4537 gold badges39 silver badges51 bronze badges

Collectives™ on Stack Overflow

Firebase email verification workflow

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related