diff --git a/.changeset/old-badgers-mate.md b/.changeset/old-badgers-mate.md new file mode 100644 index 00000000000..e44700f5b19 --- /dev/null +++ b/.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 diff --git a/common/api-review/auth.api.md b/common/api-review/auth.api.md index f53b81f8280..96a175f28f9 100644 --- a/common/api-review/auth.api.md +++ b/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 // diff --git a/docs-devsite/auth.recaptchaverifier.md b/docs-devsite/auth.recaptchaverifier.md index 34145ac2b27..9935a717b3f 100644 --- a/docs-devsite/auth.recaptchaverifier.md +++ b/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 RecaptchaVerifier class | +| [(constructor)(authExtern, containerOrId, parameters)](./auth.recaptchaverifier.md#recaptchaverifierconstructor) | | Constructs a new instance of the RecaptchaVerifier class | ## Properties @@ -50,16 +50,16 @@ Check the reCAPTCHA docs for a comprehensive list. All parameters are accepted e Signature: ```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 diff --git a/packages/auth-compat/src/recaptcha_verifier.ts b/packages/auth-compat/src/recaptcha_verifier.ts index 2bdec84bff6..71997ade43a 100644 --- a/packages/auth-compat/src/recaptcha_verifier.ts +++ b/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; } diff --git a/packages/auth/demo/src/index.js b/packages/auth/demo/src/index.js index a3abe1e3f37..7595f85c59a 100644 --- a/packages/auth/demo/src/index.js +++ b/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 + }); } /** diff --git a/packages/auth/src/platform_browser/providers/phone.test.ts b/packages/auth/src/platform_browser/providers/phone.test.ts index 25383a0deb4..9293b5e4ee6 100644 --- a/packages/auth/src/platform_browser/providers/phone.test.ts +++ b/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') diff --git a/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.test.ts b/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.test.ts index 40b6f842f49..b2d4a6ddb48 100644 --- a/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.test.ts +++ b/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); diff --git a/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.ts b/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.ts index e8966b1daa6..1f4ca26ae54 100644 --- a/packages/auth/src/platform_browser/recaptcha/recaptcha_verifier.ts +++ b/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'; diff --git a/packages/auth/src/platform_browser/strategies/phone.test.ts b/packages/auth/src/platform_browser/strategies/phone.test.ts index bae08fdf621..c545a84f11a 100644 --- a/packages/auth/src/platform_browser/strategies/phone.test.ts +++ b/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')); }); diff --git a/packages/auth/test/integration/flows/phone.test.ts b/packages/auth/test/integration/flows/phone.test.ts index 30591cc397f..755e6bf2456 100644 --- a/packages/auth/test/integration/flows/phone.test.ts +++ b/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 ); }