@modelrocket/redux-cognito

Redux Cognito Component

Redux Cognito Component

Installing

$ npm install -s @modelrocket/redux-cognito

Usage

In your Store configuration for Redux. The following lines of code will get you up and running

import { createStore, applyMiddleware, combineReducers } from 'redux';

// The CognitoReducer uses promiseMiddleware so you must use it
import promiseMiddleware from 'redux-promise';

import { CognitoAPI, CognitoReducer } from '@modelrocket/redux-cognito';

// You must initialize the User Pool with the UserPoolId and ClientId respectively
CognitoAPI.initializeUserPool('us-east-1_XXXXXXXXX', 'XXXXXXgt7urrp75jbcoa1rklqm' );

const appReducer = combineReducers({
  cognito: CognitoReducer.reducer,
  yourOtherReducers,
});

// Optional, for safe measure, delete all the Redux state on logout action.
const rootReducer = (state, action) => {
  if (action.type === CognitoReducer.LOGOUT_USER) {
    return appReducer({}, action);
  }
  return appReducer(state, action);
};

const middleware = composeEnhancers(applyMiddleware(promiseMiddleware));

export const store = createStore(rootReducer, middleware);

Login Screens

In your login screen workflow we suggest having a Main Login Container that presents the necessary forms.

The main login container will need to Connect to the redux store and be able to dispatch the following actions

class Login extends Component {

  ... // Render and Lifecycle methods...

}

const mapStateToProps = (state) => {
  return {
    authError: Store.getAuthError(state),
    resetState: state.cognito.resetState, // This indicates in the password reset workflow, what state you are in
    username: state.cognito && state.cognito.username,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSubmit: (username, password) => {
      return dispatch(CognitoReducer.authUser(username, password))
        .then((result) => {
          console.log('Result of Login ...', result);
          initializeAPIs(result.payload.accessToken.jwtToken); // Or whatever action you need to do with the JWT Token
        });
    },
    onResetPassword: (username, tempPassword, newPassword) => {
      dispatch(CognitoReducer.newPasswordChallenge(username, tempPassword, newPassword));
    },
    signUp: () => {
      dispatch(NavigationActions.navigate({ routeName: 'SignUp' }));
    },
    forgotPasswordSubmit: (username) => {
      dispatch(CognitoReducer.forgotPassword(username));
    },
    confirmPasswordSubmit: (userName, accessCode, password) => {
      dispatch(CognitoReducer.confirmPassword(userName, accessCode, password));
      dispatch(CognitoReducer.logoutUser());
    },
    resetAuthError: () => {
      dispatch(CognitoReducer.logoutUser());
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

To test the package before publish

$ npm pack
$ cd `project directory`
$ npm install -s ~/go/src/github.com/ModelRocket/modelrocket-redux-cognito-0.0.x.tgz