feat(gladly-team#265): support modular Firebase 9

__mocks__/firebase/app.js

@@ -1,13 +1,5 @@
-const firebaseAppMock = jest.createMockFromModule('firebase')
-firebaseAppMock.apps = []
+const firebaseAppMock = jest.createMockFromModule('firebase/app')
 
-const mockOnIdTokenChangedUnsubscribe = jest.fn()
-const mockOnIdTokenChanged = jest.fn(() => mockOnIdTokenChangedUnsubscribe)
-const mockSignOut = jest.fn(() => Promise.resolve())
-
-firebaseAppMock.auth = jest.fn(() => ({
-  onIdTokenChanged: mockOnIdTokenChanged,
-  signOut: mockSignOut,
-}))
+firebaseAppMock.getApps = jest.fn(() => [])
 
 module.exports = firebaseAppMock

__mocks__/firebase/auth.js

@@ -1 +1,10 @@
-module.exports = jest.fn()
+const firebaseAuthMock = jest.createMockFromModule('firebase/auth')
+
+const mockOnIdTokenChangedUnsubscribe = jest.fn()
+const mockOnIdTokenChanged = jest.fn(() => mockOnIdTokenChangedUnsubscribe)
+const mockSignOut = jest.fn(() => Promise.resolve())
+
+firebaseAuthMock.onIdTokenChanged = mockOnIdTokenChanged
+firebaseAuthMock.signOut = mockSignOut
+
+module.exports = firebaseAuthMock

example/components/FirebaseAuth.js

@@ -1,8 +1,8 @@
 /* globals window */
 import React, { useEffect, useState } from 'react'
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
-import firebase from 'firebase/app'
-import 'firebase/auth'
+import { getApp } from 'firebase/app'
+import { getAuth, EmailAuthProvider } from 'firebase/auth'
 
 // Note that next-firebase-auth inits Firebase for us,
 // so we don't need to.
@@ -13,7 +13,7 @@ const firebaseAuthConfig = {
   // https://github.com/firebase/firebaseui-web#configure-oauth-providers
   signInOptions: [
     {
-      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
+      provider: EmailAuthProvider.PROVIDER_ID,
       requireDisplayName: false,
     },
   ],
@@ -42,7 +42,7 @@ const FirebaseAuth = () => {
       {renderAuth ? (
         <StyledFirebaseAuth
           uiConfig={firebaseAuthConfig}
-          firebaseAuth={firebase.auth()}
+          firebaseAuth={getAuth(getApp())}
         />
       ) : null}
     </div>

example/package.json

@@ -9,7 +9,7 @@
     "deploy": "vercel --prod"
   },
   "dependencies": {
-    "firebase": "^8.9.1",
+    "firebase": "^9.0.0",
     "firebase-admin": "^9.11.0",
     "next": "11.1.0",
     "next-absolute-url": "^1.2.2",

index.d.ts

@@ -1,5 +1,5 @@
 import * as Cookies from 'cookies'
-import type Firebase from 'firebase'
+import type { User } from 'firebase/auth'
 import * as firebaseAdmin from 'firebase-admin'
 import type {
   GetServerSidePropsContext,
@@ -28,7 +28,7 @@ export interface AuthUser {
   claims: Record<string, string | boolean>
   getIdToken: () => Promise<string | null>
   clientInitialized: boolean
-  firebaseUser: Firebase.User | null
+  firebaseUser: User | null
   signOut: () => Promise<void>
 }
 

package.json

@@ -58,7 +58,7 @@
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "firebase": "^8.8.1",
+    "firebase": "^9.0.0",
     "firebase-admin": "^9.11.0",
     "jest": "^27.0.6",
     "jsdom": "^16.7.0",
@@ -80,7 +80,7 @@
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "firebase": ">=7.0.0 <9",
+    "firebase": "^9.0.0",
     "firebase-admin": "^9.0.0",
     "next": ">=9.5.0 <12",
     "react": ">=16.8.0 <18",

src/__tests__/createAuthUser.test.js

@@ -1,4 +1,4 @@
-import firebase from 'firebase/app'
+import { signOut } from 'firebase/auth'
 import {
   createMockFirebaseUserClientSDK,
   createMockFirebaseUserAdminSDK,
@@ -222,7 +222,7 @@ describe('createAuthUser: firebaseUserClientSDK', () => {
       firebaseUserClientSDK: createMockFirebaseUserClientSDK(),
     })
     await AuthUser.signOut()
-    expect(firebase.auth().signOut).toHaveBeenCalled()
+    expect(signOut).toHaveBeenCalled()
   })
 
   it("does not call Firebase's signOut method when we call AuthUser.signOut and the user is unauthed", async () => {
@@ -232,7 +232,7 @@ describe('createAuthUser: firebaseUserClientSDK', () => {
       firebaseUserClientSDK: null,
     })
     await AuthUser.signOut()
-    expect(firebase.auth().signOut).not.toHaveBeenCalled()
+    expect(signOut).not.toHaveBeenCalled()
   })
 })
 
@@ -427,7 +427,7 @@ describe('createAuthUser: firebaseUserAdminSDK', () => {
       token: 'my-id-token-def-456',
     })
     await AuthUser.signOut()
-    expect(firebase.auth().signOut).not.toHaveBeenCalled()
+    expect(signOut).not.toHaveBeenCalled()
   })
 })
 
@@ -518,6 +518,6 @@ describe('createAuthUser: serializedAuthUser', () => {
       serializedAuthUser: createMockSerializedAuthUser(),
     })
     await AuthUser.signOut()
-    expect(firebase.auth().signOut).not.toHaveBeenCalled()
+    expect(signOut).not.toHaveBeenCalled()
   })
 })

src/__tests__/initFirebaseClientSDK.test.js

@@ -1,4 +1,5 @@
-import firebase from 'firebase/app'
+import { getApps, initializeApp } from 'firebase/app'
+import { getAuth, connectAuthEmulator } from 'firebase/auth'
 import { setConfig } from 'src/config'
 import createMockConfig from 'src/testHelpers/createMockConfig'
 
@@ -10,7 +11,7 @@ beforeEach(() => {
   const mockConfig = createMockConfig()
   setConfig(mockConfig)
 
-  firebase.apps = []
+  getApps.mockReturnValue([])
 })
 
 afterEach(() => {
@@ -22,7 +23,7 @@ describe('initFirebaseClientSDK', () => {
     expect.assertions(1)
     const initFirebaseClientSDK = require('src/initFirebaseClientSDK').default
     initFirebaseClientSDK()
-    expect(firebase.initializeApp).toHaveBeenCalledWith({
+    expect(initializeApp).toHaveBeenCalledWith({
       apiKey: 'fakeAPIKey123',
       authDomain: 'my-example-app.firebaseapp.com',
       databaseURL: 'https://my-example-app.firebaseio.com',
@@ -32,10 +33,10 @@ describe('initFirebaseClientSDK', () => {
 
   it('does not call firebase.initializeApp if Firebase already has an initialized app', () => {
     expect.assertions(1)
-    firebase.apps = [{ some: 'app' }]
+    getApps.mockReturnValue([{ some: 'app' }])
     const initFirebaseClientSDK = require('src/initFirebaseClientSDK').default
     initFirebaseClientSDK()
-    expect(firebase.initializeApp).not.toHaveBeenCalled()
+    expect(initializeApp).not.toHaveBeenCalled()
   })
 
   it('throws if config.firebaseClientInitConfig is not set and no app is initialized', () => {
@@ -60,7 +61,7 @@ describe('initFirebaseClientSDK', () => {
       ...mockConfig,
       firebaseClientInitConfig: undefined,
     })
-    firebase.apps = [{ some: 'app' }]
+    getApps.mockReturnValue([{ some: 'app' }])
     const initFirebaseClientSDK = require('src/initFirebaseClientSDK').default
     expect(() => {
       initFirebaseClientSDK()
@@ -74,29 +75,23 @@ describe('initFirebaseClientSDK', () => {
       ...mockConfig,
       firebaseAuthEmulatorHost: 'localhost:9099',
     })
-    firebase.apps = [{ some: 'app' }]
+    getApps.mockReturnValue([{ some: 'app' }])
+    getAuth.mockReturnValue('mockAuth')
     const initFirebaseClientSDK = require('src/initFirebaseClientSDK').default
 
-    const useEmulator = jest.fn()
-    firebase.auth.mockImplementation(() => ({
-      useEmulator,
-    }))
-
     initFirebaseClientSDK()
-    expect(useEmulator).toHaveBeenCalledWith('http://localhost:9099')
+    expect(connectAuthEmulator).toHaveBeenCalledWith(
+      'mockAuth',
+      'http://localhost:9099'
+    )
   })
 
   it('does not initialize the client-side auth emulator if config.firebaseAuthEmulatorHost is not set', () => {
     expect.assertions(1)
-    firebase.apps = [{ some: 'app' }]
+    getApps.mockReturnValue([{ some: 'app' }])
     const initFirebaseClientSDK = require('src/initFirebaseClientSDK').default
 
-    const useEmulator = jest.fn()
-    firebase.auth.mockImplementation(() => ({
-      useEmulator,
-    }))
-
     initFirebaseClientSDK()
-    expect(useEmulator).not.toHaveBeenCalled()
+    expect(connectAuthEmulator).not.toHaveBeenCalled()
   })
 })