Add Passkey enroll and sign in flows (#7718)

common/api-review/auth.api.md

@@ -353,6 +353,9 @@ export interface EmulatorConfig {
     readonly protocol: string;
 }
 
+// @public
+export function enrollPasskey(user: User, name: string): Promise<UserCredential>;
+
 export { ErrorFn }
 
 // Warning: (ae-forgotten-export) The symbol "BaseOAuthProvider" needs to be exported by the entry point index.d.ts
@@ -773,6 +776,9 @@ export function signInWithEmailAndPassword(auth: Auth, email: string, password:
 // @public
 export function signInWithEmailLink(auth: Auth, email: string, emailLink?: string): Promise<UserCredential>;
 
+// @public
+export function signInWithPasskey(auth: Auth, name: string, manualSignUp?: boolean): Promise<UserCredential>;
+
 // @public
 export function signInWithPhoneNumber(auth: Auth, phoneNumber: string, appVerifier: ApplicationVerifier): Promise<ConfirmationResult>;
 

docs-devsite/auth.md

@@ -43,6 +43,7 @@ Firebase Authentication
 |  [signInWithCustomToken(auth, customToken)](./auth.md#signinwithcustomtoken) | Asynchronously signs in using a custom token. |
 |  [signInWithEmailAndPassword(auth, email, password)](./auth.md#signinwithemailandpassword) | Asynchronously signs in using an email and password. |
 |  [signInWithEmailLink(auth, email, emailLink)](./auth.md#signinwithemaillink) | Asynchronously signs in using an email and sign-in email link. |
+|  [signInWithPasskey(auth, name, manualSignUp)](./auth.md#signinwithpasskey) | Signs in a user with a passkey. Use enrollPasskey to enroll a passkey credential for the current user. |
 |  [signInWithPhoneNumber(auth, phoneNumber, appVerifier)](./auth.md#signinwithphonenumber) | Asynchronously signs in using a phone number. |
 |  [signInWithPopup(auth, provider, resolver)](./auth.md#signinwithpopup) | Authenticates a Firebase client using a popup-based OAuth authentication flow. |
 |  [signInWithRedirect(auth, provider, resolver)](./auth.md#signinwithredirect) | Authenticates a Firebase client using a full-page redirect flow. |
@@ -55,6 +56,7 @@ Firebase Authentication
 |  [parseActionCodeURL(link)](./auth.md#parseactioncodeurl) | Parses the email action link string and returns an [ActionCodeURL](./auth.actioncodeurl.md#actioncodeurl_class) if the link is valid, otherwise returns null. |
 |  <b>function(user...)</b> |
 |  [deleteUser(user)](./auth.md#deleteuser) | Deletes and signs out the user. |
+|  [enrollPasskey(user, name)](./auth.md#enrollpasskey) | Enrolls a passkey for the user account. |
 |  [getIdToken(user, forceRefresh)](./auth.md#getidtoken) | Returns a JSON Web Token (JWT) used to identify the user to a Firebase service. |
 |  [getIdTokenResult(user, forceRefresh)](./auth.md#getidtokenresult) | Returns a deserialized JSON Web Token (JWT) used to identify the user to a Firebase service. |
 |  [linkWithCredential(user, credential)](./auth.md#linkwithcredential) | Links the user account with the given credentials. |
@@ -877,6 +879,30 @@ if(isSignInWithEmailLink(auth, emailLink)) {
 
 ```
 
+## signInWithPasskey()
+
+Signs in a user with a passkey. Use enrollPasskey to enroll a passkey credential for the current user.
+
+<b>Signature:</b>
+
+```typescript
+export declare function signInWithPasskey(auth: Auth, name: string, manualSignUp?: boolean): Promise<UserCredential>;
+```
+
+### Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  auth | [Auth](./auth.auth.md#auth_interface) | The Firebase Auth instance. |
+|  name | string | The user's name for passkey. |
+|  manualSignUp | boolean | When false, automatically creates an anonymous user if a passkey credential does not exist. Defaults to false. |
+
+<b>Returns:</b>
+
+Promise&lt;[UserCredential](./auth.usercredential.md#usercredential_interface)<!-- -->&gt;
+
+A promise that resolves with a `UserCredential` object.
+
 ## signInWithPhoneNumber()
 
 Asynchronously signs in using a phone number.
@@ -1178,6 +1204,29 @@ export declare function deleteUser(user: User): Promise<void>;
 
 Promise&lt;void&gt;
 
+## enrollPasskey()
+
+Enrolls a passkey for the user account.
+
+<b>Signature:</b>
+
+```typescript
+export declare function enrollPasskey(user: User, name: string): Promise<UserCredential>;
+```
+
+### Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  user | [User](./auth.user.md#user_interface) | The user to enroll the passkey for. |
+|  name | string | The name associated with the passkey. |
+
+<b>Returns:</b>
+
+Promise&lt;[UserCredential](./auth.usercredential.md#usercredential_interface)<!-- -->&gt;
+
+A promise that resolves with a `UserCredential` object.
+
 ## getIdToken()
 
 Returns a JSON Web Token (JWT) used to identify the user to a Firebase service.

packages/auth/demo/public/index.html

@@ -247,6 +247,17 @@
                 Initialize reCAPTCHA Config
               </button>
 
+              <!-- Passkeys -->
+              <div class="group">Passkeys</div>
+              <form class="form form-bordered no-submit">
+                <input type="test" name="signin-passkey-name" id="signin-passkey-name"
+                       class="form-control" placeholder="Name" />
+                <button class="btn btn-block btn-primary"
+                      id="sign-in-with-passkey">
+                Sign in with Passkey
+                </button>
+              </form>
+
               <!-- Sign up -->
               <div class="group">Sign Up</div>
               <form class="form form-bordered no-submit">
@@ -514,6 +525,16 @@
                 </button>
               </form>
 
+              <!-- Passkey -->
+              <div class="group">Passkey</div>
+              <form class="form form-bordered no-submit">
+                <input type="test" name="enroll-passkey-name" id="enroll-passkey-name"
+                          class="form-control" placeholder="Name" />
+                <button class="btn btn-block btn-primary"
+                          id="enroll-passkey">
+                    Enroll Passkey
+                </button>
+              </form> 
 
               <!-- Linking/Unlinking -->
               <div class="group">Linking/Unlinking</div>

packages/auth/demo/src/index.js

@@ -73,7 +73,9 @@ import {
   browserPopupRedirectResolver,
   connectAuthEmulator,
   initializeRecaptchaConfig,
-  validatePassword
+  validatePassword,
+  enrollPasskey,
+  signInWithPasskey
 } from '@firebase/auth';
 
 import { config } from './config';
@@ -519,6 +521,19 @@ function onInitializeRecaptchaConfig() {
   initializeRecaptchaConfig(auth);
 }
 
+function onEnrollPasskey() {
+  const name = $('#enroll-passkey-name').val();
+  enrollPasskey(activeUser(), name).then(
+    onAuthUserCredentialSuccess,
+    onAuthError
+  );
+}
+
+function onSignInWithPasskey() {
+  const name = $('#signin-passkey-name').val();
+  signInWithPasskey(auth, name).then(onAuthSuccess, onAuthError);
+}
+
 /**
  * Updates the displayed validation status for the inputted password.
  * @param {string} sectionIdPrefix The ID prefix of the section to show the password requirements in.
@@ -2220,6 +2235,8 @@ function initApp() {
   $('#signup-password').blur(() => onBlurPassword('#signup-'));
   $('#password-reset-password').blur(() => onBlurPassword('#password-reset-'));
 
+  $('#sign-in-with-passkey').click(onSignInWithPasskey);
+
   $('#sign-in-with-generic-idp-credential').click(
     onSignInWithGenericIdPCredential
   );
@@ -2254,6 +2271,7 @@ function initApp() {
   $('#confirm-password-reset').click(onConfirmPasswordReset);
 
   $('#get-provider-data').click(onGetProviderData);
+  $('#enroll-passkey').click(onEnrollPasskey);
   $('#link-with-email-and-password').click(onLinkWithEmailAndPassword);
   $('#link-with-generic-idp-credential').click(onLinkWithGenericIdPCredential);
   $('#unlink-provider').click(onUnlinkProvider);