Implement reCAPTCHA Enterprise flow for phone provider

docs-devsite/auth.phoneauthprovider.md

@@ -217,7 +217,7 @@ verifyPhoneNumber(phoneOptions: PhoneInfoOptions | string, applicationVerifier:
 
 Promise<string>
 
-A Promise for a verification ID that can be passed to [PhoneAuthProvider.credential()](./auth.phoneauthprovider.md#phoneauthprovidercredential) to identify this flow..
+A Promise for a verification ID that can be passed to [PhoneAuthProvider.credential()](./auth.phoneauthprovider.md#phoneauthprovidercredential) to identify this flow.
 
 ### Example 1
 

packages/auth/src/api/index.ts

@@ -100,7 +100,7 @@ export const enum EnforcementState {
 }
 
 // Providers that have reCAPTCHA Enterprise support.
-export const enum RecaptchaProvider {
+export const enum RecaptchaAuthProvider {
   EMAIL_PASSWORD_PROVIDER = 'EMAIL_PASSWORD_PROVIDER',
   PHONE_PROVIDER = 'PHONE_PROVIDER'
 }

packages/auth/src/core/credentials/email.test.ts

@@ -137,6 +137,7 @@ describe('core/credentials/email', () => {
 
   beforeEach(async () => {
     auth = await testAuth();
+    auth.settings.appVerificationDisabledForTesting = false;
   });
 
   context('email & password', () => {

packages/auth/src/core/credentials/email.ts

@@ -32,7 +32,11 @@ import { AuthErrorCode } from '../errors';
 import { _fail } from '../util/assert';
 import { AuthCredential } from './auth_credential';
 import { handleRecaptchaFlow } from '../../platform_browser/recaptcha/recaptcha_enterprise_verifier';
-import { RecaptchaActionName, RecaptchaClientType } from '../../api';
+import {
+  RecaptchaActionName,
+  RecaptchaClientType,
+  RecaptchaAuthProvider
+} from '../../api';
 import { SignUpRequest } from '../../api/authentication/sign_up';
 /**
  * Interface that represents the credentials returned by {@link EmailAuthProvider} for
@@ -128,7 +132,8 @@ export class EmailAuthCredential extends AuthCredential {
           auth,
           request,
           RecaptchaActionName.SIGN_IN_WITH_PASSWORD,
-          signInWithPassword
+          signInWithPassword,
+          RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
         );
       case SignInMethod.EMAIL_LINK:
         return signInWithEmailLink(auth, {
@@ -158,7 +163,8 @@ export class EmailAuthCredential extends AuthCredential {
           auth,
           request,
           RecaptchaActionName.SIGN_UP_PASSWORD,
-          linkEmailPassword
+          linkEmailPassword,
+          RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
         );
       case SignInMethod.EMAIL_LINK:
         return signInWithEmailLinkForLinking(auth, {

packages/auth/src/core/strategies/email_and_password.test.ts

@@ -74,6 +74,7 @@ describe('core/strategies/sendPasswordResetEmail', () => {
 
   beforeEach(async () => {
     auth = await testAuth();
+    auth.settings.appVerificationDisabledForTesting = false;
     mockFetch.setUp();
   });
 

packages/auth/src/core/strategies/email_and_password.ts

@@ -41,7 +41,11 @@ import { getModularInstance } from '@firebase/util';
 import { OperationType } from '../../model/enums';
 import { handleRecaptchaFlow } from '../../platform_browser/recaptcha/recaptcha_enterprise_verifier';
 import { IdTokenResponse } from '../../model/id_token';
-import { RecaptchaActionName, RecaptchaClientType } from '../../api';
+import {
+  RecaptchaActionName,
+  RecaptchaClientType,
+  RecaptchaAuthProvider
+} from '../../api';
 import { _isFirebaseServerApp } from '@firebase/app';
 
 /**
@@ -116,7 +120,8 @@ export async function sendPasswordResetEmail(
     authInternal,
     request,
     RecaptchaActionName.GET_OOB_CODE,
-    authentication.sendPasswordResetEmail
+    authentication.sendPasswordResetEmail,
+    RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
   );
 }
 
@@ -290,7 +295,8 @@ export async function createUserWithEmailAndPassword(
     authInternal,
     request,
     RecaptchaActionName.SIGN_UP_PASSWORD,
-    signUp
+    signUp,
+    RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
   );
   const response = await signUpResponse.catch(error => {
     if (

packages/auth/src/core/strategies/email_link.test.ts

@@ -58,6 +58,7 @@ describe('core/strategies/sendSignInLinkToEmail', () => {
 
   beforeEach(async () => {
     auth = await testAuth();
+    auth.settings.appVerificationDisabledForTesting = false;
     mockFetch.setUp();
   });
 

packages/auth/src/core/strategies/email_link.ts

@@ -33,7 +33,11 @@ import { _assert } from '../util/assert';
 import { getModularInstance } from '@firebase/util';
 import { _castAuth } from '../auth/auth_impl';
 import { handleRecaptchaFlow } from '../../platform_browser/recaptcha/recaptcha_enterprise_verifier';
-import { RecaptchaActionName, RecaptchaClientType } from '../../api';
+import {
+  RecaptchaActionName,
+  RecaptchaClientType,
+  RecaptchaAuthProvider
+} from '../../api';
 import { _isFirebaseServerApp } from '@firebase/app';
 import { _serverAppCurrentUserOperationNotSupportedError } from '../../core/util/assert';
 
@@ -108,7 +112,8 @@ export async function sendSignInLinkToEmail(
     authInternal,
     request,
     RecaptchaActionName.GET_OOB_CODE,
-    api.sendSignInLinkToEmail
+    api.sendSignInLinkToEmail,
+    RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
   );
 }
 

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

@@ -18,19 +18,31 @@
 import { expect } from 'chai';
 import * as sinon from 'sinon';
 
-import { mockEndpoint } from '../../../test/helpers/api/helper';
+import {
+  mockEndpoint,
+  mockEndpointWithParams
+} from '../../../test/helpers/api/helper';
 import { testAuth, TestAuth } from '../../../test/helpers/mock_auth';
 import * as fetch from '../../../test/helpers/mock_fetch';
-import { Endpoint } from '../../api';
+import {
+  Endpoint,
+  RecaptchaClientType,
+  RecaptchaVersion,
+  RecaptchaAuthProvider,
+  EnforcementState
+} from '../../api';
 import { RecaptchaVerifier } from '../../platform_browser/recaptcha/recaptcha_verifier';
 import { PhoneAuthProvider } from './phone';
+import { FAKE_TOKEN } from '../recaptcha/recaptcha_enterprise_verifier';
+import { MockGreCAPTCHATopLevel } from '../recaptcha/recaptcha_mock';
 
 describe('platform_browser/providers/phone', () => {
   let auth: TestAuth;
 
   beforeEach(async () => {
     fetch.setUp();
     auth = await testAuth();
+    auth.settings.appVerificationDisabledForTesting = false;
   });
 
   afterEach(() => {
@@ -39,26 +51,59 @@ describe('platform_browser/providers/phone', () => {
   });
 
   context('#verifyPhoneNumber', () => {
-    it('calls verify on the appVerifier and then calls the server', async () => {
+    it('calls verify on the appVerifier and then calls the server when recaptcha enterprise is disabled', async () => {
+      const recaptchaConfigResponseOff = {
+        recaptchaKey: 'foo/bar/to/site-key',
+        recaptchaEnforcementState: [
+          {
+            provider: RecaptchaAuthProvider.PHONE_PROVIDER,
+            enforcementState: EnforcementState.OFF
+          }
+        ]
+      };
+      const recaptcha = new MockGreCAPTCHATopLevel();
+      if (typeof window === 'undefined') {
+        return;
+      }
+      window.grecaptcha = recaptcha;
+      sinon
+        .stub(recaptcha.enterprise, 'execute')
+        .returns(Promise.resolve('enterprise-token'));
+
+      mockEndpointWithParams(
+        Endpoint.GET_RECAPTCHA_CONFIG,
+        {
+          clientType: RecaptchaClientType.WEB,
+          version: RecaptchaVersion.ENTERPRISE
+        },
+        recaptchaConfigResponseOff
+      );
+
       const route = mockEndpoint(Endpoint.SEND_VERIFICATION_CODE, {
         sessionInfo: 'verification-id'
       });
 
-      const verifier = new RecaptchaVerifier(
+      const v2Verifier = new RecaptchaVerifier(
         auth,
         document.createElement('div'),
         {}
       );
       sinon
-        .stub(verifier, 'verify')
+        .stub(v2Verifier, 'verify')
         .returns(Promise.resolve('verification-code'));
 
       const provider = new PhoneAuthProvider(auth);
-      const result = await provider.verifyPhoneNumber('+15105550000', verifier);
+      const result = await provider.verifyPhoneNumber(
+        '+15105550000',
+        v2Verifier
+      );
       expect(result).to.eq('verification-id');
       expect(route.calls[0].request).to.eql({
         phoneNumber: '+15105550000',
-        recaptchaToken: 'verification-code'
+        recaptchaToken: 'verification-code',
+        captchaResponse: FAKE_TOKEN,
+        clientType: RecaptchaClientType.WEB,
+        recaptchaVersion: RecaptchaVersion.ENTERPRISE
       });
     });
   });

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

@@ -100,7 +100,7 @@ export class PhoneAuthProvider {
    * {@link RecaptchaVerifier}.
    *
    * @returns A Promise for a verification ID that can be passed to
-   * {@link PhoneAuthProvider.credential} to identify this flow..
+   * {@link PhoneAuthProvider.credential} to identify this flow.
    */
   verifyPhoneNumber(
     phoneOptions: PhoneInfoOptions | string,

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

@@ -29,7 +29,7 @@ import {
 
 import { isV2, isEnterprise, RecaptchaConfig } from './recaptcha';
 import { GetRecaptchaConfigResponse } from '../../api/authentication/recaptcha';
-import { EnforcementState, RecaptchaProvider } from '../../api/index';
+import { EnforcementState, RecaptchaAuthProvider } from '../../api/index';
 
 use(chaiAsPromised);
 use(sinonChai);
@@ -46,11 +46,11 @@ describe('platform_browser/recaptcha/recaptcha', () => {
     recaptchaKey: 'projects/testproj/keys/' + TEST_SITE_KEY,
     recaptchaEnforcementState: [
       {
-        provider: RecaptchaProvider.EMAIL_PASSWORD_PROVIDER,
+        provider: RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER,
         enforcementState: EnforcementState.ENFORCE
       },
       {
-        provider: RecaptchaProvider.PHONE_PROVIDER,
+        provider: RecaptchaAuthProvider.PHONE_PROVIDER,
         enforcementState: EnforcementState.AUDIT
       }
     ]
@@ -60,11 +60,11 @@ describe('platform_browser/recaptcha/recaptcha', () => {
     recaptchaKey: 'projects/testproj/keys/' + TEST_SITE_KEY,
     recaptchaEnforcementState: [
       {
-        provider: RecaptchaProvider.EMAIL_PASSWORD_PROVIDER,
+        provider: RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER,
         enforcementState: EnforcementState.OFF
       },
       {
-        provider: RecaptchaProvider.PHONE_PROVIDER,
+        provider: RecaptchaAuthProvider.PHONE_PROVIDER,
         enforcementState: EnforcementState.OFF
       }
     ]
@@ -75,11 +75,11 @@ describe('platform_browser/recaptcha/recaptcha', () => {
       recaptchaKey: 'projects/testproj/keys/' + TEST_SITE_KEY,
       recaptchaEnforcementState: [
         {
-          provider: RecaptchaProvider.EMAIL_PASSWORD_PROVIDER,
+          provider: RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER,
           enforcementState: EnforcementState.ENFORCE
         },
         {
-          provider: RecaptchaProvider.PHONE_PROVIDER,
+          provider: RecaptchaAuthProvider.PHONE_PROVIDER,
           enforcementState: EnforcementState.OFF
         }
       ]
@@ -120,33 +120,33 @@ describe('platform_browser/recaptcha/recaptcha', () => {
     it('should construct the recaptcha config from the backend response', () => {
       expect(recaptchaConfig.siteKey).to.eq(TEST_SITE_KEY);
       expect(recaptchaConfig.recaptchaEnforcementState[0]).to.eql({
-        provider: RecaptchaProvider.EMAIL_PASSWORD_PROVIDER,
+        provider: RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER,
         enforcementState: EnforcementState.ENFORCE
       });
       expect(recaptchaConfig.recaptchaEnforcementState[1]).to.eql({
-        provider: RecaptchaProvider.PHONE_PROVIDER,
+        provider: RecaptchaAuthProvider.PHONE_PROVIDER,
         enforcementState: EnforcementState.AUDIT
       });
       expect(recaptchaConfigEnforceAndOff.recaptchaEnforcementState[1]).to.eql({
-        provider: RecaptchaProvider.PHONE_PROVIDER,
+        provider: RecaptchaAuthProvider.PHONE_PROVIDER,
         enforcementState: EnforcementState.OFF
       });
     });
 
     it('#getProviderEnforcementState should return the correct enforcement state of the provider', () => {
       expect(
         recaptchaConfig.getProviderEnforcementState(
-          RecaptchaProvider.EMAIL_PASSWORD_PROVIDER
+          RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
         )
       ).to.eq(EnforcementState.ENFORCE);
       expect(
         recaptchaConfig.getProviderEnforcementState(
-          RecaptchaProvider.PHONE_PROVIDER
+          RecaptchaAuthProvider.PHONE_PROVIDER
         )
       ).to.eq(EnforcementState.AUDIT);
       expect(
         recaptchaConfigEnforceAndOff.getProviderEnforcementState(
-          RecaptchaProvider.PHONE_PROVIDER
+          RecaptchaAuthProvider.PHONE_PROVIDER
         )
       ).to.eq(EnforcementState.OFF);
       expect(recaptchaConfig.getProviderEnforcementState('invalid-provider')).to
@@ -156,15 +156,15 @@ describe('platform_browser/recaptcha/recaptcha', () => {
     it('#isProviderEnabled should return the enablement state of the provider', () => {
       expect(
         recaptchaConfig.isProviderEnabled(
-          RecaptchaProvider.EMAIL_PASSWORD_PROVIDER
+          RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER
         )
       ).to.be.true;
       expect(
-        recaptchaConfig.isProviderEnabled(RecaptchaProvider.PHONE_PROVIDER)
+        recaptchaConfig.isProviderEnabled(RecaptchaAuthProvider.PHONE_PROVIDER)
       ).to.be.true;
       expect(
         recaptchaConfigEnforceAndOff.isProviderEnabled(
-          RecaptchaProvider.PHONE_PROVIDER
+          RecaptchaAuthProvider.PHONE_PROVIDER
         )
       ).to.be.false;
       expect(recaptchaConfig.isProviderEnabled('invalid-provider')).to.be.false;

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

@@ -22,7 +22,7 @@ import {
 } from '../../api/authentication/recaptcha';
 import {
   EnforcementState,
-  RecaptchaProvider,
+  RecaptchaAuthProvider,
   _parseEnforcementState
 } from '../../api/index';
 
@@ -148,8 +148,8 @@ export class RecaptchaConfig {
    */
   isAnyProviderEnabled(): boolean {
     return (
-      this.isProviderEnabled(RecaptchaProvider.EMAIL_PASSWORD_PROVIDER) ||
-      this.isProviderEnabled(RecaptchaProvider.PHONE_PROVIDER)
+      this.isProviderEnabled(RecaptchaAuthProvider.EMAIL_PASSWORD_PROVIDER) ||
+      this.isProviderEnabled(RecaptchaAuthProvider.PHONE_PROVIDER)
     );
   }
 }