I am working with Apple Social Sign On and need to run a function after a successful sign on. The function that gets run will change depending on where the user is in the app.

I declare an event listener:

   document.addEventListener("AppleIDSignInOnSuccess", (res) =>
     mode === "login"
       ? Apple.onSignInSuccess(res, callbacks, mode)
       : Apple.onVerifySuccess(res, callbacks)
   );

The issue I am having is that once this event listener is declared changing the value of the variable mode does not change the documents event listener.

Is there a way to update a documents event listeners?

The full class is defined as:

export class Apple {
    static init(callbacks, mode) {
        const AppleID = window.AppleID;
        const redirectURIBase = DEV ? "app-dev" : "app";
        const redirectURI = `https://${redirectURIBase}.sandboxx.us/profile`;

        document.addEventListener("AppleIDSignInOnFailure", (err) =>
            Apple.onSignInFailure(err, callbacks)
        );
        document.addEventListener("AppleIDSignInOnSuccess", (res) =>
            mode === "login"
                ? Apple.onSignInSuccess(res, callbacks, mode)
                : Apple.onVerifySuccess(res, callbacks)
        );
        AppleID.auth.init({
            clientId: "com.sandboxx.web",
            scope: "name email",
            redirectURI,
            usePopup: true,
        });
    }
}