@app-masters/react-auth-container

auth component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@app-masters/react-auth-container
Minified + gzip package size for @app-masters/react-auth-container in KB

Readme

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});
};

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.