Fix SSO

app/sign-in/SignInForm.tsx

@@ -7,6 +7,7 @@
 //
 'use client'
 import { SignInForm as AuthSignInForm } from '@stanfordbdhg/design-system/modules/auth/SignInForm'
+import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth'
 import { auth, authProvider } from '../../modules/firebase/clientApp'
 
 export const SignInForm = () => (
@@ -18,5 +19,7 @@ export const SignInForm = () => (
     ]}
     enableEmailPassword
     auth={auth}
+    signInWithPopup={signInWithPopup}
+    signInWithEmailAndPassword={signInWithEmailAndPassword}
   />
 )

packages/design-system/src/modules/auth/SignInForm/EmailPasswordForm/EmailPasswordForm.test.tsx

@@ -8,11 +8,12 @@
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { userEvent } from '@testing-library/user-event'
-import { type Auth, signInWithEmailAndPassword } from 'firebase/auth'
+import { type Auth } from 'firebase/auth'
 import { EmailPasswordForm } from './EmailPasswordForm'
 import { Providers } from '../../../../tests/Providers'
 
 const authMock = {} as Auth
+const signInWithEmailAndPasswordMock = jest.fn()
 
 jest.mock('firebase/auth')
 
@@ -46,10 +47,16 @@ describe('EmailPasswordForm', () => {
   })
 
   it('calls signIn function', async () => {
-    render(<EmailPasswordForm auth={authMock} />, { wrapper: Providers })
+    render(
+      <EmailPasswordForm
+        signInWithEmailAndPassword={signInWithEmailAndPasswordMock}
+        auth={authMock}
+      />,
+      { wrapper: Providers },
+    )
     await signIn()
 
-    expect(signInWithEmailAndPassword).toHaveBeenLastCalledWith(
+    expect(signInWithEmailAndPasswordMock).toHaveBeenLastCalledWith(
       expect.anything(),
       validCreds.email,
       validCreds.password,
@@ -58,24 +65,34 @@ describe('EmailPasswordForm', () => {
 
   it('validates against empty values', async () => {
     const user = userEvent.setup()
-    render(<EmailPasswordForm auth={authMock} />, { wrapper: Providers })
+    render(
+      <EmailPasswordForm
+        signInWithEmailAndPassword={signInWithEmailAndPasswordMock}
+        auth={authMock}
+      />,
+      { wrapper: Providers },
+    )
 
     await user.type(getPasswordField(), 'something')
     await user.click(getSubmitButton())
 
     screen.debug()
 
     expect(getEmailField()).toHaveAccessibleErrorMessage()
-    expect(signInWithEmailAndPassword).not.toHaveBeenCalled()
+    expect(signInWithEmailAndPasswordMock).not.toHaveBeenCalled()
   })
 
   it('handles', async () => {
-    render(<EmailPasswordForm auth={authMock} />, { wrapper: Providers })
-    const signInWithEmailAndPasswordMock =
-      signInWithEmailAndPassword as jest.Mock
     signInWithEmailAndPasswordMock.mockImplementation(() => {
       throw new InvalidCredsError()
     })
+    render(
+      <EmailPasswordForm
+        signInWithEmailAndPassword={signInWithEmailAndPasswordMock}
+        auth={authMock}
+      />,
+      { wrapper: Providers },
+    )
 
     await signIn()
 

packages/design-system/src/modules/auth/SignInForm/EmailPasswordForm/EmailPasswordForm.tsx

@@ -5,7 +5,7 @@
 //
 // SPDX-License-Identifier: MIT
 //
-import { type Auth, signInWithEmailAndPassword } from 'firebase/auth'
+import { type Auth, type signInWithEmailAndPassword } from 'firebase/auth'
 import { useTranslations } from 'next-intl'
 import { z } from 'zod'
 import { Button } from '../../../../components/Button'
@@ -20,9 +20,13 @@ const formSchema = z.object({
 
 interface EmailPasswordFormProps {
   auth: Auth
+  signInWithEmailAndPassword: typeof signInWithEmailAndPassword
 }
 
-export const EmailPasswordForm = ({ auth }: EmailPasswordFormProps) => {
+export const EmailPasswordForm = ({
+  auth,
+  signInWithEmailAndPassword,
+}: EmailPasswordFormProps) => {
   const t = useTranslations()
   const form = useForm({
     formSchema,

packages/design-system/src/modules/auth/SignInForm/SignInForm.test.tsx

@@ -7,36 +7,47 @@
 //
 import { fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { type Auth, type AuthProvider, signInWithPopup } from 'firebase/auth'
+import { type Auth, type AuthProvider } from 'firebase/auth'
 import { SignInForm } from './SignInForm'
 import { Providers } from '../../../tests/Providers'
 
 const authMock = {} as Auth
-const mockProvider = {} as AuthProvider
-const mockProviders = [{ name: 'Lorem', provider: mockProvider }]
+const providerMock = {} as AuthProvider
+const providersMock = [{ name: 'Lorem', provider: providerMock }]
+const signInWithPopupMock = jest.fn()
+const signInWithEmailAndPasswordMock = jest.fn()
+
+const defaultProps = {
+  enableEmailPassword: false,
+  providers: providersMock,
+  auth: authMock,
+  signInWithEmailAndPassword: signInWithEmailAndPasswordMock,
+  signInWithPopup: signInWithPopupMock,
+}
 
 jest.mock('firebase/auth')
 
 describe('SignInForm', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
   it('renders SSO providers and calls signInWithPopup', () => {
-    render(
-      <SignInForm
-        enableEmailPassword={false}
-        providers={mockProviders}
-        auth={authMock}
-      />,
-      { wrapper: Providers },
-    )
+    render(<SignInForm {...defaultProps} />, { wrapper: Providers })
 
     const ssoButton = screen.getByRole('button', { name: 'Sign in with Lorem' })
     fireEvent.click(ssoButton)
 
-    expect(signInWithPopup).toHaveBeenCalled()
+    expect(signInWithPopupMock).toHaveBeenCalled()
   })
 
   it('renders email password form', () => {
     render(
-      <SignInForm enableEmailPassword={true} providers={[]} auth={authMock} />,
+      <SignInForm
+        {...defaultProps}
+        enableEmailPassword={true}
+        providers={[]}
+      />,
       { wrapper: Providers },
     )
 
@@ -46,19 +57,17 @@ describe('SignInForm', () => {
 
   it('renders separator only if has providers and email password', () => {
     const { rerender } = render(
-      <SignInForm enableEmailPassword={true} providers={[]} auth={authMock} />,
+      <SignInForm
+        {...defaultProps}
+        enableEmailPassword={true}
+        providers={[]}
+      />,
       { wrapper: Providers },
     )
 
     expect(screen.queryByText('or')).not.toBeInTheDocument()
 
-    rerender(
-      <SignInForm
-        enableEmailPassword={true}
-        providers={mockProviders}
-        auth={authMock}
-      />,
-    )
+    rerender(<SignInForm {...defaultProps} enableEmailPassword={true} />)
 
     expect(screen.queryByText('or')).toBeInTheDocument()
   })

packages/design-system/src/modules/auth/SignInForm/SignInForm.tsx

@@ -6,7 +6,12 @@
 // SPDX-License-Identifier: MIT
 //
 'use client'
-import { type Auth, type AuthProvider, signInWithPopup } from 'firebase/auth'
+import {
+  type Auth,
+  type AuthProvider,
+  type signInWithPopup,
+  type signInWithEmailAndPassword,
+} from 'firebase/auth'
 import { useTranslations } from 'next-intl'
 import { EmailPasswordForm } from './EmailPasswordForm'
 import { Button } from '../../../components/Button'
@@ -20,6 +25,8 @@ export interface SignInFormProps {
     name: string
   }>
   enableEmailPassword: boolean
+  signInWithPopup: typeof signInWithPopup
+  signInWithEmailAndPassword: typeof signInWithEmailAndPassword
   className?: string
 }
 
@@ -28,6 +35,8 @@ export const SignInForm = ({
   providers,
   enableEmailPassword,
   className,
+  signInWithPopup,
+  signInWithEmailAndPassword,
 }: SignInFormProps) => {
   const t = useTranslations()
   return (
@@ -49,7 +58,10 @@ export const SignInForm = ({
               <SeparatorText>{t('signIn_separator')}</SeparatorText>
             </Separator>
           )}
-          <EmailPasswordForm auth={auth} />
+          <EmailPasswordForm
+            auth={auth}
+            signInWithEmailAndPassword={signInWithEmailAndPassword}
+          />
         </>
       )}
     </div>