Reorder RecaptchaVerifier params so auth is the first param (#7326)

Author: ch5zzy

.changeset/old-badgers-mate.md

@@ -0,0 +1,7 @@
+---
+'@firebase/auth': major
+'@firebase/auth-compat': patch
+'firebase': major
+---
+
+Reorder RecaptchaVerifier parameters so auth is the first parameter

common/api-review/auth.api.md

@@ -681,7 +681,7 @@ export interface RecaptchaParameters {
 //
 // @public
 export class RecaptchaVerifier implements ApplicationVerifierInternal {
-    constructor(containerOrId: HTMLElement | string, parameters: RecaptchaParameters, authExtern: Auth);
+    constructor(authExtern: Auth, containerOrId: HTMLElement | string, parameters?: RecaptchaParameters);
     clear(): void;
     // Warning: (ae-forgotten-export) The symbol "ReCaptchaLoader" needs to be exported by the entry point index.d.ts
     //

docs-devsite/auth.recaptchaverifier.md

@@ -25,7 +25,7 @@ export declare class RecaptchaVerifier implements ApplicationVerifierInternal
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(containerOrId, parameters, authExtern)](./auth.recaptchaverifier.md#recaptchaverifierconstructor) |  | Constructs a new instance of the <code>RecaptchaVerifier</code> class |
+|  [(constructor)(authExtern, containerOrId, parameters)](./auth.recaptchaverifier.md#recaptchaverifierconstructor) |  | Constructs a new instance of the <code>RecaptchaVerifier</code> class |
 
 ## Properties
 
@@ -50,16 +50,16 @@ Check the reCAPTCHA docs for a comprehensive list. All parameters are accepted e
 <b>Signature:</b>
 
 ```typescript
-constructor(containerOrId: HTMLElement | string, parameters: RecaptchaParameters, authExtern: Auth);
+constructor(authExtern: Auth, containerOrId: HTMLElement | string, parameters?: RecaptchaParameters);
 ```
 
 ### Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
+|  authExtern | [Auth](./auth.auth.md#auth_interface) | The corresponding Firebase [Auth](./auth.auth.md#auth_interface) instance. |
 |  containerOrId | HTMLElement \| string | The reCAPTCHA container parameter. |
 |  parameters | [RecaptchaParameters](./auth.recaptchaparameters.md#recaptchaparameters_interface) | The optional reCAPTCHA parameters. |
-|  authExtern | [Auth](./auth.auth.md#auth_interface) | The corresponding Firebase [Auth](./auth.auth.md#auth_interface) instance. |
 
 ## RecaptchaVerifier.type
 

packages/auth-compat/src/recaptcha_verifier.ts

@@ -37,13 +37,12 @@ export class RecaptchaVerifier
       appName: app.name
     });
     this._delegate = new exp.RecaptchaVerifier(
-      container,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      parameters as any,
-
       // TODO: remove ts-ignore when moving types from auth-types to auth-compat
       // @ts-ignore
-      app.auth!()
+      app.auth!(),
+      container,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      parameters as any
     );
     this.type = this._delegate.type;
   }

packages/auth/demo/src/index.js

@@ -521,11 +521,9 @@ function onSignInWithGenericIdPCredential() {
 function makeApplicationVerifier(submitButtonId) {
   const container =
     recaptchaSize === 'invisible' ? submitButtonId : 'recaptcha-container';
-  applicationVerifier = new RecaptchaVerifier(
-    container,
-    { 'size': recaptchaSize },
-    auth
-  );
+  applicationVerifier = new RecaptchaVerifier(auth, container, {
+    'size': recaptchaSize
+  });
 }
 
 /**

packages/auth/src/platform_browser/providers/phone.test.ts

@@ -45,9 +45,9 @@ describe('platform_browser/providers/phone', () => {
       });
 
       const verifier = new RecaptchaVerifier(
+        auth,
         document.createElement('div'),
-        {},
-        auth
+        {}
       );
       sinon
         .stub(verifier, 'verify')

packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.test.ts

@@ -50,7 +50,7 @@ describe('platform_browser/recaptcha/recaptcha_verifier', () => {
     auth.languageCode = 'fr';
     container = document.createElement('div');
     parameters = {};
-    verifier = new RecaptchaVerifier(container, parameters, auth);
+    verifier = new RecaptchaVerifier(auth, container, parameters);
     // The verifier will have set the parameters.callback field to be the wrapped callback
 
     mockEndpoint(Endpoint.GET_RECAPTCHA_PARAM, {
@@ -134,7 +134,7 @@ describe('platform_browser/recaptcha/recaptcha_verifier', () => {
         }
       };
 
-      verifier = new RecaptchaVerifier(container, parameters, auth);
+      verifier = new RecaptchaVerifier(auth, container, parameters);
       const expected = await verifier.verify();
       expect(token).to.eq(expected);
     });
@@ -149,7 +149,7 @@ describe('platform_browser/recaptcha/recaptcha_verifier', () => {
         callback: 'callbackOnWindowObject'
       };
 
-      verifier = new RecaptchaVerifier(container, parameters, auth);
+      verifier = new RecaptchaVerifier(auth, container, parameters);
       const expected = await verifier.verify();
       expect(token).to.eq(expected);
 

packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.ts

@@ -70,6 +70,7 @@ export class RecaptchaVerifier implements ApplicationVerifierInternal {
   private recaptcha: Recaptcha | null = null;
 
   /**
+   * @param authExtern - The corresponding Firebase {@link Auth} instance.
    *
    * @param containerOrId - The reCAPTCHA container parameter.
    *
@@ -86,15 +87,13 @@ export class RecaptchaVerifier implements ApplicationVerifierInternal {
    * the sitekey. Firebase Auth backend provisions a reCAPTCHA for each project and will
    * configure this upon rendering. For an invisible reCAPTCHA, a size key must have the value
    * 'invisible'.
-   *
-   * @param authExtern - The corresponding Firebase {@link Auth} instance.
    */
   constructor(
+    authExtern: Auth,
     containerOrId: HTMLElement | string,
     private readonly parameters: RecaptchaParameters = {
       ...DEFAULT_PARAMS
-    },
-    authExtern: Auth
+    }
   ) {
     this.auth = _castAuth(authExtern);
     this.isInvisible = this.parameters.size === 'invisible';

packages/auth/src/platform_browser/strategies/phone.test.ts

@@ -60,7 +60,7 @@ describe('platform_browser/strategies/phone', () => {
       sessionInfo: 'session-info'
     });
 
-    verifier = new RecaptchaVerifier(document.createElement('div'), {}, auth);
+    verifier = new RecaptchaVerifier(auth, document.createElement('div'), {});
     sinon.stub(verifier, 'verify').returns(Promise.resolve('recaptcha-token'));
   });
 

packages/auth/test/integration/flows/phone.test.ts

@@ -73,9 +73,9 @@ describe('Integration test: phone auth', () => {
     fakeRecaptchaContainer = document.createElement('div');
     document.body.appendChild(fakeRecaptchaContainer);
     verifier = new RecaptchaVerifier(
+      auth,
       fakeRecaptchaContainer,
-      undefined as any,
-      auth
+      undefined as any
     );
   });
 
@@ -87,9 +87,9 @@ describe('Integration test: phone auth', () => {
   function resetVerifier(): void {
     verifier.clear();
     verifier = new RecaptchaVerifier(
+      auth,
       fakeRecaptchaContainer,
-      undefined as any,
-      auth
+      undefined as any
     );
   }