@app-masters/react-auth-container

Auth Container

Every action now serves as a callback, the Auth Component will be responsible to handle the whole authentication process and return callback values so that the outter setup know how to handle the data it resolves.

Installation

npm install --save @app-masters/react-auth-container

Props

Prop	Type
baseUrl	String
client	String
appVersion	Number
onLoginSuccess	Function
onLoginFail	Function
onSignupSuccess	Function
onSignupFail	Function
login	Component
signup	Component

Usage

Component (PublicRoutes)

import React, {Component} from 'react';
import { connect } from 'react-redux';
import Login from '../views/Login';
import Auth from '@app-masters/react-auth-container';
import { onLoginSuccess, onLoginFail, onSignupFail, onSignupSucess } from '../actions/authActions';

class PublicRoutes extends Component {
    render () {
        return (
            <div>
                <Auth
                    login={<Login />}
                    signup={null}
                    onLoginSuccess={(response) => {
                        this.props.onLoginSuccess(response);
                    }}
                    onLoginFail={(response) => {
                        this.props.onLoginFail(response); //
                    }}
                    onSignupSucess={(response) => {
                        this.props.onSignupSucess(response);
                    }}
                    onSignupFail={(response) => {
                        this.props.onSignupFail(response);
                    }}
                    client={'admin'}
                    appVersion={process.env.APP_VERSION}
                    baseUrl={'http://localhost:3000/api'} />
            </div>
        );
    }
}
const mapState = (state) => ({});
const mapActions = (dispatch) => ({
    onLoginSuccess: (res) => dispatch(onLoginSuccess(res)),
    onSignupFail: (res) => dispatch(onSignupFail(res)),
    onSignupSucess: (res) => dispatch(onSignupSucess(res)),
    onLoginFail: (res) => dispatch(onLoginFail(res))
});
export default connect(mapState, mapActions)(PublicRoutes);

Actions

import { AUTH_LOGIN_SUCCESS, AUTH_LOGOUT } from './types';
import { Http } from '@app-masters/js-lib';
export const onLoginSuccess = (userData) => dispatch => {
    console.log('LOGIN SUCCESS:', userData);
    Http.setHeaders({
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'client': 'admin',
        'Authorization': userData.token
    });
    Http.setEndpointParam('{_id}', userData.user._id);
    dispatch({type: AUTH_LOGIN_SUCCESS, payload: userData});
};