Task/verify 2fa code (#2221)

* WIP - Add 2FA verification for mobile phone number

- Add verify-mobile-number.html page
- Add new route `verify_mobile_number`
- Add `validate_2fa_method` to the `user_api_client` which calls the api
  to verify a 2fa code without disturbing the users browser session

* Gate `validate_2fa_method` behind a FF check

* Merge verify-mobile-number.html and confirm.html

- Removing an existing phone number sets the verified_phonenumber to
  false in the db.
- Utilize the new verify phone number designs when changing or adding a
  phone number via the profile page
- Added proper back_link handling on the confirmation page
- Ensure that when a user clicks the back button after resending a
  verification code from the update or add phone number view that they
are redirected to the correct page

* Remove temporary dev link to verify SMS on profile

* Impl. add & verify phone # from 2fa flow

- Add a flow for when the user tries wants to add SMS 2fa auth have not
  added a phone number to their profile yet
- Select SMS auth -> add their phone number -> enter verify code -> auth
  is changed to SMS

* Fix tests

* Add / correct translations

* Decouple verification from add phone number flow

- Adding a phone number to your profile no longer requires verification
- Fixed a bug where incorrect verify codes were not being handled
  correctly and errors not properly displayed to the user.

Author: whabanks

app/main/views/two_factor.py

@@ -23,6 +23,7 @@ def two_factor_email_sent():
     # Check if a FIDO2 key exists, if yes, return template
     user = User.from_id(user_id)
 
+    # AUTHV2_Note: security_key - Tagging this for future authv2 dev reference
     if len(user.security_keys):
         return render_template("views/two-factor-fido.html")
 
@@ -54,6 +55,7 @@ def two_factor_sms_sent():
     # Check if a FIDO2 key exists, if yes, return template
     user = User.from_id(user_id)
 
+    # AUTHV2_Note: security_key - Tagging this for future authv2 dev reference
     if len(user.security_keys):
         return render_template("views/two-factor-fido.html")
 

app/main/views/user_profile.py

@@ -14,6 +14,7 @@
 from flask_babel import _
 from flask_login import current_user
 from notifications_python_client.errors import HTTPError
+from notifications_utils.decorators import requires_feature
 from notifications_utils.url_safe_token import check_token
 
 from app import user_api_client
@@ -157,8 +158,10 @@ def user_profile_mobile_number():
             return redirect(url_for(".user_profile"))
 
         elif form.validate_on_submit():
-            session[NEW_MOBILE] = form.mobile_number.data
-            return redirect(url_for(".user_profile_mobile_number_authenticate"))
+            current_user.update(mobile_number=form.mobile_number.data)
+            flash(_("Mobile number {} saved to your profile").format(form.mobile_number.data), "default_with_tick")
+            return redirect(url_for(".user_profile"))
+
         else:
             return render_template(
                 "views/user-profile/change.html",
@@ -190,14 +193,14 @@ def _check_password(pwd):
         return user_api_client.verify_password(current_user.id, pwd)
 
     form = ConfirmPasswordForm(_check_password)
-
     if NEW_MOBILE not in session:
         return redirect(url_for(".user_profile_mobile_number"))
 
     if form.validate_on_submit():
-        # if they are removing their phone number, skip the verification, set auth type to email
+        # if they are removing their phone number, skip verification, set auth type to email, and remove verified phone number flag
         if not session[NEW_MOBILE]:
             current_user.update(mobile_number=None, auth_type="email_auth")
+            current_user.update(verified_phonenumber=False)
 
             flash(_("Mobile number removed from your profile"), "default_with_tick")
             return redirect(url_for(".user_profile"))
@@ -219,8 +222,8 @@ def _check_password(pwd):
 @user_is_logged_in
 def user_profile_mobile_number_confirm():
     # Validate verify code for form
-    def _check_code(cde):
-        return user_api_client.check_verify_code(current_user.id, cde, "sms")
+    def _check_code(code):
+        return user_api_client.validate_2fa_method(current_user.id, code, "sms")
 
     if NEW_MOBILE_PASSWORD_CONFIRMED not in session:
         return redirect(url_for(".user_profile_mobile_number"))
@@ -233,6 +236,7 @@ def _check_code(cde):
         del session[NEW_MOBILE]
         del session[NEW_MOBILE_PASSWORD_CONFIRMED]
         current_user.update(mobile_number=mobile_number)
+        current_user.update(verified_phonenumber=True)
 
         flash(_("Mobile number {} saved to your profile").format(mobile_number), "default_with_tick")
 
@@ -254,19 +258,15 @@ def _check_code(cde):
             # Default redirect to user profile
             return redirect(url_for(".user_profile"))
 
-    return render_template(
-        "views/user-profile/confirm.html",
-        form_field=form.two_factor_code,
-        thing=_("mobile number"),
-    )
+    return render_template("views/user-profile/confirm.html", form=form, back_link=url_for(".user_profile_mobile_number"))
 
 
 @main.route("/user-profile/mobile-number/resend", methods=["GET", "POST"])
 @user_is_logged_in
 def sms_not_received():
     current_user.send_verify_code(to=session[NEW_MOBILE])
     flash(_("Verification code re-sent"), "default_with_tick")
-    return redirect(url_for(".user_profile_mobile_number_confirm"))
+    return redirect(url_for(".verify_mobile_number"))
 
 
 @main.route("/user-profile/password", methods=["GET", "POST"])
@@ -388,9 +388,46 @@ def user_profile_disable_platform_admin_view():
     return render_template("views/user-profile/disable-platform-admin-view.html", form=form)
 
 
+@main.route("/user-profile/verify-mobile-number", methods=["GET", "POST"])
+@user_is_logged_in
+@requires_feature("FF_AUTH_V2")
+def verify_mobile_number():
+    """
+    This route is used to verify the user's mobile number.
+    It sends a verification code to the user's mobile number and
+    allows them to confirm it.
+
+    """
+    if not current_user.mobile_number and NEW_MOBILE_PASSWORD_CONFIRMED not in session:
+        return redirect(url_for(".user_profile_2fa"))
+
+    # Validate password for form
+    def _check_code(code):
+        return user_api_client.validate_2fa_method(current_user.id, code, "sms")
+
+    form = TwoFactorForm(_check_code)
+
+    if form.validate_on_submit():
+        current_user.update(verified_phonenumber=True)
+        current_user.update(auth_type="sms_auth")
+        flash(_("Two-step verification method updated"), "default_with_tick")
+        return redirect(url_for(".user_profile_2fa"))
+    else:
+        current_user.send_verify_code(to=current_user.mobile_number)
+
+    return render_template(
+        "views/user-profile/confirm.html",
+        form=form,
+        back_link=url_for(".user_profile_2fa")
+        if NEW_MOBILE_PASSWORD_CONFIRMED not in session
+        else url_for(".user_profile_mobile_number"),
+    )
+
+
 @main.route("/user-profile/2fa", methods=["GET", "POST"])
 @user_is_logged_in
 def user_profile_2fa():
+    # TODO: This should be gated behind a new route that confirms the users password before allowing them to make changes
     if current_app.config["FF_AUTH_V2"]:
         # IF they have not authenticated yet, do it now
         if not session.get(HAS_AUTHENTICATED):
@@ -436,6 +473,12 @@ def user_profile_2fa():
                 auth_type = "email_auth"
             elif new_auth_type == "sms":
                 auth_type = "sms_auth"
+
+                if not current_user.mobile_number:
+                    session["from_send_page"] = "user_profile_2fa"
+                    return redirect(url_for(".user_profile_mobile_number"))
+                elif not current_user.verified_phonenumber:
+                    return redirect(url_for(".verify_mobile_number"))
             elif new_auth_type == "new_key":
                 # Redirect to add a new security key
                 return redirect(url_for(".user_profile_add_security_keys"))
@@ -444,17 +487,10 @@ def user_profile_2fa():
                 # Default to email auth if something unexpected is selected
                 auth_type = "email_auth"
 
-            # If the user is switching to SMS, ensure they have a mobile number
-            if auth_type == "sms_auth" and not current_user.mobile_number:
-                flash(_("You must add a mobile number to your profile to use this option."), "error")
-                session["from_send_page"] = "user_profile_2fa"
-                return redirect(url_for(".user_profile_mobile_number"))
-
-            # Update the user's authentication type
-            current_user.update(auth_type=auth_type)
-
             # Flash a success message
             flash(_("Two-step verification method updated"), "default_with_tick")
+            # Update the user's auth type
+            current_user.update(auth_type=auth_type)
 
             # Redirect back to user profile and revoke their additional authentication
             session.pop(HAS_AUTHENTICATED, None)

app/notify_client/user_api_client.py

@@ -4,6 +4,7 @@
 from typing import Dict
 
 from notifications_python_client.errors import HTTPError
+from notifications_utils.decorators import requires_feature
 
 from app.extensions import redis_client
 from app.models.roles_and_permissions import (
@@ -171,6 +172,18 @@ def check_verify_code(self, user_id, code, code_type):
                 return False, e.message
             raise e
 
+    @requires_feature("FF_AUTH_V2")
+    def validate_2fa_method(self, user_id, code, code_type):
+        data = {"code_type": code_type, "code": code}
+        endpoint = "/user/{}/verify-2fa".format(user_id)
+        try:
+            self.post(endpoint, data=data)
+            return True, ""
+        except HTTPError as e:
+            if e.status_code == 400 or e.status_code == 404:
+                return False, e.message
+            raise e
+
     def get_users_for_service(self, service_id):
         endpoint = "/service/{}/users".format(service_id)
         return self.get(endpoint)["data"]

app/templates/components/profile-item.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import edit_field, text_field %}
 
-{% macro profile_item(label, value, action=None, link_text=None) %}
+{% macro profile_item(label, value, action=None, link_text=None, verified=None) %}
   <div class="flex flex-wrap md:flex-nowrap items-end border-b-1 border-gray-400 py-5">
     <div class="w-full sm:w-3/4" tabindex="0">
       <div class="text-gray-600">{{ text_field(label) }}</div>

app/templates/views/user-profile.html

@@ -15,7 +15,7 @@ <h1 class="heading-large">{{ _('Your profile') }}</h1>
 
   {% if config["FF_AUTH_V2"] %}
     <div class="pb-8">
-      {{ profile_item(_('Name'), text_field(current_user.name), '.user_profile_name') }}  
+      {{ profile_item(_('Name'), text_field(current_user.name), '.user_profile_name') }}
       {{ profile_item(_('Email address'), text_field(current_user.email_address), '.user_profile_email' if can_see_edit else None) }}
       {{ profile_item(_('Contact number'), optional_text_field(current_user.mobile_number), '.user_profile_mobile_number', None  if current_user.mobile_number else _('Add number')) }}
     </div>
@@ -34,18 +34,18 @@ <h2 class="heading-large">{{ _("Security") }}</h2>
 
       {{ profile_item(_('Security keys'), text_field(_("{} security key").format(num_keys) if num_keys == 1 else _("{} security keys").format(num_keys)), '.user_profile_security_keys') }}
       {% if current_user.platform_admin or session.get('disable_platform_admin_view') %}
-        {{ profile_item(_('Use platform admin view'), text_field(_('Yes') if not session.get('disable_platform_admin_view') else _('No')), '.user_profile_disable_platform_admin_view') }} 
+        {{ profile_item(_('Use platform admin view'), text_field(_('Yes') if not session.get('disable_platform_admin_view') else _('No')), '.user_profile_disable_platform_admin_view') }}
       {% endif %}
     </div>
   {% else %}
-    {{ profile_item(_('Name'), text_field(current_user.name), '.user_profile_name') }}  
+    {{ profile_item(_('Name'), text_field(current_user.name), '.user_profile_name') }}
     {{ profile_item(_('Email address'), text_field(current_user.email_address), '.user_profile_email' if can_see_edit else None) }}
     {{ profile_item(_('Mobile number'), optional_text_field(current_user.mobile_number), '.user_profile_mobile_number', None  if current_user.mobile_number else _('Add number')) }}
     {{ profile_item(_('Password'), text_field(_('Last changed ') + " " + current_user.password_changed_at|format_delta ), '.user_profile_password') }}
     {{ profile_item(_('Security keys'), text_field(num_keys), '.user_profile_security_keys') }}
 
     {% if current_user.platform_admin or session.get('disable_platform_admin_view') %}
-      {{ profile_item(_('Use platform admin view'), text_field(_('Yes') if not session.get('disable_platform_admin_view') else _('No')), '.user_profile_disable_platform_admin_view') }} 
+      {{ profile_item(_('Use platform admin view'), text_field(_('Yes') if not session.get('disable_platform_admin_view') else _('No')), '.user_profile_disable_platform_admin_view') }}
     {% endif %}
   {% endif %}
 {% endblock %}

app/templates/views/user-profile/confirm.html

@@ -1,6 +1,7 @@
-{% extends  "admin_template.html" %}
+{% extends "admin_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-header.html" import page_header %}
+{% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -14,28 +15,40 @@
 
   {{ page_header(
     title,
-    back_link=url_for('.user_profile')
+    back_link=back_link
   ) }}
 
   <div class="grid-row contain-floats">
-    <div class="md:w-3/4 float-left py-0 px-0 px-gutterHalf box-border">
-      <p>
-        {{ _('We’ve sent you a security code by {}').format(thing) }}
-      </p>
-      {% call form_wrapper() %}
+    <div class="md:w-2/3 float-left py-0 px-0 px-gutterHalf box-border">
+      {% set verify = _('Verify') %}
+      {% set cancel = _('Cancel') %}
+      {% set link_txt = _("Didn’t get a text message?") %}
+      <p>{{ _('We’ve sent you a text message with a verification code.') }}</p>
+
+      {% call form_wrapper(class="extra-tracking") %}
         {{ textbox(
-          form_field,
+          form.two_factor_code,
           width='form-control-5em',
           autofocus=True
         ) }}
-        {{ page_footer(_('Confirm'), cancel_button_link=url_for('.user_profile')) }} 
-        <p class="mt-16">
-          {{ _("Didn’t get a text message?") }}
-          <br />
-          <a href="{{ url_for('main.sms_not_received') }}">{{ _('Re-send security code') }}</a>
-        </p>
+        {{ page_footer(
+          button_text=verify,
+          cancel_button_link=back_link,
+        ) }}
+
+        <details>
+          <summary>
+            {{ link_txt }}
+          </summary>
+          <div class="details-body">
+            <p>{{ _("To receive text messages you need a North American mobile phone number.") }}</p>
+            <p>{{ _("MS Teams, landlines, and some international numbers cannot receive texts.") }}</p>
+            <a href={{url_for('.verify_mobile_number')}} class="button button-secondary text-base outline-none focus:shadow-outline">{{ _('Resend verification code') }}</a>
+          </div>
+        </details>
       {% endcall %}
+
     </div>
   </div>
 
-{% endblock %}
+{% endblock %}

app/translations/csv/fr.csv

@@ -2236,4 +2236,9 @@
 "Use '{}' key","Utiliser la clé '{}'"
 "Verified","Vérifié"
 "Not verified","Non vérifié"
-"Enter password to change profile settings","Entrez votre mot de passe pour modifier votre profil"
+"Enter password to change profile settings","Entrez votre mot de passe pour modifier votre profil"
+"We’ve sent you a text message with a verification code.","Nous avons envoyé un code de vérification par message texte."
+"Verify","Vérifier"
+"Resend verification code","Renvoyer le code de vérification"
+"MS Teams, landlines, and some international numbers cannot receive texts.","Les numéros MS Teams, les lignes fixes, et certains numéros internationaux ne peuvent pas recevoir de messages texte."
+"To receive text messages you need a North American mobile phone number.","Pour recevoir le message texte, vous devez utiliser un numéro de téléphone nord-américain."