web-dev-qa-db-ja.com

新しいReactフックでFirebase onAuthStateChangeを使用するにはどうすればよいですか？

アプリケーションのユーザーを認証するためにFirebaseを使用しています。 SignInフォームとSignUpフォームを作成しました。新しいユーザーを作成し、保存されたユーザーでサインインできます。ただし、この問題は、Reloadの後にユーザーのログイン状態を維持することで発生します。

チュートリアルで行った方法は、次のようにHOCを使用して、現在のユーザーがログインしているかどうかを確認することです。

_const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        authUser: null,
      };
    }

    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
          authUser
            ? this.setState({ authUser })
            : this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

    render() {
    return (
      <AuthUserContext.Provider value={this.state.authUser}>
        <Component {...this.props} />
      </AuthUserContext.Provider>
      );
    }
  }

  return withFirebase(WithAuthentication);
};

export default withAuthentication;
_

しかし、私は新しいReactHooksを使用してHOCsの必要性を取り除くことを考えています。 _React Context_およびwithFirebase()を使用してHOCの単一インスタンスにアクセスすることにより、useContext(FirebaseContext)Firebaseをすでに削除しました。新しいhooksを使用して、このwithAuthenticationHOCをcomponents内で模倣する方法はありますか？

このチュートリアルを使用しています

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

「高次コンポーネントによるセッション処理」というタイトルのセクションには、この部分が含まれています。

ありがとう！

reactjsfirebasefirebase-authenticationreact-hooks
11
Tristan Trainer

Custom Hookはエフェクトを登録し、認証状態を返します

const useFirebaseAuthentication = (firebase) => {
    const [authUser, setAuthUser] = useState(null);

    useEffect(() =>{
       const unlisten = firebase.auth.onAuthStateChanged(
          authUser => {
            authUser
              ? setAuthUser(authUser)
              : setAuthUser(null);
          },
       );
       return () => {
           unlisten();
       }
    });

    return authUser
}

export default useFirebaseAuthentication;

Componentでは、次のように使用できます

const MyComponent = (props) => {
   const firebase = useContext(FirebaseContext);
   const authUser = useFirebaseAuthentication(firebase);

   return (...)
}

Index.jsxにはこのコードが含まれます

ReactDOM.render( 
   <FirebaseProvider> 
      <App /> 
   </FirebaseProvider>, 
   document.getElementById('root'));

このFirebaseプロバイダーは次のように定義されています。

import Firebase from './firebase';

const FirebaseContext = createContext(); 
export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
);
11
Shubham Khatri

こんにちはShubham Khatriからの情報は非常に役に立ち、私自身のコンポーネントを構築するのに役立ちましたが、彼はコンテキストを使用して状態を管理しました。リアクションとファイアベースの学習を始めたばかりなら、コンポーネントの状態を（正しくないとしても）簡単にすることができました。

したがって、コンテキストを使用しない私にとっての簡単な解決策は、次のようにだけ反応フックでそれを構築することでした：

const useAuth = () => {
  const fireUser = firebase.auth().currentUser;
  const [user, setUser] = useState(fireUser);

  useEffect(() => {
    const unsub = firebase.auth().onAuthStateChanged((user) => {
      user ? setUser(user) : setUser(null);
    });
    return () => {
      unsub();
    };
  });
  return user;
};

const HomeV2 = () => {

  const user = useAuth();


  return (
    <div>
      <Link to="/">React Hooks </Link>
      <LogPage />
      {user ? <p>User is HERE</p> : <p>There's no user !</p>}
    </div>
  );
};

export default HomeV2;
0
Ili