{"id":21244094,"url":"https://github.com/aaronksaunders/quick-intro-reactfire-v4","last_synced_at":"2025-10-10T06:18:47.099Z","repository":{"id":139353040,"uuid":"464664122","full_name":"aaronksaunders/quick-intro-reactfire-v4","owner":"aaronksaunders","description":"working with ionic framework and reacts with firebase, react fire and the latest version of firebase api","archived":false,"fork":false,"pushed_at":"2022-03-08T02:46:53.000Z","size":921,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-13T19:40:55.205Z","etag":null,"topics":["firebase","firebase-auth","firebase-emulator","firebase-storage","ionic","ionic-framework","react","reactfire","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-02-28T22:26:07.000Z","updated_at":"2023-10-03T23:06:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"2968462c-5224-4e69-9e45-04c17ca3498a","html_url":"https://github.com/aaronksaunders/quick-intro-reactfire-v4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/quick-intro-reactfire-v4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fquick-intro-reactfire-v4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fquick-intro-reactfire-v4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fquick-intro-reactfire-v4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fquick-intro-reactfire-v4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/quick-intro-reactfire-v4/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fquick-intro-reactfire-v4/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002970,"owners_count":26083488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","firebase-auth","firebase-emulator","firebase-storage","ionic","ionic-framework","react","reactfire","reactjs"],"created_at":"2024-11-21T01:16:14.265Z","updated_at":"2025-10-10T06:18:47.077Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quick Intro To ReactFire v4 Sample Application\n- Blog Post \u0026 Video - https://dev.to/aaronksaunders/intro-to-reactfire-v4-login-logout-create-account-and-protected-routes-37e5\n- ReactFire Repo - https://github.com/FirebaseExtended/reactfire\n- updated previously released reactfire intro application to work with v4\n- current has auth and create account, will add some CRUD functionality soon\n- used [Ionic Framework](https://ionicframework.com/docs/react) for UI but the code is react so it should work in all cases\n\n\n### Two Approaches For Checking For Auth User\n\nFrom the react router documentation.. \n\u003e 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\n```jsx\n// A wrapper for \u003cRoute\u003e that redirects to the login\n// screen if you're not yet authenticated.\nexport const PrivateRoute = ({\n  children,\n  location,\n  ...rest\n}: React.PropsWithChildren\u003cany\u003e) =\u003e {\n  const { status, data: signInCheckResult } = useSigninCheck();\n  console.log(signInCheckResult);\n  debugger;\n  if (status === \"loading\") {\n    return \u003cIonLoading isOpen={status === \"loading\"} /\u003e;\n  }\n\n  return (\n    \u003cRoute\n      {...rest}\n      render={({ location }) =\u003e\n        signInCheckResult.signedIn === true ? (\n          children\n        ) : (\n          \u003cRedirect\n            to={{\n              pathname: \"/login\",\n            }}\n          /\u003e\n        )\n      }\n    /\u003e\n  );\n};\n\n```\n\nFrom 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\n```jsx\nexport const AuthWrapper = ({\n  children,\n  fallback,\n}: React.PropsWithChildren\u003c{ fallback: JSX.Element }\u003e): JSX.Element =\u003e {\n  const { status, data: signInCheckResult } = useSigninCheck();\n  console.log(signInCheckResult);\n\n  if (!children) {\n    throw new Error(\"Children must be provided\");\n  }\n  if (status === \"loading\") {\n    return \u003cIonLoading isOpen={status === \"loading\"} /\u003e;\n  } else if (signInCheckResult.signedIn === true) {\n    return children as JSX.Element;\n  }\n\n  return fallback;\n};\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fquick-intro-reactfire-v4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fquick-intro-reactfire-v4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fquick-intro-reactfire-v4/lists"}