title: Next js and firebase authentication login page problem
body: <p>I'm using nextjs and having a problem with firebase authentication. When I log in it, I the session is stored at IndexedDB (I guess), and then I have a context that has an useEffect with the method onAuthStateChanged, which updates the user when it is changed.
  Let's say I have a /login and a /dashboard (private page), when the login occurs, it should send me to /dashboard. That works fine. The problem comes when I try to go to /login (by typing the link in browser, thus refreshing) <strong>without</strong> logging off, which should send me back to /dashboard again. Instead of making the component be blank till the data is fetched, it loads the login page, <strong>only then</strong> renders the dashboard again.</p>
  <pre><code>  const Dashboard = dynamic(() =&gt; import('../pages/dashboard'))
  
    const router = useRouter()
    const { signIn, user } = useAuth()
    const { addToast } = useToast()
    const formRef = useRef&lt;FormHandles&gt;(null)
  
    useEffect(() =&gt; {
      console.log(user)
      if (!user) return
      router.replace('/login', '/dashboard', { shallow: true })
    }, [user])
  </code></pre>
  <p>I use dynamic to render the page conditionally</p>
  <pre><code>      return (
          &lt;&gt;
            {user ? (
              &lt;Dashboard /&gt;
            ) : (
              &lt;&gt;
                &lt;Head&gt;
                  &lt;title&gt;Login&lt;/title&gt;
                &lt;/Head&gt;
                &lt;Container&gt;
                  &lt;Content&gt;
                    &lt;img src={Logo} width={245} alt=&quot;Imobiliária Predial Primus&quot; /&gt;
  
                    &lt;Form ref={formRef} onSubmit={handleSubmit}&gt;
                      &lt;h1&gt;Faça seu login&lt;/h1&gt;
  
                      &lt;Input name=&quot;email&quot; placeholder=&quot;E-mail&quot; /&gt;
                      &lt;Input name=&quot;password&quot; type=&quot;password&quot; placeholder=&quot;Senha&quot; /&gt;
  
                      &lt;Button type=&quot;submit&quot;&gt;Entrar&lt;/Button&gt;
  
                      &lt;a href=&quot;#&quot;&gt; Esqueci minha senha&lt;/a&gt;
                    &lt;/Form&gt;
                  &lt;/Content&gt;
  
                  &lt;Background /&gt;
                &lt;/Container&gt;
              &lt;/&gt;
            )}
          &lt;/&gt;
        )
  </code></pre>
  <p>As you can see, &quot;user&quot; is what conditionally renders the page, but since it comes null everytime the page loads, this problem occur.</p>
  <p>This is the Auth.tsx context, which I wrap around the app.</p>
  <pre><code>    import React, {
        createContext,
        useCallback,
        useContext,
        useState,
        useEffect
      } from 'react'
      import { useRouter } from 'next/router'
  
      // Firebase
      import { auth } from '../config/firebase'
      import { User } from '../interfaces'
  
      interface SignInCredentials {
        email: string
        password: string
      }
  
      interface AuthContextData {
        user: User
        signIn(credentials: SignInCredentials): Promise&lt;void&gt;
        signOut(): void
      }
  
      const AuthContext = createContext&lt;AuthContextData&gt;({} as AuthContextData)
  
      const AuthProvider: React.FC = ({ children }) =&gt; {
        const router = useRouter()
        const [user, setUser] = useState(auth.currentUser)
  
        useEffect(() =&gt; {
          const unsubscribe = auth.onAuthStateChanged(user =&gt; {
            console.log('user', user)
            setUser(user)
  
            if (!user) {
              router.push('/login')
            }
          })
          return () =&gt; {
            unsubscribe()
          }
        }, [])
  
        const signIn = useCallback(async (data: SignInCredentials) =&gt; {
          await auth.signInWithEmailAndPassword(data.email, data.password)
        }, [])
  
        const signOut = useCallback(() =&gt; {
          auth.signOut()
          router.push('/login')
        }, [])
  
        return (
          &lt;AuthContext.Provider value={{ user, signIn, signOut }}&gt;
            {children}
          &lt;/AuthContext.Provider&gt;
        )
      }
  
      function useAuth(): AuthContextData {
        const context = useContext(AuthContext)
  
        if (!context) {
          throw new Error('useAuth must be used within an AuthProvider')
        }
  
        return context
      }
  
      export { AuthProvider, useAuth }
  </code></pre>