email verification (web)

[kofifus]

I am trying to understand the new email verification mechanism but I find the docs lacking/confusing on this.

What I think I understand so far -  It seems there's a need to call createUserWithEmailAndPassword and then sendEmailVerification which will send the email with the link, when the user follows the link, the framework will issue applyActionCode for me, what happens then I'm not sure - I think that's when createUserWithEmailAndPassword resolves ?

Also I'm not sure what happens between a successful return from createUserWithEmailAndPassword and the call to sendEmailVerification ... how do I signal to createUserWithEmailAndPassword that this user awaits email verification before it is authenticated .. I couldn't understand this from the doc which seem to indicates that on return from createUserWithEmailAndPassword the user is signed in

So can anyone please provide a clear flow/instructions/example of how to correctly do email verification from a javascript client ?

Thx!

[Bassam Ojeil]

Hey Kofifus,

When a user creates an account with createUserWithEmailAndPassword, their email is unverified. You, as the app developer, have the option of calling sendEmailVerification (not required) on the currentUser if you wish to verify the user's email. This may be important to your app since you need to send emails to the user and it is important to verify that the user is the owner of the email.

When sendEmailVerification is callled, the backend server will send an email to the unverified email with a link that contains a code. By default, a custom page was created to handle these action codes for email verification, password reset, etc. Under the hood, this page calls applyActionCode on the parse code provided in the url. You have the option to build your own handler and specify the url for it in the firebase console (the section where you configure your email templates).

Hopefully this answers your question.

Best regards,

Bassam

[Dobrin Ivanov]

Hi,

I would like to ask when the user.emailVerified is actually updated?

When I do applyActionCode and then immediately after that :

auth.onAuthStateChanged(function (user) {...})

I get emailVerified=false and if I later I get true..

Anybody experiencing the same?

Thanks,
Dobrin

[Bassam Ojeil]

Hey Dobrin, applyActionCode should verify the email. A refresh of the page where the user is logged in or calling auth.currentUser.reload() should update that field in the user properties.

--
You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-talk/EGYwg2vjRq4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/279f6d8d-151b-4400-9354-3c56f0977158%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[kofifus]

thx Bassam, I am still confused about this.

I have a javascript one page application. I don't understand how can I use email verification as a security authentication feature. According to what you say:

- In my OPA I show a registration dialog and the user gives his email & password

- I then issue  createUserWithEmailAndPassword 

- As the user is now authed but unverified I will unauth it

- I now issue sendEmailVerification which will send an email

- I now display a msg to the user ('pls check your email and verify') with a confirm button and the user presses confirm

- now at this point , I need to somehow asynchronically wait for the user to verify his email and then log him in and continue - how is this done ? if that's not possible it creates a poor experience for the user. 

my other (ugly) option at that point will be when confirm is pressed to display the login screen and the user will need to again put in his (now verified) email and password. I then auth only if the email is verified and show an error msg otherwise.

A third option is to when confirm is pressed start a polling which will keep trying to auth and check that the email is verified. again ugly.

I hope this is clear. Please tell what is the flow for email verification in a OPA .. thx!

[Alex]

Hello, 

Just a note to say that I am also very interested to hear what comments the firebase team have relating to the points kofifus has mentioned. 

One would expect that we could listed to onAuthStateChanged() as a means of detecting when the emailVerification link has been clicked by the user. 

Looking forward to hearing your thoughts. I would too have to implement a polling mechanism unless there is a better suggestion?

[Joe White]

[Just another user here] 

The normal "register" and "verify" processing, regardless of the underlying technology used, often has the following "implementations"

1. User has no further options to work except to see if they have been verified yet.
2. User has access to only restricted features or workflows until verification has been received.

However, the suggestion to have onAuthStateChanged() handle events like "verification eMail sent" and "verification received" would be useful (perhaps to handle implementations that use rule "2" above. Perhaps you would like to review and post an feature request (I don't want to steal your thunder).

[Bassam Ojeil]

First just to make sure the flow is clear to Kofifus, when you create a user via  createUserWithEmailAndPassword, the email is unverified but you do get a firebase.User logged in. You then call auth.currentUser.sendEmailVerification() and tell the user to check their email in order to verify their account. You do not need to logout the user but you can check in auth state change that auth.currentUser.emailVerified is true, if not, tell them that they need to verify their email before they proceed.

Keep in mind once the link is clicked, a refresh of the page will update the emailVerified status without the need to login the user again (since you kept the user logged in).

There are currently no event listeners to detect email verified status change but the ideas proposed are interesting and very valuable. We will take those into account for future improvements and possible feature requests.

Here are some of the options you have now:

Build your own landing page handler. You have to configure the url for that in the firebase console, the section with the email templates. We are in the process of updating our docs with comprehensive instructions on how to do so. You then parse the code from the url and call applyActionCode on it. On verification, you can then redirect the user to your app page (the default one does not currently handle the redirect). On redirect, if the user is still logged in on the same device, the emailVerified field will be set to true and you can continue the sign in process.

If the user is logged in in the same browser where the link is clicked, you can set some flag in the firebase database and on the original page where the sign up process started, listen to that flag change. On change, you can trigger auth.currentUser.reload() and check emailVerified. If true, complete the sign in flow.

Another simple option is to have a button to "continue sign in flow after verification" show up when the email is sent after sign up. The user after clicking the link can then go back to the same page and click that button, you would call reload and then check emailVerified. If true, complete the sign in flow.

All the options above work best if all the actions are handled on the same device/browser where you keep the user logged in. If the user opens the link in another device, they will have to sign in to the account created and you would quickly detect the emailVerified field changed to true.

One more option, while not ideal but achieves your goals, is to build the custom email verification handler page to simply display the code with instructions to copy and paste it in the original page. Previously on create user, you keep the user signed in, call sendEmailVerification, tell the user to get the code from the link provided and display a field for the user to paste the code in. When the user pastes the code, you then applyActionCode, call reload, confirm email verified and complete the sign in flow.

Hopefully this answers your question.

Best regards,

Bassam

[kofifus]

Hi Bassam, thank you very much for your help with this.

I would appreciate it if you can see comments below and comment further:

> There are currently no event listeners to detect email verified status change but the ideas proposed are interesting and very valuable. We will take those into account for future improvements and possible feature requests.

great ! please do

> Build your own landing page handler. ... On verification, you can then redirect the user to your app page ..

redirect does not work in the case of a single page application. we will end up with two instances of the SPA - the one that issued sendEmailVerification and the one that got redirected from the link in the email which is a confusing and poor user experience. So this is not helpful here.

> If the user is logged in in the same browser where the link is clicked, you can set some flag in the firebase database and on the original page where the sign up process started, listen to that flag change. On change, you can trigger auth.currentUser.reload() and check emailVerified. If true, complete the sign in flow.

when you say 'listen to that flag change' does that mean the link will redirect to a page I will provide that will change that flag ?

I don't like this at all - I will need to write html and code that will auth a user into FB and the set a flag in a particular place, do it securely and handle all errors and scenarios all this work just because FB does not provide a way to be notified when a user got email verified ? If I need to that I may as well do polling on the client that issued sendEmailVerification. ugly but at least I don't need to write a separate page+code just to set a flag.

> One more option, while not ideal but achieves your goals, is to build the custom email verification handler page to simply display the code with instructions to copy and paste it

This would be a good solution but if we're going for this kind of thing why not simply provide a %oobCode% email parameter for the template and allow having that instead of the link. The email will show the code and the user can copy it from there .. no need for an unneeded link journey just to copy a code. Wouldn't that be better ?

would you agree that the options you've suggested are workarounds instead of FB having a straight forward solution ? email verification is an essential, common feature for web apps. Please help with a clear flow and code samples.

thx!

[Bassam Ojeil]

Hey Kofifus,

These are the options available at the moment. I understand the benefits of keeping the user in the same app for single page applications but you also have to keep in mind that a user could verify their email on a separate device so you still have to plan for that.

The idea of having the option to return the code directly in the template is interesting and worth considering. I will relay your feature request to the relevant teams.

Bassam

[Alexander Mady]

Hello Bassam

What do you think about the simple idea to callback auth.onAuthStateChanged() when the email becomes verified. Or provide another callback auth.onEmailVerified().

I feel this would kill many birds with one stone and negate the need ( which I currently have) to build a server process just to handle the email verification by calling onApplyCode().

Many thanks for your responses.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/53705a68-125b-420b-b4ec-dbd1fb73e849%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Kind regards,

Alexander Mady

[Joe White]

Bassam,

Would one be able to use Firebase "hosting" to provide the landing page for eMail verification?  Particularly for Android apps (and, I assume IoS apps) it would be great not to have to have another server just to handle email verification.

Thanks,

Joe

This message (and any associated files) may contain VelociKey confidential and/or privileged information. If you are not the intended recipient or authorized to receive this for the intended recipient, you must not use, copy, disclose or take any action based on this message or any information herein. If you have received this message in error, please advise the sender immediately by sending a reply e-mail and delete this message. Thank you for your cooperation.

[kofifus]

Thank you Bassam.

On rethinking, and considering the possibility of multiple devices,  perhaps the redirect option will be the best. The SPA that issued sendEmailVerification  can go back to it's login screen and just wait there. The SPA started from the link will login itself with the now verified details and proceed. The user will have the 'dud' original SPA opened in the login state but maybe that's not so bad. The user will just have to close that browser tab at some point. There may be further issues when trying to convert the SPA to a mobile app (phonegap etc) though.

Will the redirected page followed from the email link know the username & password or have the user object so it can automatically log in the (now verified) user ? is there any any progress on those docs ?

Thx!

[Bassam Ojeil]

Regarding Alex's suggestion. That is currently not being considered. However, you could implement something similar using the database flag approach I described above.

[Bassam Ojeil]

Regarding Joe's question, currently the default landing page does not provide a continue option to redirect to the user's app, though we are looking into that feature. For now, you can build your own landing page to handle email verification, password reset and email change revocation. You have to modify the callback url for that in the Firebase console. We are working on comprehensive documentation on how to do so. You can build your page and host it using Firebase hosting and update the url in the console with yours. From your landing page, you can redirect after verification to your app whether it is mobile or not. 

For now, I believe applyActionCode is only available for the web API, so you have to apply it on a web page and then redirect to your web app or mobile app on your own.

[Bassam Ojeil]

Hey Kofifus, you can check my reply to Joe for more information on the email verification landing page. It currently does not redirect to the app url. It only provides the relevant UI for the operation selected (password reset, email verification, email change revocation) and applies the action code. If you wish to redirect, you will need to build your own page and redirect. In that case, you can keep the user logged in as I described. If you are using the same domain for the landing page as the page where the pending user is logged in, you can call user.reload and then confirm the email is verified and complete the login from the same page. If you are ok redirecting, you can redirect from the landing page to you app. On you app page you would listen to the auth state and when the user is returned, check the emailVerified field and complete the sign in.

Regarding the documentation timeline, I can't give you exact dates but I know this is currently in progress. There are a lot of feature requests and we are considering a lot of them. 

Bassam

[Nkansah Rexford]

You then parse the code from the url and call applyActionCode on it. On verification, you can then redirect the user to your app page (the default one does not currently handle the redirect).

I believe you're referring to: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#applyActionCode

Is the applyActionCode implementation available in AngularFire? 

I'm trying to do this: 

    Auth.$applyActionCode($stateParams.oobCode)

      .then(function() {

        console.log('Code was applied');

      })

where Auth is $firebaseAuth()

and I get this error:

Auth.$applyActionCode is not a function

Will appreciate help. thanks

[Alex]

Hello, 

Thank you for the feedback - I am sharing a jade template for a verification methodology that I have just implemented - hopefully it's useful to others:

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        script(src='https://www.gstatic.com/firebasejs/3.0.4/firebase.js')
    body
        block content

            h1= title
            p Welcome to Verify email #{title}

            p Please press the button to verify your email

            script.
                // Initialize Firebase
                var config = {
                    apiKey: "",
                    authDomain: "",
                    databaseURL: "",
                    storageBucket: "p",
                };

                firebase.initializeApp(config);

                var verify = function () {
                    console.log('trying to verify code', "#{oobCode}");

                    firebase.auth().checkActionCode("#{oobCode}")
                            .then(function(userInfo){
                                console.log(userInfo);

                                firebase.auth().applyActionCode("#{oobCode}")
                                        .then(function(){

                                            var ref = firebase.database().ref('verifiedEmails/' + userInfo.data.email.replace('.','*'))
                                            ref.set(true)
                                                    .then(function(){
                                                        console.log('finished client side email verification');
                                                    });
                                        });
                            });

                }
            button(onclick='verify()') Verify

this can be used together for example with a node js express hander as follows:

app.get('/verify', csrfProtection, function (req, res) {

    console.log('GOT request for verify with :', req.query.mode, req.query.oobCode);
    if (!req.query.mode || !req.query.oobCode) {
        res.end('Invalid request');
    }
    res.render('verify', {csrfToken: req.csrfToken(), mode: req.query.mode, oobCode: req.query.oobCode});
});

This creates an entry in firebase location verifiedEmails/<emailAddress> which can be listened to with :

var verifiedEmailsRef = db.ref('verifiedEmails');

verifiedEmailsRef.on('value', function (snapshot) {

    if (!snapshot.exists()) {
        return;
    }

    var verifiedEmails = snapshot.val();

    var verifiedEmailKeys = Object.keys(verifiedEmails);
    var updates = {};
    for (var i = 0; i < verifiedEmailKeys.length; i++) {
        var emailEscaped = verifiedEmailKeys[i];

        db.ref('userEmail/' + emailEscaped).once('value', function (data) {

            if (data.exists()) {
                var uid = data.val()
                console.log('***** Got a verified email update: ', uid, emailEscaped);
                updates['users/' + uid + '/emailVerified'] = true;
                updates['verifiedEmails/' + emailEscaped] = null;

                firebase.database().ref().update(updates).then(function () {
                    console.log('email verification updates successfully processed')
                })
            }
        });
    }
});

[kofifus]

I came up with a solution (web) here: 

   http://stackoverflow.com/questions/37912615/firebase-get-notified-when-user-confirmed-an-email-sent-with-sendemailverifica

Basically the client uses this function to:

- call createUserWithEmailAndPassword

- call sendEmailVerification

- call showWaitUI (if given), here the client should prob show a modal with instructions ('Please check your email for the confirmation link.') and an hourglass

- start an interval loop calling currentUser.reload() every second, and stopping either when auth successful with currentUser.emailVerified==true or an error occured

- call doneFunc (once) with null if auth was successful with currentUser.emailVerified == true or the error object if an error occurred

Hope this helps :)

[Bassam Ojeil]

Hey Nkansah, applyActionCode has not been implemented for AngularFire along with other Firebase Auth methods. There is a Github issue to track these missing API. You can follow it here: https://github.com/firebase/angularfire/issues/764

[Nkansah Rexford]

Okay, thanks

[Bassam Ojeil]

FYI, we recently added documentation for the custom email handler:

https://firebase.google.com/docs/auth/custom-email-handler

On Tuesday, June 21, 2016 at 7:21:09 AM UTC-7, Nkansah Rexford wrote:

Okay, thanks

[Joe White]

This looks interesting, thanks!  We will have to try that out.

[Alexander Mady]

Indeed looks very interesting. Cheers!

--

You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-talk/EGYwg2vjRq4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/0d42ba1b-e45e-4673-a786-f9c364be6e46%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.