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

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

Solution 1:^[1]

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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Frank van Puffelen

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]