firebase / firebase/firebaseui-web-react
Link anonymous user with logged in user, possible bug. componentDidMount not called anymore.
- Dominant language
- JavaScript
- Stars
- 1.3k
- Forks
- 246
- PR merge metrics
- No merged PRs in 30d
Description
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 {
loginProvider: LoginProvider
}
class Login extends React.Component {
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 (
{!signedIn &&
}
);
}
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.
Contributor guide
Assessment
This issue has not been assessed yet.