Sveltekit with Firebase UI Auth 困难（v8/v9 和 signInSuccessWithAuthResult 回调的问题）

Question

我在 Firebase Auth UI 上花了太多时间来处理奇怪的结果。注意：我在 Sveltekit 工作，所以对于 Auth UI 我使用的是 Firebase Auth v8。我知道人们正在研究 github UI for v9, 但在提交此 Whosebug 时：

https://firebase.google.com/docs/auth/web/firebaseui

Note: FirebaseUI is not compatible with the v9 modular SDK. The v9 compatibility
layer (specifically, the app-compat and auth-compat packages) permits the
usage of FirebaseUI alongside v9, but without the app size reduction and other
benefits of the v9 SDK.

为了将 sveltekit auth v9 教程与 UI 包所需的 v8 内容分开，我花了一些错误的时间。暂时锁定 v8。

    import { onMount } from "svelte";
    import { firebaseConfig } from "$lib/firebaseInit";

    import firebase from "firebase/compat/app";
    import * as firebaseui from "firebaseui";
    import "firebaseui/dist/firebaseui.css";

    onMount(async () => {
        await firebase.initializeApp(firebaseConfig);

        // FirebaseUI config.
        var uiConfig = {
            signInSuccessUrl: "", //'<url-to-redirect-to-on-success>',
            callbacks: {
                // Called when the user has been successfully signed in.
                signInSuccessWithAuthResult: function (
                    authResult,
                    redirectUrl
                ) {
                    handleSignedInUser(authResult);
                    return false; // Do not redirect.
                },
            },
            signInOptions: [
                firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            ],
            // Terms of service url/callback.
            tosUrl: "/tos",
            // Privacy policy url/callback.
            privacyPolicyUrl: function () {
                window.location.assign("/privacy_policy");
            },
        };

        // Initialize the FirebaseUI Widget using Firebase.
        let ui = await new firebaseui.auth.AuthUI(firebase.auth());

        /**
         * Displays the UI for a signed in user.
         * @param {!firebase.User} user
         */
        const handleSignedInUser = async function (user) {
            console.log("handleSignedInUser user: ", user);
            document
                .getElementById("user-signed-in")
                .classList.remove("hidden");
            document.getElementById("user-signed-out").classList.add("hidden");
            document.getElementById("phone").textContent =
                "Phone number: " + user.phoneNumber;
        };

        /**
         * Displays the UI for a signed out user.
         */
        const handleSignedOutUser = function () {
            console.log("handleSignedOutUser.... ");
            document.getElementById("user-signed-in").classList.add("hidden");
            document
                .getElementById("user-signed-out")
                .classList.remove("hidden");
            // The start method will wait until the DOM is loaded.
            ui.start("#firebaseui-auth-container", uiConfig);
        };

        const initApp = function () {
            firebase.auth().onAuthStateChanged(
                // auth.onAuthStateChanged(
                function (user) {
                    console.log("initApp .onAuthStateChanged user: ", user);
                    user ? handleSignedInUser(user) : handleSignedOutUser();
                },
                function (error) {
                    console.log(error);
                }
            );
        };

        initApp();

    }); // end of onMount()

    /**
     * Sign out from the user's account.
     */
    function signOutFn() {
        firebase.auth().signOut()
            .then(
                function () {
                    console.log("Signed Out");
                },
                function (error) {
                    console.error("Sign Out Error", error);
                }
            );
    }

    /**
     * Deletes the user's account.
     */
    function deleteAccountFn() {
        firebase.auth().currentUser.delete()
            .catch(function (error) {
                if (error.code == "auth/requires-recent-login") {
                    // The user's credential is too old. She needs to sign in again.
                    firebase.auth().signOut()
                        .then(function () {
                        // The timeout allows the message to be displayed after the
                        // UI has changed to the signed out state.
                            setTimeout(function () {
                                alert(
                                    "Please sign in again to delete your account."
                                );
                            }, 1);
                        });
                }
            });
    }
</script>

<div class="aaa">
    <h2>Authentication stuff goes here...</h2>
    <div id="firebaseui-auth-container" />    
    <div id="user-signed-in" class="bbb hidden" data-role="collapsible">
        <h3>Login Information</h3>
        <div id="user-info" class="bbb">
            <div id="phone" />
        </div>
        <p>
            <button
                id="sign-out"
                on:click={signOutFn}
                class="ui-btn ui-btn-inline">Sign Out</button
            >
            <button
                id="delete-account"
                on:click={deleteAccountFn}
                class="ui-btn ui-btn-inline">Delete account</button
            >
        </p>
    </div>
    <div id="user-signed-out" class="hidden">
        <h4>You are signed out. Please sign in.</h4>
    </div>
</div>

有了编写的代码，我真的在另一件事上苦苦挣扎。如果您在之前登录时刷新页面，则所有显示都正常。如果您注销然后重新登录，phone 数字将不会正确显示。我的控制台日志中会出现奇怪的错误。

Answer 1

所以 uiConfig 回调函数 signInSuccessWithAuthResult(... returns 变成了一个 firebaseui.auth.AuthResult 对象。那不是 user 对象。

user:  User {_delegate: UserImpl, multiFactor: MultiFactorUserImpl}

对

authResult: {user: User, credential: null, operationType: 'signIn', additionalUserInfo: GenericAdditionalUserInfo}

signInSuccessWithAuthResult 回调函数中的修复...：

之前：handleSignedInUser(authResult);

之后：handleSignedInUser(authResult.user);