https://github.com/aaronksaunders/quick-intro-reactfire-v4
working with ionic framework and reacts with firebase, react fire and the latest version of firebase api
https://github.com/aaronksaunders/quick-intro-reactfire-v4
firebase firebase-auth firebase-emulator firebase-storage ionic ionic-framework react reactfire reactjs
Last synced: 4 months ago
JSON representation
working with ionic framework and reacts with firebase, react fire and the latest version of firebase api
- Host: GitHub
- URL: https://github.com/aaronksaunders/quick-intro-reactfire-v4
- Owner: aaronksaunders
- Created: 2022-02-28T22:26:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-08T02:46:53.000Z (almost 4 years ago)
- Last Synced: 2025-09-13T19:40:55.205Z (4 months ago)
- Topics: firebase, firebase-auth, firebase-emulator, firebase-storage, ionic, ionic-framework, react, reactfire, reactjs
- Language: TypeScript
- Homepage:
- Size: 899 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quick Intro To ReactFire v4 Sample Application
- 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](https://ionicframework.com/docs/react) for UI but the code is react so it should work in all cases
### 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
```jsx
// A wrapper for that redirects to the login
// screen if you're not yet authenticated.
export const PrivateRoute = ({
children,
location,
...rest
}: React.PropsWithChildren) => {
const { status, data: signInCheckResult } = useSigninCheck();
console.log(signInCheckResult);
debugger;
if (status === "loading") {
return ;
}
return (
signInCheckResult.signedIn === true ? (
children
) : (
)
}
/>
);
};
```
From the ReactFire Example Code, see this is in `AppAuthWrapper.tsx`. The AuthWrapper code is from the [reactfire repo](https://github.com/FirebaseExtended/reactfire) to account for the removal of `AuthCheck` component
```jsx
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 ;
} else if (signInCheckResult.signedIn === true) {
return children as JSX.Element;
}
return fallback;
};
```