title: When the page is reloaded, firebase.auth.currentUser returns null
body: <p>I'm trying to implement a firebase authentication to my web app with react.</p>
  
  <p>The log-in/out flow is like this.</p>
  
  <ul>
  <li><p>The user who succeeded in sign-in at the SIGN-IN page, redirected to the HOME page.</p></li>
  <li><p>When Non-authenticated user access to the HOME page, redirected to the SIGN-IN page</p></li>
  </ul>
  
  <p>It is confirmed that the user is redirected to the HOME page from SIGN-IN and the user who clicked "sign out" button at the HOME page is redirected to the SIGN-IN page.</p>
  
  <p>However, the problem is when the authenticated user reloads the page at the HOME page, the user is redirected to the SIGN-IN page and then redirected to the HOME page.</p>
  
  <p>I supposed than the authenticated user isn't redirected to the SIGN-IN page.</p>
  
  <p>How can I fix this problem?</p>
  
  <p>My codes are following:</p>
  
  <ul>
  <li>FirebaseContext.tsx</li>
  </ul>
  
  <pre><code>import * as React from "react";
  import { createContext, useContext } from "react";
  import { firebase } from "../utils";
  
  const FirebaseContext = createContext(firebase);
  
  export const FirebaseProvider: React.FC = props =&gt; (
      &lt;FirebaseContext.Provider value={firebase}&gt;
          {props.children}
      &lt;/FirebaseContext.Provider&gt;
  );
  
  export const useFirebase = () =&gt; useContext(FirebaseContext);
  
  </code></pre>
  
  <ul>
  <li>App.tsx</li>
  </ul>
  
  <pre><code>import * as React from "react";
  import { Route, Switch } from "react-router-dom";
  import * as routes from "./constants/routes";
  
  import { FirebaseProvider } from "./contexts/FirebaseContext";
  import { Home } from "./pages/Home";
  import { SignIn } from "./pages/SignIn";
  
  const App: React.FC = () =&gt; {
      return (
          &lt;FirebaseProvider&gt;
              &lt;Switch&gt;
                  &lt;Route exact={true} path={routes.SIGN_IN} component={SignIn} /&gt;
                  &lt;Route exact={true} path={routes.HOME} component={Home} /&gt;
              &lt;/Switch&gt;
          &lt;/FirebaseProvider&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <ul>
  <li>AuthUserHook.ts</li>
  </ul>
  
  <pre><code>import { useState, useEffect } from "react";
  import { User } from "firebase";
  
  
  export const useAuthUser = (firebase: any) =&gt; {
      const [authUser, setAuthUser] = useState&lt;User | null&gt;(firebase.auth.currentUser);
      useEffect(() =&gt; {
          const unsubcribe = firebase.auth.onAuthStateChanged((user: User | null) =&gt; setAuthUser(user));
          unsubcribe();
      }, []);
  
      return authUser;
  };
  </code></pre>
  
  <ul>
  <li>SignIn.tsx</li>
  </ul>
  
  <pre><code>import * as React from "react";
  import { useHistory } from "react-router-dom";
  
  import { useFirebase } from "../../contexts/FirebaseContext";
  import { useAuthUser } from "../../Hooks/AuthUserHook";
  import * as routes from "../../constants/routes";
  import { SignInForm } from "./SignInForm";
  
  
  export const SignIn: React.FC = () =&gt; {
      const firebase = useFirebase();
      const authUser = useAuthUser(firebase);
      const history = useHistory();
  
      if (authUser) {
          history.push(routes.HOME);
      }
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Sign in&lt;/h1&gt;
              &lt;SignInForm /&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <ul>
  <li>Home.tsx</li>
  </ul>
  
  <pre><code>import * as React from "react";
  import { useHistory } from "react-router-dom";
  import { useFirebase } from "../../contexts/FirebaseContext";
  import { useAuthUser } from "../../Hooks/AuthUserHook";
  
  import * as routes from "../../constants/routes";
  
  export const Home: React.FC = () =&gt; {
      const firebase = useFirebase();
      const authUser = useAuthUser(firebase);
      const history = useHistory();
  
      if (!authUser) {
          history.push(routes.SIGN_IN);
      }
  
      return (
          &lt;div&gt;
              &lt;h2&gt;Home Page&lt;/h2&gt;
              &lt;p&gt;The Home Page is accessible by every signed in user.&lt;/p&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>