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