{"id":16427065,"url":"https://github.com/donavon/use-firebase-auth","last_synced_at":"2025-03-16T17:34:39.746Z","repository":{"id":34207008,"uuid":"171155456","full_name":"donavon/use-firebase-auth","owner":"donavon","description":"A custom React Hook that provides a declarative interface for Firebase Auth.","archived":false,"fork":false,"pushed_at":"2023-03-03T10:11:33.000Z","size":1351,"stargazers_count":79,"open_issues_count":13,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-16T04:14:16.524Z","etag":null,"topics":["firebase","firebase-auth","hooks","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/donavon.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-17T18:16:12.000Z","updated_at":"2025-03-02T09:10:45.000Z","dependencies_parsed_at":"2024-10-27T11:05:14.168Z","dependency_job_id":"f299620b-38b4-42b3-93a7-8bce00eb6e4f","html_url":"https://github.com/donavon/use-firebase-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-firebase-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-firebase-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-firebase-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-firebase-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/use-firebase-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243908699,"owners_count":20367457,"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":["firebase","firebase-auth","hooks","react","reactjs"],"created_at":"2024-10-11T08:11:23.815Z","updated_at":"2025-03-16T17:34:39.353Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @use-firebase/auth\n\nA custom React Hook that provides a declarative interface for Firebase Auth.\n\n[![npm version](https://badge.fury.io/js/%40use-firebase%2Fauth.svg)](https://badge.fury.io/js/%40use-firebase%2Fauth)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\u003cdiv\u003e\n\u003cimg \n  src=\"https://user-images.githubusercontent.com/887639/54039469-031ff480-4191-11e9-8a9e-8ee846ef46f6.gif\"\n  alt=\"animated login with google\"\n  border=\"1\"\n  width=\"350\"\n  height=\"355\"\n\u003e\n\u003c/div\u003e\n\n## Installation\n\n```bash\n$ npm i @use-firebase/auth\n```\n\nor\n\n```bash\n$ yarn add @use-firebase/auth\n```\n\n## Usage\n\nThe Auth package requires that you install App as a dependency and that you wrap your App in both\n`\u003cFirebaseAppProvider\u003e` and `\u003cFirebaseAuthProvider\u003e` as shown here.\n\n```jsx\nimport React from 'react';\nimport { FirebaseAppProvider } from '@use-firebase/app';\nimport { FirebaseAuthProvider } from '@use-firebase/auth';\n\nimport App from './App';\nimport config from './data/firebaseConfig';\n\nconst FirebaseApp = () =\u003e (\n  \u003cFirebaseAppProvider config={config}\u003e\n    \u003cFirebaseAuthProvider\u003e\n      \u003cApp /\u003e\n    \u003c/FirebaseAuthProvider\u003e\n  \u003c/FirebaseAppProvider\u003e\n);\n\nexport default FirebaseApp;\n```\n\nThis provides the global context that `useFirebaseAuth` needs. Now you can use `useFirebaseAuth`\nanywhere in your App.\n\nInitially, you will probably want to display either a Sign In screen if not signed in.\nYou can detect if you are signed in like this.\n\n```jsx\nimport { useFirebaseAuth } from '@use-firebase/auth';\n\nconst App = () =\u003e {\n  const { isSignedIn } = useFirebaseAuth();\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      {isSignedIn ? \u003cAuthenticatedApp /\u003e : \u003cNonAuthenticatedApp /\u003e}\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nHere we either render the `AuthenticatedApp` or the `NonAuthenticatedApp` component.\nThe `NonAuthenticatedApp` would be where we render the sign in page.\n\nHere's an example sign in page with a button that allows the user\nto sign in with their Google credentials.\n\n```jsx\nimport { useFirebaseAuth, AuthProvider } from '@use-firebase/auth';\n\nconst NonAuthenticatedApp = () =\u003e {\n  const { signIn, signInError, createAuthProvider } = useFirebaseAuth();\n\n  const onSignIn = authProvider =\u003e {\n    const provider = createAuthProvider(authProvider);\n    signIn(provider);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003ePlease Sign In\u003c/h1\u003e\n      \u003cp\u003e\n        \u003cbutton onClick={() =\u003e onSignIn(AuthProvider.GOOGLE)}\u003e\n          Sign In with Google\n        \u003c/button\u003e\n      \u003c/p\u003e\n      {signInError \u0026\u0026 \u003cdiv className=\"error-message\"\u003e\n        \u003ch3\u003e{signInError.code}\u003c/h3\u003e\n        {signInError.message}\n      \u003c/div\u003e}\n    \u003c/div\u003e\n  );\n};\n```\n\nIt redirects to the authentication page of the provider—Google in this case.\nAfter the user is authenticated, you will be redirected back to your app where\n`isSignedIn` will be `true` and the `AuthenticatedApp` component will be rendered.\nIf there was an error for any reason, `signInError` will be non-null.\n\nIf you would rather use a popup, instead of a redirect, replace `onSignIn` with this.\n\n```js\nconst onSignIn = authProvider =\u003e {\n  const provider = createAuthProvider(authProvider);\n  signIn(provider, { method: 'signInWithPopup' });\n};\n```\n\nOne the user has been sucessfully authenticated, you will want to display an authenticated\nexperience, Here is a sample `AuthenticatedApp` component that displayed the user's name\nand image. It also renders a sign out button.\n\n```jsx\nimport { useFirebaseAuth } from '@use-firebase/auth';\n\nconst AuthenticatedApp = () =\u003e {\n  const { user, signOut } = useFirebaseAuth();\n  const { displayName, photoURL } = user;\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eWelcome {displayName}\u003c/h1\u003e\n      \u003cdiv\u003e\n        \u003cimg className=\"avatar\" alt={displayName} src={photoURL} /\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\n        \u003cbutton onClick={signOut}\u003eSign Out\u003c/button\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nYou will note that it destructures two things from the call to `useFirebaseAuth`:\n`user` (a user object) and `signOut` (a function to sign out).\n\n## API\n\nAn import from `@use-firebase/auth` provides\n`FirebaseAuthProvider`, `useFirebaseAuth`, and `AuthProvider`.\n\n### FirebaseAuthProvider\n\nYou must wrap your `App` in `FirebaseAuthProvider` like this.\n\n```jsx\n\u003cFirebaseAuthProvider\u003e\n  \u003cApp /\u003e\n\u003c/FirebaseAuthProvider\u003e\n```\n\nIt provides context for `useFirebaseAuth`.\n\n### useFirebaseAuth\n\n`useFirebaseAuth` is a custom hook that returns a session object every time that the authentication\nstate changes.\n\nA session object has the following properties.\n\n| Parameter            | Description                                                                  |\n| :------------------- | :--------------------------------------------------------------------------- |\n| `loading`            | Set to `true` if the rest of the session properties are indeterminate.       |\n| `isSignedIn`         | Set to `true` if the user is signed in.                                      |\n| `user`               | A `user` object if signed in, otherwise an empty object. See below.                                                    |\n| `signInError`        | The error from the previous `signIn` attempt or `null` if it was a success.  |\n| `createAuthProvider` | A function that returns a `provider` instance given an enum `AuthProvider` value. |\n| `signIn`             | A function that will take the user on the sign in journey. If successful, `isSignedIn` will be to `false`. See below for details.        |\n| `signOut`            | A function that will sign the user out. If successful, `isSignedIn` will be to `false`.      |\n\n#### user\n\n`user` is a user object with the following properties.\n\n| Parameter       | Description                                                                                                    |\n| :-------------- | :------------------------------------------------------------------------------------------------------------- |\n| `uid`           | A unique identifier for the user.                                                                              |\n| `displayName`   | The user's full name.                                                                                          |\n| `photoURL`      | A URL to the user's image. May not be included for all providers.                                              |\n| `email`         | The user's email address. May not be included for all providers.                                               |\n| `emailVerified` | `true` if the email is verified.                                                                               |\n| `isAnonymous`   | `true` if the authenticaion method was `ANONYMOUS`. |\n| `phoneNumber`   | The user's phone number. May not be included for all providers.                                                |\n\n#### createAuthProvider\n\nCall `createAuthProvider` with one of the `AuthProvider` enum values.\nIt returns a `provider` instance that you can pass to `signIn`\nSee the [Firebase documentation](https://firebase.google.com/docs/reference/js/firebase.auth.AuthProvider)\nfor more information.\n\n#### signIn\n\nCall `signIn` with an `provider` instance and an optional `options` object.\n\nThe `options` object has a single key of `method`. `method` is a string with either\n`signInWithRedirect` or `signInWithPopup`. The default is `signInWithRedirect`.\n\n`signIn` returns a promise that will resolve upon a successful sign in (if using a popup)\nor reject if a sign in could not be performed.\n\nFor example, here is a simple `SignIn` component that allows the user to\nsign in using their Google credentials.\n\n```js\nimport { useFirebaseAuth, AuthProvider } from '@use-firebase/auth';\n\nconst SignIn = () =\u003e {\n  const { signIn, createAuthProvider } = useFirebaseAuth();\n  const googleProvider = createAuthProvider(AuthProvider.GOOGLE);\n\n  return (\n    \u003cbutton onClick={() =\u003e signIn(googleProvider)}\u003eSign In with Google\u003c/button\u003e\n  );\n};\n```\n\n#### signOut\n\nCall `signOut` to sign the user out.\n\nIt returns a promise that will resolve upon a successful sign out\nor reject if a sign out could not be performed.\n\n### AuthProvider\n\n`AuthProvider` is an enum with the following values.\n\n| Parameter   | Description                   |\n| :---------- | :---------------------------- |\n| `ANONYMOUS` | No credentials required.      |\n| `GITHUB`    | Authenticate against GitHub   |\n| `GOOGLE`    | Authenticate against Google.  |\n| `FACEBOOK`  | Authenticate against Facebook |\n| `TWITTER`   | Authenticate against Twitter  |\n\n## Live demo\n\nYou can run the sign in demo on CodeSandbox where you can\nsee all of the code above. Fork it, change the `config` data\nto point to your Firebase project, and make your own app.\n\n[![Edit simple use-firebase/auth demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/jjjqrm6q85?fontsize=14)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fuse-firebase-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Fuse-firebase-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fuse-firebase-auth/lists"}