firebase/app#FirebaseError TypeScript Examples

getFirebaseErrorMessage = (err: unknown) =>
  (err as FirebaseError)?.message || "Something went wrong with firebase"

list["updateEmail"] = new SimplePopup(
  "updateEmail",
  "text",
  "Update Email",
  [
    {
      placeholder: "Password",
      type: "password",
      initVal: "",
    },
    {
      placeholder: "New email",
      initVal: "",
    },
    {
      placeholder: "Confirm new email",
      initVal: "",
    },
  ],
  "",
  "Update",
  async (_thisPopup, password, email, emailConfirm) => {
    try {
      const user = Auth.currentUser;
      if (user === null) return;
      if (email !== emailConfirm) {
        Notifications.add("Emails don't match", 0);
        return;
      }
      if (user.providerData.find((p) => p?.providerId === "password")) {
        const credential = EmailAuthProvider.credential(
          user.email as string,
          password
        );
        await reauthenticateWithCredential(user, credential);
      }

      Loader.show();
      const response = await Ape.users.updateEmail(email, user.email as string);
      Loader.hide();

      if (response.status !== 200) {
        return Notifications.add(
          "Failed to update email: " + response.message,
          -1
        );
      }

      Notifications.add("Email updated", 1);
      setTimeout(() => {
        window.location.reload();
      }, 3000);
    } catch (e) {
      const typedError = e as FirebaseError;
      if (typedError.code === "auth/wrong-password") {
        Notifications.add("Incorrect password", -1);
      } else {
        Notifications.add("Something went wrong: " + e, -1);
      }
    }
  },
  (thisPopup) => {
    const user = Auth.currentUser;
    if (user === null) return;
    if (!user.providerData.find((p) => p?.providerId === "password")) {
      thisPopup.inputs = [];
      thisPopup.buttonText = "";
      thisPopup.text = "Password authentication is not enabled";
    }
  },
  (_thisPopup) => {
    //
  }
);

list["removeGoogleAuth"] = new SimplePopup(
  "removeGoogleAuth",
  "text",
  "Remove Google Authentication",
  [
    {
      placeholder: "Password",
      type: "password",
      initVal: "",
    },
  ],
  "",
  "Remove",
  async (_thisPopup, password) => {
    try {
      const user = Auth.currentUser;
      if (user === null) return;
      if (user.providerData.find((p) => p?.providerId === "password")) {
        const credential = EmailAuthProvider.credential(
          user.email as string,
          password
        );
        await reauthenticateWithCredential(user, credential);
      }
      Loader.show();
      unlink(user, "google.com")
        .then(() => {
          Loader.hide();
          Notifications.add("Google authentication removed", 1);
          Settings.updateAuthSections();
        })
        .catch((error) => {
          Loader.hide();
          Notifications.add("Something went wrong: " + error.message, -1);
        });
      setTimeout(() => {
        window.location.reload();
      }, 3000);
    } catch (e) {
      const typedError = e as FirebaseError;
      if (typedError.code === "auth/wrong-password") {
        Notifications.add("Incorrect password", -1);
      } else {
        Notifications.add("Something went wrong: " + e, -1);
      }
    }
  },
  (thisPopup) => {
    const user = Auth.currentUser;
    if (user === null) return;
    if (!user.providerData.find((p) => p?.providerId === "password")) {
      thisPopup.inputs = [];
      thisPopup.buttonText = "";
      thisPopup.text = "Password authentication is not enabled";
    }
  },
  (_thisPopup) => {
    //
  }
);

list["updatePassword"] = new SimplePopup(
  "updatePassword",
  "text",
  "Update Password",
  [
    {
      placeholder: "Password",
      type: "password",
      initVal: "",
    },
    {
      placeholder: "New password",
      type: "password",
      initVal: "",
    },
    {
      placeholder: "Confirm new password",
      type: "password",
      initVal: "",
    },
  ],
  "",
  "Update",
  async (_thisPopup, previousPass, newPass, newPassConfirm) => {
    try {
      const user = Auth.currentUser;
      if (user === null) return;
      const credential = EmailAuthProvider.credential(
        user.email as string,
        previousPass
      );
      if (newPass !== newPassConfirm) {
        Notifications.add("New passwords don't match", 0);
        return;
      }
      Loader.show();
      await reauthenticateWithCredential(user, credential);
      await updatePassword(user, newPass);
      Loader.hide();
      Notifications.add("Password updated", 1);
      setTimeout(() => {
        window.location.reload();
      }, 3000);
    } catch (e) {
      const typedError = e as FirebaseError;
      Loader.hide();
      if (typedError.code === "auth/wrong-password") {
        Notifications.add("Incorrect password", -1);
      } else {
        Notifications.add("Something went wrong: " + e, -1);
      }
    }
  },
  (thisPopup) => {
    const user = Auth.currentUser;
    if (user === null) return;
    if (!user.providerData.find((p) => p?.providerId === "password")) {
      thisPopup.inputs = [];
      thisPopup.buttonText = "";
      thisPopup.text = "Password authentication is not enabled";
    }
  },
  (_thisPopup) => {
    //
  }
);

function PhoneLoginForm({
                       onClose,
                       authDelegate
                   }: {
    onClose: () => void,
    authDelegate: FirebaseAuthDelegate,
}) {
    useRecaptcha();

    const [phone, setPhone] = useState<string>();
    const [code, setCode] = useState<string>();
    const [isInvalidCode, setIsInvalidCode] = useState(false);

    const handleSubmit = async (event: any) => {
        event.preventDefault();

        if (code && authDelegate.confirmationResult) {
            setIsInvalidCode(false);

            authDelegate.confirmationResult.confirm(code).catch((e: FirebaseError) => {
                if (e.code === "auth/invalid-verification-code") {
                    setIsInvalidCode(true)
                }
            });
        } else {
            if (phone) {
                authDelegate.phoneLogin(phone, window.recaptchaVerifier);
            }
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            {isInvalidCode &&
            <Box p={2}>
                <ErrorView
                    error={"Invalid confirmation code"}/>
            </Box>}


            <div id={RECAPTCHA_CONTAINER_ID} />
            <Grid container spacing={1}>
                <Grid item xs={12}>
                    <IconButton
                        onClick={onClose}>
                        <ArrowBackIcon sx={{ width: 20, height: 20 }}/>
                    </IconButton>
                </Grid>
                <Grid item xs={12} sx={{
                    p: 1,
                    display: "flex"
                }}>
                    <Typography align={"center"}
                                variant={"subtitle2"}>{"Please enter your phone number"}</Typography>
                </Grid>
                <Grid item xs={12}>
                    <TextField placeholder="" fullWidth
                                value={phone}
                                disabled={Boolean(phone && (authDelegate.authLoading || authDelegate.confirmationResult))}
                                type="phone"
                                required
                                onChange={(event) => setPhone(event.target.value)}/>
                </Grid>
                {Boolean(phone && authDelegate.confirmationResult) &&
                    <>
                        <Grid item xs={12} sx={{
                            mt: 2,
                            p: 1,
                            display: "flex"
                        }}>
                        <Typography align={"center"}
                                    variant={"subtitle2"}>{"Please enter the confirmation code"}</Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <TextField placeholder="" fullWidth
                                value={code}
                                type="text"
                                required
                                onChange={(event) => setCode(event.target.value)}/>
                        </Grid>
                    </>
                }

                <Grid item xs={12}>
                    <Box sx={{
                        display: "flex",
                        justifyContent: "end",
                        alignItems: "center",
                        width: "100%"
                    }}>

                        {authDelegate.authLoading &&
                        <CircularProgress sx={{ p: 1 }} size={16}
                                        thickness={8}/>
                        }

                        <Button type="submit">
                            {"Ok"}
                        </Button>
                    </Box>
                </Grid>

            </Grid>
        </form>
    );
}

list["updateName"] = new SimplePopup(
  "updateName",
  "text",
  "Update Name",
  [
    {
      placeholder: "Password",
      type: "password",
      initVal: "",
    },
    {
      placeholder: "New name",
      type: "text",
      initVal: "",
    },
  ],
  "",
  "Update",
  async (_thisPopup, pass, newName) => {
    try {
      const user = Auth.currentUser;
      if (user === null) return;

      if (user.providerData.find((p) => p?.providerId === "password")) {
        const credential = EmailAuthProvider.credential(
          user.email as string,
          pass
        );
        await reauthenticateWithCredential(user, credential);
      } else {
        await reauthenticateWithPopup(user, AccountController.gmailProvider);
      }
      Loader.show();

      const checkNameResponse = await Ape.users.getNameAvailability(newName);
      if (checkNameResponse.status !== 200) {
        Loader.hide();
        return Notifications.add(
          "Failed to check name: " + checkNameResponse.message,
          -1
        );
      }

      const updateNameResponse = await Ape.users.updateName(newName);
      if (updateNameResponse.status !== 200) {
        Loader.hide();
        return Notifications.add(
          "Failed to update name: " + updateNameResponse.message,
          -1
        );
      }

      Notifications.add("Name updated", 1);
      DB.getSnapshot().name = newName;
      $("#menu .text-button.account .text").text(newName);
      if (DB.getSnapshot().needsToChangeName) {
        setTimeout(() => {
          location.reload();
        }, 3000);
      }
    } catch (e) {
      const typedError = e as FirebaseError;
      if (typedError.code === "auth/wrong-password") {
        Notifications.add("Incorrect password", -1);
      } else {
        Notifications.add("Something went wrong: " + e, -1);
      }
    }
    Loader.hide();
  },
  (thisPopup) => {
    const user = Auth.currentUser;
    if (user === null) return;
    if (!user.providerData.find((p) => p?.providerId === "password")) {
      thisPopup.inputs[0].hidden = true;
      thisPopup.buttonText = "Reauthenticate to update";
    }
    const snapshot = DB.getSnapshot();
    if (snapshot.needsToChangeName === true) {
      thisPopup.text =
        "We've recently identified several issues that allowed users to register with names that were already taken. Accounts which signed up earliest get to keep the duplicated name, and others are forced to change. Unique names are essential for smooth operation of upcoming features like public profiles, multiplayer, and more. Sorry for the inconvenience.";
    }
  },
  (_thisPopup) => {
    //
  }
);

list["deleteAccount"] = new SimplePopup(
  "deleteAccount",
  "text",
  "Delete Account",
  [
    {
      placeholder: "Password",
      type: "password",
      initVal: "",
    },
  ],
  "This is the last time you can change your mind. After pressing the button everything is gone.",
  "Delete",
  async (_thisPopup, password: string) => {
    //
    try {
      const user = Auth.currentUser;
      if (user === null) return;
      if (user.providerData.find((p) => p?.providerId === "password")) {
        const credential = EmailAuthProvider.credential(
          user.email as string,
          password
        );
        await reauthenticateWithCredential(user, credential);
      } else {
        await reauthenticateWithPopup(user, AccountController.gmailProvider);
      }
      Loader.show();
      Notifications.add("Deleting stats...", 0);
      const usersResponse = await Ape.users.delete();
      Loader.hide();

      if (usersResponse.status !== 200) {
        return Notifications.add(
          "Failed to delete user stats: " + usersResponse.message,
          -1
        );
      }

      Loader.show();
      Notifications.add("Deleting results...", 0);
      const resultsResponse = await Ape.results.deleteAll();
      Loader.hide();

      if (resultsResponse.status !== 200) {
        return Notifications.add(
          "Failed to delete user results: " + resultsResponse.message,
          -1
        );
      }

      Notifications.add("Deleting login information...", 0);
      await Auth.currentUser?.delete();

      Notifications.add("Goodbye", 1, 5);

      setTimeout(() => {
        location.reload();
      }, 3000);
    } catch (e) {
      const typedError = e as FirebaseError;
      Loader.hide();
      if (typedError.code === "auth/wrong-password") {
        Notifications.add("Incorrect password", -1);
      } else {
        Notifications.add("Something went wrong: " + e, -1);
      }
    }
  },
  (thisPopup) => {
    const user = Auth.currentUser;
    if (user === null) return;

    if (!user.providerData.find((p) => p?.providerId === "password")) {
      thisPopup.inputs = [];
      thisPopup.buttonText = "Reauthenticate to delete";
    }
  },
  (_thisPopup) => {
    //
  }
);