firebase / firebase/firebaseui-web-react

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

Open
#64 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.