Skip to content

feat(auth): Add MFA with reCAPTCHA Enterprise and App Check example #912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

feat(auth): Add MFA with reCAPTCHA Enterprise and App Check example #912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d0bd3e
auth: Prepare MFA auth with RecaptchaEnterprise and AppCheck into sep…
grushabshah May 28, 2025
4e2405c
auth: Update JavaScript SDK to add ReCAPTCHA Enterprise support
grushabshah Oct 8, 2025
3e09830
auth: Implement RecaptchaEnterprise and AppCheck
grushabshah May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion auth/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ The Firebase Auth quickstart demonstrates several methods for signing in:
- The Firebase Microsoft Login quickstarts demonstrate using a Microsoft account to authenticate to Firebase using two different techniques: with a [popup](microsoft-popup.html) and a [redirect](microsoft-redirect.html).
- The Firebase GitHub Login quickstarts demonstrate using a GitHub account to authenticate to Firebase using two different techniques: with a [popup](github-popup.html) and a [redirect](github-redirect.html).
- The [multi-factor authentication quickstart](mfa-password.html) demonstrates using email & password as the first factor and phone number as the second factor to authenticate - you can both enroll for the second factor and sign in with the second factor. Note: Multi-factor authentication with SMS is currently only available for [Google Cloud Identity Platform](https://cloud.google.com/identity-platform/docs/web/mfa) projects.
- The [multi-factor authentication quickstart using App Check with reCAPTCHA Enterprise](mfa-password-enterprise.html) demonstrates the use of reCAPTCHA Enterprise.
- The [Firebase Anonymous auth quickstart](anon.html) demonstrates how to authenticate to Firebase anonymously.
- The [Firebase custom auth quickstart](customauth.html) demonstrates how to authenticate to Firebase with a user who has been authenticated from your own pre-existing authentication system. This is done by generating a token in a specific format, which is signed using the private key from a service account downloaded from the Google Developer Console. This token can then be passed to your client application which uses it to authenticate to Firebase. We provide an [example token generator](exampletokengenerator/auth.html) for demonstration purposes. Note: Generating tokens in production should be done server side.

Expand All @@ -38,7 +39,7 @@ To run the sample app locally during development:
1. Run `npm install` to install dependencies.
2. Run `firebase emulators:start` to start the local Firebase emulators. Note: phone authentication required ReCaptcha verification which does not work with the Firebase emulators. These examples skip connecting to the emulators.
3. Run `npm run dev` to serve the app locally using Vite
This will start a server locally that serves `index.html` on `http://localhost:5173/index.html`.
This will start a server locally that serves `index.html` on `http://localhost:5173/index.html`.


Running the app using the Firebase CLI:
Expand Down
4 changes: 4 additions & 0 deletions auth/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,7 @@ export const firebaseConfig = {
appId: 'APP_ID',
measurementId: 'G-MEASUREMENT_ID',
};

// Your web app's ReCaptcha Enterprise Site-Key
// https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider#project-setup
export const reCaptchaSiteKey = 'RECAPTCHA_SITE_KEY'
2 changes: 2 additions & 0 deletions auth/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ <h2 class="mdl-card__title-text">Table of Contents</h2>

<li><a href="mfa-password.html">SMS multi-factor authentication</a><br><br></li>

<li><a href="mfa-password-enterprise.html">SMS multi-factor authentication using App Check with reCAPTCHA Enterprise</a><br><br></li>

<li><a href="customauth.html">Custom Authentication</a> and an Example <a href="exampletokengenerator/auth.html">Custom Token Generator</a><br><br></li>

<li><a href="phone-visible.html">Phone number sign-in with visible ReCaptcha</a></li>
Expand Down
343 changes: 343 additions & 0 deletions auth/mfa-password-enterprise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,343 @@
<!doctype html>
<!--
Copyright (c) 2019 Google Inc.

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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multi-factor Authentication Example</title>

<!-- Material Design Theming -->
<link
rel="stylesheet"
href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

<link rel="stylesheet" href="main.css" />
</head>

<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing title -->
<header
class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"
>
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
<div
class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop"
>
<a href="/">
<h3>Firebase Authentication</h3>
</a>
</div>
</div>
</header>

<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
<!-- Container for the demo -->
<div
class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"
>
<div
class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"
>
<h2 class="mdl-card__title-text">
Firebase Multi-factor Authentication
</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<p>
Enter an email and password below and either sign in to an
existing account or sign up
</p>

<input
class="mdl-textfield__input"
style="display: inline; width: auto"
type="text"
id="email"
name="email"
placeholder="Email"
/>
&nbsp;&nbsp;&nbsp;
<input
class="mdl-textfield__input"
style="display: inline; width: auto"
type="password"
id="password"
name="password"
placeholder="Password"
/>
<br /><br />
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="quickstart-sign-in"
name="signin"
>
Sign In
</button>
&nbsp;&nbsp;&nbsp;
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="quickstart-sign-up"
name="signup"
>
Sign Up
</button>
&nbsp;&nbsp;&nbsp;
<button
class="mdl-button mdl-js-button mdl-button--raised"
disabled
id="quickstart-verify-email"
name="verify-email"
>
Send Email Verification
</button>
&nbsp;&nbsp;&nbsp;
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="quickstart-password-reset"
name="verify-email"
>
Send Password Reset Email
</button>

<br /><br />
<button
disabled
class="mdl-button mdl-js-button mdl-button--raised"
id="quickstart-enroll"
name="enroll"
>
Enroll
</button>
<button
disabled
class="mdl-button mdl-js-button mdl-button--raised"
id="quickstart-sign-out"
name="signout"
>
Sign Out
</button>
</div>

<!-- The phone seond-factor enrollment/sign-in dialog -->
<dialog id="mfa-modal" class="mdl-dialog">
<div class="modal-body">
<div
id="mfa-error-message"
class="mdl-card__subtitle-text mdl-color-text--red blinking"
></div>
<!-- Enrollment dialog -->
<div id="mfa-enroll-modal">
<form id="enroll-send-code-form" action="#">
<!-- Input to enter the phone number -->
<div
id="phone-div"
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
class="mdl-textfield__input"
type="text"
pattern="\+[0-9\s\-\(\)]+"
id="phone-number"
/>
<label class="mdl-textfield__label" for="phone-number"
>Enter your phone number...</label
>
<span class="mdl-textfield__error"
>Input is not an international phone number!</span
>
</div>

<!-- Container to display the re-captcha check -->
<div
id="enroll-recaptcha-container"
class="recaptcha-container"
></div>

<!-- Button that handles sending code for enrollment -->
<input
type="submit"
disabled
class="mdl-button mdl-js-button mdl-button--raised"
id="enroll-send-code-button"
value="Send Code"
/>
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="enroll-cancel-send-code-button"
>
Cancel
</button>
</form>

<form id="enroll-verification-code-form" action="#">
<!-- Input to enter the verification code -->
<div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
class="mdl-textfield__input"
type="text"
id="enroll-verification-code"
/>
<label
class="mdl-textfield__label"
for="enroll-verification-code"
>Enter the verification code...</label
>
</div>

<div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
class="mdl-textfield__input"
type="text"
id="enroll-display-name"
/>
<label
class="mdl-textfield__label"
for="enroll-display-name"
>Enter the display name...</label
>
</div>

<!-- Button that triggers code verification -->
<input
type="submit"
class="mdl-button mdl-js-button mdl-button--raised"
id="enroll-verify-code-button"
value="Verify Code"
/>
<!-- Button to cancel code verification -->
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="enroll-cancel-verify-code-button"
>
Cancel
</button>
</form>
</div>

<!-- Sign-in dialog -->
<div id="mfa-sign-in-modal">
<form id="sign-in-send-code-form" action="#">
<!-- Input to select the phone number for sign-in-->
<div class="mdl-selectfield">
<select
class="mdl-selectfield__select"
id="mfa-hints"
name="hints"
></select>
<label id="mfa-hint-label" class="mdl-selectfield__label"
>Select your phone number...</label
>
</div>

<!-- Container to display the re-captcha check -->
<div
id="sign-in-recaptcha-container"
class="recaptcha-container"
></div>

<!-- Button that handles sending code for sign-in -->
<input
type="submit"
class="mdl-button mdl-js-button mdl-button--raised"
id="sign-in-send-code-button"
value="Send Code"
/>
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="sign-in-cancel-send-code-button"
>
Cancel
</button>
</form>

<form id="sign-in-verification-code-form" action="#">
<!-- Input to enter the verification code -->
<div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
class="mdl-textfield__input"
type="text"
id="sign-in-verification-code"
/>
<label
class="mdl-textfield__label"
for="sign-in-verification-code"
>Enter the verification code...</label
>
</div>

<!-- Button that triggers code verification -->
<input
type="submit"
class="mdl-button mdl-js-button mdl-button--raised"
id="sign-in-verify-code-button"
value="Verify Code"
/>
<!-- Button to cancel code verification -->
<button
class="mdl-button mdl-js-button mdl-button--raised"
id="sign-in-cancel-verify-code-button"
>
Cancel
</button>
</form>
</div>
</div>
</dialog>

<!-- Container where we'll display the enrolled second factors -->
<div class="quickstart-mfa-info-container">
<span>Enrolled Factors:</span>
<ul
class="mfa-info-list-item mdl-list"
id="mfa-enrolled-factors"
></ul>
</div>

<!-- Container where we'll display the user details -->
<div class="quickstart-user-details-container">
Firebase sign-in status:
<span id="quickstart-sign-in-status">Unknown</span>
<div>Firebase auth <code>currentUser</code> object value:</div>
<pre><code id="quickstart-account-details">null</code></pre>
</div>
</div>

<div id="quickstart-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
</main>
</div>

<script type="module" src="mfa-password-enterprise.ts"></script>
</body>
</html>
Loading