react-redux-firebase: Logout causes permission_denied errors

Do you want to request a feature or report a bug?

(If this is a usage question, please do not post it here—post it on gitter. If this is not a “feature” or a “bug”, or the phrase “How do I…?” applies, then it’s probably a usage question.) Bug related to #464

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

export const rrfConfig = {
  // react-redux-firebase config
  userProfile: "users",
  logErrors: false,
};

@connect(({firebase: {auth}}) => ({auth}))
export default class Header extends Component {
  static propTypes = {
    auth: PropTypes.shape(),
  };

  render() {
    return (
      <AppBar
        id="new-header"
        style={{position: "fixed"}}
        zDepth={0}
        iconElementLeft={<Logo />}
        iconStyleLeft={{margin: 0, position: "relative"}}
        iconElementRight={isEmpty(this.props.auth) ? <AnonymousMenu /> : <LoggedInMenu />}
        iconStyleRight={{margin: 0}}
      />
    );
  }
}

The AnonymousMenu will call a LoginForm component when button is pressed

@withFirebase
export default class LoginForm extends Component {
  static propTypes = {
    firebase: PropTypes.shape({
      login: PropTypes.func.isRequired,
    }).isRequired,
  };

  constructor(props) {
    super(props);
    this.doLogin = this.doLogin.bind(this);
  }

  doLogin = provider => () => {
    const credentials = {
      provider,
      type: "popup",
    };
    this.props.firebase.login(credentials);
  };

That isn’t a listener trying to access /users/… data right?

The LoggedInMenu shows the user name and a logout button

@withFirebase
@connect(({firebase: {auth}}) => ({auth}))
export default class LoggedInMenu extends Component {
  static propTypes = {
    auth: PropTypes.shape(),
    firebase: PropTypes.shape({
      logout: PropTypes.func.isRequired,
    }).isRequired,
  };

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    this.props.firebase.logout();
  };

  render() {
    return (
      <div className="logout">
        <span>{this.props.auth.displayName}</span>
        <FlatButton
          className="logout-btn"
          label="ログアウト"
          onClick={this.handleClick}
        />
      </div>
    );
  }
}

As soon as the logout promise is resolved, my Header will switch back to <AnonymousMenu />, so the error doesn’t make sense to me. Setting logErrors to false didn’t change anything

What is the expected behavior? No error should be displayed.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups? react-redux-firebase@2.1.5

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 1
  • Comments: 25 (9 by maintainers)

Commits related to this issue

Most upvoted comments

@Fandekasp To answer your question about “does this create a users listener” - yes. You have provided userProfile: 'users' to the RRF config - this tells RRF to automatically manage profiles by reading/writing to the 'users' path of the database.

From what I can tell, it seems like there are two pieces to this you are asking about. There is the listener errors (result in the “permission denied” messages you mentioned) and confirming that auth is loaded before using it.

Listener errors

Since reading/writing to and from users happens due to config provided, it seems like the listener errors would be from breaking database rules. Do you have database rules on the users path? Is there a reason that a user wouldn’t be able to view/edit their own users/$uid?

If you are able to provide a sample of your rules, I can look into why, but without them it would be hard to say.

If you aren’t using the automatic profile handling, fell free to just leave off the userProfile parameter from your config like so:

export const rrfConfig = {
  // react-redux-firebase config
  // userProfile: "users", // profile management not being used
  logErrors: false,
};

Confirm Auth Is Loaded

Did you trying checking to see if auth data is loaded before rendering as mentioned in the query docs? It looks like you are accessing a parameter on this.props.auth before confirming it exists. isEmpty will return false until data has loaded, but it hasn’t yet loaded.

What you want to do is first confirm that auth data is loaded, then you can check to see if it is empty or if values exist. This pattern is followed using auth in the state based query example.

All of this said, I will leave the issue open until we confirm that is what is going on. If so, I am open to changing the docs to make this more clear if you have any suggestions.

+5
prescottprue on Jun 25, 2018

Reading the code, I see that logout calls unWatchUserProfile in https://github.com/prescottprue/react-redux-firebase/blob/master/src/actions/auth.js#L548

but it must fail silently, since I’m receiving this “error with profile listener” error afterwards:

+4
AdrienLemaire on Jun 26, 2018

To everyone: Just wanted to again mentioned that this is a log, not an actual error in functionality, so there is no real reason to downgrade.

@lhas2 Is there a reason that you are looking to downgrade? A fix should be up soon, but this shouldn’t be impacting much other than then sending a message to the console. If something isn’t working correctly, we may want to look into that as well.

@Fandekasp The example you provided doesn’t do a “double connection”, withFirebase just provides access to the firebase instance on props. The piece that sets up a profile listener is userProfile: 'users' being passed to config, guessing you know that now though since you disabled it 😆.

+2
prescottprue on Aug 3, 2018

Not getting anything other than console log errors. Also running 2.1.6.

I investigated again, but this issue is like a black box issue. Nothing I can test out here, it just fails as a direct consequence to the logout and I cannot put a breakpoint elsewhere before the error is raised.

@prescottprue I’m suspecting this issue to come from the double connection of firebase in the component:

@withFirebase
@connect(({firebase: {profile}}) => ({profile}))

The thing is, without connect, the profile is never updated. and without withFirebase, the logout function isn’t available.

+2
AdrienLemaire on Jul 12, 2018

Hi, I’m having the same error when I log out, yesterday I put my security rules in firebase firestore, allow read, write: if request.auth.uid! = null; only possible to read and write if the user is logged in. I installed the version react-redux-firebase “:” ^ 2.2.0-alpha.3 "but the problem continues, with logErrors: false, the red screen does not appear but if warning in debugger. Your library is wonderful, thank you for giving us this great resource … regards.

+1
georgeMorales on Oct 30, 2018

After some more investigation, it seems like it might be due to logging out before detaching the profile listener. It should still not be causing any issues, but still made the fix.

Going to include it in the upcoming next release (v2.2.0-alpha). Thanks to everyone for reporting.

+1
prescottprue on Aug 12, 2018

@prescottprue I know, I was just trying to give background information regarding my setup as it’s vanilla generator.

I didn’t see any unexpected behaviour apart from the console log. It happened for me on 2.1.6.

+1
IruneItoiz on Jul 4, 2018
Read more comments on GitHub
← react-redux-firebase: Getting data from the collection() query with `useFirestoreConnect` after getting particular doc() causes multiple renders
react-redux-firebase: TransformError: ..../lib/index.js: Cannot set property '' of undefined →