{"id":24518241,"url":"https://github.com/flasd/redux-fire-auth","last_synced_at":"2025-03-15T11:12:09.758Z","repository":{"id":57350739,"uuid":"114131504","full_name":"flasd/redux-fire-auth","owner":"flasd","description":"Helper to keep the redux state in sync with the firebase auth session.","archived":false,"fork":false,"pushed_at":"2018-06-05T19:43:52.000Z","size":356,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-26T11:21:02.912Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flasd.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":"2017-12-13T14:34:38.000Z","updated_at":"2018-09-25T02:33:46.000Z","dependencies_parsed_at":"2022-09-15T02:02:03.225Z","dependency_job_id":null,"html_url":"https://github.com/flasd/redux-fire-auth","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fredux-fire-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fredux-fire-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fredux-fire-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fredux-fire-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flasd","download_url":"https://codeload.github.com/flasd/redux-fire-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719398,"owners_count":20336607,"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-01-22T01:41:15.785Z","updated_at":"2025-03-15T11:12:09.739Z","avatar_url":"https://github.com/flasd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-fire-auth\nHelper to keep the Redux State in sync with the Firebase Auth State.\n\n[![Build Status](https://travis-ci.org/flasd/react-classlist-helper.svg?branch=master)](https://travis-ci.org/flasd/redux-fire-auth) [![Coverage Status](https://coveralls.io/repos/github/flasd/redux-fire-auth/badge.svg?branch=master)](https://coveralls.io/github/flasd/redux-fire-auth?branch=master) [![npm version](https://badge.fury.io/js/redux-fire-auth.svg)](https://www.npmjs.com/package/redux-fire-auth)\n\n\n### Why?\nWhen you start playing with Firebase auth, you will soon realize that when the page refreshes, you loose authentication state until the SDK kicks back in.\n\nWouldn't it be nice if you could tell if the Firebase SDK have finished initializing and if there's a logged in user? Well :wink:\n\n\n### Setup\n\nFirst, obviously,\n```\n$ npm install redux-fire-auth firebase redux --save\n```\n\nThen just initialize it:\n\n```javascript\nimport firebase from 'firebase';\nimport { applyMiddleware, createStore, combineReducers } from 'redux';\n\n// This is us!\nimport createAuthEnhancer, { authReducer } from 'redux-fire-auth';\n\nimport * as yourReducers from './your-reducers.js';\n\n// ...\n\n// Initialize your firebase app.\nconst app = firebase.initializeApp({/* Firebase Configs */});\nconst auth = app.auth();\n\n// Combine your reducers with ours \\o/\nconst reducer = combineReducers({\n    auth: authReducer,\n    ...yourReducers,\n});\n\n// Build the middleware.\nconst authEnhancer = createAuthEnhancer(auth);\n\n// Create your store.\nconst store = createStore(reducer, applyMiddleware(authEnhancer));\n\n// Yup. That easy.\n```\nThis enhancer will bind to Firebase's `onAuthStateChanged` with action creators. Whenever there's an authStateChanged event, the redux state will sync automatically.\n\n### API exports\nYou can listen to actions inside your own reducers by importing the action types `import { AUTH_STATE_CHANGED, DONE_LOADING } from 'redux-fire-auth'`. Our actions are [FSA](https://github.com/redux-utilities/flux-standard-action) compliant.\n\n\n**Note:** If you'd want to use something other than `auth` to bind the reducer to, you need to pass the key you want to use to `createAuthEnhancer(authInstance, key)` as the second argument.\n\n### Usage\n\nWhen you call `store.getState().auth` you'll get an object with three properties:\n##### isLoading: bool\nTrue while the Firebase SDK is initializing, then always false.\n\n##### hasAuth: bool\nFalse while the Firebase SDK is initializing, then if the SDK recovers the session it's true, else it stays false.\n\n##### user: Firebase.User | null\nnull while the Firebase SDK is initializing, then if the SDK recovers the session it's the User.toJSON() object, without the User methods provided by firebase, else it stays null.\n\n### Example\nI'm assuming you know how to work with React and React-Redux for this example :grin:\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\n\nexport function App({ isLoading, hasAuth, user }) {\n\tif (isLoading) {\n    \treturn (\n        \t\u003cdiv\u003e Loading... \u003c/div\u003e\n        );\n    }\n    \n    if (hasAuth) {\n    \treturn (\n        \t\u003cdiv\u003e Hello { user.displayName } \u003c/div\u003e\n        );\n    }\n    \n    return (\n    \t\u003cdiv\u003e Please sign in. \u003c/div\u003e\n    );\n}\n\nexport default connect(({ auth }) =\u003e auth)(App);\n```\n\nIf you've liked this, consider giving it a :star:!\n\n### Licence\nMIT all the way. Let's create awesome stuff! :rocket:","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Fredux-fire-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflasd%2Fredux-fire-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Fredux-fire-auth/lists"}