{"id":13403780,"url":"https://github.com/firebase/firebaseui-web-react","last_synced_at":"2025-05-13T21:04:32.479Z","repository":{"id":40334850,"uuid":"108690965","full_name":"firebase/firebaseui-web-react","owner":"firebase","description":"React Wrapper for firebaseUI Web","archived":false,"fork":false,"pushed_at":"2025-02-13T20:22:38.000Z","size":4816,"stargazers_count":1282,"open_issues_count":85,"forks_count":257,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-04-28T12:07:39.008Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firebase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2017-10-28T23:16:38.000Z","updated_at":"2025-04-25T14:35:45.000Z","dependencies_parsed_at":"2024-01-05T20:58:00.206Z","dependency_job_id":"bc02180e-7cb3-49f8-a3f1-be39e353ff93","html_url":"https://github.com/firebase/firebaseui-web-react","commit_stats":{"total_commits":129,"total_committers":19,"mean_commits":"6.7894736842105265","dds":0.6589147286821706,"last_synced_commit":"49f80b5d1548e4d4a2575e0e7f998e7148440405"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firebase","download_url":"https://codeload.github.com/firebase/firebaseui-web-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311330,"owners_count":21569009,"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":"2024-07-30T19:01:34.501Z","updated_at":"2025-04-28T12:07:46.964Z","avatar_url":"https://github.com/firebase.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/react-firebaseui.svg)](https://badge.fury.io/js/react-firebaseui)\n[![GitHub license](https://img.shields.io/github/license/firebase/firebaseui-web-react.svg)](https://github.com/Firebase/firebaseui-web-react/blob/master/LICENSE)\n\n# FirebaseUI React Components\n\nFirebaseUI React Components provides React Wrappers on top of the [Firebase UI Web library](https://github.com/firebase/firebaseui-web/) and notably Firebase UI Auth.\n\nFirebaseUI Auth provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, and Identity Provider Sign In using Google, Facebook and others. It is built on top of Firebase Auth.\n\n\n## Installation and Usage\n\n\u003e For an example on how to use the FirebaseAuth react component have a look at the [example](./example) folder.\n\nInstall the npm package in your React app:\n\n```bash\nnpm install --save react-firebaseui\n```\n\nYou also need the `firebase` package installed which is a peer dependency:\n\n```bash\nnpm install --save firebase\n```\n\nIn your app:\n  1. Import the `FirebaseAuth` or the `StyledFirebaseAuth` component from `react-firebaseui` and import `firebase`.\n  2. Configure Firebase as described in [the Firebase Docs](https://firebase.google.com/docs/web/setup).\n  3. Write a Firebase UI configuration as described in [firebase/firebaseui-web](https://github.com/firebase/firebaseui-web#configuration).\n  4. Use the `FirebaseAuth` component in your template passing it the **Firebase UI configuration** and a **Firebase Auth instance**.\n\n\n### `FirebaseAuth` vs. `StyledFirebaseAuth`\n\nThere are two similar components that allow you to add FirebaseUI auth to your application: `FirebaseAuth` and `StyledFirebaseAuth`.\n - `FirebaseAuth` has a reference to the FirebaseUI CSS file (it `requires` the CSS).\n - `StyledFirebaseAuth` is bundled with the CSS directly.\n\nFor simplicity you should use `StyledFirebaseAuth` and for potential better performances and build sizes you can use `FirebaseAuth`. `FirebaseAuth` is meant to be used with a CSS/style loader as part of your webpack built configuration. See the [Packing your app](#packing-your-app) section.\n\n\n### Using `StyledFirebaseAuth` with a redirect\n\nBelow is an example on how to use `FirebaseAuth` with a redirect upon sign-in:\n\n```js\n// Import FirebaseAuth and firebase.\nimport React from 'react';\nimport StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';\nimport firebase from 'firebase/compat/app';\nimport 'firebase/compat/auth';\n\n// Configure Firebase.\nconst config = {\n  apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',\n  authDomain: 'myproject-1234.firebaseapp.com',\n  // ...\n};\nfirebase.initializeApp(config);\n\n// Configure FirebaseUI.\nconst uiConfig = {\n  // Popup signin flow rather than redirect flow.\n  signInFlow: 'popup',\n  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.\n  signInSuccessUrl: '/signedIn',\n  // We will display Google and Facebook as auth providers.\n  signInOptions: [\n    firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n    firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n  ],\n};\n\nfunction SignInScreen() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy App\u003c/h1\u003e\n      \u003cp\u003ePlease sign-in:\u003c/p\u003e\n      \u003cStyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default SignInScreen\n```\n\n### Using `StyledFirebaseAuth` with local state.\n\nBelow is an example on how to use `StyledFirebaseAuth` with a state change upon sign-in:\n\n```js\n// Import FirebaseAuth and firebase.\nimport React, { useEffect, useState } from 'react';\nimport StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';\nimport firebase from 'firebase/compat/app';\nimport 'firebase/compat/auth';\n\n// Configure Firebase.\nconst config = {\n  apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',\n  authDomain: 'myproject-1234.firebaseapp.com',\n  // ...\n};\nfirebase.initializeApp(config);\n\n// Configure FirebaseUI.\nconst uiConfig = {\n  // Popup signin flow rather than redirect flow.\n  signInFlow: 'popup',\n  // We will display Google and Facebook as auth providers.\n  signInOptions: [\n    firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n    firebase.auth.FacebookAuthProvider.PROVIDER_ID\n  ],\n  callbacks: {\n    // Avoid redirects after sign-in.\n    signInSuccessWithAuthResult: () =\u003e false,\n  },\n};\n\nfunction SignInScreen() {\n  const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.\n\n  // Listen to the Firebase Auth state and set the local state.\n  useEffect(() =\u003e {\n    const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user =\u003e {\n      setIsSignedIn(!!user);\n    });\n    return () =\u003e unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.\n  }, []);\n\n  if (!isSignedIn) {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eMy App\u003c/h1\u003e\n        \u003cp\u003ePlease sign-in:\u003c/p\u003e\n        \u003cStyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /\u003e\n      \u003c/div\u003e\n    );\n  }\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy App\u003c/h1\u003e\n      \u003cp\u003eWelcome {firebase.auth().currentUser.displayName}! You are now signed-in!\u003c/p\u003e\n      \u003ca onClick={() =\u003e firebase.auth().signOut()}\u003eSign-out\u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default SignInScreen;\n```\n\n### Accessing the FirebaseUI instance\n\nTo allow for further configuration you can access the firebaseUI instance before it is started.\nTo do this you can pass a `uiCallback` callback function that wil be passed the Firebase UI instance. For example here is how to enable the `disableAutoSignIn()` option:\n\n```js\n// ...\n\nreturn (\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    \u003cp\u003ePlease sign-in:\u003c/p\u003e\n    \u003cStyledFirebaseAuth uiCallback={ui =\u003e ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/\u003e\n  \u003c/div\u003e\n);\n```\n\n\n## Packing your app\n\nIf you are using the `StyledFirebaseAuth` component there should not be special configuration needed to package your app since the CSS is already included within the component. if you would like to extract the CSS you should use the `FirebaseAuth` component instead.\n\nThe `FirebaseAuth` needs a global CSS to get proper styling. The CSS is already imported within `FirebaseAuth`.\nIf you are using webpack you'll need to add [CSS loaders](https://github.com/webpack-contrib/css-loader):\n\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css/,\n        use: [ 'style-loader', 'css-loader' ]\n      }\n    ]\n  }\n}\n```\n\nPS: make sure your rule does not exclude `/node_modules/` as this is where the library, and therefore, the CSS is located.\n\n### With ExtractTextPlugin\n\nIf you are using [`ExtractTextPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract a CSS file from the required CSS files you would typically use:\n\n```js\n{\n  plugins: [new ExtractTextPlugin('./bundle.css')],\n  module: {\n    rules: [\n      {\n        test: /\\.css/,\n        loader: ExtractTextPlugin.extract(\n          {\n            fallback: 'style-loader',\n            use: ['css-loader']\n          })\n      }\n    ]\n  }\n}\n```\n\nPS: make sure your rule does not exclude `/node_modules/` as this is where the library, and therefore, the CSS is located.\n\n### With ExtractTextPlugin and CSS modules\n\nIf you are using CSS modules in your app you need to handle the CSS files in `/node_modules/` in a separate loader so that they are imported as global CSS files and not modules. Your setup could look like:\n\n```js\n{\n  plugins: [new ExtractTextPlugin('./bundle.css')],\n  module: {\n    rules: [\n      // CSS loaders for CSS modules in your project. We exclude CSS files in ./node_modules\n      {\n        test: /\\.css$/,\n        exclude: [/\\.global\\./, /node_modules/],\n        loader: ExtractTextPlugin.extract(\n          {\n            fallback: 'style-loader',\n            use:[\n              {\n                loader: 'css-loader',\n                options: {\n                  importLoaders: 1,\n                  modules: true,\n                  autoprefixer: true,\n                  minimize: true,\n                  localIdentName: '[name]__[local]___[hash:base64:5]'\n                }\n              }\n            ]\n          })\n      },\n\n      // CSS loaders for global CSS files which includes files in ./node_modules\n      {\n        test: /\\.css/,\n        include: [/\\.global\\./, /node_modules/],\n        loader: ExtractTextPlugin.extract(\n          {\n            fallback: 'style-loader',\n            use: ['css-loader']\n          })\n      }\n    ]\n  }\n}\n```\n\n## Styling\n\nTo change the styling of the `FirebaseAuth` or the `StyledFirebaseAuth` widget you can override some of its CSS. To do this, import a CSS that will be included in your packed application. For instance create a `firebaseui-styling.global.css` file and import it in your app:\n\n```js\nimport './firebaseui-styling.global.css'; // Import globally. Not with CSS modules.\n```\n\n\u003e Note: If you are using the [With ExtractTextPlugin and CSS modules](#with-extracttextplugin-and-css-modules) Webpack build rule above, the `.global.css` suffix will make sure the CSS file is imported globally and not ran through modules support.\n\nIf you would like to see an example of styling, have a look at the [example app](./example).\n\nAlternatively you can include the styling in a `\u003cstyle\u003e` tag in your application's markup.\n\n\n## Server-Side Rendering (SSR)\n\nFirebaseUI React cannot be rendered server-side because the underlying, wrapped library ([FirebaseUI](https://npmjs.com/package/firebaseui)) does not work server-side.\n\nYou can still import and include this library in an app that uses SSR: there should be no errors but no elements will be rendered.\n\n\n## Contributing\n\nWe'd love that you contribute to the project. Before doing so please read our [Contributor guide](CONTRIBUTING.md).\n\n\n## License\n\n© Google, 2011. Licensed under an [Apache-2](LICENSE) license.\n","funding_links":[],"categories":["JavaScript","웹"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebase%2Ffirebaseui-web-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirebase%2Ffirebaseui-web-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebase%2Ffirebaseui-web-react/lists"}