[Auth] Fix popup opening location (#5281)

* Fix popup opening location

* Formatting

Author: sam-gc

packages-exp/auth-exp/src/platform_browser/util/popup.test.ts

@@ -51,10 +51,10 @@ describe('platform_browser/util/popup', () => {
 
   beforeEach(async () => {
     windowOpenStub = sinon.stub(window, 'open');
-    popupStub = sinon.stub(({
+    popupStub = sinon.stub({
       focus: () => {},
       close: () => {}
-    } as unknown) as Window);
+    } as unknown as Window);
     windowOpenStub.returns(popupStub);
     auth = await testAuth();
   });
@@ -105,19 +105,23 @@ describe('platform_browser/util/popup', () => {
     expect(windowOptions()).to.include('scrollbars=yes');
   });
 
+  it('centers the popup in the screen', () => {
+    sinon.stub(window.screen, 'availHeight').value(1000);
+    sinon.stub(window.screen, 'availWidth').value(1000);
+    _open(auth);
+    expect(windowOptions()).to.include('top=200');
+    expect(windowOptions()).to.include('left=250');
+  });
+
   it('errors if the popup is blocked', () => {
     setUA('');
     windowOpenStub.returns(undefined);
     expect(() => _open(auth)).to.throw(FirebaseError, 'auth/popup-blocked');
   });
 
   it('builds the proper options string', () => {
-    const screen = window.screen;
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    (window as any).sreen = {
-      availHeight: 1000,
-      availWidth: 2000
-    };
+    sinon.stub(window.screen, 'availHeight').value(1000);
+    sinon.stub(window.screen, 'availWidth').value(2000);
 
     setUA('');
     _open(auth);
@@ -137,8 +141,8 @@ describe('platform_browser/util/popup', () => {
       toolbar: 'no',
       width: '500',
       height: '600',
-      top: '0',
-      left: '0'
+      top: '200',
+      left: '750'
     });
 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

packages-exp/auth-exp/src/platform_browser/util/popup.ts

@@ -60,8 +60,8 @@ export function _open(
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT
 ): AuthPopup {
-  const top = Math.min((window.screen.availHeight - height) / 2, 0).toString();
-  const left = Math.min((window.screen.availWidth - width) / 2, 0).toString();
+  const top = Math.max((window.screen.availHeight - height) / 2, 0).toString();
+  const left = Math.max((window.screen.availWidth - width) / 2, 0).toString();
   let target = '';
 
   const options: { [key: string]: string } = {