Firebase UI回调中的signInSuccessWithAuthResult返回值

问题描述

当我使用Firebase UI登录时，出现错误：

未找到重定向URL。您必须在配置中指定signInSuccessUrl，将重定向URL传递到小部件URL，或从回调返回false。

这说明了为什么在我传递signinSuccesfulURL时它会起作用，但是我确实从回调中返回了false！但是由于我使用的是打字稿，因此实际上返回了Promise<boolean>。我不知道这是否与我的错误有关。

但是我不想使用signinSuccesfulURL，因为我不希望它重定向，我希望它在成功登录后保留在当前页面上。

//firebaseui component
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth"
import firebase from "gatsby-plugin-firebase"
import React from "react"

const firebaseFunctions = firebase.functions()


const firebaseuipage = dataToSubmit => {
  console.log("within firebase ui",dataToSubmit)
  var uiConfig = {
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.FacebookAuthProvider.PROVIDER_ID,//   {
    //     provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,//     buttonColor: "#3A3A51",//   },{
        provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,fullLabel: "Create Custom Account",buttonColor: "#ED6A5A",},],tosUrl: "<your-tos-url>",privacyPolicyUrl: function () {
      window.location.assign("<your-privacy-policy-url>")
    },callbacks: {
      signInSuccessWithAuthResult: async(authResult) => {
        const someFunction = firebaseFunctions.httpsCallable("some_function");       
        try {
           let result = await  someFunction(dataToSubmit)
        } catch (error) {
          console.error("within firebase service:",error)
        }
        console.log(authResult)
        return false
      },}

  return (
    <div>
      <StyledFirebaseAuth uiConfig={(uiConfig as any)} firebaseAuth={firebase.auth()} />
    </div>
  )
}

export default firebaseuipage

//error
// I actually fixed this by passing uiConfig={(uiConfig as any)} in the above component 
No overload matches this call.
  Overload 1 of 2,'(props: Readonly<Props>): StyledFirebaseAuth',gave the following error.
    Type '{ signInOptions: (string | { provider: string; fullLabel: string; buttonColor: string; })[]; tosUrl: string; privacyPolicyUrl: () => void; callbacks: { signInSuccessWithAuthResult: (authResult: any) => Promise<...>; }; }' is not assignable to type 'Config'.
      The types returned by 'callbacks.signInSuccessWithAuthResult(...)' are incompatible between these types.
        Type 'Promise<boolean>' is not assignable to type 'boolean'.
  Overload 2 of 2,'(props: Props,context?: any): StyledFirebaseAuth',gave the following error.
    Type '{ signInOptions: (string | { provider: string; fullLabel: string; buttonColor: string; })[]; tosUrl: string; privacyPolicyUrl: () => void; callbacks: { signInSuccessWithAuthResult: (authResult: any) => Promise<...>; }; }' is not assignable to type 'Config'.ts(2769)
index.d.ts(5,3): The expected type comes from property 'uiConfig' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<StyledFirebaseAuth> & Readonly<Props> & Readonly<...>'
index.d.ts(5,3): The expected type comes from property 'uiConfig' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<StyledFirebaseAuth> & Readonly<Props> & Readonly<...>'

解决方法

我觉得这行不通：

signInSuccessWithAuthResult: async(authResult) => {
  const someFunction = firebaseFunctions.httpsCallable("some_function");       
  try {
     let result = await  someFunction(dataToSubmit)
  } catch (error) {
    console.error("within firebase service:",error)
  }
  console.log(authResult)
  return false
},

由于您将函数标记为async，因此它返回的是Promise，而不是FirebaseUI期望的简单true或false值。

尽管您无法将FirebaseUI的操作同步到您的Cloud Function调用中，但您可能可以不将回调标记为async而仅返回false，就可以摆脱困境。这种情况。