Optional parameter for useLayoutEffect passed into useAuthState

[joserocha3]

Are there are any plans to provide an option to use useLayoutEffect instead of useLayout?

If on application load useAuthState is leveraged to determine whether to render a sign in screen or user dashboard, then the sign in screen is painted before the component receives the updated state. That causes a quick flash of the sign in screen.

This causes PublicRoutes to flash:

const Routes = () => {
  const { user } = useAuthState()
  return (
    user
      ? <AuthenticatedRoutes /> // <-- user dashboard is here
      : <PublicRoutes /> // <-- sign in screen is here
  )
}

Here is a proposed change to useAuthState.ts:

import { auth, User } from 'firebase';
import { useEffect, useLayoutEffect } from 'react';
import useLoadingValue from '../util/useLoadingValue';

export type AuthStateHook = {
  user?: firebase.User;
  initialising: boolean;
};

export default (auth: auth.Auth, delayPaint: boolean): AuthStateHook => {
  const { loading, setValue, value } = useLoadingValue<User>(auth.currentUser);
  const effect = delayPaint ? useEffect : useEffect;

  effect(
    () => {
      const listener = auth.onAuthStateChanged(setValue);
      return () => {
        listener();
      };
    },
    [auth]
  );

  return {
    initialising: loading,
    user: value,
  };
};

[joserocha3]

This seemed to stop happening...

[joserocha3]

I think it stopped because I combined a couple components. Before I had Routes and my App component separate, that resulted in multiple useAuthState calls.

[chrisbianca]

@joserocha3 This is the reason why useAuthState returns a loading flag, as there may be a slight delay whilst Firebase validates the authentication token that it persisted in a previous session.

Generally, you need to account for 3 states rather than 2:

• Initialising
• LoggedIn
• LoggedOut