Skip to content

feat(mfa): add MFA flow integration example in mfa_flow.html#1040

Draft
gyaneshgouraw-okta wants to merge 1 commit intomainfrom
feat/mfa_example
Draft

feat(mfa): add MFA flow integration example in mfa_flow.html#1040
gyaneshgouraw-okta wants to merge 1 commit intomainfrom
feat/mfa_example

Conversation

@gyaneshgouraw-okta
Copy link
Contributor

Summary

Add an interactive MFA APIs playground page that lets developers test the full Auth0 MFA flow — enrollment, challenge, and verification — directly from a single HTML file using auth0-react.

Changes

  • Added a standalone MFA playground page that loads React and auth0-react via CDN/local bundle
  • Config form collects Auth0 domain, client ID, audience, and scopes before initiating login — settings persist in localStorage
  • On config submit, automatically redirects to Auth0 login (no intermediate "not logged in" state)
  • After login, supports triggering MFA via silent token acquisition and displays MFA requirements
  • Lists enrolled authenticators with the ability to initiate challenge and verify codes (OTP, OOB, recovery codes)
  • Supports enrolling new authenticators: OTP (with QR code), SMS, email, and push notification
  • Shows recovery codes section for backup verification
  • Includes user profile display, logout, and flow reset controls

Testing

  • Open static/mfa_flow.html in a browser (with auth0-react.js built alongside it)
  • Enter valid Auth0 tenant domain and client ID — verify it redirects to Auth0 login immediately
  • After login, click "Get token silently (Trigger MFA)" and verify the MFA flow works end-to-end
  • Verify that refreshing the page shows the config form again (pre-populated with saved values)

try {
var factorType = type === 'push-notification' ? 'push' : 'otp';
const data = await mfa.enroll({ mfaToken, factorType: factorType });
console.log(">>>>>>details push", data)

Check notice

Code scanning / CodeQL

Semicolon insertion Note

Avoid automated semicolon insertion (90% of all statements in
the enclosing function
have an explicit semicolon).

Copilot Autofix

AI 9 days ago

In general, to avoid relying on ASI, terminate all JavaScript statements explicitly with semicolons, especially in codebases that otherwise consistently do so. This improves readability and avoids edge cases where line breaks change program behavior.

For this specific instance, the best fix is to add a terminating semicolon to the console.log statement inside the selectType function in static/mfa_flow.html. Only line 242 needs to change: turn console.log(">>>>>>details push", data) into console.log(">>>>>>details push", data);. No imports, additional methods, or other code changes are required, and this does not alter existing functionality.

Suggested changeset 1
static/mfa_flow.html

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/static/mfa_flow.html b/static/mfa_flow.html
--- a/static/mfa_flow.html
+++ b/static/mfa_flow.html
@@ -239,7 +239,7 @@
             try {
               var factorType = type === 'push-notification' ? 'push' : 'otp';
               const data = await mfa.enroll({ mfaToken, factorType: factorType });
-              console.log(">>>>>>details push", data)
+              console.log(">>>>>>details push", data);
               setEnrollmentData(data);
             } catch (e) {
               setError(e.message || e.error_description || String(e));
EOF
@@ -239,7 +239,7 @@
try {
var factorType = type === 'push-notification' ? 'push' : 'otp';
const data = await mfa.enroll({ mfaToken, factorType: factorType });
console.log(">>>>>>details push", data)
console.log(">>>>>>details push", data);
setEnrollmentData(data);
} catch (e) {
setError(e.message || e.error_description || String(e));
Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant