Add App Check token to widget url fragment

Author: lisajian

packages/auth/src/core/auth/auth_impl.ts

@@ -649,20 +649,24 @@ export class AuthImpl implements AuthInternal, _FirebaseService {
     }
 
     // If the App Check service exists, add the App Check token in the headers
-    const appCheckTokenResult = await this.appCheckServiceProvider
-      .getImmediate({ optional: true })
-      ?.getToken();
+    const appCheckToken = await this._getAppCheckToken();
     // TODO: What do we want to do if there is an error getting the token?
     // Context: appCheck.getToken() will never throw even if an error happened.
     // In the error case, a dummy token will be returned along with an error field describing
     // the error. In general, we shouldn't care about the error condition and just use
     // the token (actual or dummy) to send requests.
-    if (appCheckTokenResult?.token) {
-      headers[HttpHeader.X_FIREBASE_APP_CHECK] = appCheckTokenResult.token;
+    if (appCheckToken) {
+      headers[HttpHeader.X_FIREBASE_APP_CHECK] = appCheckToken;
     }
 
     return headers;
   }
+  async _getAppCheckToken(): Promise<string | undefined> {
+    const appCheckTokenResult = await this.appCheckServiceProvider
+      .getImmediate({ optional: true })
+      ?.getToken();
+    return appCheckTokenResult?.token;
+  }
 }
 
 /**

packages/auth/src/core/util/handler.ts

@@ -40,6 +40,13 @@ const WIDGET_PATH = '__/auth/handler';
  */
 const EMULATOR_WIDGET_PATH = 'emulator/auth/handler';
 
+/**
+ * Fragment name for the App Check token that gets passed to the widget
+ *
+ * @internal
+ */
+const FIREBASE_APP_CHECK_FRAGMENT_ID = 'fac';
+
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type WidgetParams = {
   apiKey: ApiKey;
@@ -54,14 +61,14 @@ type WidgetParams = {
   tid?: string;
 } & { [key: string]: string | undefined };
 
-export function _getRedirectUrl(
+export async function _getRedirectUrl(
   auth: AuthInternal,
   provider: AuthProvider,
   authType: AuthEventType,
   redirectUrl?: string,
   eventId?: string,
   additionalParams?: Record<string, string>
-): string {
+): Promise<string> {
   _assert(auth.config.authDomain, auth, AuthErrorCode.MISSING_AUTH_DOMAIN);
   _assert(auth.config.apiKey, auth, AuthErrorCode.INVALID_API_KEY);
 
@@ -107,7 +114,18 @@ export function _getRedirectUrl(
       delete paramsDict[key];
     }
   }
-  return `${getHandlerBase(auth)}?${querystring(paramsDict).slice(1)}`;
+
+  // Sets the App Check token to pass to the widget
+  const appCheckToken = await auth._getAppCheckToken();
+  const appCheckTokenFragment = appCheckToken
+    ? encodeURIComponent(FIREBASE_APP_CHECK_FRAGMENT_ID) +
+      '=' +
+      encodeURIComponent(appCheckToken)
+    : '';
+
+  return `${getHandlerBase(auth)}?${querystring(paramsDict).slice(
+    1
+  )}#${appCheckTokenFragment}`;
 }
 
 function getHandlerBase({ config }: AuthInternal): string {

packages/auth/src/model/auth.ts

@@ -82,6 +82,7 @@ export interface AuthInternal extends Auth {
   _logFramework(framework: string): void;
   _getFrameworks(): readonly string[];
   _getAdditionalHeaders(): Promise<Record<string, string>>;
+  _getAppCheckToken(): Promise<string | undefined>;
 
   readonly name: AppName;
   readonly config: ConfigInternal;

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

@@ -30,7 +30,8 @@ import {
   TEST_AUTH_DOMAIN,
   TEST_KEY,
   testAuth,
-  TestAuth
+  TestAuth,
+  FAKE_APP_CHECK_CONTROLLER
 } from '../../test/helpers/mock_auth';
 import { AuthEventManager } from '../core/auth/auth_event_manager';
 import { OAuthProvider } from '../core/providers/oauth';
@@ -125,6 +126,48 @@ describe('platform_browser/popup_redirect', () => {
       );
     });
 
+    it('includes the App Check token in the url fragment if present', async () => {
+      await resolver._initialize(auth);
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(Promise.resolve({ token: 'fake-token' }));
+
+      await resolver._openPopup(auth, provider, event);
+
+      const matches = (popupUrl as string).match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).to.include('fac=fake-token');
+    });
+
+    it('does not add the App Check token in the url fragment if none returned', async () => {
+      await resolver._initialize(auth);
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(Promise.resolve({ token: '' }));
+
+      await resolver._openPopup(auth, provider, event);
+
+      const matches = (popupUrl as string).match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).not.to.include('fac');
+    });
+
+    it('does not add the App Check token in the url fragment if controller unavailable', async () => {
+      await resolver._initialize(auth);
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(undefined as any);
+
+      await resolver._openPopup(auth, provider, event);
+
+      const matches = (popupUrl as string).match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).not.to.include('fac');
+    });
+
     it('throws an error if apiKey is unspecified', async () => {
       delete (auth.config as Partial<Config>).apiKey;
       await resolver._initialize(auth);
@@ -157,8 +200,10 @@ describe('platform_browser/popup_redirect', () => {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       resolver._openRedirect(auth, provider, event);
 
-      // Delay one tick
-      await Promise.resolve();
+      // Wait a bit so the _openRedirect() call completes
+      await new Promise((resolve): void => {
+        setTimeout(resolve, 100);
+      });
 
       expect(newWindowLocation).to.include(
         `https://${TEST_AUTH_DOMAIN}/__/auth/handler`
@@ -177,6 +222,66 @@ describe('platform_browser/popup_redirect', () => {
       );
     });
 
+    it('includes the App Check token in the url fragment if present', async () => {
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(Promise.resolve({ token: 'fake-token' }));
+
+      // This promise will never resolve on purpose
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      resolver._openRedirect(auth, provider, event);
+
+      // Wait a bit so the _openRedirect() call completes
+      await new Promise((resolve): void => {
+        setTimeout(resolve, 100);
+      });
+
+      const matches = newWindowLocation.match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).to.include('fac=fake-token');
+    });
+
+    it('does not add the App Check token in the url fragment if none returned', async () => {
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(Promise.resolve({ token: '' }));
+
+      // This promise will never resolve on purpose
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      resolver._openRedirect(auth, provider, event);
+
+      // Wait a bit so the _openRedirect() call completes
+      await new Promise((resolve): void => {
+        setTimeout(resolve, 100);
+      });
+
+      const matches = newWindowLocation.match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).not.to.include('fac');
+    });
+
+    it('does not add the App Check token in the url fragment if controller unavailable', async () => {
+      sinon
+        .stub(FAKE_APP_CHECK_CONTROLLER, 'getToken')
+        .returns(undefined as any);
+
+      // This promise will never resolve on purpose
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      resolver._openRedirect(auth, provider, event);
+
+      // Wait a bit so the _openRedirect() call completes
+      await new Promise((resolve): void => {
+        setTimeout(resolve, 100);
+      });
+
+      const matches = newWindowLocation.match(/.*?#(.*)/);
+      expect(matches).not.to.be.null;
+      const fragment = matches![1];
+      expect(fragment).not.to.include('fac');
+    });
+
     it('throws an error if authDomain is unspecified', async () => {
       delete auth.config.authDomain;
 

packages/auth/src/platform_browser/popup_redirect.ts

@@ -75,7 +75,7 @@ class BrowserPopupRedirectResolver implements PopupRedirectResolverInternal {
       '_initialize() not called before _openPopup()'
     );
 
-    const url = _getRedirectUrl(
+    const url = await _getRedirectUrl(
       auth,
       provider,
       authType,
@@ -92,9 +92,14 @@ class BrowserPopupRedirectResolver implements PopupRedirectResolverInternal {
     eventId?: string
   ): Promise<never> {
     await this._originValidation(auth);
-    _setWindowLocation(
-      _getRedirectUrl(auth, provider, authType, _getCurrentUrl(), eventId)
+    const url = await _getRedirectUrl(
+      auth,
+      provider,
+      authType,
+      _getCurrentUrl(),
+      eventId
     );
+    _setWindowLocation(url);
     return new Promise(() => {});
   }