currentUser is null on first load, which causes the landing page to flash in some cases

Get Help and Help Others
1

I’ve the following code on the landing page to redirect to appropriate page if the user is authenticated:

  useEffect(() => {
    if (hasRole('RECRUITER')) {
      navigate(routes.companyHome())
    } else if (hasRole('CANDIDATE')) {
      navigate(routes.candidateHome())
    }
  }, [hasRole, currentUser]) //current user is null on first load (how do we overcome this?)

Notice that I’m adding currentUser to the dependancy array because current user is null on initial load but will be populated when __REDWOOD__AUTH_GET_CURRENT_USER call is finished. Though this works, it creates a unique problem where user is on the landing page for some time before being redirected to either companyHome or candidateHome. The only time user needs to see the landing page is when they aren’t authenticated. What are some UI patterns to handle this gracefully i.e is there a way to check for loading state while __REDWOOD__AUTH_GET_CURRENT_USER is being fetched?

2

Hi @midhunsezhi

You may want to try using the whileLoadingAith property.

See Router | RedwoodJS Docs

Let’s say you have a dashboard area on your Redwood app, which can only be accessed after logging in. When Redwood Router renders your private page, it will first fetch the user’s details, and only render the page if it determines the user is indeed logged in.

1 Like
3

Thanks for quick response @dthyresson
I just tried your suggestion but it isn’t what I expected it to be. The whileLoadingAuth prop is set to track /auth?method=getToken request but currentUser is only loaded after __REDWOOD__AUTH_GET_CURRENT_USER query is fetched so the landing page is still shown while that request is happening.

Please see the recorded video for how the app behaves after using whileLoadingAuth on the private Set. (Recorded using slow internet emulator to notice the transitions clearly)

Note: the second appearance of loading screen towards the end of the video is because I’m using whileLoadingPage on companyHome Route.

4

Revisiting this after this issue was raised by a customer.

whileLoadingAuth only works for private sets - see implementation here.

If you have logic on non-private sets that redirects users to protected pages like in my app, you will have to add this logic in that layout component to take care of the issue:

const { hasRole, currentUser, loading } = useAuth()

  useEffect(() => {
    if (hasRole('RECRUITER')) {
      navigate(routes.companyHome())
    } else if (hasRole('CANDIDATE')) {
      navigate(routes.companySelection())
    }
  }, [hasRole, currentUser])

  if (loading) {
    return <LoadingPage />
  }
1 Like