FirebaseExtended / reactfire

Hooks, Context Providers, and Components that make it easy to interact with Firebase.
https://firebaseopensource.com/projects/firebaseextended/reactfire/
MIT License
3.54k stars 401 forks source link

Add support for authentication #65

Closed jyasskin closed 6 years ago

jyasskin commented 9 years ago

I'm fairly new at React, so this could be the wrong design entirely, but:

It looks like a good way to handle authentication is to write:

componentWillMount() {
  firebaseRef.onAuth(auth => this.setState({auth: auth}));
},
componentWillUnmount() {
  firebaseRef.offAuth(...);
},

It would be nice if ReactFire would handle dropping the current authentication state into a component's state, instead of needing this custom code.

jwngr commented 9 years ago

That definitely does seem like a good way to handle Firebase Authentication state. I don't think it's worth putting in ReactFire proper though. It already is only two lines of code and I don't think the addition of the other user management methods really adds much to the library. It makes sense in AngularFire since we promisify the API and handle the digest loop for you automatically. Those don't seem like huge selling points in React (especially the digest loop one). So, I think for now we'll keep ReactFire minimal and not include authentication.

jyasskin commented 9 years ago

It's more than the 6 lines I showed. When you fill in the offAuth(...), you wind up needing to pull the whole callback out into a separate function so that you can pass the same object to offAuth as you passed to onAuth. Then there's interaction with http://stackoverflow.com/q/32688547/943619 if you want to use the uid to bind any state. I wound up with the following mixin:

export let AuthStateMixin = {
  componentWillMount() {
    firebaseRoot.onAuth(this._AuthStateMixin_onAuth, this);
  },
  componentWillUnmount() {
    firebaseRoot.offAuth(this._AuthStateMixin_onAuth, this);
  },

  _AuthStateMixin_onAuth(auth) {
    this.setState({auth: auth});
    if (this.onAuth) {
      this.onAuth(auth);
    }
  },
};

Components that want to watch something that depends on the auth state then define:

  onAuth(auth) {
    if (this.firebaseRefs.userData !== undefined)
      this.unbind('userData');
    if (auth)
      this.bindAsObject(userBaseRef.child(auth.uid), 'userData');
  }
jwngr commented 9 years ago

Fair enough. Let me think about it and talk with some others on the team. Re-opening this for now. Thanks for all the example code!

ShashankaNataraj commented 7 years ago

+1 to this feature. react fire makes everything else so easy, auth should be a part of it too!

jwngr commented 7 years ago

Firebase Auth support is coming in ReactFire 2.0.0. Check out https://github.com/firebase/reactfire/pull/123.

samtstern commented 6 years ago

We have officially deprecated reactfire, as we no longer believe it is the best solution for Firebase developers looking to integrate with React.

Please see the README for information on how to migrate to a better solution. We are working on some new efforts to better serve the React community in the future.