Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

useSigninCheck suspends indefinitely

Ouverte
#405 8 commentaires 5 réactions 1 personne assignée Voir sur GitHub

@jhuleatt y travaille déjà.

Depuis le 22/7/2021.

Évaluation

Cette issue n'a pas encore été évaluée.

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.

Langage dominant
TypeScript
Étoiles
3.6k
Forks
403
Merge moyen
5 j 1 h
PR mergées (30 j)
10

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de FirebaseExtended/reactfire

Toutes les issues de FirebaseExtended/reactfire

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.