{"id":28437141,"url":"https://github.com/codellyson/moodmingle","last_synced_at":"2025-06-27T20:31:30.613Z","repository":{"id":238214347,"uuid":"796113175","full_name":"codellyson/moodmingle","owner":"codellyson","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-05T01:03:38.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-05T23:09:00.843Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/codellyson.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":"2024-05-05T01:03:35.000Z","updated_at":"2024-05-05T01:03:42.000Z","dependencies_parsed_at":"2024-05-05T02:22:09.582Z","dependency_job_id":"bc1c0ac5-e953-49f4-87a0-43f778caec6f","html_url":"https://github.com/codellyson/moodmingle","commit_stats":null,"previous_names":["codellyson/moodmingle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codellyson/moodmingle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmoodmingle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmoodmingle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmoodmingle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmoodmingle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codellyson","download_url":"https://codeload.github.com/codellyson/moodmingle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fmoodmingle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262327128,"owners_count":23294208,"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","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":[],"created_at":"2025-06-05T23:09:00.158Z","updated_at":"2025-06-27T20:31:30.561Z","avatar_url":"https://github.com/codellyson.png","language":"TypeScript","readme":"---\ntitle: Authentication (using RouterProvider)\ntoc: false\n---\n\n# Auth Example (using RouterProvider)\n\nThis example demonstrates how to restrict access to routes to authenticated users when using `\u003cRouterProvider\u003e`.\n\nThe primary difference compared to how authentication was handled in `BrowserRouter` is that since `RouterProvider` decouples fetching from rendering, we can no longer rely on React context and/or hooks to get our user authentication status. We need access to this information outside of the React tree so we can use it in our route `loader` and `action` functions.\n\nFor some background information on this design choice, please check out the [Remixing React Router](https://remix.run/blog/remixing-react-router) blog post and Ryan's [When to Fetch](https://www.youtube.com/watch?v=95B8mnhzoCM) talk from Reactathon.\n\nBe sure to pay attention to the following features in this example:\n\n- The use of a standalone object _outside of the React tree_ that manages our authentication state\n- The use of `loader` functions to check for user authentication\n- The use of `redirect` from the `/protected` `loader` when the user is not logged in\n- The use of a `\u003cForm\u003e` and an `action` to perform the login\n- The use of a `from` search param and a `redirectTo` hidden input to preserve the previous location so you can send the user there after they authenticate\n- The use of `\u003cForm replace\u003e` to replace the `/login` route in the history stack so the user doesn't return to the login page when clicking the back button after logging in\n- The use of a `\u003cfetcher.Form\u003e` and an `action` to perform the logout\n\n## Preview\n\nOpen this example on [StackBlitz](https://stackblitz.com):\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth-router-provider?file=src/App.tsx)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fmoodmingle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodellyson%2Fmoodmingle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fmoodmingle/lists"}