redux-fire-auth
Helper to keep the Redux State in sync with the Firebase Auth State.
Why?
When 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.
Wouldn't it be nice if you could tell if the Firebase SDK have finished initializing and if there's a logged in user? Well 😉
Setup
First, obviously,
$ npm install redux-fire-auth firebase redux --save
Then just initialize it:
;; // This is us!; ; // ... // Initialize your firebase app.const app = firebase;const auth = app; // Combine your reducers with ours \o/const reducer = ; // Build the middleware.const authEnhancer = ; // Create your store.const store = ; // Yup. That easy.
This enhancer will bind to Firebase's onAuthStateChanged
with action creators. Whenever there's an authStateChanged event, the redux state will sync automatically.
API exports
You 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 compliant.
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.
Usage
When you call store.getState().auth
you'll get an object with three properties:
isLoading: bool
True while the Firebase SDK is initializing, then always false.
hasAuth: bool
False while the Firebase SDK is initializing, then if the SDK recovers the session it's true, else it stays false.
user: Firebase.User | null
null 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.
Example
I'm assuming you know how to work with React and React-Redux for this example 😁
;; { if isLoading return <div> Loading... </div> ; if hasAuth return <div> Hello userdisplayName </div> ; return <div> Please sign in </div> ;} authApp;
If you've liked this, consider giving it a ⭐️!
Licence
MIT all the way. Let's create awesome stuff! 🚀