diff --git a/app/assets/javascripts/authentication/webauthn/components/authenticate.vue b/app/assets/javascripts/authentication/webauthn/components/authenticate.vue
index 394632d418caf3f35da7d6c01b2b3b98e19f01b2..a45fea4bcd892608c46e268a4ad1d2a6a2a2796d 100644
--- a/app/assets/javascripts/authentication/webauthn/components/authenticate.vue
+++ b/app/assets/javascripts/authentication/webauthn/components/authenticate.vue
@@ -1,6 +1,10 @@
 <script>
-import { GlButton, GlForm } from '@gitlab/ui';
+import { GlButton, GlForm, GlLink, GlSprintf } from '@gitlab/ui';
+import Vue from 'vue';
 import csrf from '~/lib/utils/csrf';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import EmailVerification from '~/sessions/new/components/email_verification.vue';
 import { supported, convertGetParams, convertGetResponse } from '../util';
 import { WEBAUTHN_AUTHENTICATE } from '../constants';
 import WebAuthnError from '../error';
@@ -10,6 +14,8 @@ export default {
   components: {
     GlForm,
     GlButton,
+    GlLink,
+    GlSprintf,
   },
   props: {
     webauthnParams: {
@@ -28,6 +34,16 @@ export default {
       type: String,
       required: true,
     },
+    sendEmailOtpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    username: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -39,6 +55,11 @@ export default {
       fallbackMode: false,
     };
   },
+  computed: {
+    showFooter() {
+      return this.errorMessage && this.sendEmailOtpPath;
+    },
+  },
   mounted() {
     if (this.isWebauthnSupported()) {
       this.authenticate();
@@ -62,6 +83,51 @@ export default {
     formSubmit() {
       this.$refs.loginToken2faForm.$el.submit();
     },
+    async sendEmailOtp() {
+      try {
+        const response = await axios({
+          method: 'post',
+          url: this.sendEmailOtpPath,
+          data: {
+            user: { login: this.username },
+          },
+        });
+
+        const { data } = response;
+
+        if (data.success) {
+          // Hide WebAuthn UI
+          this.fallbackMode = true;
+
+          // Hide the 2FA form
+          const twoFaForm = document.querySelector('.js-2fa-form');
+          if (twoFaForm) {
+            twoFaForm.classList.add('hidden');
+          }
+
+          // Initialize and show email verification component
+          const container = document.querySelector('.js-email-verification-container');
+          if (container && data.email_verification_data) {
+            container.classList.remove('hidden');
+
+            // eslint-disable-next-line no-new
+            new Vue({
+              el: container,
+              render: (h) =>
+                h(EmailVerification, {
+                  props: data.email_verification_data,
+                }),
+            });
+          }
+        } else {
+          this.errorMessage = data.message || __('Failed to send email otp');
+        }
+      } catch (error) {
+        const errorMessage =
+          error.response?.data?.message || error.message || __('Failed to send email otp');
+        this.errorMessage = errorMessage;
+      }
+    },
     async authenticate() {
       this.inProgress = true;
       try {
@@ -138,5 +204,25 @@ export default {
     >
       {{ __('Sign in via 2FA code') }}
     </gl-button>
+
+    <div v-if="showFooter" class="gl-mt-4 gl-text-sm gl-text-subtle">
+      <gl-sprintf
+        :message="__('Having trouble signing in? %{recoveryCodeLink} or %{sendCodeLink}.')"
+      >
+        <template #recoveryCodeLink>
+          <gl-link
+            href="https://docs.gitlab.com/ee/user/profile/account/two_factor_authentication/#recovery-codes"
+            target="_blank"
+          >
+            {{ __('Enter recovery code') }}
+          </gl-link>
+        </template>
+        <template #sendCodeLink>
+          <gl-link href="#" @click.prevent="sendEmailOtp">
+            {{ __('send code to email address') }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/authentication/webauthn/index.js b/app/assets/javascripts/authentication/webauthn/index.js
index 02576e8dbd96df42871e2aa8c01bd10ebccd07e5..b14d97ddaecbd05e86e9ea5c74d0d2a82dd0df10 100644
--- a/app/assets/javascripts/authentication/webauthn/index.js
+++ b/app/assets/javascripts/authentication/webauthn/index.js
@@ -9,7 +9,7 @@ export const initWebauthnAuthenticate = () => {
     return false;
   }
 
-  const { targetPath, renderRememberMe, rememberMe } = el.dataset;
+  const { targetPath, renderRememberMe, rememberMe, sendEmailOtpPath, username } = el.dataset;
 
   return new Vue({
     el,
@@ -21,6 +21,8 @@ export const initWebauthnAuthenticate = () => {
           targetPath,
           renderRememberMe: parseBoolean(renderRememberMe),
           rememberMe,
+          sendEmailOtpPath,
+          username,
         },
       });
     },
diff --git a/app/assets/javascripts/sessions/new/index.js b/app/assets/javascripts/sessions/new/index.js
index 1540dff155af4841640d98cb64a0ec53caf08925..1394886db7cc3ded44a9ad813454216852a21422 100644
--- a/app/assets/javascripts/sessions/new/index.js
+++ b/app/assets/javascripts/sessions/new/index.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
+import { initWebauthnAuthenticate } from '~/authentication/webauthn';
 import EmailVerification from './components/email_verification.vue';
 
 export default () => {
+  initWebauthnAuthenticate();
   const el = document.querySelector('.js-email-verification');
 
   if (!el) {
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index b8ee5e8a4789d49a850b03a32dcc46cb639c52f0..b08d0ac2e0ae88882f69fbcd5edd11244a597164 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -106,6 +106,40 @@ def destroy
     end
   end
 
+  def fallback_to_email_otp
+    user = find_user
+
+    unless user
+      render json: { success: false, message: _('Session expired.') }, status: :unauthorized
+      return
+    end
+
+    if fallback_to_email_otp_permitted?(user)
+      clear_two_factor_attempt!
+      session[:verification_user_id] = user.id
+
+      if !treat_as_locked?(user)
+        send_otp_with_email(user, secondary_email: nil, reason: VerifiesWithEmail::VERIFICATION_REASON_EMAIL_OTP)
+
+        render json: {
+          success: true,
+          message: _('Verification code has been sent to your email address.'),
+          email_verification_data: {
+            username: user.username,
+            obfuscatedEmail: obfuscated_email(user.email),
+            verifyPath: session_path(:user),
+            resendPath: users_resend_verification_code_path
+          }
+        }, status: :ok
+      else
+        render json: { success: false, message: _('Unable to send code to locked user.') },
+          status: :unprocessable_entity
+      end
+    else
+      render json: { success: false, message: _('Not permitted.') }, status: :bad_request
+    end
+  end
+
   private
 
   override :after_pending_invitations_hook
diff --git a/app/helpers/sessions_helper.rb b/app/helpers/sessions_helper.rb
index 25b1d4b9b7298a39b4692179e0e108b9e8edc0ee..ab7e0a35304ef5164e2162a1bb5fdcf4650d0fa4 100644
--- a/app/helpers/sessions_helper.rb
+++ b/app/helpers/sessions_helper.rb
@@ -33,4 +33,32 @@ def verification_data(user)
       skip_path: permitted_to_skip ? users_skip_verification_for_now_path : nil
     }
   end
+
+  def fallback_to_email_otp_permitted?(user)
+    Feature.enabled?(:email_based_mfa, user) &&
+      user.email_otp_required_after.present? &&
+      user.email_otp_required_after <= Time.zone.today
+  end
+
+  def webauthn_authentication_data(user, admin_mode: false)
+    target_path = admin_mode ? admin_session_path : user_session_path
+    render_remember_me = admin_mode ? false : remember_me_enabled?
+    user_params = params[:user].presence || params
+    remember_me_value = user_params.fetch(:remember_me, 0)
+
+    send_email_otp_path = fallback_to_email_otp_permitted?(user) ? users_fallback_to_email_otp_path : nil
+
+    data = {
+      target_path: target_path,
+      render_remember_me: render_remember_me.to_s,
+      remember_me: remember_me_value,
+      send_email_otp_path: send_email_otp_path,
+      username: user.username
+    }
+
+    # This is addtional data needed to complete the the email verification workflow
+    data[:email_verification_data] = verification_data(user).to_json if send_email_otp_path
+
+    data
+  end
 end
diff --git a/app/views/devise/shared/_totp_recovery_code_or_webauthn.html.haml b/app/views/devise/shared/_totp_recovery_code_or_webauthn.html.haml
index 9e7c484e2cbda9b214a23a254f91bb4527109bef..c244f1f08a810759e251df3282c6250797193347 100644
--- a/app/views/devise/shared/_totp_recovery_code_or_webauthn.html.haml
+++ b/app/views/devise/shared/_totp_recovery_code_or_webauthn.html.haml
@@ -1,5 +1,5 @@
 - target_path = admin_mode ? admin_session_path : user_session_path
-- render_remember_me =  admin_mode ? false : remember_me_enabled?
+- render_remember_me = admin_mode ? false : remember_me_enabled?
 - user_params = params[:user].presence || params
 
 = gitlab_ui_form_for(:user, url: target_path, method: :post, html: { class: "gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_enabled?}", aria: { live: 'assertive' }}) do |f|
@@ -16,5 +16,8 @@
   = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'verify-code-button' } }) do
     = _("Verify code")
 
+-# Add email verification component container (always hidden initially)
+.js-email-verification-container.hidden
+
 - if @user.two_factor_webauthn_enabled?
-  #js-authentication-webauthn{ data: { target_path: target_path, render_remember_me: render_remember_me.to_s, remember_me: user_params.fetch(:remember_me, 0) } }
+  #js-authentication-webauthn{ data: webauthn_authentication_data(@user, admin_mode: admin_mode) }
diff --git a/config/routes/user.rb b/config/routes/user.rb
index 42fb3e02ecafe81ae7b672d8a31303c722942d94..dc98d595e46b3afae4a4d3a69eb078a42028ced9 100644
--- a/config/routes/user.rb
+++ b/config/routes/user.rb
@@ -57,6 +57,7 @@ def override_omniauth(provider, controller, path_prefix = '/users/auth')
   get '/users/successful_verification', to: 'sessions#successful_verification'
   post '/users/skip_verification_for_now', to: 'sessions#skip_verification_for_now'
   get '/users/skip_verification_confirmation', to: 'sessions#skip_verification_confirmation'
+  post '/users/fallback_to_email_otp', to: 'sessions#fallback_to_email_otp'
 
   # Redirect on GitHub authorization request errors. E.g. it could happen when user:
   # 1. cancel authorization the GitLab OAuth app via GitHub to import GitHub repos
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8f8f9f7b836f05a1fcf5639b904f86df0abe0e9c..c7a6acb4f3def0f306e206f0a788ee42cdb36928 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26316,6 +26316,9 @@ msgstr ""
 msgid "Enter one or more user ID separated by commas"
 msgstr ""
 
+msgid "Enter recovery code"
+msgstr ""
+
 msgid "Enter text"
 msgstr ""
 
@@ -28212,6 +28215,9 @@ msgstr ""
 msgid "Failed to save timelog"
 msgstr ""
 
+msgid "Failed to send email otp"
+msgstr ""
+
 msgid "Failed to set due date because the date format is invalid."
 msgstr ""
 
@@ -33171,6 +33177,9 @@ msgstr ""
 msgid "Hashed storage can't be disabled anymore for new projects"
 msgstr ""
 
+msgid "Having trouble signing in? %{recoveryCodeLink} or %{sendCodeLink}."
+msgstr ""
+
 msgid "Header logo"
 msgstr ""
 
@@ -43899,6 +43908,9 @@ msgstr ""
 msgid "Not permitted to update requirement control"
 msgstr ""
 
+msgid "Not permitted."
+msgstr ""
+
 msgid "Not ready yet. Try again later."
 msgstr ""
 
@@ -62236,6 +62248,9 @@ msgstr ""
 msgid "Session ID"
 msgstr ""
 
+msgid "Session expired."
+msgstr ""
+
 msgid "SessionExpire|Please, sign in again. To avoid data loss, if you have unsaved edits, dismiss the modal and copy the unsaved text before sign in again."
 msgstr ""
 
@@ -69734,6 +69749,9 @@ msgstr ""
 msgid "Unable to send approval request to administrator."
 msgstr ""
 
+msgid "Unable to send code to locked user."
+msgstr ""
+
 msgid "Unable to sign in to group with SAML: \"%{reason}\""
 msgstr ""
 
@@ -72019,6 +72037,9 @@ msgstr ""
 msgid "Various settings that affect GitLab performance."
 msgstr ""
 
+msgid "Verification code has been sent to your email address."
+msgstr ""
+
 msgid "Verification status"
 msgstr ""
 
@@ -79877,6 +79898,9 @@ msgstr ""
 msgid "selective_code_owner_removals can only be enabled when retain_approvals_on_push is enabled"
 msgstr ""
 
+msgid "send code to email address"
+msgstr ""
+
 msgid "service %{service_num} doesn't exist"
 msgstr ""
 
diff --git a/spec/controllers/sessions_controller_spec.rb b/spec/controllers/sessions_controller_spec.rb
index 2716c9ed03eca5377f995f20055dfcf5e9201a18..21b5ea9925f5bf1b9370cb839ebdd081a8d1a6b5 100644
--- a/spec/controllers/sessions_controller_spec.rb
+++ b/spec/controllers/sessions_controller_spec.rb
@@ -825,4 +825,91 @@ def authenticate_2fa(user_params)
       end
     end
   end
+
+  describe '#fallback_to_email_otp' do
+    context 'when user has email_otp_required_after set to nil' do
+      let(:user) { create(:user, email_otp_required_after: nil) }
+
+      it 'is not permitted to fallback to email otp' do
+        post :fallback_to_email_otp, params: { user: { login: user.username } }
+
+        expect(json_response).to match({
+          'success' => false,
+          'message' => 'Not permitted.'
+        })
+      end
+    end
+
+    context 'when user has email_otp_required_after set to the future' do
+      let(:user) { create(:user, email_otp_required_after: Time.zone.now + 1.day) }
+
+      it 'is not permitted to fallback to email otp' do
+        post :fallback_to_email_otp, params: { user: { login: user.username } }
+
+        expect(json_response).to match({
+          'success' => false,
+          'message' => 'Not permitted.'
+        })
+      end
+    end
+
+    context 'when user has email_otp_required_after set to the past' do
+      let(:user) { create(:user, email: 'user1@example.org', email_otp_required_after: Time.zone.now - 1.day) }
+
+      context 'when email_based_mfa ff is disabled for the user' do
+        before do
+          Feature.disable(:email_based_mfa, user)
+        end
+
+        it 'is not permitted to fallback to email otp' do
+          post :fallback_to_email_otp, params: { user: { login: user.username } }
+          expect(json_response).to match({
+            'success' => false,
+            'message' => 'Not permitted.'
+          })
+        end
+      end
+
+      context 'when email_based_mfa ff is enabled for the user' do
+        before do
+          Feature.enable(:email_based_mfa, user)
+        end
+
+        context 'when user is locked' do
+          before do
+            user.update!(unlock_token: '1234')
+          end
+
+          it 'returns error' do
+            post :fallback_to_email_otp, params: { user: { login: user.username } }
+
+            expect(json_response).to match({
+              'success' => false,
+              'message' => 'Unable to send code to locked user.'
+            })
+          end
+        end
+
+        context 'when user is not treated as locked' do
+          it 'is permitted to fallback to email otp' do
+            post :fallback_to_email_otp, params: { user: { login: user.username } }
+
+            expect(session[:verification_user_id]).to eq(user.id)
+            expect(response).to have_gitlab_http_status(:ok)
+
+            expect(json_response).to match({
+              'success' => true,
+              'message' => 'Verification code has been sent to your email address.',
+              'email_verification_data' => {
+                'obfuscatedEmail' => 'us***@e******.org',
+                'resendPath' => '/users/resend_verification_code',
+                'username' => user.username,
+                'verifyPath' => '/users/sign_in'
+              }
+            })
+          end
+        end
+      end
+    end
+  end
 end
diff --git a/spec/features/users/login_spec.rb b/spec/features/users/login_spec.rb
index 812a5ceaa01edae09583cf4ee78535912a8a8d12..7a6e9543abc1b5b62d8bc7a566b60fcc157241ae 100644
--- a/spec/features/users/login_spec.rb
+++ b/spec/features/users/login_spec.rb
@@ -7,6 +7,7 @@
   include UserLoginHelper
   include SessionHelpers
   include Features::TwoFactorHelpers
+  include EmailHelpers
 
   before do
     stub_authentication_activity_metrics(debug: true)
@@ -387,6 +388,68 @@ def enter_code(code, only_two_factor_webauthn_enabled: false)
       end
     end
 
+    context 'when signing in with WebAuthn' do
+      let(:user) { create(:user, :two_factor_via_webauthn) }
+      let(:current_organization) { user.organization }
+
+      before do
+        visit new_user_session_path
+        fill_in 'user_login', with: user.username
+        fill_in 'user_password', with: user.password
+        click_button 'Sign in'
+      end
+
+      context 'Fallback to email OTP' do
+        context 'when email_based_mfa feature flag is disabled' do
+          before do
+            stub_feature_flags(email_based_mfa: false)
+          end
+
+          it 'does not show the email OTP fallback footer' do
+            expect(page).not_to have_content('Having trouble signing in?')
+            expect(page).not_to have_link('send code to email address')
+          end
+        end
+
+        context 'when email_based_mfa feature flag is enabled' do
+          before do
+            stub_feature_flags(email_based_mfa: user)
+          end
+
+          # we will not be testing different email_otp_required_after values
+          # since this is covered in the unit test level
+          context 'when user has email_otp_required_after set to past date' do
+            let(:user) { create(:user, :two_factor_via_webauthn, email_otp_required_after: 1.day.ago) }
+
+            context 'when WebAuthn authentication fails' do
+              it 'shows the email OTP fallback footer with helpful links' do
+                expect(page).to have_content('Having trouble signing in?')
+
+                expect(page).to have_link(
+                  'Enter recovery code',
+                  href: "https://docs.gitlab.com/ee/user/profile/account/two_factor_authentication/#recovery-codes"
+                )
+                expect(page).to have_link('send code to email address')
+
+                perform_enqueued_jobs do
+                  click_link 'send code to email address'
+                  expect(page).to have_content('Verification code')
+
+                  # WebAuthn UI should be hidden
+                  expect(page).not_to have_content('Trying to communicate with your device')
+
+                  mail = wait_for('mail found for user') { find_email_for(user) }
+                  mail_to = mail&.to
+                  expect(mail_to).to match_array([user.email])
+                  expect(mail.subject).to eq(s_('IdentityVerification|Verify your identity'))
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
     context 'when logging in via OAuth' do
       let(:user) { create(:omniauth_user, :two_factor, extern_uid: 'my-uid', provider: 'saml') }
       let(:mock_saml_response) do
diff --git a/spec/frontend/authentication/webauthn/components/authenticate_spec.js b/spec/frontend/authentication/webauthn/components/authenticate_spec.js
index b087708ae96eae31f3d6162f68619ed12236dd6f..bc85ad3db3c05c11d12bdbb180fdb118ad5b5a2f 100644
--- a/spec/frontend/authentication/webauthn/components/authenticate_spec.js
+++ b/spec/frontend/authentication/webauthn/components/authenticate_spec.js
@@ -1,11 +1,17 @@
+import { GlLink } from '@gitlab/ui';
 import htmlWebauthnAuthenticate from 'test_fixtures/webauthn/authenticate.html';
+import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import WebAuthnAuthenticate from '~/authentication/webauthn/components/authenticate.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import axios from '~/lib/utils/axios_utils';
 import MockWebAuthnDevice from '../mock_webauthn_device';
 import { useMockNavigatorCredentials } from '../util';
 
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+jest.mock('~/lib/utils/axios_utils', () => jest.fn());
+
 let wrapper;
 
 const mockResponse = {
@@ -16,24 +22,24 @@ const mockResponse = {
   getClientExtensionResults: () => {},
 };
 
-const createComponent = () => {
+const createComponent = (propsData = {}) => {
   wrapper = mountExtended(WebAuthnAuthenticate, {
     propsData: {
-      webauthnParams:
-        // we need some valid base64 for base64ToBuffer
-        // so we use "YQ==" = base64("a")
-        {
-          challenge: 'YQ==',
-          timeout: 120000,
-          allowCredentials: [
-            { type: 'public-key', id: 'YQ==' },
-            { type: 'public-key', id: 'YQ==' },
-          ],
-          userVerification: 'discouraged',
-        },
+      webauthnParams: {
+        challenge: 'YQ==',
+        timeout: 120000,
+        allowCredentials: [
+          { type: 'public-key', id: 'YQ==' },
+          { type: 'public-key', id: 'YQ==' },
+        ],
+        userVerification: 'discouraged',
+      },
       targetPath: '/webauthn',
       renderRememberMe: true,
       rememberMe: 'Remember me',
+      sendEmailOtpPath: '',
+      username: '',
+      ...propsData,
     },
   });
 };
@@ -49,6 +55,9 @@ describe('WebAuthnAuthenticate', () => {
   const findFallbackElement = () => document.querySelector('.js-2fa-form');
   const findInProgress = () => wrapper.find('p');
   const findAuthenticated = () => wrapper.find('#js-authenticate-token-2fa-authenticated p');
+  const findFooter = () => wrapper.findByText(/Having trouble signing in\?/);
+  const findRecoveryCodeLink = () => wrapper.findAllComponents(GlLink).at(0);
+  const findEmailOtpLink = () => wrapper.findAllComponents(GlLink).at(1);
 
   const expectAuthenticated = () => {
     expect(findAuthenticated().text()).toMatchInterpolatedText(
@@ -66,6 +75,7 @@ describe('WebAuthnAuthenticate', () => {
 
   afterEach(() => {
     resetHTMLFixture();
+    jest.clearAllMocks();
   });
 
   describe('with webauthn unavailable', () => {
@@ -131,4 +141,206 @@ describe('WebAuthnAuthenticate', () => {
       });
     });
   });
+
+  describe('email OTP fallback', () => {
+    describe('when sendEmailOtpPath is not provided', () => {
+      beforeEach(() => {
+        createComponent({ sendEmailOtpPath: '' });
+        webAuthnDevice.rejectAuthenticateRequest(new DOMException());
+
+        return waitForPromises();
+      });
+
+      it('does not show the footer', () => {
+        expect(findFooter().exists()).toBe(false);
+      });
+    });
+
+    describe('when sendEmailOtpPath is provided', () => {
+      beforeEach(() => {
+        createComponent({
+          sendEmailOtpPath: '/users/fallback_to_email_otp',
+          username: 'testuser',
+        });
+      });
+
+      it('does not show footer when there is no error', () => {
+        expect(findFooter().exists()).toBe(false);
+      });
+
+      describe('when authentication fails', () => {
+        beforeEach(() => {
+          webAuthnDevice.rejectAuthenticateRequest(new DOMException());
+
+          return waitForPromises();
+        });
+
+        it('shows the footer with helpful links', () => {
+          expect(findFooter().exists()).toBe(true);
+          expect(wrapper.text()).toContain('Enter recovery code');
+          expect(wrapper.text()).toContain('send code to email address');
+        });
+
+        it('recovery code link points to documentation', () => {
+          const link = findRecoveryCodeLink();
+
+          expect(link.attributes('href')).toBe(
+            `${DOCS_URL_IN_EE_DIR}/user/profile/account/two_factor_authentication/#recovery-codes`,
+          );
+        });
+
+        it('email OTP link triggers sendEmailOtp', async () => {
+          const sendEmailOtpSpy = jest.spyOn(wrapper.vm, 'sendEmailOtp').mockResolvedValue();
+
+          const link = findEmailOtpLink();
+          await link.trigger('click');
+          await waitForPromises();
+
+          expect(sendEmailOtpSpy).toHaveBeenCalled();
+        });
+      });
+
+      describe('sendEmailOtp', () => {
+        beforeEach(() => {
+          setHTMLFixture(`
+            ${htmlWebauthnAuthenticate}
+            <div class="js-2fa-form"></div>
+            <div class="js-email-verification-container hidden"></div>
+          `);
+
+          createComponent({
+            sendEmailOtpPath: '/users/fallback_to_email_otp',
+            username: 'testuser',
+          });
+        });
+
+        it('sends POST request with email_verification_data', async () => {
+          const mockData = {
+            success: true,
+            email_verification_data: {
+              username: 'testuser',
+              obfuscatedEmail: 't***@example.com',
+              verifyPath: '/users/sign_in',
+              resendPath: '/users/resend_verification_code',
+            },
+          };
+
+          axios.mockResolvedValue({ data: mockData });
+
+          await wrapper.vm.sendEmailOtp();
+
+          expect(axios).toHaveBeenCalledWith({
+            method: 'post',
+            url: '/users/fallback_to_email_otp',
+            data: {
+              user: { login: 'testuser' },
+            },
+          });
+        });
+
+        it('sets fallbackMode to true on success', async () => {
+          axios.mockResolvedValue({
+            data: {
+              success: true,
+              email_verification_data: {},
+            },
+          });
+
+          await wrapper.vm.sendEmailOtp();
+          await waitForPromises();
+
+          expect(wrapper.vm.fallbackMode).toBe(true);
+        });
+
+        it('hides 2FA form on success', async () => {
+          const twoFaForm = document.querySelector('.js-2fa-form');
+
+          axios.mockResolvedValue({
+            data: {
+              success: true,
+              email_verification_data: {},
+            },
+          });
+
+          await wrapper.vm.sendEmailOtp();
+          await waitForPromises();
+
+          expect(twoFaForm.classList.contains('hidden')).toBe(true);
+        });
+
+        it('shows email verification container on success', async () => {
+          const container = document.querySelector('.js-email-verification-container');
+
+          axios.mockResolvedValue({
+            data: {
+              success: true,
+              email_verification_data: {
+                username: 'testuser',
+                obfuscatedEmail: 't***@example.com',
+                verifyPath: '/users/sign_in',
+                resendPath: '/users/resend_verification_code',
+              },
+            },
+          });
+
+          await wrapper.vm.sendEmailOtp();
+          await waitForPromises();
+
+          expect(container.classList.contains('hidden')).toBe(false);
+        });
+
+        it('sets errorMessage when response is not ok', async () => {
+          axios.mockRejectedValue({
+            response: {
+              status: 422,
+              data: {
+                success: false,
+                message: 'Not permitted',
+              },
+            },
+          });
+
+          await wrapper.vm.sendEmailOtp();
+
+          expect(wrapper.vm.errorMessage).toBe('Not permitted');
+        });
+
+        it('sets errorMessage when success is false', async () => {
+          axios.mockResolvedValue({
+            data: {
+              success: false,
+              message: 'Session expired',
+            },
+          });
+
+          await wrapper.vm.sendEmailOtp();
+
+          expect(wrapper.vm.errorMessage).toBe('Session expired');
+        });
+
+        it('sets errorMessage when fetch fails', async () => {
+          axios.mockRejectedValue(new Error('Network error'));
+
+          await wrapper.vm.sendEmailOtp();
+
+          expect(wrapper.vm.errorMessage).toBe('Network error');
+        });
+      });
+    });
+  });
+
+  describe('switchToFallbackUI', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('removes hidden class from 2FA form if it exists, sets fallbackMode to true', () => {
+      const form = findFallbackElement();
+      form.classList.add('hidden');
+
+      wrapper.vm.switchToFallbackUI();
+
+      expect(wrapper.vm.fallbackMode).toBe(true);
+    });
+  });
 });
diff --git a/spec/helpers/sessions_helper_spec.rb b/spec/helpers/sessions_helper_spec.rb
index 40e80c2a35dda0c1a3596baec2d26ecaa65bc2c4..b5656cc6f7aa5a1037bca92afe5ddddbebd40ed0 100644
--- a/spec/helpers/sessions_helper_spec.rb
+++ b/spec/helpers/sessions_helper_spec.rb
@@ -105,4 +105,182 @@
       it { is_expected.to be false }
     end
   end
+
+  describe '#fallback_to_email_otp_permitted?' do
+    let(:user) { build_stubbed(:user) }
+
+    context 'when email_based_mfa feature flag is disabled' do
+      before do
+        stub_feature_flags(email_based_mfa: false)
+      end
+
+      it 'returns false' do
+        expect(helper.fallback_to_email_otp_permitted?(user)).to be false
+      end
+    end
+
+    context 'when email_based_mfa feature flag is enabled' do
+      before do
+        stub_feature_flags(email_based_mfa: user)
+      end
+
+      context 'when user has email_otp_required_after set to nil' do
+        let(:user) { build_stubbed(:user, email_otp_required_after: nil) }
+
+        it 'returns false' do
+          expect(helper.fallback_to_email_otp_permitted?(user)).to be false
+        end
+      end
+
+      context 'when user has email_otp_required_after set to future date' do
+        let(:user) do
+          build_stubbed(:user, email_otp_required_after: Time.zone.today + 1.day)
+        end
+
+        it 'returns false' do
+          expect(helper.fallback_to_email_otp_permitted?(user)).to be false
+        end
+      end
+
+      context 'when user has email_otp_required_after set to today' do
+        let(:user) { build_stubbed(:user, email_otp_required_after: Time.zone.today) }
+
+        it 'returns true' do
+          expect(helper.fallback_to_email_otp_permitted?(user)).to be true
+        end
+      end
+
+      context 'when user has email_otp_required_after set to past date' do
+        let(:user) { build_stubbed(:user, email_otp_required_after: Time.zone.today - 1.day) }
+
+        it 'returns true' do
+          expect(helper.fallback_to_email_otp_permitted?(user)).to be true
+        end
+      end
+    end
+  end
+
+  describe '#webauthn_authentication_data' do
+    let(:user) { build_stubbed(:user) }
+    let(:remember_me_enabled) { true }
+
+    before do
+      allow(helper).to receive_messages(remember_me_enabled?: remember_me_enabled,
+        params: { user: { remember_me: '1' } })
+    end
+
+    context 'when admin_mode is false' do
+      it 'returns correct target_path' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:target_path]).to eq(user_session_path)
+      end
+
+      it 'returns render_remember_me as true when remember_me is enabled' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:render_remember_me]).to eq('true')
+      end
+
+      it 'returns remember_me value from params' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:remember_me]).to eq('1')
+      end
+    end
+
+    context 'when admin_mode is true' do
+      it 'returns admin session path as target_path' do
+        data = helper.webauthn_authentication_data(user, admin_mode: true)
+
+        expect(data[:target_path]).to eq(admin_session_path)
+      end
+
+      it 'returns render_remember_me as false' do
+        data = helper.webauthn_authentication_data(user, admin_mode: true)
+
+        expect(data[:render_remember_me]).to eq('false')
+      end
+    end
+
+    context 'when remember_me is disabled' do
+      let(:remember_me_enabled) { false }
+
+      it 'returns render_remember_me as false' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:render_remember_me]).to eq('false')
+      end
+    end
+
+    context 'when user params is not present' do
+      before do
+        allow(helper).to receive(:params).and_return({})
+      end
+
+      it 'returns default remember_me value of 0' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:remember_me]).to eq(0)
+      end
+    end
+
+    context 'when fallback_to_email_otp is permitted' do
+      before do
+        allow(helper).to receive(:fallback_to_email_otp_permitted?).and_return(true)
+        allow(helper).to receive(:verification_data).with(user).and_return({
+          username: user.username,
+          obfuscated_email: 'u***@example.com',
+          verify_path: '/verify',
+          resend_path: '/resend',
+          skip_path: nil
+        })
+      end
+
+      it 'includes send_email_otp_path' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:send_email_otp_path]).to eq(users_fallback_to_email_otp_path)
+      end
+
+      it 'includes username' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:username]).to eq(user.username)
+      end
+
+      it 'includes email_verification_data as JSON' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:email_verification_data]).to be_present
+        parsed_data = Gitlab::Json.parse(data[:email_verification_data])
+        expect(parsed_data['username']).to eq(user.username)
+        expect(parsed_data['obfuscated_email']).to eq('u***@example.com')
+      end
+    end
+
+    context 'when fallback_to_email_otp is not permitted' do
+      before do
+        allow(helper).to receive(:fallback_to_email_otp_permitted?).and_return(false)
+      end
+
+      it 'does not include send_email_otp_path' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:send_email_otp_path]).to be_nil
+      end
+
+      it 'includes username' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data[:username]).to eq(user.username)
+      end
+
+      it 'does not include email_verification_data' do
+        data = helper.webauthn_authentication_data(user)
+
+        expect(data.key?(:email_verification_data)).to be false
+      end
+    end
+  end
 end