title: React - Firebase handling Auth persistence using a separate auth class
body: <p>I am building a react app that uses a simple login feature. I am only using google sign in, and am calling the <code>signInWithPopop</code> function to handle that. I have created a separate class to handle all the auth related code. On the navbar of my website I have a login button if the user is not signed in which switches to a profile button when the user has signed in.</p>
  <p>This is how I am currently checking if the user is signed in (not working):</p>
  <pre><code>console.log(authHandler.getUser());
  const[loginState, setLogin] = useState(authHandler.getUser()? true : false);
  return(
      &lt;div className=&quot;navbar&quot;&gt;
        &lt;div className=&quot;nav-options&quot;&gt;
          &lt;NavItem name=&quot;About&quot;&gt;&lt;/NavItem&gt;
          &lt;NavItem name=&quot;Listings&quot;&gt;&lt;/NavItem&gt;
          &lt;NavItem name=&quot;Dashboard&quot;&gt;&lt;/NavItem&gt;
          {loginState ? &lt;NavItem name=&quot;Profile&quot;&gt;&lt;DropDown loginState={setLogin}&gt;&lt;/DropDown&gt;&lt;/NavItem&gt; : &lt;NavItem name=&quot;Login&quot; click={() =&gt; authHandler.signIn(setLogin)}&gt;&lt;/NavItem&gt;}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <p>This is what I have for my authHandler class:</p>
  <pre><code>import firebase from 'firebase';
  
  export default class Auth{
      constructor(){
          var firebaseConfig = {
              ...
          };
          !firebase.apps.length? firebase.initializeApp(firebaseConfig) : firebase.app();
          firebase.analytics();
          this.provider = new firebase.auth.GoogleAuthProvider();
      }
  
      signIn(state){
          firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() =&gt; {
              return firebase.auth().signInWithPopup(this.provider).then((result) =&gt; {
                  console.log(&quot;signed in &quot; + result.user.uid);
                  this.user = result.user
                  state(true);
              }).catch((error) =&gt; {
                  console.log(error.message);
              });
          }).catch((error) =&gt; {
              console.log(error.message);
          })
      }
  
      getUser(){
          return firebase.auth().currentUser;
      }
  
      logout(state){
          //TODO: logout of firebase
          state(false);
      }
  }
  </code></pre>
  <p>I have tried adding session and local persistence on firebase, but when I refresh the page, the user is signed out. What would be the proper way of maintaining persistence, in a separate class like this? I am trying to build this app with best practices in mind so that the code will be split up properly, and security is maintained.</p>
  <p>Thanks!</p>