How to properly display Firebase Auth error to user using Toast and Typescript?

Question

Suppose the user wanted to sign up or sign in to the account. However, the Firebase error appears like this. How can I display the toast notification to the user using try-catch statement with typescript?

[FirebaseError: Firebase: Error (auth/email-already-in-use).]

Here is the code I tried:

    try {
      const credential = await signUpWithEmail(data.email, data.password);
      if (credential.uid) {
        toast.show({
          title: 'Account created! ',
          status: 'success',
          description: 'Welcome!.',
        });
      } else {
        const auth = getAuth();
        auth.signOut();
      }
    } catch (err) {
      toast.show({
        title: 'Cannot sign-up an account.',
        status: 'error',
        description: [CONDITIONAL ERROR MESSAGE FOR DISPLAYING TO THE USER],
      });
    }

Edit: add code

can you please add the code you have tried? – boxdox Mar 12 '22 at 04:04 — boxdox, Mar 12 '22 at 04:04

score 1 · Accepted Answer · answered Mar 12 '22 at 04:21

The err object has a code property that you check check in your code, and a message property that you can display to the user.

So:

  ...
} catch (err) {
  toast.show({
    title: 'Cannot sign-up an account.',
    status: 'error',
    description: err.message,
  });
}

See the Firebase documentation on sending a password reset email that has an example of accessing these two properties.

Also see:

How to properly display Firebase Auth error to user using Toast and Typescript?

1 Answers1