- Blog Post & Video - https://dev.to/aaronksaunders/intro-to-reactfire-v4-login-logout-create-account-and-protected-routes-37e5
- ReactFire Repo - https://github.com/FirebaseExtended/reactfire
- updated previously released reactfire intro application to work with v4
- current has auth and create account, will add some CRUD functionality soon
- used Ionic Framework for UI but the code is react so it should work in all cases
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; };