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

[NasonZ]

I've followed the install steps, after running yarn dev, adding my open ai api key and then going to http://localhost:3000/ I see the error below on my webpage.

1 of 1 unhandled error
Next.js (14.1.3) out of date [(learn more)](https://nextjs.org/docs/messages/version-staleness)

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

Source
src\app\AuthWrapper.tsx (12:24) @ getAuth

  10 |
  11 | useEffect(() => {
> 12 |   const auth = getAuth();
     |                      ^
  13 |   const unsubscribe = onAuthStateChanged(auth, async (user) => {
  14 |     if (user) {
  15 |       dispatch(setAuthState(true));

logs

\omniplex>
yarn dev
yarn run v1.22.19
$ next dev
   ▲ Next.js 14.1.3
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Ready in 2.3s
 ○ Compiling / ...
 ✓ Compiled / in 12.6s (3307 modules)
redux-persist failed to create sync storage. falling back to noop storage.
 ✓ Compiled in 1956ms (1448 modules)
 ✓ Compiled in 219ms (1434 modules)

.env.local

#BING_API_KEY=
OPENAI_API_KEY="sk-xxxxx"

#OPENWEATHERMAP_API_KEY=

#ALPHA_VANTAGE_API_KEY=
#FINNHUB_API_KEY=

Can anyone let me know where I've gone wrong.

[jank]

Same problem over here. I just wanted to tinker around with no relevant TS knowledge. I managed to get the app working locally by commenting out the Firebase authentication code in AuthWrapper.tsx like this:

const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    /*const auth = getAuth();
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        dispatch(setAuthState(true));
        dispatch(
          setUserDetailsState({
            uid: user.uid,
            name: user.displayName ?? "",
            email: user.email ?? "",
            profilePic: user.photoURL ?? "",
          })
        );
      } else {
        console.log("User is signed out");
      }
    });

    return () => unsubscribe();*/
  }, [dispatch]);