How to unit test firebase auth in a NextJS project? Error (auth/invalid-api-key).

[wick3ds0ul]

I am trying to setup and unit test firebase auth in a Next JS project, that uses server side rendering.

Setup:
package.json

"firebase": "^9.6.10",
"firebase-admin": "^10.0.2",
"next": "12.1.1",

I want to unit test the parts of the code where there is conditional rendering based on if user is logged in.

Firebase does not seem to have much resources for unit testing for authentication.

Error:

    FirebaseError: Firebase: Error (auth/invalid-api-key).

      25 |     }
      26 |
    > 27 |     return firebaseClient.auth().onIdTokenChanged(async (user) => {
         |                           ^
      28 |       if (!user) {
      29 |         setUser(null);
      30 |         nookies.set(undefined, 'token', '', { path: '/' });
      


  ● Console

    console.error
      Error: Uncaught [FirebaseError: Firebase: Error (auth/invalid-api-key).]
      ...
      {
        code: 'auth/invalid-api-key',
        customData: { appName: '[DEFAULT]' }
      }

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)

    console.error
      The above error occurred in the <AuthProvider> component:
      
      

Here is AuthProvider.tsx that wraps around the entire app.

     
type AuthProviderProps = {
  children: React.ReactNode;
};
type User = firebaseClient.User;

const AuthContext = createContext<{ user: User | null }>({
  user: null,
});

export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
  const [user, setUser] = useState<User | null>(null);

  // handle auth logic here...

  // listen for token changes
  // call setUser and write new token as a cookie
  useEffect(() => {
    if (typeof window !== 'undefined') {
      (window as any).nookies = nookies;
    }

    return firebaseClient.auth().onIdTokenChanged(async (user) => {
      if (!user) {
        setUser(null);
        nookies.set(undefined, 'token', '', { path: '/' });
      } else {
        const token = await user.getIdToken();
        setUser(user);
        nookies.set(undefined, 'token', token, { path: '/' });
      }
    });
  }, []);

  // force refresh the token every 10 minutes
  useEffect(() => {
    const handle = setInterval(async () => {
      const user = firebaseClient.auth().currentUser;
      if (user) await user.getIdToken(true);
    }, 10 * 60 * 1000);

    // clean up setInterval
    return () => clearInterval(handle);
  }, []);
  return <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>;
};

export const useAuth = () => {
  return useContext(AuthContext);
};

Here is the provider wrapping around the children elements in _app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <Header />
      <MainLayout>
        <Component {...pageProps} />
      </MainLayout>
    </AuthProvider>
  );
}

export default MyApp;

Here is an example of the test setup that depends on the user has been logged in or not.

  test('if it has a logout button', () => {
    render(<Sidebar />);
    const logoutButton = screen.getByRole('button', { name: /logout/i });
    expect(logoutButton).toBeInTheDocument();
  });

Code that depends on the user state that is logged in.

header.tsx

import { useAuth } from '@/store/auth';

export const Header = () => {
const { user } = useAuth();
return (
  <header className="bg-menubar text-primary-text">
    <nav>{user ? <Sidebar /> : <h1>Not logged In</h1>}</nav>
  </header>
);
};

Here is a test-util.tsx

import { render, RenderOptions } from '@testing-library/react';
import { FC, ReactElement } from 'react';

import { AuthProvider } from '@/store/auth';

const AllTheProviders: FC = ({ children }) => {
  return <AuthProvider>{children}</AuthProvider>;
};

const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
  render(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };

I can confirm that the Keys are correct and it does work on local and allows me to sign in.