redirectAuthenticatedTo for authenticated users redirects but doesn't call queries

[Swapnull]

What is the problem?

When sending users to my app, I always send them to /auth, which contains

LoginPage.redirectAuthenticatedTo = Routes.DashboardPage().pathname;

When they get there and the user is logged in, it redirects to /dashboard as it should, but the dashboard components never actually calls any of its queries, so the user gets stuck in the suspense fallback component.

Paste all your error logs here:

PASTE_HERE (leave the ``` marks)

Paste all relevant code snippets here:

// Login Component
import AuthForm from "app/auth/components/Form";
import { BlitzPage, useRouter } from "blitz";
import React from "react";

const LoginPage: BlitzPage = () => {
  const router = useRouter();

  return (
    <AuthForm
      onSuccess={() => {
        const next = (router.query.next as string) ?? "/";
        router.push(next);
      }}
    />
  );
};

LoginPage.redirectAuthenticatedTo = "/dashboard";

export default LoginPage;

What are detailed steps to reproduce this?

1. Use code like above (taken from auth example) to set up redirectAuthenticatedTo
2. Ensure page redirecting to is a page which includes a useQuery and contains a suspense fallback with something like <div>Loading...</div>.
3. Visit /auth as a logged in user

You will see the fallback component and the page won't load unless refreshed, or another action taken.

Run blitz -v and paste the output here:

macOS Big Sur | darwin-x64 | Node: v15.5.1

blitz: 0.30.5 (global)
blitz: 0.38.1 (local)

  Package manager: yarn 
  System:
    OS: macOS 11.2.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.48 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.5.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.3.0 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: ^2.24.0 => 2.24.0 
    blitz: 0.38.1 => 0.38.1 
    prisma: ^2.24.0 => 2.24.0 
    react: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0 
    react-dom: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0 
    typescript: 4.2.4 => 4.2.4 

Please include below any other applicable logs and screenshots that show your problem:

No response

[flybayer]

Thanks @Swapnull! I've looked into this and I'm unable to reproduce. I've also added an integration test for this in https://github.com/blitz-js/blitz/pull/2531

Could you either open a PR to https://github.com/blitz-js/blitz/pull/2531 with changes to reproduce or provide a github repo/codesandbox?

[Swapnull]

Hey @flybayer - I have tried to recreate this a couple of times but I can't seem to do it in a clean project. My guess is that there is something wrong in my main project that is causing this problem as a side effect.

Shall we merge the integration test, close this and I will reopen or create a new ticket if I can figure out what is causing the problems?

[flybayer]

@Swapnull is it something you could give me access to?

[flybayer]

@Swapnull ah, so now we are running all the tests in dev, prod, and serverless mode. And the test for this is failing in production mode (blitz build && blitz start).

Is it just failing in prod for you?

[Swapnull]

Hey @flybayer Yeah, this seems to only happen when building for production on my main now you mention it. The app is deployed via render.

Although I haven't really been able to replicate it locally on a clean project, I do get a bit of a weird experience. Using https://github.com/Swapnull/Blitz-redirectAuthenticatedTo, which is effectively a brand new blitz app with a few small changes. When I log in and then go to /login, it seems to render both the login page and the dashboard until after a refresh.

If it helps here is a quick video - https://www.loom.com/share/264cc5fa7a09489681c21cf275668042 .

I am not sure if this is exactly the same problem I am getting or not.

Although I can't give you the repo I am using, I am happy to use that as a starting place and remove things down to a basic example if that helps.

[flybayer]

Ok thanks. Since I have a failing test now, I should be able to fix it.

[flybayer]

@swapnull I spent a long time on this today. Turns out my production test failure I thought I had was just a test harness failure.

However I was able to reproduce the issue in your loom video. Turns out the solution is to remove <Suspense> from _app.js. I suspect that is caused by a react bug. So I've fixed that in the new app template for now: https://github.com/blitz-js/blitz/pull/2548

Can you try that and see if it fixes your queries issue too?

[CarterMcAlister]

I am seeing this issue as well after updating Blitz from 0.34.3 to 0.38.5. I do not have <Suspense> in _app.tsx. If I log the error in the fallback, it prints RedirectError: / for me, with a status code of 302. In my case, the path does not change on redirect either. I have removed the <Suspense> and useQuery calls from the page I am redirecting too, and I still see the error.

[CarterMcAlister]

@Swapnull I discovered the issue for me, maybe for you as well? I upgraded blitz, but missed the breaking change introduced in 0.38.0 After removing react-error-boundry and replacing it with the new one from Blitz, redirectAuthenticatedTo is working as expected for me.

[MadcowD]

Still getting this years later on 0.45.4