{"id":26893330,"url":"https://github.com/saisandeepvaddi/react-auth-firebase","last_synced_at":"2025-08-19T15:06:53.572Z","repository":{"id":30820067,"uuid":"124632491","full_name":"saisandeepvaddi/react-auth-firebase","owner":"saisandeepvaddi","description":"React Authentication with Firebase the easiest way","archived":false,"fork":false,"pushed_at":"2022-12-08T18:34:48.000Z","size":2501,"stargazers_count":3,"open_issues_count":25,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T14:18:28.355Z","etag":null,"topics":["auth","authentication","higher-order-component","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-auth-firebase","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saisandeepvaddi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-10T07:20:58.000Z","updated_at":"2023-03-04T05:10:12.000Z","dependencies_parsed_at":"2022-07-28T04:49:03.512Z","dependency_job_id":null,"html_url":"https://github.com/saisandeepvaddi/react-auth-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/saisandeepvaddi/react-auth-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saisandeepvaddi%2Freact-auth-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saisandeepvaddi%2Freact-auth-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saisandeepvaddi%2Freact-auth-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saisandeepvaddi%2Freact-auth-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saisandeepvaddi","download_url":"https://codeload.github.com/saisandeepvaddi/react-auth-firebase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saisandeepvaddi%2Freact-auth-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271173270,"owners_count":24711667,"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-08-19T02:00:09.176Z","response_time":63,"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":["auth","authentication","higher-order-component","react"],"created_at":"2025-03-31T23:46:30.982Z","updated_at":"2025-08-19T15:06:53.538Z","avatar_url":"https://github.com/saisandeepvaddi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-auth-firebase\n\nA React package to simplify firebase authentication. All it has is a single HOC.\n\n\u003e This **does not** work with React Native.\n\n# Supported Authorization methods\n\n* Email\n* Google\n* Facebook\n* Github\n* Twitter\n\n# Demo\n\nSee this [codesandbox](https://codesandbox.io/s/v6w6r6521y) for demo.\n\n# Usage\n\n## Install\n\n```shell\n$\u003e npm install firebase react-auth-firebase\n\n (or)\n\n$\u003e yarn add firebase react-auth-firebase\n```\n\n## Create a project at Firebase console\n\n* [Firebase Setup](https://firebase.google.com/docs/web/setup)\n* Enable required authentication methods **_(email/google/facebook/github/twitter)_** in firebase console.\n* You might need to set up applications at these providers' and keep API keys ready. A short note on setting up applications is written at their related [authConfig](#authconfig) options.\n\n## Setup firebase config in your project\n\n```javascript\n//firebaseConfig.js\n//\n\nimport firebase from \"firebase\";\n\n// https://firebase.google.com/docs/web/setup?authuser=0\n\n// See firebase setup in above google firebase documentation url\nexport const config = {\n  apiKey: \"----\",\n  authDomain: \"----\",\n  databaseURL: \"----\",\n  projectId: \"----\",\n  storageBucket: \"----\",\n  messagingSenderId: \"----\"\n};\n\nfirebase.initializeApp(config);\n\nexport default firebase;\n```\n\n## Final\n\n```javascript\n//App.js\nimport React, { Component } from \"react\";\nimport firebase from \"./firebaseConfig\"; // Careful to not import from \"firebase\"\nimport withFirebaseAuth from \"react-auth-firebase\";\n\nclass App extends Component {\n  render() {\n    // user object will have signed in user details if auth state changed\n    // user will be null if not logged in\n\n    // Use only the required methods.\n    // If a property called 'google' not given in authConfig, signInWithGoogle and googleAccessToken will not be available for use.\n    // Similar for others.\n\n    const {\n      signInWithEmail,\n      signUpWithEmail,\n      signInWithGoogle,\n      signInWithFacebook,\n      signInWithGithub,\n      signInWithTwitter,\n      googleAccessToken,\n      facebookAccessToken,\n      githubAccessToken,\n      twitterAccessToken,\n      twitterSecret,\n      signOut,\n      user,\n      error\n    } = this.props;\n\n    const { email, password } = this.state;\n\n    return (\n      \u003cdiv\u003e\n        // For Sign In\n        \u003cform onSubmit={e =\u003e e.preventDefault()}\u003e\n          ...form input to take email and password for sign in\n          \u003cbutton\n            type=\"submit\"\n            onClick={() =\u003e signInWithEmail(email, password)}\n          \u003e\n            SignIn\n          \u003c/button\u003e\n        \u003c/form\u003e\n        // For Sign Up\n        \u003cform onSubmit={e =\u003e e.preventDefault()}\u003e\n          ...form input to take email and password for sign up\n          \u003cbutton\n            type=\"submit\"\n            onClick={() =\u003e signUpWithEmail(email, password)}\n          \u003e\n            SignUp\n          \u003c/button\u003e\n        \u003c/form\u003e\n        \u003cbutton onClick={signInWithGoogle}\u003eSignin with Google\u003c/button\u003e\n        \u003cbutton onClick={signInWithFacebook}\u003eSignin with Facebook\u003c/button\u003e\n        \u003cbutton onClick={signInWithGithub}\u003eSignin with Github\u003c/button\u003e\n        \u003cbutton onClick={signInWithTwitter}\u003eSignin with Twitter\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// Important\n\n// See authConfig api for all available options\n// Add only the required auth types.\n// Only their related props will be added\n// For ex: signInWithGoogle will be added only when there is google object in authConfig\n// At least an empty object required to enable that method\n\nconst authConfig = {\n  email: {\n    verifyOnSignup: false, // Sends verification email to user upon sign up\n    saveUserInDatabase: true // Saves user in database at /users ref\n  },\n  google: {\n    // redirect: true, // Opens a pop up by default\n    returnAccessToken: true, // Returns an access token as googleAccessToken prop\n    saveUserInDatabase: true // Saves user in database at /users ref\n  },\n  facebook: {\n    // redirect: true, // Opens a pop up by default\n    returnAccessToken: true, // Returns an access token as googleAccessToken prop\n    saveUserInDatabase: true // Saves user in database at /users ref\n  },\n  github: {\n    // redirect: true,\n    returnAccessToken: true,\n    saveUserInDatabase: true\n  },\n  twitter: {\n    // redirect: true,\n    returnAccessToken: true,\n    returnSecret: true,\n    saveUserInDatabase: true\n  }\n};\n\nexport default withFirebaseAuth(App, firebase, authConfig);\n```\n\n# API\n\n## withFirebaseAuth(Component, firebase, authConfig)\n\n* returns\n\n  * A component with methods for authentication\n\n* arguments\n  * component - A react component\n  * firebase - A firebase instance which is already initialized\n  * authConfig - A config object with options for authentication. See [authConfig](#authconfig) for available options\n\n## authConfig\n\n* **email**\n\n  * verifyOnSignup: Boolean\n\n    * Should send verification email upon sign up ?\n    * default: _false_\n\n  * saveUserInDatabase: Boolean\n    * Should user object be saved in firebase database at **/user** ref ?\n    * Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved\n    * default: _false_\n\n- **google**\n\n  **NOTE:** Make sure your domain is authorized for oAuth at Firebase console -\u003e Authentication -\u003e Sign-in method -\u003e Authorized Domains\n\n  * scopes: Array\n    * **Optional** scopes to add to google provider\n    * See [google scopes](https://developers.google.com/identity/protocols/googlescopes) for reference.\n    * Pass only the scope name and not entire scope url.\n      * Example: [\"adsense\", \"analytics\"]\n\n  - customParams: Object\n\n    * **Optional** custom oAuth parameters to send with oAuth request\n    * See [google custom params](https://firebase.google.com/docs/reference/js/firebase.auth.GoogleAuthProvider#setCustomParameters) for reference\n\n  - redirect: Boolean\n\n    * Should use redirect instead of pop-up to sign in ?\n    * Will replace popup with redirect if _true_\n    * default: _false_\n\n  - returnAccessToken: Boolean\n\n    * Should return a google access token as **_googleAccessToken_** prop ?\n    * default: _false_\n\n  - saveUserInDatabase: Boolean\n\n    * Should user object be saved in firebase database at **/user** ref ?\n    * Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved\n    * default: _false_\n\n- **facebook**\n\n  **NOTE:** Set up facebook application at [Facebook Developers](https://developers.facebook.com) with _Facebook Login_ product enabled. Add _App ID_ and _App Secret_ from Facebook App in Firebase console. Copy the Redirect URI shown in Firebase console to Facebook App -\u003e Products -\u003e Facebook Login -\u003e Valid OAuth redirect URIs\n\n  * scopes: Array\n    * **Optional** scopes to add to facebook provider\n    * See [facebook permissions](https://developers.facebook.com/docs/facebook-login/permissions) for reference.\n    * Pass only the scope name and not entire scope url.\n      * Example: [\"email\", \"public_profile\"]\n\n  - customParams: Object\n\n    * **Optional** custom oAuth parameters to send with oAuth request\n    * See [facebook custom params](https://firebase.google.com/docs/reference/js/firebase.auth.FacebookAuthProvider#setCustomParameters) for reference\n\n  - redirect: Boolean\n\n    * Should use redirect instead of pop-up to sign in ?\n    * Will replace popup with redirect if _true_\n    * default: _false_\n\n  - returnAccessToken: Boolean\n\n    * Should return a facebook access token as **_facebookAccessToken_** prop ?\n    * default: _false_\n\n  - saveUserInDatabase: Boolean\n\n    * Should user object be saved in firebase database at **/user** ref ?\n    * Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved\n    * default: _false_\n\n- **github**\n\n  **NOTE:** Set up github application at [Github Applications](https://github.com/settings/applications/new) with callback URL shown at Firebase Console. Add the generated _Client ID_ and _Client Secret_ to Firebase Console.\n\n  * scopes: Array\n    * **Optional** scopes to add to github provider\n    * See [github authorization options](https://developer.github.com/apps/building-oauth-apps/authorization-options-for-oauth-apps/) for reference.\n    * Pass only the scope name and not entire scope url.\n      * Example: [\"repo\", \"user\"]\n\n  - customParams: Object\n\n    * **Optional** custom oAuth parameters to send with oAuth request\n    * See [github custom params](https://firebase.google.com/docs/reference/js/firebase.auth.GithubAuthProvider?authuser=0#setCustomParameters) for reference\n\n  - redirect: Boolean\n\n    * Should use redirect instead of pop-up to sign in ?\n    * Will replace popup with redirect if _true_\n    * default: _false_\n\n  - returnAccessToken: Boolean\n\n    * Should return a github access token as **_githubAccessToken_** prop ?\n    * default: _false_\n\n  - saveUserInDatabase: Boolean\n\n    * Should user object be saved in firebase database at **/user** ref ?\n    * Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved\n    * default: _false_\n\n- **twitter**\n\n  **NOTE:** Set up twitter application at [Twiiter Applications](https://apps.twitter.com/) with callback URL shown at Firebase Console. Add the generated _API Key_ and _API Secret_ to Firebase Console.\n\n  * customParams: Object\n\n    * **Optional** custom oAuth parameters to send with oAuth request\n    * See [twitter custom params](https://firebase.google.com/docs/reference/js/firebase.auth.TwitterAuthProvider?authuser=0#setCustomParameters) for reference\n\n  * redirect: Boolean\n\n    * Should use redirect instead of pop-up to sign in ?\n    * Will replace popup with redirect if _true_\n    * default: _false_\n\n  * returnAccessToken: Boolean\n\n    * Should return a github access token as **_githubAccessToken_** prop ?\n    * default: _false_\n    *\n\n  * returnSecret: Boolean\n\n    * Should return a twitter secret token as **_twitterSecret_** prop ?\n    * default: _false_\n\n  * saveUserInDatabase: Boolean\n    \u003e **NOTE**: Twitter by default doesn't give back any email, so it will be saved as null. Check this [Stackoverflow Question](https://stackoverflow.com/questions/22627083/can-we-get-email-id-from-twitter-oauth-api) for further information on getting email.\n    * Should user object be saved in firebase database at **/user** ref ?\n    * Only uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous will be saved\n    * default: _false_\n\n## props\n\n* signInWithEmail: Function\n\n  * description: method to sign in using existing credentials\n  * arguments\n    * email: string\n    * password: string\n\n* signUpWithEmail: Function\n\n  * description: method to sign up new user\n  * arguments\n    * email: string\n    * password: string\n\n* signInWithGoogle: Function\n\n  * description: method to sign in using Google oAuth\n  * arguments: none\n\n* signInWithFacebook: Function\n\n  * description: method to sign in using Facebook oAuth\n  * arguments: none\n\n* signInWithGithub: Function\n\n  * description: method to sign in using Github oAuth\n  * arguments: none\n\n* signInWithTwitter: Function\n\n  * description: method to sign in using Twitter oAuth\n  * arguments: none\n\n* googleAccessToken: String\n\n  * description: Gives a google access token to access Google APIs\n  * will be _null_ if returnAccessToken is false in authConfig\n\n* facebookAccessToken: String\n\n  * description: Gives a facebook access token to access Facebook APIs\n  * will be _null_ if returnAccessToken is false in authConfig\n\n* githubAccessToken: String\n\n  * description: Gives a github access token to access Github APIs\n  * will be _null_ if returnAccessToken is false in authConfig\n\n* twitterAccessToken: String\n\n  * description: Gives a twitter access token to access Twitter APIs\n  * will be _null_ if returnAccessToken is false in authConfig\n\n* twitterSecret: String\n  * description: Gives a twitter secret to access Twitter APIs\n  * will be _null_ if returnSecret is false in authConfig\n\n- signOut: Function\n\n  * description: method to sign out user. _user_ object will become null\n  * arguments: none\n\n- user: Object\n\n  * Object with User details after sign in.\n  * Check [documentation](https://firebase.google.com/docs/reference/js/firebase.User) for available properties.\n\n* error: Object\n\n  * description: Error object from firebase will be returned as is\n  * Note: some custom errors will be given in console as well\n  * Will have better control in next versions\n\n## Roadmap\n\n* **_FirebaseAuth_** render prop\n* Similar package for React Native\n\n# License\n\n* [MIT](/LICENSE) - [Sai Sandeep Vaddi](https://twitter.com/saisandeepvaddi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaisandeepvaddi%2Freact-auth-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaisandeepvaddi%2Freact-auth-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaisandeepvaddi%2Freact-auth-firebase/lists"}