title: Permission denied in Firebase Realtime Database - "auth != null" rule doesn't apply
body: <p>I have a React app with Firebase Authentication and Realtime Database. The Realtime Database data rules work fine as long as they are either set to true or false. So this results in permission denied:</p>
  <pre><code>{
    &quot;rules&quot;: {
      &quot;.read&quot;: &quot;false&quot;,
      &quot;.write&quot;: &quot;false&quot;
    }
  }
  </code></pre>
  <p>and this gives access:</p>
  <pre><code>{
    &quot;rules&quot;: {
      &quot;.read&quot;: &quot;true&quot;,
      &quot;.write&quot;: &quot;true&quot;
    }
  }
  </code></pre>
  <p>I'd like to give permission to any authenticated user to read and write in the database, but this doesn't work:</p>
  <pre><code>{
    &quot;rules&quot;: {
      &quot;.read&quot;: &quot;auth != null&quot;,
      &quot;.write&quot;: &quot;auth != null&quot;
    }
  }
  </code></pre>
  <p>Permission denied.
  I know that the authentication process is working because when I log in I can see the current user. It seems that the <code>auth</code> object that is created is null.
  Can someone give any tips on how to get more visibility on the <code>auth</code> object, or why it's null even though there is a user logged in?</p>
  <p>Edited:
  I have a <code>SignIn</code> component, like this:</p>
  <pre><code>import React, { useState } from 'react';
  import { useHistory } from 'react-router-dom';
  import { auth } from '../firebase/firebaseConfig';
  
  const SignIn = () =&gt; {
      const history = useHistory();
      const [email, setEmail] = useState('');
      onst [password, setPassword] = useState('');
  
      const signIn = () =&gt; {
          auth
          .signInWithEmailAndPassword(email, password)
          .then((res) =&gt; {
              history.push('/home');
              console.log(res.user);
          })
          .catch((err) =&gt; {
              console.log(err);
          });
      };
  
    return (
        &lt;div className=&quot;signIn&quot;&gt;
            &lt;h1 className=&quot;signIn-title&quot;&gt;Sign in to your account&lt;/h1&gt;
            &lt;input
                type=&quot;text&quot;
                placeholder=&quot;Enter your email&quot;
                value={email}
                onChange={(e) =&gt; setEmail(e.currentTarget.value)}
            /&gt;
            &lt;input
                type=&quot;password&quot;
                placeholder=&quot;Enter your password&quot;
                value={password}
                onChange={(e) =&gt; setPassword(e.currentTarget.value)}
            /&gt;
        &lt;button onClick={signIn}&gt;Sign In&lt;/button&gt;
        &lt;/div&gt;
     );
  };
  
  export default SignIn;
  </code></pre>
  <p>I have a very similar <code>SignUp</code> component as well, upon clicking the <code>sign up</code> button, this function runs:</p>
  <pre><code>    ...
        const signUp = () =&gt; {
            auth
                .createUserWithEmailAndPassword(email, password)
                .then((res) =&gt; {
                    history.push('/main');
                 })
            .catch((err) =&gt; {
                console.log(err);
            });
        };
      ...
  </code></pre>
  <p>And when I click on the <code>logout</code> button, this function runs:</p>
  <pre><code>    ...
            const logOut = () =&gt; {
                auth
                    .signOut()
                    .then((res) =&gt; {
                        history.push('/');
                        console.log(res.user);
                     })
                .catch((err) =&gt; {
                    console.log(err);
                });
            };
      ...
  </code></pre>
  <p>I have some links in this SPA that are restricted, so when I'm logged out I definitely can't access them.
  When those views are rendered, this runs in the useEffect hook:</p>
  <pre><code>useEffect(() =&gt; {
      auth.onAuthStateChanged((user) =&gt; {
          console.log(auth.currentUser); // this is not null (shows the user) when logged in, null when logged out
          if (user) {
              history.push('/home');
              console.log(user.email); // this shows the user's email in all components
          }
      });
  });
  </code></pre>
  <p>Because I'm logging the user info in the console, and it's not null when I'm signed in, I assume the database rules should apply, but they don't. I don't know what I'm missing.</p>