Files
0e520b0401 Add ActionCodeSettings.linkDomain and deprecate ActionCodeSettings.dynamicLinkDomain (#8738)
* Add linkDomain field to ActionCodeSettings (#8428)

* Add linkDomain field to ActionCodeSettings

* Update API reports

* Update error message for ERROR_INVALID_HOSTING_LINK_DOMAIN to include that default hosting domains cannot be used.

* Use constants for test values

---------

Co-authored-by: NhienLam <[email protected]>

* FDL Deprecation & Hosting link Integration Test (#8603)

* Implement Integration test for passwordless email sign-in via firebase-hosting links.

* Add license to new test file created' did not match any files

* Remove unwanted _

* Add support for setting custom hosting link domain in test app (#8614)

* Add afterEach method and apply formatting to the hosting links integration test (#8615)

* Mark ActionCodeSettings.dynamicLinkDomain as deprecated

* Add changeset

* Update API reports

* Address review comments

* Fix changeset

* Update refdocs and address review comments

* Update deprecated comment

* Add FDL deprecation FAQ link

* Fix linkDomain link in refdocs

---------

Co-authored-by: NhienLam <[email protected]>
Co-authored-by: mansisampat <[email protected]>
2025-02-04 14:18:02 -08:00

938 lines
46 KiB
HTML

<!DOCTYPE html>
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta charset="UTF-8">
<title>Headless App</title>
<link rel="manifest" href="manifest.json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A=="
crossorigin="anonymous"></script>
<script src="index.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="recaptcha-container"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Firebase Auth Test App
</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
reCAPTCHA Config <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">reCAPTCHA Mode</li>
<li class="active toggleRecaptcha">
<a href="#">Normal</a>
</li>
<li class="toggleRecaptcha">
<a href="#">Invisible</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Placeholder to not confuse the user -->
<div class="container-fluid" id="toggle-user-placeholder">
<div class="btn-group btn-group-justified btn-group-sm">
<a href="javascript:void();" class="btn btn-default current-user">
auth.currentUser
</a>
<a href="javascript:void();" class="btn btn-default disabled">
Last User
</a>
</div>
</div>
<!-- Toggle currentUser, lastUser -->
<div class="container-fluid" id="toggle-user">
<div class="btn-group radio-block" id="toggle-user-selection" data-toggle="buttons">
<label class="btn btn-sm btn-default current-user active">
<input type="radio" name="toggle-user-selection" value="currentUser"
autocomplete="off" checked>auth.currentUser
</label>
<label class="btn btn-sm btn-default last-user">
<input type="radio" name="toggle-user-selection" value="lastUser"
autocomplete="off"> Last User
</label>
</div>
</div>
<!-- Signed in user info -->
<div id="user-info" class="profile">
<div class="pull-left">
<img class="profile-image" />
<span class="profile-name profile-data"></span>
<span class="profile-anonymous">[anonymous]</span> /
uid:
<span class="profile-uid profile-data"></span>
</div>
<div class="pull-right">
<span class="profile-providers"></span>
<span class="profile-phone profile-data"></span> /
<span class="profile-email profile-data"></span>
<span class="profile-email-verified" data-toggle="tooltip"
title="Email Verified" data-placement="bottom">
<i class="fa fa-check"></i>
</span>
<span class="profile-email-not-verified" data-toggle="tooltip"
title="Email Not Verified" data-placement="bottom">
<i class="fa fa-times"></i>
</span>
<div class="btn-group" id="enrolled-factors-drop-down">
<button type="button" class="btn btn-default btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-key" title="User multi-factor enrolled"
data-toggle="tooltip" data-placement="bottom"></i>
<span class="caret"></span>
</button>
<!-- List of enrolled second factors. -->
<div class="dropdown-menu enrolled-second-factors"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Overlaying alert box -->
<div id="alert-messages" class="container-fluid overlaying-alert"></div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 actions">
<ul id="tab-menu" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#auth-section" aria-controls="auth-section"
data-toggle="tab" role="tab">
Auth methods
</a>
</li>
<li role="presentation">
<a href="#user-section" aria-controls="user-section"
data-toggle="tab" role="tab">
User methods
</a>
</li>
<li role="presentation">
<a href="#popup-redirect-section"
aria-controls="popup-redirect-section"
data-toggle="tab" role="tab">
Popup/Redirect methods
</a>
</li>
<li role="presentation">
<a href="#action-code-settings-section"
aria-controls="action-code-settings-section"
data-toggle="tab" role="tab">
Action Code Settings
</a>
</li>
<li role="presentation" class="visible-xs">
<a href="#logs-section"
aria-controls="logs-section"
data-toggle="tab" role="tab">
Logs
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="auth-section">
<!-- Development mode APIs -->
<div class="group">Development mode APIs</div>
<form class="form form-bordered no-submit">
<div class="btn-group radio-block" id="enable-app-verification-selection"
data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="enable-app-verification" value="Yes"
autocomplete="off" checked> Enable App Verification
</label>
<label class="btn btn-primary">
<input type="radio" name="enable-app-verification" value="No"
autocomplete="off"> Disable App Verification
</label>
</div>
<button class="btn btn-block btn-primary"
id="apply-auth-settings-change">Apply settings change</button>
</form>
<!-- Worker tests -->
<div class="group">Web Worker Testing</div>
<form class="form form-bordered no-submit">
<button class="btn btn-block btn-primary"
id="run-web-worker-tests">
Run Tests
</button>
</form>
<div class="group">Service Worker Testing</div>
<form class="form form-bordered no-submit">
<button class="btn btn-block btn-primary"
id="run-service-worker-tests">
Run Tests
</button>
</form>
<!-- Persistence-->
<div class="group">Auth State Persistence</div>
<form class="form form-bordered no-submit">
<input type="text" id="persistence-type"
class="form-control" list="persistence-type-options"
placeholder="Persistence" />
<button class="btn btn-block btn-primary"
id="set-persistence">
Set Persistence
</button>
</form>
<!-- Language code -->
<div class="group">Language code</div>
<form class="form form-bordered no-submit">
<input type="text" id="language-code"
class="form-control"
placeholder="Language code" />
<button class="btn btn-block btn-primary"
id="set-language-code">
Set Language Code
</button>
<button class="btn btn-block btn-primary"
id="use-device-language">
Use Device Language
</button>
</form>
<!-- Set Tenant -->
<div class="group">Set Tenant</div>
<form class="form form-bordered no-submit">
<input type="text" id="tenant-id" class="form-control"
placeholder="Tenant ID" />
<button class="btn btn-block btn-primary set-tenant-id"
data-expired=false>
Set Tenant ID
</button>
</form>
<!-- Recaptcha Configs -->
<div class="group">Recaptcha Configs</div>
<button class="btn btn-block btn-primary"
id="initialize-recaptcha-config">
Initialize reCAPTCHA Config
</button>
<!-- Sign up -->
<div class="group">Sign Up</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="signup-email"
class="form-control" placeholder="Email" />
<div class="input-group">
<input type="password" name="password" id="signup-password"
class="form-control" placeholder="Password" />
<div class="input-group-btn">
<button class="btn btn-default" type="button" id="signup-view-password" aria-label="View password">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="list-group password-validation-requirements" id="signup-password-validation-requirements">
<div class="list-group-item list-group-item-info" id="signup-password-validation-not-enforced">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> These requirements are not currently enforced by the backend. Basic requirements are still enforced
</div>
<div class="list-group-item" id="signup-password-validation-meets-min-password-length">
Password must be at least <span id="signup-password-validation-min-length">6</span> characters.
</div>
<div class="list-group-item" id="signup-password-validation-meets-max-password-length">
Password must be at most <span id="signup-password-validation-max-length">4096</span> characters.
</div>
<div class="list-group-item" id="signup-password-validation-contains-lowercase-letter">
Password must contain a lowercase letter.
</div>
<div class="list-group-item" id="signup-password-validation-contains-uppercase-letter">
Password must contain an uppercase letter.
</div>
<div class="list-group-item" id="signup-password-validation-contains-numeric-character">
Password must contain a numeric character.
</div>
<div class="list-group-item password-validation-contains-non-alphanumeric-character" id="signup-password-validation-contains-non-alphanumeric-character">
Password must contain a non-alphanumeric character. <span class="glyphicon glyphicon-info-sign" id="signup-password-validation-allowed-non-alphanumeric-characters" data-toggle="tooltip" data-placement="bottom" title="No allowed non-alphanumeric characters." aria-label="View non-alphanumeric characters"></span>
</div>
</div>
<button class="btn btn-block btn-primary"
id="sign-up-with-email-and-password">Sign Up</button>
</form>
<!-- Sign In -->
<div class="group">Sign In</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="signin-email"
class="form-control" placeholder="Email" />
<div class="input-group">
<input type="password" name="password" id="signin-password"
class="form-control" placeholder="Password" />
<div class="input-group-btn">
<button class="btn btn-default" type="button" id="signin-view-password" aria-label="View password">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="list-group password-validation-requirements" id="signin-password-validation-requirements">
<div class="list-group-item list-group-item-info" id="signin-password-validation-not-enforced">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> These requirements are not currently enforced by the backend. Basic requirements are still enforced.
</div>
<div class="list-group-item list-group-item-warning" id="signin-password-validation-force-upgrade">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> Existing passwords must meet these requirements.
</div>
<div class="list-group-item" id="signin-password-validation-meets-min-password-length">
Password must be at least <span id="signin-password-validation-min-length">6</span> characters.
</div>
<div class="list-group-item" id="signin-password-validation-meets-max-password-length">
Password must be at most <span id="signin-password-validation-max-length">4096</span> characters.
</div>
<div class="list-group-item" id="signin-password-validation-contains-lowercase-letter">
Password must contain a lowercase letter.
</div>
<div class="list-group-item" id="signin-password-validation-contains-uppercase-letter">
Password must contain an uppercase letter.
</div>
<div class="list-group-item" id="signin-password-validation-contains-numeric-character">
Password must contain a numeric character.
</div>
<div class="list-group-item password-validation-contains-non-alphanumeric-character" id="signin-password-validation-contains-non-alphanumeric-character">
Password must contain a non-alphanumeric character. <span class="glyphicon glyphicon-info-sign" id="signin-password-validation-allowed-non-alphanumeric-characters" data-toggle="tooltip" data-placement="bottom" title="No allowed non-alphanumeric characters." aria-label="View non-alphanumeric characters"></span>
</div>
</div>
<button class="btn btn-block btn-primary"
id="sign-in-with-email-and-password">
Sign In with Email and Password
</button>
<button class="btn btn-block btn-primary"
id="reauth-with-email-and-password">
Reauthenticate with Email and Password
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" id="user-custom-token" class="form-control"
placeholder="Custom Authentication Token" />
<button class="btn btn-block btn-primary sign-in-with-custom-token"
data-expired=false>
Sign In with Custom Token
</button>
</form>
<button class="btn btn-block btn-primary"
id="sign-in-anonymously">
Sign In Anonymously
</button>
<form class="form form-bordered no-submit">
<input type="text" id="signin-generic-idp-provider-id"
class="form-control" list="federated-provider-id-options"
placeholder="Provider ID" />
<input type="text" id="signin-generic-idp-id-token"
class="form-control" placeholder="ID Token" />
<input type="text" id="signin-generic-idp-raw-nonce"
class="form-control" placeholder="Raw Nonce" />
<input type="text" id="signin-generic-idp-access-token"
class="form-control" placeholder="Access Token" />
<button class="btn btn-block btn-primary"
id="sign-in-with-generic-idp-credential">
Sign In with Generic IdP Credential
</button>
</form>
<form class="form form-bordered no-submit">
<input type="tel" id="signin-phone-number"
class="form-control" placeholder="Phone Number" />
<button class="btn btn-block btn-primary" id="signin-verify-phone-number">
Verify Phone Number
</button>
<input type="text" id="signin-phone-verification-id"
class="form-control" placeholder="Phone Verification ID" />
<input type="text" id="signin-phone-verification-code"
class="form-control" placeholder="Phone Verification Code" />
<button class="btn btn-block btn-primary" id="signin-confirm-phone-verification">
Sign in by Confirming Phone Verification
</button>
</form>
<!-- Sign in with email link -->
<div class="group">Sign In with Email Link</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="sign-in-with-email-link-email"
class="form-control" placeholder="Email" />
<button class="btn btn-block btn-primary"
id="send-sign-in-link-to-email">
Send Sign In With Email Link
</button>
<button class="btn btn-block btn-primary"
id="send-sign-in-link-to-email-current-url">
Send Sign In With Email Link Current URL
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" name="emailLink" id="sign-in-with-email-link-link"
class="form-control" placeholder="Link" />
<button class="btn btn-block btn-primary"
id="sign-in-with-email-link">
Sign In With Email Link
</button>
</form>
<!-- Password Reset Process -->
<div class="group">Password Reset</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="password-reset-email"
class="form-control" placeholder="Email" />
<button class="btn btn-block btn-primary"
id="send-password-reset-email">
Send Password Reset Email
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" id="password-reset-code"
placeholder="Password Reset Code"
class="form-control" />
<div class="input-group">
<input type="password" id="password-reset-password"
placeholder="New Password"
class="form-control input-group" />
<div class="input-group-btn">
<button class="btn btn-default" type="button" id="password-reset-view-password" aria-label="View password">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="list-group password-validation-requirements" id="password-reset-password-validation-requirements">
<div class="list-group-item list-group-item-info" id="password-reset-password-validation-not-enforced">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> These requirements are not currently enforced by the backend. Basic requirements are still enforced.
</div>
<div class="list-group-item" id="password-reset-password-validation-meets-min-password-length">
Password must be at least <span id="password-reset-password-validation-min-length">6</span> characters.
</div>
<div class="list-group-item" id="password-reset-password-validation-meets-max-password-length">
Password must be at most <span id="password-reset-password-validation-max-length">4096</span> characters.
</div>
<div class="list-group-item" id="password-reset-password-validation-contains-lowercase-letter">
Password must contain a lowercase letter.
</div>
<div class="list-group-item" id="password-reset-password-validation-contains-uppercase-letter">
Password must contain an uppercase letter.
</div>
<div class="list-group-item" id="password-reset-password-validation-contains-numeric-character">
Password must contain a numeric character.
</div>
<div class="list-group-item password-validation-contains-non-alphanumeric-character" id="password-reset-password-validation-contains-non-alphanumeric-character">
Password must contain a non-alphanumeric character. <span class="glyphicon glyphicon-info-sign" id="password-reset-password-validation-allowed-non-alphanumeric-characters" data-toggle="tooltip" data-placement="bottom" title="No allowed non-alphanumeric characters." aria-label="View non-alphanumeric characters"></span>
</div>
</div>
<button class="btn btn-block btn-default"
id="verify-password-reset-code">
Verify Password Reset Code
</button>
<button class="btn btn-block btn-primary"
id="confirm-password-reset">
Confirm Password Change
</button>
</form>
<!-- Fetch Sign In Methods -->
<div class="group">Fetch Sign In Methods</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="fetch-sign-in-methods-email"
class="form-control" placeholder="Email" />
<button class="btn btn-block btn-primary"
id="fetch-sign-in-methods-for-email">
Fetch Sign In Methods For Email
</button>
</form>
<!-- Update Current User -->
<div class="group">Update Current User</div>
<form class="form form-bordered no-submit">
<button class="btn btn-block btn-primary"
id="copy-active-user">
Copy Active User to Temp Auth
</button>
</form>
<form class="form form-bordered no-submit">
<button class="btn btn-block btn-primary"
id="copy-last-user">
Copy Last User to Auth
</button>
</form>
</div>
<div class="tab-pane" id="user-section">
<!-- Profile updates -->
<div class="group">Update Profile</div>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="changed-email"
class="form-control" placeholder="New email" />
<button class="btn btn-block btn-primary" id="change-email">
Change Email
</button>
</form>
<form class="form form-bordered no-submit">
<input type="password" name="password" id="changed-password"
class="form-control" placeholder="New password" />
<button class="btn btn-block btn-primary" id="change-password">
Change Password
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" id="display-name" placeholder="Name"
class="form-control profile-name profile-data" />
<input type="text" id="photo-url" placeholder="Photo URL"
class="form-control photo-url profile-data" />
<button class="btn btn-block btn-primary" id="update-profile">
Update Profile
</button>
</form>
<!-- Linking/Unlinking -->
<div class="group">Linking/Unlinking</div>
<button class="btn btn-block btn-default" id="get-provider-data">
Get Providers Data
</button>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="link-email"
class="form-control" placeholder="Email" />
<input type="password" name="password" id="link-password"
class="form-control" placeholder="Password" />
<button class="btn btn-block btn-primary"
id="link-with-email-and-password">
Link with Email and Password
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" id="link-generic-idp-provider-id"
class="form-control" list="federated-provider-id-options"
placeholder="Provider ID" />
<input type="text" id="link-generic-idp-id-token"
class="form-control" placeholder="ID Token" />
<input type="text" id="link-generic-idp-raw-nonce"
class="form-control" placeholder="Raw Nonce" />
<input type="text" id="link-generic-idp-access-token"
class="form-control" placeholder="Access Token" />
<button class="btn btn-block btn-primary"
id="link-with-generic-idp-credential">
Link with Generic IdP Credential
</button>
</form>
<form class="form form-bordered no-submit">
<input type="tel" id="link-reauth-phone-number"
class="form-control" placeholder="Phone Number" />
<button class="btn btn-block btn-primary" id="link-reauth-verify-phone-number">
Verify Phone Number
</button>
<input type="text" id="link-reauth-phone-verification-id"
class="form-control" placeholder="Phone Verification ID" />
<input type="text" id="link-reauth-phone-verification-code"
class="form-control" placeholder="Phone Verification Code" />
<button class="btn btn-block btn-primary" id="update-confirm-phone-verification">
Update Phone Number by Confirming Phone Verification
</button>
<button class="btn btn-block btn-primary" id="link-confirm-phone-verification">
Link by Confirming Phone Verification
</button>
<button class="btn btn-block btn-primary" id="reauth-confirm-phone-verification">
Reauthenticate by Confirming Phone Verification
</button>
</form>
<form class="form form-bordered no-submit">
<input type="email" name="email" id="link-with-email-link-email"
class="form-control" placeholder="Email" />
<button class="btn btn-block btn-primary"
id="send-link-email-link">
Send Email Link To Link Or Reauthenticate User
</button>
<input type="text" name="emailLink" id="link-with-email-link-link"
class="form-control" placeholder="Link" />
<button class="btn btn-block btn-primary"
id="link-with-email-link">Link With Email Link</button>
<button class="btn btn-block btn-primary"
id="reauth-with-email-link">Reauthenticate With Email Link</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" id="unlinked-provider-id" class="form-control"
placeholder="Provider ID" list="provider-id-options" />
<button class="btn btn-block btn-primary" id="unlink-provider">
Unlink Provider
</button>
</form>
<!-- Enroll MFA-->
<div class="group">Enroll Second Factor</div>
<ul id="mfa-tab-menu" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#mfa-phone-section" aria-controls="mfa-phone-section"
data-toggle="tab" role="tab">
Phone
</a>
</li>
<li role="presentation">
<a href="#mfa-totp-section" aria-controls="mfa-totp-section"
data-toggle="tab" role="tab">
TOTP
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="mfa-phone-section">
<form class="form form-bordered no-submit">
<input type="tel" id="enroll-mfa-phone-number"
class="form-control" placeholder="Phone Number" />
<button class="btn btn-block btn-primary" id="enroll-mfa-verify-phone-number">
Verify Phone Number
</button>
<input type="text" id="enroll-mfa-phone-verification-id"
class="form-control" placeholder="Phone Verification ID" />
<input type="text" id="enroll-mfa-phone-verification-code"
class="form-control" placeholder="Phone Verification Code" />
<input type="text" id="enroll-mfa-phone-display-name"
class="form-control" placeholder="Display Name" />
<button class="btn btn-block btn-primary"
id="enroll-mfa-confirm-phone-verification">
Complete Phone Enrollment
</button>
</form>
</div>
<div class="tab-pane" id="mfa-totp-section">
<form class="form form-bordered no-submit">
<button class="btn btn-block btn-primary" id="enroll-mfa-totp-start">
Start TOTP Enrollment
</button>
<br>
<p hidden class="totp-text" id="totp-text"> Please scan the QR code below in a TOTP app </p>
<p hidden class="totp-deadline" id="totp-deadline"></p>
<img hidden class="totp-qr-image" id="totp-qr-image"/>
<br>
<input type="text" id="enroll-mfa-totp-verification-code"
class="form-control" placeholder="TOTP Verification Code(from App)" />
<input type="text" id="enroll-mfa-totp-display-name"
class="form-control" placeholder="Display Name" />
<button class="btn btn-block btn-primary" id="enroll-mfa-totp-finalize">
Complete TOTP Enrollment
</button>
</form>
</div>
</div>
<!-- Other Actions -->
<div class="group">Other Actions</div>
<button class="btn btn-block btn-default"
id="send-email-verification">
Send Email Verification
</button>
<form class="form form-bordered no-submit">
<input type="text" id="email-verification-code"
placeholder="Email Verification Code"
class="form-control" />
<button class="btn btn-block btn-primary"
id="confirm-email-verification">
Confirm Email Verification
</button>
</form>
<button class="btn btn-block btn-default" id="get-token-result">
Get ID Token Result (no refresh)
</button>
<button class="btn btn-block btn-default" id="refresh-token-result">
Refresh ID Token Result
</button>
<button class="btn btn-block btn-default" id="get-token">
Get ID Token (no refresh)
</button>
<button class="btn btn-block btn-default" id="refresh-token">
Refresh ID Token
</button>
<button class="btn btn-block btn-default" id="get-token-worker">
Get ID Token from Web Worker
</button>
<button class="btn btn-block btn-danger" id="sign-out">
Sign Out
</button>
<!-- Other Actions -->
<div class="group">Delete account</div>
<button class="btn btn-block btn-sm btn-danger" id="delete">
Delete Account
</button>
</div>
<div class="tab-pane" id="popup-redirect-section">
<div class="btn-group radio-block btn-group-justified"
id="popup-redirect-action-selection" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="popup-redirect-action" value="sign-in"
autocomplete="off" checked> Sign in
</label>
<label class="btn btn-primary">
<input type="radio" name="popup-redirect-action" value="link"
autocomplete="off"> Link
</label>
<label class="btn btn-primary">
<input type="radio" name="popup-redirect-action" value="reauthenticate"
autocomplete="off"> Reauthenticate
</label>
</div>
<div class="btn-group radio-block" id="popup-redirect-type-selection"
data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="popup-redirect-type" value="redirect"
autocomplete="off" checked> With Redirect
</label>
<label class="btn btn-primary">
<input type="radio" name="popup-redirect-type" value="popup"
autocomplete="off"> With Popup
</label>
</div>
<div class="form-group">
<label for="scopes">Scopes (separated by commas)</label>
<input type="email" class="form-control" id="scopes" placeholder="scope1,scope2...)">
</div>
<!-- OAuth Custom Parameters Block-->
<div class="form-group">
<label for="scopes">OAuth Custom Parameters</label>
<!-- Container of key/value custom parameter pairs -->
<div id="popup-redirect-custom-parameters"></div>
<!-- Button to add a new key/value pair -->
<button class="btn btn-block btn-primary"
id="popup-redirect-add-custom-parameter">
Add OAuth Custom Parameter
</button>
</div>
<!-- End of OAuth Custom Parameters Block-->
<!-- OAuth Providers Block-->
<div class="form-group">
<label for="scopes">OAuth Providers</label>
<button class="btn btn-block btn-primary popup-redirect-provider"
id="popup-redirect-google" data-provider="google.com">
Google
</button>
<button class="btn btn-block btn-primary popup-redirect-provider"
id="popup-redirect-facebook" data-provider="facebook.com">
Facebook
</button>
<button class="btn btn-block btn-primary popup-redirect-provider"
id="popup-redirect-twitter" data-provider="twitter.com">
Twitter
</button>
<button class="btn btn-block btn-primary popup-redirect-provider"
id="popup-redirect-github" data-provider="github.com">
GitHub
</button>
<form class="form form-bordered no-submit">
<input type="text" name="popup-redirect-generic-providerid"
id="popup-redirect-generic-providerid"
list="federated-provider-id-options"
class="form-control" placeholder="Federated Provider ID" />
<button class="btn btn-block btn-primary" id="popup-redirect-generic">
Generic IdP
</button>
</form>
<form class="form form-bordered no-submit">
<input type="text" name="popup-redirect-saml-providerid"
id="popup-redirect-saml-providerid"
class="form-control" placeholder="SAML Provider ID" />
<button class="btn btn-block btn-primary" id="popup-redirect-saml">
SAML IdP
</button>
</form>
</div>
<!-- End of OAuth Providers Block-->
<button class="btn btn-block btn-default"
id="popup-redirect-get-redirect-result">
Get Redirect Result
</button>
</div>
<div class="tab-pane" id="action-code-settings-section">
<div class="group">Web</div>
<div class="form-group">
<input type="text" class="form-control" id="continueUrl"
placeholder="Continue URL"/>
</div>
<div class="group">Android</div>
<form class="form form-bordered no-submit">
<div class="form-group">
<input type="text" class="form-control" id="apn"
placeholder="Android Package Name"/>
<div class="btn-group radio-block" id="install-app-selection"
data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="install-app" value="Yes"
autocomplete="off"> Install app
</label>
<label class="btn btn-primary active">
<input type="radio" name="install-app" value="No"
autocomplete="off" checked> Do not install app
</label>
</div>
<input type="text" class="form-control" id="amv"
placeholder="Android Minimum Version"/>
</div>
</form>
<div class="group">iOS</div>
<form class="form form-bordered no-submit">
<div class="form-group">
<input type="text" class="form-control" id="ibi" placeholder="iOS Bundle ID"/>
</div>
</form>
<div class="group">Mobile link</div>
<div class="form-group">
<input type="text" class="form-control" id="hostingLinkDomain"
placeholder="Custom Hosting Link Domain"/>
</div>
<form class="form form-bordered no-submit">
<div class="btn-group radio-block" id="handle-in-app-selection"
data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="handle-in-app" value="Yes"
autocomplete="off"> Handle code in app
</label>
<label class="btn btn-primary active">
<input type="radio" name="handle-in-app" value="No"
autocomplete="off" checked> Do not handle code in app
</label>
</div>
<button class="btn btn-block btn-primary"
id="action-code-settings-reset">Reset</button>
</form>
</div>
<div class="tab-pane" id="logs-section">
<pre class="well logs"></pre>
<button class="btn btn-xs btn-default pull-right clear-logs">
Clear
</button>
</div>
</div>
</div>
<div class="col-sm-6 hidden-xs">
<pre class="well logs"></pre>
<button class="btn btn-xs btn-default pull-right clear-logs">
Clear
</button>
</div>
</div>
</div>
<!-- The multi-factor sign-in dialog. -->
<div class="modal" id="multiFactorModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Select a second factor to sign in with</h4>
</div>
<div class="modal-body">
<!-- List of 2nd factor options. -->
<div class="list-group enrolled-second-factors"></div>
<!-- For handling sign-in with phone 2nd factor. -->
<form class="form form-bordered no-submit hidden" id="multi-factor-phone">
<div class="form">
<button class="btn btn-block btn-primary" id="send-2fa-phone-code">
Send code
</button>
</div>
<div class="form">
<input type="text" id="multi-factor-sign-in-verification-id"
class="form-control" placeholder="Phone Verification ID" />
<input type="text" id="multi-factor-sign-in-verification-code"
class="form-control" placeholder="Phone Verification code" />
<button class="btn btn-block btn-primary"
id="sign-in-with-phone-multi-factor">
Complete sign In
</button>
</div>
</form>
<!-- For handling sign-in with TOTP 2nd factor. -->
<form class="form form-bordered no-submit hidden" id="multi-factor-totp">
<div class="form">
<input type="text" id="multi-factor-totp-sign-in-verification-code"
class="form-control" placeholder="Totp Verification code" />
<button class="btn btn-block btn-primary"
id="sign-in-with-totp-multi-factor">
Complete sign In
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- List of provider ID suggestions. -->
<datalist id="provider-id-options">
<option value="google.com"></option>
<option value="facebook.com"></option>
<option value="twitter.com"></option>
<option value="github.com"></option>
<option value="password"></option>
<option value="phone"></option>
</datalist>
<datalist id="federated-provider-id-options">
<option value="google.com"></option>
<option value="facebook.com"></option>
<option value="twitter.com"></option>
<option value="github.com"></option>
</datalist>
<!-- List of persistence type suggestions. -->
<datalist id="persistence-type-options">
<option value="local"></option>
<option value="session"></option>
<option value="indexedDB"></option>
<option value="none"></option>
</datalist>
</body>
</html>