web-dev-qa-db-ja.com

React.JSで更新した後、ユーザーをFirebaseにログインさせておくにはどうすればよいですか？

コンポーネントをマウントするときに、ユーザーがログインしているかどうかに応じて、ログイン画面またはアプリのいずれかをレンダリングしたいと思います。ただし、更新するたびに、ユーザーはログアウトされます。どうすればログインしたままにできますか？

アプリコンポーネント：

 firebase.initializeApp(config); //init the firebase app...

class App extends Component {//this component renders when the page loads
constructor(props){
  super(props);

  this.state = {user: firebase.auth().currentUser};//current user
}
render(){
    if (this.state.user) {//if you are logged in
          return (
            <Application/>
          );
    } else {//if you are not logged in
          return (
            <Authentication/>
          );
    }
}

}

これは私がユーザーにログインするために使用している方法です（これは正常に機能します）：

let email = "some";
let password = "thing";
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, password);
reactjsfirebaseauthenticationfirebase-authentication
8
JohnCdf

ユーザーのトークンは自動的にローカルストレージに保持され、ページが読み込まれるときに読み取られます。これは、ページをリロードするときにユーザーが自動的に再度認証される必要があることを意味します。

最も可能性の高い問題は、Firebaseがユーザーの認証情報を再読み込みして検証する前にAppコンストラクターが実行されるため、コードがこの認証を検出しないことです。これを修正するには、値を同期的に取得するのではなく、 （非同期）onAuthStateChanged() event をリッスンする必要があります。

constructor(props){
  super(props);
  firebase.auth().onAuthStateChanged(function(user) {
    this.setState({ user: user });
  });
}
16
Frank van Puffelen

ReactのFirebaseでも同じ問題が発生しました。 Firebaseには内部永続化メカニズムがありますが、認証されたユーザーを受信するonAuthStateChangedリスナーには数秒かかるため、ブラウザページをリロードするときにちらつき/不具合が発生する可能性があります。そのため、ローカルストレージを使用してonAuthStateChangedリスナーで設定/リセットします。次のようなもの：

firebase.auth.onAuthStateChanged(authUser => {
  authUser
    ? localStorage.setItem('authUser', JSON.stringify(authUser))
    : localStorage.removeItem('authUser')
});

次に、アプリケーションの起動時にReactコンポーネントのコンストラクターで取得できます：

constructor(props) {
  super(props);

  this.state = {
    authUser: JSON.parse(localStorage.getItem('authUser')),
  };
}

あなたはそれについてもっと読むことができます ここ 。

5
Robin Wieruch