{"id":27611671,"url":"https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication","last_synced_at":"2025-07-10T22:04:56.449Z","repository":{"id":70935145,"uuid":"104092615","full_name":"the-road-to-react-with-firebase/react-mobx-firebase-authentication","owner":"the-road-to-react-with-firebase","description":"🔥Boilerplate Project for Authentication with Firebase in React and MobX","archived":false,"fork":false,"pushed_at":"2020-06-12T08:38:44.000Z","size":505,"stargazers_count":118,"open_issues_count":3,"forks_count":35,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-09T08:01:53.957Z","etag":null,"topics":["authentication","authorization","create-react-app","firebase","firebase-auth","firebase-authentication","firebase-database","firebase-db","mobx","protected-routes","react","react-router-4","react-router-v4","react-router4","reactjs"],"latest_commit_sha":null,"homepage":"https://www.robinwieruch.de","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/the-road-to-react-with-firebase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"rwieruch","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-09-19T15:24:07.000Z","updated_at":"2025-02-04T02:51:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"fee0b56e-8e38-41bc-a2fb-eb3367a21500","html_url":"https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/the-road-to-react-with-firebase/react-mobx-firebase-authentication","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-road-to-react-with-firebase%2Freact-mobx-firebase-authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-road-to-react-with-firebase%2Freact-mobx-firebase-authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-road-to-react-with-firebase%2Freact-mobx-firebase-authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-road-to-react-with-firebase%2Freact-mobx-firebase-authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-road-to-react-with-firebase","download_url":"https://codeload.github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-road-to-react-with-firebase%2Freact-mobx-firebase-authentication/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264673531,"owners_count":23647635,"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":["authentication","authorization","create-react-app","firebase","firebase-auth","firebase-authentication","firebase-database","firebase-db","mobx","protected-routes","react","react-router-4","react-router-v4","react-router4","reactjs"],"created_at":"2025-04-23T00:40:37.303Z","updated_at":"2025-07-10T22:04:56.444Z","avatar_url":"https://github.com/the-road-to-react-with-firebase.png","language":"JavaScript","funding_links":["https://github.com/sponsors/rwieruch"],"categories":[],"sub_categories":[],"readme":"# react-mobx-firebase-authentication\n\n[![Build Status](https://travis-ci.org/the-road-to-react-with-firebase/react-mobx-firebase-authentication.svg?branch=master)](https://travis-ci.org/the-road-to-react-with-firebase/react-mobx-firebase-authentication) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-react-with-firebase/react-mobx-firebase-authentication.svg)](https://greenkeeper.io/)\n\n* [React + Firebase Tutorial](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/)\n* [React + Firebase + MobX Tutorial](https://www.robinwieruch.de/react-firebase-mobx-tutorial)\n\n## Variations\n\n* [Only React Version](https://github.com/the-road-to-react-with-firebase/react-firebase-authentication)\n* [Redux Version](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication)\n* [Gatsby Version](https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication)\n* [Firestore Version](https://github.com/the-road-to-react-with-firebase/react-firestore-authentication)\n* [Semantic UI Version](https://github.com/the-road-to-react-with-firebase/react-semantic-ui-firebase-authentication)\n\n## Features\n\n* uses:\n  * only React (create-react-app)\n  * firebase\n  * react-router\n  * **mobx**\n* features:\n  * Sign In\n  * Sign Up\n  * Sign Out\n  * Password Forget\n  * Password Change\n  * Verification Email\n  * Protected Routes with Authorization\n  * Roles-based Authorization\n  * Social Logins with Google, Facebook and Twitter\n  * Linking of Social Logins on Account dashboard\n  * Auth Persistence with Local Storage\n  * Database with Users and Messages\n\n## License\n\n### Commercial license\n\nIf you want to use this starter project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an commercial license for different team sizes:\n\n* [1 Developer](https://gum.co/react-with-firebase-starter-pack-developer)\n* [Team of up to 8 Developers](https://gum.co/react-with-firebase-starter-pack-team)\n* [Unlimited Developers of an Organization](https://gum.co/react-with-firebase-starter-pack-organization)\n\nIt grants you also access to the other starter projects in this GitHub organization.\n\n### Open source license\n\nIf you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use this starter project under the terms of the GPLv3.\n\n## Installation\n\n* `git clone git@github.com:the-road-to-react-with-firebase/react-mobx-firebase-authentication.git`\n* `cd react-mobx-firebase-authentication`\n* `npm install`\n* `npm start`\n* visit http://localhost:3000\n\nGet an overview of Firebase, how to create a project, what kind of features Firebase offers, and how to navigate through the Firebase project dashboard in this [visual tutorial for Firebase](https://www.robinwieruch.de/firebase-tutorial/).\n\n### Firebase Configuration\n\n* copy/paste your configuration from your Firebase project's dashboard into one of these files\n  * *src/components/Firebase/firebase.js* file\n  * *.env* file\n  * *.env.development* and *.env.production* files\n\nThe *.env* or *.env.development* and *.env.production* files could look like the following then:\n\n```\nREACT_APP_API_KEY=AIzaSyBtxZ3phPeXcsZsRTySIXa7n33NtQ\nREACT_APP_AUTH_DOMAIN=react-firebase-s2233d64f8.firebaseapp.com\nREACT_APP_DATABASE_URL=https://react-firebase-s2233d64f8.firebaseio.com\nREACT_APP_PROJECT_ID=react-firebase-s2233d64f8\nREACT_APP_STORAGE_BUCKET=react-firebase-s2233d64f8.appspot.com\nREACT_APP_MESSAGING_SENDER_ID=701928454501\n```\n\n### Activate Sign-In Methods\n\n![firebase-enable-google-social-login_640](https://user-images.githubusercontent.com/2479967/49687774-e0a31e80-fb42-11e8-9d8a-4b4c794134e6.jpg)\n\n* Email/Password\n* [Google](https://www.robinwieruch.de/react-firebase-social-login/)\n* [Facebook](https://www.robinwieruch.de/firebase-facebook-login/)\n* [Twitter](https://www.robinwieruch.de/firebase-twitter-login/)\n* [Troubleshoot](https://www.robinwieruch.de/react-firebase-social-login/)\n\n### Activate Verification E-Mail\n\n* add a redirect URL for redirecting a user after an email verification into one of these files\n  * *src/components/Firebase/firebase.js* file\n  * *.env* file\n  * *.env.development* and *.env.production* files\n\nThe *.env* or *.env.development* and *.env.production* files could look like the following then (excl. the Firebase configuration).\n\n**Development:**\n\n```\nREACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000\n```\n\n**Production:**\n\n```\nREACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com\n```\n\n### Security Rules\n\n```\n{\n  \"rules\": {\n    \".read\": false,\n    \".write\": false,\n    \"users\": {\n      \"$uid\": {\n        \".read\": \"$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])\",\n        \".write\": \"$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])\"\n      },\n      \".read\": \"root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])\",\n      \".write\": \"root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])\"\n    },\n    \"messages\": {\n      \".indexOn\": [\"createdAt\"],\n      \"$uid\": {\n        \".write\": \"data.exists() ? data.child('userId').val() === auth.uid : newData.child('userId').val() === auth.uid\"\n      },\n      \".read\": \"auth != null\",\n      \".write\": \"auth != null\",\n    },\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-road-to-react-with-firebase%2Freact-mobx-firebase-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-road-to-react-with-firebase%2Freact-mobx-firebase-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-road-to-react-with-firebase%2Freact-mobx-firebase-authentication/lists"}