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 { registerRoutes } from 'firepack';

    // Import your container(s) and/or page(s)
    import RootContainer from '../containers/RootContainer';
    import WelcomePage from '../components/pages/WelcomePage';

    // 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
    export default registerRoutes([
        {
            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 { combineReducers } from 'redux';

    // Import your app reducer(s)
    import someReducer from './someReducer';
    import someOtherReducer from './someOtherReducer';

    // Use combineReducers to combine multiple reducers
    // You should only pass one reducer to Firepack
    export default combineReducers({
        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:

    import React from 'react';
    import { render } from 'react-dom';
    import Firepack from 'firepack';

    //  Your routes and reducer
    import routes from './routes';
    import reducer from './reducer';

    render(
        <Firepack
            appTitle="My Super App"
            appDescription="Super awesome app :)"
            routes={routes}
            reducer={reducer}
            firebaseConfig={
                // You will get this data within your Firebase Console
                apiKey: 'YOUR-FIREBASE-APP-KEY',
                authDomain: 'YOUR-FIREBASE-APP-AUTH-DOMAIN',
                databaseURL: 'YOUR-FIREBASE-APP-DATABASE-URL',
                storageBucket: 'YOUR-FIREBASE-APP-STORAGE-BUCKET',
            }
            firebaseAuthProviders={
                EmailAndPassword: true,
                // You can also change order of social providers
                // to render the in order that suits you more
                Facebook: true,
                Twitter: true,
                Google: true,
                Github: true,
            }
        />,
        document.getElementById('root')
    );

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
    import { selectors } from 'firepack';

    // Get user object (with firepack auth flags and user data)
    //  {
    //      isAuthenticating: false,
    //      isAuthenticated: true,
    //      data: {
    //          email: '[email protected]',
    //          ...
    //      },
    //  }
    const user = selectors.user.getUser();

    // Get user data object
    //  {
    //      email: '[email protected]'
    //      firstName: 'John',
    //      lastName: 'Doe',
    //      ...
    //  }
    const userData = selectors.user.getUserData()

How can I use Firepack Actions

If you need to sign out your user or use other action baked to Firepack, use actions:

    import { actions } from 'firepack';

You should dispatch it as you would any other action:

    // ...

    dispatch(actions.auth.signOut());

    // ...

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.

    import { createReducer } from 'firepack';

    export default createReducer({
        'CUSTOM_ACTION_TYPE_1': (state, payload) => (
            // do your magic
        ),
        'CUSTOOM_ACTION_TYPE_2': (state, payload) => (
            // 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.

    import { createActionTypes } from 'firepack';

    export const MY_APP = createActionTypes([
        'LOAD_SOME_DATA_START',
        'LOAD_SOME_DATA_SUCCESS',
        'LOAD_SOME_DATA_FAIL',
        // add more action types here
    ], '@@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