❤
npm
Sign UpSign In

amplify-redux-auth
TypeScript icon, indicating that this package has built-in type declarations

0.1.11 • Public • Published

amplify-redux-auth

npm version License: MIT

  • Wraps the Amplify Authentication with Redux.
  • Uses Redux for state management, suitable if your application is using Amplify, Redux and react-redux, makes it easy to plugin the authentication state into your own global state.
  • Redux Actions exposed for you to manipulate the auth state freely.
  • BYO authentication component, you can choose your own authentication component or use the default.

Usage

yarn add aws-amplify amplify-redux-auth react react-dom react-redux @material-ui/core

Or

npm install --save aws-amplify amplify-redux-auth react react-dom react-redux @material-ui/core

Note: @material-ui/core is used by the library and required as Peer Dependencies (to avoid that if @material-ui/core is used in your application, it will have conflict), this may be changed in the future (remove it as peer dependency).

Note: AWS Amplify Rollup bundling issue, has to make it as peer dependencies.

Configure AWS Amplify from you application

import { configureAmplify } from 'amplify-redux-auth';
 
// You can supply AWS Amplify config in you index.ts or index.js just before ReactDOM.render.
// See https://aws-amplify.github.io/docs/js/authentication#manual-setup
const awsAmplifyConfig = {
  Auth: {
    region: process.env.REACT_APP_AWS_REGION,
    identityPoolId: process.env.REACT_APP_COGNITO_IDENTITY_ID,
    userPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_COGNITO_WEB_CLIENT_ID
  }
};
 
configureAmplify(awsAmplifyConfig);
 
ReactDOM.render(rootComponent(), document.getElementById('root'));

Hook up the state/sagas to your Redux store

// reducers.ts
import { combineReducers } from 'redux';
import { authState } from 'amplify-redux-auth';
 
export const rootReducer = combineReducers({
  authState,
  ... // your other reducers
});
 
// sagas.ts
import { sagaMiddleware } from './store';
import { authSagas } from 'amplify-redux-auth';
 
export const rootSaga = {
  run: () => sagaMiddleware.run(authSagas),
  .... // your other sagas
};
 

Wrap it with your component

import ....
import AmplifyReduxAuth, { logout, State, UserData } from 'amplify-redux-auth';
 
const App = ({ logout, user, loggedIn }) => (
  <AmplifyReduxAuth logoText={'My Logo'}>
    <div>
      You've logged in!
    </div>
  </AmplifyReduxAuth>
);
 
const mapStateToProps = (state: State) => ({
  user: state.authState.currentUser,
  loggedIn: state.authState.loggedIn
});
 
const mapDispatchToProps = (dispatch: Dispatch) => ({
  logout: bindActionCreators(logout, dispatch)
});
 
export default compose<AppProps, {}>(
  connect(mapStateToProps, mapDispatchToProps)
)(App);
 

Custom authentication component (see ../example folder).

<AmplifyReduxAuth AuthComponent={<YourCustomAuth />>
  ...
</AmplifyReduxAuth>

:shipit: :shipit: :shipit:

TODO

  • Remove bunch of DRY code.
  • Tests! 🙈
  • Sign up feature with default Sign up form.
  • Custom auth flow, e.g. OAuth, SAML.
  • Improve the auth state, or make it more flexible.
  • Remove @material-ui as peer dependency.

Readme

Keywords

none

Package Sidebar

Install

npm i amplify-redux-auth

Repository

github.com/agiledigital/amplify-redux-auth

Homepage

github.com/agiledigital/amplify-redux-auth#readme

Weekly Downloads

38

Version

0.1.11

License

MIT

Unpacked Size

2.12 MB

Total Files

25

Last publish

Collaborators

  • haolinj
Try on RunKit
Report malware