signInSuccessWithAuthResult return value in Firebase UI callbacks

Question

When I sign in with firebase UI, it gives an error saying this:

No redirect URL has been found. You must either specify a signInSuccessUrl in the configuration, pass in a redirect URL to the widget URL, or return false from the callback.

That explains why it would work when I pass a signinSuccesfulURL, but I did return false from my callbacks! But since I am using typescript, it actually return a Promise<boolean>. I don't know if that is related to my error.

But I don't want to use signinSuccesfulURL because I don't want it to redirect, I want it to stay on the current page after signing in successfully.

//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<...>'

Answer 1

I have a feeling this won't work:

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
},

Since you marked the function as async it returns a promise, not a simple true or false value that FirebaseUI expects.

You may be able to get away with not marking the callback as async and simply returning false, although you'll have no way to synchronize FirebaseUI's operation to your Cloud Function call in that case.