Link anonymous user with logged in user, possible bug. componentDidMount not called anymore.

Riprodurre il flusso clean-account con autoUpgradeAnonymousUsers abilitato, usando il componente Login, LoginProvider, StyledFirebaseAuth e i callback uiConfig mostrati. Tracciare i callback di loginProvider.register e la transizione dello stato isSignedIn per determinare perché componentDidUpdate non viene più attivato; il lavoro è completato quando la causa e il comportamento di redirect previsto sono documentati o verificati.

Hello,
first of all Happy Easter.

I think there is a bug when using autoUpgradeAnonymousUsers: true in uiConfig.

I will paste my code and I'll explain how to reproduce.

initialization code:

const uiConfig = {
  signInFlow: 'popup',
  c
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
  callbacks: {
    signInSuccessWithAuthResult: () => {
      console.log('signInSuccessWithAuthResult')
      return false
    },
    signInFailure: (error: any) => {
      console.log('sign')
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      var cred = error.credential;
      return firebase.auth().signInWithCredential(cred);
    }

  },
};

const loginProvider = new FirebaseLoginProvider(
  firebaseApp, uiConfig
);

loginProvider.register((user) => {
  if (user == null) {
    console.log('null')
    firebaseApp.auth().signInAnonymously().catch((error) => {
      console.log(error);
    })
  } else {
    console.log("Anony " + user.isAnonymous)
  }
})

And this is my react component:

import 'firebase/auth';
import './firebase-global.css';

import * as React from 'react';

import { RouteComponentProps, withRouter } from "react-router-dom";

import LoginProvider from './LoginProvider';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

interface Props {
};

interface State {
  isSignedIn: boolean
}

interface HomeProps extends RouteComponentProps<Props> {
  loginProvider: LoginProvider
}

class Login extends React.Component<HomeProps, State> {

  state = {
    isSignedIn: false
  }

  constructor(props: HomeProps) {
    super(props);
  }

  componentDidMount() {
    console.log('componentDidMount')
    this.props.loginProvider.register((user) => {
      if (user != null && !user.isAnonymous) {
        this.setState({ isSignedIn: true } as State);
      } else {
        this.setState({ isSignedIn: false } as State);
      }
    })
  }

  componentDidUpdate() {
    console.log('componentDidUpdate')
    this.goBackWhenLoggedIn();
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
    this.props.loginProvider.unregister();
  }

  render() {
    const signedIn = this.state.isSignedIn

    return (
      <div className='container'>
        {!signedIn &&
          <div>
            <StyledFirebaseAuth
              className='firebaseUi'
              uiConfig={this.props.loginProvider.actualConfig()}
              firebaseAuth={this.props.loginProvider.actualProvider()} />
          </div>
        }
      </div>
    );
  }

  private goBackWhenLoggedIn() {
    if (this.state.isSignedIn) {
      // this.props.loginProvider.promoteAccount()
      this.props.history.goBack()
    }
  }

}
export default withRouter(Login);

After login, before adding the option autoUpgradeAnonymousUsers: true for which I also had to add

    signInFailure: (error: any) => {
      console.log('sign')
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      var cred = error.credential;
      return firebase.auth().signInWithCredential(cred);
    }

based on documentation from Handling anonymous user upgrade merge conflicts paragraph on https://firebase.google.com/docs/auth/web/firebaseui

I don't get redirected successfully WHEN I have a clean situation for my user meaning I delete my anonymous user and my logged in user from firebase console (Manage users).

Before, after logging in on Google, componentDidUpdate was called and I could succesfully be redirected to the last page using react router. Now I can't anymore.

What I did to solve the issue is to use window.history.back(); inside signInSuccessWithAuthResult function.

Am I doing something wrong with the configuration? I can't understand why componentDidUpdate is not fired anymore.