Firebase SignUp with Email/Password failing auth

Issue

The Problem

I've been using the same code setup for the past 2 years without a single issue. I use the firebase/auth library to authenticate the user to access data stored in Realtime Database and then carry out my usual read/write operation.

When trying to authenticate the user using signInWithEmailAndPassword I get an error Cannot read property 'then' of undefined

The problem appeared the first time on 1st December. It started intermittently and then it completely stopped working. I'm using the same authentication functionality across my code in various functions and it fails everywhere therefore not related issue on specific function.

The username and password are correctly passed and validated and showing correctly in console.log and I believe the issue is around the auth parameter.

My project specs:

• react native 0.71.14
• Expo sdk 48
• Node JS v18.17.1
• Firebase 9.21.0

Steps:

1. firebase.js is the firebase config file
2. main.js is a typical function that I call to write a new post rating into my Realtime Database.
3. When I call addRating I try first to authenticate my user in firebase before submitting a change
4. The usual signInWithEmailAndPassword now fails on auth

// firebase.js - Its where I setup my firebase config

import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth } from 'firebase/auth';
 
const firebaseConfig = {
  apiKey: "********",
  authDomain: "********",
  databaseURL: "********",
  projectId: "********",
  storageBucket: "********",
  messagingSenderId: "********",
  appId: "********",
  measurementId: "********",
};

const app = initializeApp(firebaseConfig); 
 export const auth = getAuth();
 export const db = getDatabase();
 export const email = "********",
 export const password = "********",

// main.js - example function where I use firebase auth 
import { signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
import { auth, db, email, password } from "../../util/firebase";

const addRating = async (  id, rating  ) => { 
    await signInWithEmailAndPassword(auth, email, password)
    console.log('auth: ',auth)
    console.log('email: ',email)
    console.log('password: ',password)

   .then((userCredential) => {     
        console.log('userCredential: ',userCredential)
        const user = userCredential.user;             
    })
    .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log("addReviewRequest failing to log to firebase with: " + errorCode + " - " + errorMessage);
    });

... rest of the code not running

Error: Cannot read property 'then' of undefined

The logs are showing the following:

LOG: auth:  {"apiKey": "**********", "appName": "[DEFAULT]", "authDomain": "*********",
"currentUser": {"_redirectEventId": undefined, "apiKey": "********", "appName": "[DEFAULT]",
"createdAt": "1607606241646", "displayName": undefined, "email": "*********", "emailVerified": false, "isAnonymous": false,
"lastLoginAt": "1701525810098", "phoneNumber": undefined, "photoURL": undefined,
"providerData": [Array], "stsTokenManager": [Object], "tenantId": undefined, "uid": "*******"}}
 LOG  email:  *********
 LOG  password:  *********

Whenever I use * it means it's returning the correct values as expected, just masking sensitive data. My understanding that the failures point is in .then((userCredential) in fact it doesn't go any further in showing the console.log('userCredential: ',userCredential)

Basically userCredential is now undefined every time for some reason.

I've already posted a new issue in github but wondering if anyone else is facing similar issues and found a solution.

Solution

Your console logs are getting in the way of the promise returned by signInWithEmailAndPassword and the call to then on it:

    await signInWithEmailAndPassword(auth, email, password)
    console.log('auth: ',auth)
    console.log('email: ',email)
    console.log('password: ',password)

   .then((userCredential) => {     

As it stands now, your code is trying to call then on the result of console.log(), which is always going to be undefined. You can't call any methods on undefined, which is what the error message is trying to tell you.

Remove those logs to make your code correctly call then on the promise:

    await signInWithEmailAndPassword(auth, email, password)
   .then((userCredential) => {     

Even better, since this code is an in async function, don't use then/catch callbacks at all, and instead simply await the promise instead. It doesn't really make sense to use then/catch methods in an async function like this.

Answered By - Doug Stevenson