Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

useSigninCheck suspends indefinitely

Open
#405 8 comments 5 reactions 1 assignee View on GitHub

Maintainers usually reply within 2 days

@jhuleatt is already working on this.

Since Jul 22, 2021.

Assessment

This issue has not been assessed yet.

Description

v5

I would like to create a protected route with reactfire and react-router-dom. To achieve this, I created a PrivateRoute component as follows:

export default function PrivateRoute(routeProps: RouteProps) {
  const { status, data: signInCheckResult, error } = useSigninCheck();

  if (signInCheckResult.signedIn) {
    return <Route {...routeProps} />;
  } else {
    return (
      <Redirect
        to={{ pathname: "/signin", state: { from: routeProps.path } }}
      />
    );
  }
}

I enabled suspense mode for reactfire.
Oddly, when staying on a single page for around ~1min, navigating to another page would cause the component to suspend indefinitely. Reloading the page, however, does momentarily unsuspend the page (but the effect would reappear after idle).

Version info
"firebase": "8.7.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.0",
"reactfire": "3.0.0-rc.2"
Test case

https://codesandbox.io/s/reactfire-suspend-demo-i3j1e

Steps to reproduce
  1. Click on Sign in with Google and proceed.
  2. You should land in a signed in page with a log out button and a link to test page.
  3. Wait for at least 30 seconds (idle).
  4. Click on Link to test page (React Router Link)
  5. Page would suspend indefinitely.
Expected behavior

Page shouldn't suspend indefinitely.

Actual behavior

Page suspends indefinitely.

Please let me know if there are any good implementations for integrating reactfire with react-router-dom.

Dominant language
TypeScript
Stars
3.6k
Forks
403
Avg merge
4d 19h
Merged PRs (30d)
11

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from FirebaseExtended/reactfire

All issues in FirebaseExtended/reactfire

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.