Skip to content

working with ionic framework and reacts with firebase, react fire and the latest version of firebase api

Notifications You must be signed in to change notification settings

aaronksaunders/quick-intro-reactfire-v4

Repository files navigation

Quick Intro To ReactFire v4 Sample Application

Two Approaches For Checking For Auth User

From the react router documentation..

for this to work with IonicReactRouter, I had to remove the location from being passed in to the redirect as state. IonicRouter doesnt support Switch, so the thing just kept looping

// A wrapper for <Route> that redirects to the login
// screen if you're not yet authenticated.
export const PrivateRoute = ({
  children,
  location,
  ...rest
}: React.PropsWithChildren<any>) => {
  const { status, data: signInCheckResult } = useSigninCheck();
  console.log(signInCheckResult);
  debugger;
  if (status === "loading") {
    return <IonLoading isOpen={status === "loading"} />;
  }

  return (
    <Route
      {...rest}
      render={({ location }) =>
        signInCheckResult.signedIn === true ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
            }}
          />
        )
      }
    />
  );
};

From the ReactFire Example Code, see this is in AppAuthWrapper.tsx. The AuthWrapper code is from the reactfire repo to account for the removal of AuthCheck component

export const AuthWrapper = ({
  children,
  fallback,
}: React.PropsWithChildren<{ fallback: JSX.Element }>): JSX.Element => {
  const { status, data: signInCheckResult } = useSigninCheck();
  console.log(signInCheckResult);

  if (!children) {
    throw new Error("Children must be provided");
  }
  if (status === "loading") {
    return <IonLoading isOpen={status === "loading"} />;
  } else if (signInCheckResult.signedIn === true) {
    return children as JSX.Element;
  }

  return fallback;
};

About

working with ionic framework and reacts with firebase, react fire and the latest version of firebase api

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published