title: React Firebase Authentication failed after Reload
body: <p>I recently created a React App that uses Firebase Authentication. I also attempted to use a &quot;StateProvider&quot; to manage the user state. This is working correctly, however, if I refresh the page, I see the user is set to null and I am brought back to Login again.</p>
  <p>I do notice after signing in with Google, the pop-up opens and automatically closes, then redirects me immediately to the appropriate components.</p>
  <p>I've tried several fixes and refactored my code several times following different suggestions, but have had no luck.</p>
  <p>I did see a suggestion that the user could possibly be null while the client is checking the credentials. And also a suggestion that the local storage is not updating with the server info for the user. I spent a couple of hours going down each path with no success.</p>
  <p>It feels like I'm missing something simple, but I just can't pinpoint it.</p>
  <p>StateProvider.js</p>
  <pre><code>import React, { createContext, useContext, useReducer } from &quot;react&quot;;
  export const StateContext = createContext();
  export const StateProvider = ({ reducer, initialState, children }) =&gt; (
    &lt;StateContext.Provider value={useReducer(reducer, initialState)}&gt;
      {children}
    &lt;/StateContext.Provider&gt;
  );
  
  export const useStateValue = () =&gt; useContext(StateContext);
  </code></pre>
  <p>Login.js</p>
  <pre><code>import React from 'react';
  import './Login.css';
  import Button from '@mui/material/Button';
  import { auth, googleAuthProvider } from '../api/firebase.js';
  import { actionTypes } from '../api/reducer';
  import { useStateValue } from '../api/StateProvider';
  import logo from '../images/mmacc-logo.svg';
  import GoogleIcon from '@mui/icons-material/Google';
  import FacebookIcon from '@mui/icons-material/Facebook';
  
  function Login() {
    const [state, dispatch] = useStateValue();
    const signIn = () =&gt; {
      auth.signInWithPopup(googleAuthProvider).then(result =&gt; {
          dispatch({
              type: actionTypes.SET_USER,
              user: result.user
          });
          console.log(result);
      }).catch(error =&gt; alert(error.message));
  };
  return (
      &lt;div className=&quot;login&quot;&gt;
          &lt;div className=&quot;login__logo&quot;&gt;
              &lt;img src={logo} alt=&quot;&quot; /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;button__group&quot;&gt;
              &lt;Button type=&quot;submit&quot; onClick={signIn}&gt;
                  &lt;GoogleIcon fontSize=&quot;medium&quot; /&gt;
                  &lt;span&gt;Sign In with Google&lt;/span&gt;
              &lt;/Button&gt;
              &lt;Button type=&quot;submit&quot; onClick={signIn}&gt;
                  &lt;FacebookIcon fontSize=&quot;medium&quot; /&gt;
                  &lt;span&gt;Sign In with Facebook&lt;/span&gt;
              &lt;/Button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default Login
  </code></pre>
  <p>App.js</p>
  <pre><code>import React from &quot;react&quot;;
  import './App.css';
  import Header from './components/Header.js';
  import Sidebar from './components/Sidebar.js';
  import Home from './components/Home.js';
  import Widgets from './components/Widgets.js';
  import Login from './components/Login.js';
  import Register from './components/Register.js'
  import { StateProvider, useStateValue } from './api/StateProvider';
  
  function App() {
    const [{user}, dispatch] = useStateValue();
    return (
      &lt;div className=&quot;app&quot;&gt;
        {!user ? &lt;Login /&gt; : (
          &lt;&gt;
            &lt;Header /&gt;
            &lt;div className=&quot;app_body&quot;&gt;
              &lt;Sidebar /&gt;
              &lt;Home /&gt;
              &lt;Widgets /&gt;
            &lt;/div&gt;
          &lt;/&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>