Firebase Auth - unhandled Errors/Exceptions

[cjreimer]

I'm working to integrate Firebase auth into an application. If Firebase issues an error, I'm having trouble catching it if using the Redwood auth interface. The exceptions all go unhandled. Catching exceptions from async functions can be tricky and there seems to be something special about how Firebase is returning promises that seem to require a promise .catch block. A try { await} catch {} arrangement does not appear to work with Firebase's promises.

Currently, the only solution I've found (with the existing RedwoodJS codebase) is to go directly to the firebase API to catch the error.

For context, I'm getting the client and signup functions from the useAuth() hook:
const { client, signUp } = useAuth()

This works to catch an error:

 client.auth().createUserWithEmailAndPassword(data.email, data.password)
   .catch((error) => {
      console.log('Error: ', error)
   })

This doesn't work to catch an error:

try {
  await client.auth().createUserWithEmailAndPassword(data.email, data.password)
} catch (e) {
  console.log('Error', e)
}

And for the RedoodJS part, this doesn't work to catch an error:

signUp({ email: data.email, password: data.password }).catch((error) => {
  console.log('Error: ', error)
})

and neither does a try { await } catch arrangement.

I played with the firebase.ts code in the Auth package and could get it to work if I get rid of the async function and wrapped it in a new promise. The code I got working is:

    signup: (withAuth: oAuthProvider | PasswordCreds = 'google.com') => {
      return new Promise((resolve, reject) => {
        if (isPasswordCreds(withAuth)) {
          client
            .auth()
            .createUserWithEmailAndPassword(withAuth.email, withAuth.password)
            .then((result) => {
              resolve(result)
            })
            .catch((error) => {
              reject(error)
            })
        } else {
          const provider = getProvider(withAuth)
          client
            .auth()
            .signInWithPopup(provider)
            .then((result) => {
              resolve(result)
            })
            .catch((error) => {
              reject(error)
            })
        }
      })
    },

1. Am I missing something?
2. Does anyone have any better suggestions for addressing this rather than returning new Promises?

Thanks!

[peterp]

@cjreimer This looks like a poor implementation on our part. We should be forwarding all the exceptions and promises to the client.

Would you be willing to open a PR that makes this possible?

[cjreimer]

Thanks for taking a look, Peter!

Sure, I'll open a PR.

[cjreimer]

Closed by #2503