{"id":20401061,"url":"https://github.com/sohanemon/with-firebase","last_synced_at":"2026-04-13T05:46:05.763Z","repository":{"id":151083492,"uuid":"554745086","full_name":"sohanemon/with-firebase","owner":"sohanemon","description":null,"archived":false,"fork":false,"pushed_at":"2022-10-20T16:25:09.000Z","size":444,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T01:41:55.020Z","etag":null,"topics":["context-api","firebase","firebase-auth","private-routes","react","react-hook-form","react-router"],"latest_commit_sha":null,"homepage":"https://with-firebase.netlify.app","language":"JavaScript","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/sohanemon.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}},"created_at":"2022-10-20T10:17:57.000Z","updated_at":"2022-12-30T14:53:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c518150-30b6-47b0-97b6-4f39a58f4285","html_url":"https://github.com/sohanemon/with-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sohanemon/with-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fwith-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fwith-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fwith-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fwith-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohanemon","download_url":"https://codeload.github.com/sohanemon/with-firebase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fwith-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31741541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T05:13:27.074Z","status":"ssl_error","status_checked_at":"2026-04-13T05:13:25.150Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["context-api","firebase","firebase-auth","private-routes","react","react-hook-form","react-router"],"created_at":"2024-11-15T04:47:41.917Z","updated_at":"2026-04-13T05:46:05.450Z","avatar_url":"https://github.com/sohanemon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [react-hook-form](https://react-hook-form.com/)\n\n## Basics\n\n- register input with `register('email')` function\n- inject the output from register in input. `\u003cinput {...register('name')}/\u003e`\n- pass the `handleSubmit` function from `useForm()`\n  ```js\n  \u003cform onSubmit={handleSubmit((data) =\u003e console.log(data))}\u003e...\u003c/form\u003e\n  ```\n  and avoid this\n  ```js\n  \u003cform onSubmit={() =\u003e handleSubmit(callback)}\u003e...\u003c/form\u003e\n  ```\n- inside the `form` there should be at least a button or type='submit'\n\n## Intermediate (validation)\n\n- `register()` takes two params. First is name and second one is options which is optional. [show more](./src/assets/Screenshot_1.png)\n- ` {...register(\"email\", { required: \"Email is required\" })}` this required field will return as a message.\n- find the error at `const {formState : {errors}} = useForm()`\n\n# _Private_ Route using [React router](https://reactrouter.com)\n\n## Basic\n\n- create a component that returns it's children on condition.\n\n```js\nconst PrivateRoute = ({ children }) =\u003e {\n  if (user?.uid) return children;\n  return \u003c\u003eLoading...\u003c/\u003e;\n};\n\nexport default PrivateRoute;\n```\n\n- now wrap any component with `PrivateRoute`\n\n```js\n{\n  path: \"/\",\n  element: (\n    \u003cPrivateRoute\u003e\n      \u003cHome /\u003e\n    \u003c/PrivateRoute\u003e\n  ),\n},\n```\n\n## Intermediate\n\n- Go to different page if condition doesn't full fill\n\n```js\nconst PrivateRoute = ({ children }) =\u003e {\n  if (user?.uid) return children;\n  return \u003cNavigate to={\"/signin\"}\u003e\u003c/Navigate\u003e;\n};\n```\n\n- use `Navigate` component instead of `useNavigate()` hook there.\n\n```js\nconst PrivateRoute = ({ children }) =\u003e {\n  const navigate = useNavigate();\n  const { user } = useContext(User);\n  if (user?.uid) return children;\n  else navigate(\"/signin\");\n};\n```\n\n\u003e `useNavigate` works on events only\n\n## Redirect to previous path after private route\n\n- navigate with state \u0026 replace\n\n```js\n//private route.jsx\nconst PrivateRoute = ({ children }) =\u003e {\n  const { pathname } = useLocation();\n  if (user?.uid) return children;\n\n  return \u003cNavigate state={{ pathname }} to={\"/login\"} replace\u003e\u003c/Navigate\u003e;\n  // navigated from pathname\n  // passing a props named state\n};\n```\n\n\u003e state props will be injected to the location of `/login`\n\n- get the pathname\n\n```js\n// login.jsx\nconst {\n  state: { pathname },\n} = useLocation();\n// location.state.pathname // state={{ pathname }}\n```\n\n- now we know the previous location and go with\n\n```js\n//login.jsx\nsetTimeout(() =\u003e navigate(pathname || '/'), 100);\n// go to root route if pathname not available\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fwith-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohanemon%2Fwith-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fwith-firebase/lists"}