Firepack
Authentication wrapper for Firebase Applications built with React, React router and Redux
DISCLAIMER
Firepack is in its early phase of development and can be a subject of breaking changes in near future.
What is Firepack
Firepack is simple Authentication wrapper for Firebase Applications
built with React, React router and Redux.
It provides customizable Sign up, Sign in, Reset password forms and social media authentication.
All authentication providers can be easily managed by passing config object (firebaseAuthProviders) to Firepack.
Application Layout with Firepack
This image should give you a visual interpretation on how Firepack wraps and renders your application.
WorkspaceContainer
and your Application RootContainer
are accessible only if user is authenticated.
How can I use Firepack
Some simple configuration is needed for Firepack to run. We will break to routes
, reducer
and index
files.
router.js
First, lets register your application routes
and main components
(pages):
// Import 'registerRoutes' helper ; // Import your container(s) and/or page(s) ; ; // Your application index route (such as '/dashboard' or '/welcome') const indexPath = '/welcome'; // Register routes as you would for React router // Actually, it is the same as in React router // Array passed to 'registerRoutes' will be connected with Firepack React router configuration path: '/' component: RootContainer indexRoute: component: WelcomePage childRoutes: path: '/welcome' component: WelcomePage // add more child routes here indexPath;
For more documentation on React router follow this link.
reducer.js
After that, you should combine your application reducers to one root reducer. Reducers are responsible for updating your application state and only one (root) reducer should be passed to Firepack.
// Import combineReducers ; // Import your app reducer(s) ; ; // Use combineReducers to combine multiple reducers // You should only pass one reducer to Firepack someReducer someOtherReducer // add more reducers here ;
For more docs on Redux and reducers follow this link.
index.js
Now, you just have to wrap it all togethe. Pass routes
and reducer
to Firepack and render it to DOM:
; ; ; // Your routes and reducer ; ; ;
How can I access Authenticated User Data
Since Firepack provides a simple authentication wrapper around your application it should also provide a
simple way for you to access authenticated user data - and it does! Simply import selectors
object and use it as in example bellow:
// Import selectors object ; // Get user object (with firepack auth flags and user data) // { // isAuthenticating: false, // isAuthenticated: true, // data: { // email: 'john.doe@email.com', // ... // }, // } const user = selectorsuser; // Get user data object // { // email: 'john.doe@email.com' // firstName: 'John', // lastName: 'Doe', // ... // } const userData = selectorsuser
How can I use Firepack Actions
If you need to sign out your user or use other action baked to Firepack, use actions
:
;
You should dispatch it as you would any other action:
// ... ; // ...
Firepack helper functions
Beside registerRoutes
helper that we already covered in example above, Firepack comes with
two more helper functions (that are optional to use): createReducer
and createActionTypes
.
createReducer(handler[, initState = {}]) (optional)
createReducer
accepts handler as a first argument and initial state (optional) as second one.
Handler should be an key:function
object where key
should match action.type
name. Every time an action is dispatched
and action.type
name matches the handler key
, function
assigned to that key
will be called.
; // do your magic // do your magic initState;
createActionTypes(actionTypesArray, prefix) (optional)
This helper accepts array of unique action.type
names as first argument and prefix
as second one.
You don't have to use this helper to create your action types, but it will probably be more convenient for your application if you do.
; const MY_APP = ;
Need more docs?
For now, please take a look at Firepack App (official Firepack starter)
or feel free contact me. 🙃
More documentation on how to use Firepack from scratch and with existing application will be available soon.
Demo
To see it in action with Firepack App, please check the demo.
Contributing
If you want to contribute or share your ideas, please feel free to contact me.
License
Copyright (c) 2016 Matko Bulic
Licensed under the MIT License