├── lib
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── config
    │   │   └── index.ts
    │   ├── state
    │   │   ├── index.ts
    │   │   ├── actions.ts
    │   │   ├── reducers.ts
    │   │   ├── types.ts
    │   │   └── sagas.ts
    │   ├── index.tsx
    │   ├── utils
    │   │   └── index.ts
    │   └── components
    │   │   ├── ErrorMessage
    │   │       └── index.tsx
    │   │   ├── Auth
    │   │       ├── index.tsx
    │   │       └── styles.ts
    │   │   ├── AmplifyReduxAuth
    │   │       └── index.tsx
    │   │   ├── SetNewPasswordForm
    │   │       └── index.tsx
    │   │   ├── ForgotPasswordForm
    │   │       └── index.tsx
    │   │   ├── LoginForm
    │   │       └── index.tsx
    │   │   └── ResetPasswordForm
    │   │       └── index.tsx
    ├── tsconfig.json
    ├── tsconfig.rollup.json
    ├── rollup.config.js
    ├── package.json
    └── README.md
├── example
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── state
    │   │   ├── reducer.ts
    │   │   ├── saga.ts
    │   │   └── store.ts
    │   ├── utils
    │   │   └── index.ts
    │   ├── components
    │   │   ├── ErrorMessage
    │   │   │   └── index.tsx
    │   │   ├── CustomAuth
    │   │   │   ├── index.tsx
    │   │   │   └── styles.ts
    │   │   ├── SetNewPasswordForm
    │   │   │   └── index.tsx
    │   │   └── LoginForm
    │   │   │   └── index.tsx
    │   ├── index.tsx
    │   └── App.tsx
    ├── public
    │   ├── favicon.ico
    │   ├── manifest.json
    │   └── index.html
    ├── .gitignore
    ├── README.md
    ├── tsconfig.json
    └── package.json
├── .prettierrc
├── README.md
├── .gitignore
├── .circleci
    └── config.yml
├── package.json
└── LICENSE


/lib/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "jsxBracketSameLine": true,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/agiledigital-labs/amplify-redux-auth/HEAD/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "Amplify Redux Auth Example",
3 |   "name": "Amplify Redux Auth Example"
4 | }
5 | 


--------------------------------------------------------------------------------
/lib/src/config/index.ts:
--------------------------------------------------------------------------------
1 | import Amplify from 'aws-amplify';
2 | 
3 | export const configureAmplify = config => Amplify.configure(config);
4 | 


--------------------------------------------------------------------------------
/lib/src/state/index.ts:
--------------------------------------------------------------------------------
1 | export { default as authState } from './reducers';
2 | export { default as authSagas } from './sagas';
3 | export * from './actions';
4 | export * from './types';
5 | 


--------------------------------------------------------------------------------
/example/src/state/reducer.ts:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { authState } from 'amplify-redux-auth';
3 | 
4 | export const rootReducer = combineReducers({
5 |   authState
6 | });
7 | 


--------------------------------------------------------------------------------
/example/src/state/saga.ts:
--------------------------------------------------------------------------------
1 | import { sagaMiddleware } from './store';
2 | import { authSagas } from 'amplify-redux-auth';
3 | 
4 | export const rootSaga = {
5 |   run: () => sagaMiddleware.run(authSagas)
6 | };
7 | 


--------------------------------------------------------------------------------
/lib/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { default as AmplifyReduxAuth } from './components/AmplifyReduxAuth';
2 | 
3 | export * from './state';
4 | 
5 | export * from './config';
6 | 
7 | export default AmplifyReduxAuth;
8 | 


--------------------------------------------------------------------------------
/lib/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { isNil, isEmpty } from 'lodash/fp';
2 | 
3 | export const notNil = <T>(value?: T): value is T => !isNil(value);
4 | 
5 | export const notEmpty = <T>(value?: T): value is T => !isEmpty(value);
6 | 


--------------------------------------------------------------------------------
/example/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { isNil, isEmpty } from 'lodash/fp';
2 | 
3 | export const notNil = <T>(value?: T): value is T => !isNil(value);
4 | 
5 | export const notEmpty = <T>(value?: T): value is T => !isEmpty(value);
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # amplify-redux-auth
2 | 
3 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4 | 
5 | :straight_ruler: :page_facing_up: :coffee:
6 | 
7 | [Read Me](https://github.com/agiledigital/amplify-redux-auth/tree/master/lib)
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | node_modules
 6 | 
 7 | # builds
 8 | build
 9 | dist
10 | .rpt2_cache
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 
24 | node_modules
25 | 
26 | **/*.css


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | node_modules
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Example for amplify-redux-auth
 2 | 
 3 | This is the example app create with [CRA](https://github.com/facebook/create-react-app) that uses amplify-redux-auth.
 4 | 
 5 | ### Environment variables required
 6 | Refer to [Amplify Authentication Config guide](https://aws-amplify.github.io/docs/js/authentication#manual-setup)
 7 | ```
 8 | REACT_APP_AWS_REGION
 9 | REACT_APP_COGNITO_IDENTITY_ID
10 | REACT_APP_COGNITO_USER_POOL_ID
11 | REACT_APP_COGNITO_WEB_CLIENT_ID
12 | ```


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: 'circleci/node:12.16.1'
 6 |     steps:
 7 |       - checkout
 8 |       - run:
 9 |           name: install-dev-packages
10 |           command: npm install
11 |       - run:
12 |           name: install-lib-packages
13 |           command: cd lib && npm install
14 |       - run:
15 |           name: build
16 |           command: npm run build
17 |       - run:
18 |           name: release
19 |           command: npm run semantic-release || true
20 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve",
21 |     "noImplicitAny": false
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "amplify-redux-auth-repo",
 3 |   "description": "",
 4 |   "scripts": {
 5 |     "build": "cd lib && npm run build",
 6 |     "watch": "cd lib && npm start",
 7 |     "prettier": "prettier --single-quote --write \"**/*/{src,test}/**/*.{ts,tsx}\"",
 8 |     "semantic-release": "semantic-release"
 9 |   },
10 |   "author": "Haolin Jiang <haolin.jiang@agiledigital.com.au>",
11 |   "license": "MIT",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/agiledigital/amplify-redux-auth.git"
15 |   },
16 |   "devDependencies": {
17 |     "prettier": "1.18.2",
18 |     "semantic-release": "^17.0.4"
19 |   },
20 |   "version": "0.0.0-development"
21 | }
22 | 


--------------------------------------------------------------------------------
/lib/src/components/ErrorMessage/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Typography } from '@material-ui/core';
 3 | import { notNil, notEmpty } from '../../utils';
 4 | 
 5 | interface ErrorMessageProps {
 6 |   errorMessage?: string;
 7 | }
 8 | 
 9 | const Message = ({ message }: { message: string }) => (
10 |   <Typography
11 |     align="center"
12 |     variant="overline"
13 |     display="block"
14 |     color="error"
15 |     gutterBottom>
16 |     {message}
17 |   </Typography>
18 | );
19 | 
20 | const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => (
21 |   <>
22 |     {notNil(errorMessage) && notEmpty(errorMessage) ? (
23 |       <Message message={errorMessage} />
24 |     ) : (
25 |       <></>
26 |     )}
27 |   </>
28 | );
29 | 
30 | export default ErrorMessage;
31 | 


--------------------------------------------------------------------------------
/example/src/components/ErrorMessage/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Typography } from '@material-ui/core';
 3 | import { notNil, notEmpty } from '../../utils';
 4 | 
 5 | interface ErrorMessageProps {
 6 |   errorMessage?: string;
 7 | }
 8 | 
 9 | const Message = ({ message }: { message: string }) => (
10 |   <Typography
11 |     align="center"
12 |     variant="overline"
13 |     display="block"
14 |     color="error"
15 |     gutterBottom>
16 |     {message}
17 |   </Typography>
18 | );
19 | 
20 | const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => (
21 |   <>
22 |     {notNil(errorMessage) && notEmpty(errorMessage) ? (
23 |       <Message message={errorMessage} />
24 |     ) : (
25 |       <></>
26 |     )}
27 |   </>
28 | );
29 | 
30 | export default ErrorMessage;
31 | 


--------------------------------------------------------------------------------
/lib/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "sourceMap": true,
 6 |     "importHelpers": true,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "noEmit": true,
16 |     "jsx": "preserve",
17 |     "noImplicitReturns": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "allowUnreachableCode": false,
22 |     "noImplicitAny": false,
23 |     "allowJs": true,
24 |     "isolatedModules": true
25 |   },
26 |   "include": ["src"]
27 | }
28 | 


--------------------------------------------------------------------------------
/lib/tsconfig.rollup.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "sourceMap": true,
10 |     "importHelpers": true,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "strict": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve",
21 |     "noImplicitReturns": true,
22 |     "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     "noFallthroughCasesInSwitch": true,
25 |     "allowUnreachableCode": false,
26 |     "noImplicitAny": false,
27 |     "declaration": true
28 |   },
29 |   "include": [
30 |     "src"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Provider } from 'react-redux';
 4 | import { rootSaga } from './state/saga';
 5 | import App from './App';
 6 | import createStore from './state/store';
 7 | import 'bootstrap/dist/css/bootstrap.min.css';
 8 | import { configureAmplify } from 'amplify-redux-auth';
 9 | 
10 | // Create the app's Redux store, which manages all of its state.
11 | const store = createStore();
12 | 
13 | rootSaga.run();
14 | 
15 | const rootComponent = () => (
16 |   <React.Fragment>
17 |     <Provider store={store}>
18 |       <App />
19 |     </Provider>
20 |   </React.Fragment>
21 | );
22 | 
23 | const awsAmplifyConfig = {
24 |   Auth: {
25 |     region: process.env.REACT_APP_AWS_REGION,
26 |     identityPoolId: process.env.REACT_APP_COGNITO_IDENTITY_ID,
27 |     userPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,
28 |     userPoolWebClientId: process.env.REACT_APP_COGNITO_WEB_CLIENT_ID
29 |   }
30 | };
31 | 
32 | configureAmplify(awsAmplifyConfig);
33 | 
34 | ReactDOM.render(rootComponent(), document.getElementById('root'));
35 | 


--------------------------------------------------------------------------------
/example/src/state/store.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   applyMiddleware,
 3 |   compose,
 4 |   createStore as reduxCreateStore
 5 | } from 'redux';
 6 | import createSagaMiddleware from 'redux-saga';
 7 | import { rootReducer } from './reducer';
 8 | import { isNil } from 'lodash/fp';
 9 | 
10 | declare global {
11 |   interface Window {
12 |     // See <https://github.com/zalmoxisus/redux-devtools-extension>.
13 |     readonly __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: <R>(a: R) => R;
14 |   }
15 | }
16 | 
17 | export const sagaMiddleware = createSagaMiddleware({
18 |   onError: error => {
19 |     console.log(`There was an error in the Redux Saga: ${error}`);
20 |   }
21 | });
22 | 
23 | // Setup for the Redux DevTools Extension. See
24 | // <https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup>.
25 | const composeEnhancers = isNil(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
26 |   ? compose
27 |   : window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
28 | 
29 | const createStore = () =>
30 |   reduxCreateStore(
31 |     rootReducer,
32 |     composeEnhancers(applyMiddleware(sagaMiddleware))
33 |   );
34 | 
35 | export default createStore;
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Agile Digital
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/src/components/CustomAuth/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { compose } from 'recompose';
 3 | import { connect } from 'react-redux';
 4 | import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 5 | import LoginForm from '../LoginForm';
 6 | import SetNewPasswordForm from '../SetNewPasswordForm';
 7 | import { State, AuthState, AmplifyAuthStatus } from 'amplify-redux-auth';
 8 | import { theme } from './styles';
 9 | 
10 | interface CustomAuthProps {
11 |   readonly authState: AuthState;
12 | }
13 | 
14 | const mapStateToProps = (state: State) => ({
15 |   authState: state.authState
16 | });
17 | 
18 | const CustomAuth = ({ authState }: CustomAuthProps) => (
19 |   <MuiThemeProvider theme={theme}>
20 |     {authState.authStatus === AmplifyAuthStatus.signIn ? (
21 |       <LoginForm logoText={'Custom Auth Example'} />
22 |     ) : (
23 |       <></>
24 |     )}
25 |     {authState.authStatus === AmplifyAuthStatus.requireNewPassword ? (
26 |       <SetNewPasswordForm />
27 |     ) : (
28 |       <></>
29 |     )}
30 |   </MuiThemeProvider>
31 | );
32 | 
33 | export default compose<CustomAuthProps, {}>(
34 |   connect(
35 |     mapStateToProps,
36 |     null
37 |   )
38 | )(CustomAuth);
39 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "amplify-redux-auth-example",
 3 |   "description": "Example app to use amplify-redux-auth.",
 4 |   "author": "Haolin Jiang <haolin.jiang@agiledigital.com.au>",
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.2.1",
 7 |     "@types/lodash": "^4.14.136",
 8 |     "@types/node": "^12.6.3",
 9 |     "@types/react": "^16.8.23",
10 |     "@types/react-dom": "^16.8.4",
11 |     "@types/react-redux": "^7.1.1",
12 |     "@types/recompose": "^0.30.6",
13 |     "amplify-redux-auth": "^0.1.7",
14 |     "aws-amplify": "^1.1.30",
15 |     "bootstrap": "^4.3.1",
16 |     "lodash": "^4.17.14",
17 |     "prop-types": "^15.6.2",
18 |     "react": "^16.8.6",
19 |     "react-dom": "^16.8.6",
20 |     "react-redux": "^7.1.0",
21 |     "react-scripts": "^3.4.1",
22 |     "recompose": "^0.30.0",
23 |     "redux": "^4.0.4",
24 |     "redux-saga": "^1.0.5",
25 |     "typescript": "^3.5.3"
26 |   },
27 |   "scripts": {
28 |     "start": "react-scripts start",
29 |     "build": "react-scripts build",
30 |     "test": "react-scripts test"
31 |   },
32 |   "eslintConfig": {
33 |     "extends": "react-app"
34 |   },
35 |   "browserslist": {
36 |     "production": [
37 |       ">0.2%",
38 |       "not dead",
39 |       "not op_mini all"
40 |     ],
41 |     "development": [
42 |       "last 1 chrome version",
43 |       "last 1 firefox version",
44 |       "last 1 safari version"
45 |     ]
46 |   },
47 |   "devDependencies": {}
48 | }
49 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import AmplifyReduxAuth, {
 3 |   logout,
 4 |   State,
 5 |   UserData
 6 | } from 'amplify-redux-auth';
 7 | import { compose } from 'recompose';
 8 | import { connect } from 'react-redux';
 9 | import { isNil } from 'lodash/fp';
10 | import { Dispatch, bindActionCreators } from 'redux';
11 | import CustomAuth from './components/CustomAuth';
12 | 
13 | interface AppProps {
14 |   logout: () => void;
15 |   loggedIn: boolean;
16 |   user: UserData;
17 | }
18 | 
19 | const App = ({ logout, user, loggedIn }) => (
20 |   <AmplifyReduxAuth logoText={'Example'} AuthComponent={<CustomAuth />}>
21 |     {loggedIn && !isNil(user) ? (
22 |       <div style={{ marginTop: '100px', textAlign: 'center' }}>
23 |         You've logged in!
24 |         <div>{user.username}</div>
25 |         <div>{user.attributes['email']}</div>
26 |         <div style={{ marginTop: '20px' }}>
27 |           <button onClick={logout}>Logout</button>
28 |         </div>
29 |       </div>
30 |     ) : (
31 |       <></>
32 |     )}
33 |   </AmplifyReduxAuth>
34 | );
35 | 
36 | const mapStateToProps = (state: State) => ({
37 |   user: state.authState.currentUser,
38 |   loggedIn: state.authState.loggedIn
39 | });
40 | 
41 | const mapDispatchToProps = (dispatch: Dispatch) => ({
42 |   logout: bindActionCreators(logout, dispatch)
43 | });
44 | 
45 | export default compose<AppProps, {}>(
46 |   connect(
47 |     mapStateToProps,
48 |     mapDispatchToProps
49 |   )
50 | )(App);
51 | 


--------------------------------------------------------------------------------
/lib/src/components/Auth/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { compose } from 'recompose';
 3 | import { connect } from 'react-redux';
 4 | import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 5 | import LoginForm from '../LoginForm';
 6 | import SetNewPasswordForm from '../SetNewPasswordForm';
 7 | import { State, AuthState, AmplifyAuthStatus } from '../../state';
 8 | import { theme } from './styles';
 9 | import ForgotPasswordForm from '../ForgotPasswordForm';
10 | import ResetPasswordForm from '../ResetPasswordForm';
11 | 
12 | interface AuthOuterProps {
13 |   readonly logoText: string;
14 | }
15 | 
16 | interface AuthProps extends AuthOuterProps {
17 |   readonly authState: AuthState;
18 | }
19 | 
20 | const mapStateToProps = (state: State) => ({
21 |   authState: state.authState
22 | });
23 | 
24 | const Auth = ({ logoText, authState }: AuthProps) => (
25 |   <MuiThemeProvider theme={theme}>
26 |     {authState.authStatus === AmplifyAuthStatus.signIn ? (
27 |       <LoginForm logoText={logoText} />
28 |     ) : (
29 |       <></>
30 |     )}
31 |     {authState.authStatus === AmplifyAuthStatus.requireNewPassword ? (
32 |       <SetNewPasswordForm />
33 |     ) : (
34 |       <></>
35 |     )}
36 |     {authState.authStatus === AmplifyAuthStatus.forgotPassword ? (
37 |       <ForgotPasswordForm />
38 |     ) : (
39 |       <></>
40 |     )}
41 |     {authState.authStatus === AmplifyAuthStatus.resetPassword ? (
42 |       <ResetPasswordForm />
43 |     ) : (
44 |       <></>
45 |     )}
46 |   </MuiThemeProvider>
47 | );
48 | 
49 | export default compose<AuthProps, AuthOuterProps>(
50 |   connect(
51 |     mapStateToProps,
52 |     null
53 |   )
54 | )(Auth);
55 | 


--------------------------------------------------------------------------------
/lib/src/state/actions.ts:
--------------------------------------------------------------------------------
 1 | import { action } from 'typesafe-actions';
 2 | import { AuthAction, UserData, AmplifyAuthStatus } from './types';
 3 | import { CognitoUser } from '@aws-amplify/auth';
 4 | 
 5 | export const login = (username: string, password: string) =>
 6 |   action(AuthAction.LOGIN, { username, password });
 7 | 
 8 | export const logout = () => action(AuthAction.LOGOUT);
 9 | 
10 | export const fetchCurrentUser = () => action(AuthAction.FETCH_CURRENT_USER);
11 | 
12 | export const cleanAuthState = () => action(AuthAction.CLEAN_AUTH_STATE);
13 | 
14 | export const loginSuccess = (userData: UserData) =>
15 |   action(AuthAction.LOGIN_SUCCESS, { userData });
16 | 
17 | export const setAuthError = (errorMessage: string) =>
18 |   action(AuthAction.SET_AUTH_ERROR, { errorMessage });
19 | 
20 | export const setUserError = (errorMessage: string) =>
21 |   action(AuthAction.SET_USER_ERROR, { errorMessage });
22 | 
23 | export const setCurrentUser = (userData: UserData) =>
24 |   action(AuthAction.SET_CURRENT_USER, { userData });
25 | 
26 | export const setCognitoUser = (cognitoUser: CognitoUser) =>
27 |   action(AuthAction.SET_COGNITO_USER, { cognitoUser });
28 | 
29 | export const setAuthStatus = (status: AmplifyAuthStatus) =>
30 |   action(AuthAction.SET_AUTH_STATUS, { status });
31 | 
32 | export const setNewPassword = (newPassword: string) =>
33 |   action(AuthAction.SET_NEW_PASSWORD, { newPassword });
34 | 
35 | export const forgotPassword = (username: string) =>
36 |   action(AuthAction.FORGOT_PASSWORD, { username });
37 | 
38 | export const resetPassword = (
39 |   username: string,
40 |   code: string,
41 |   newPassword: string
42 | ) => action(AuthAction.RESET_PASSWORD, { username, code, newPassword });
43 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>Example React Redux Amplify</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/lib/src/components/Auth/styles.ts:
--------------------------------------------------------------------------------
 1 | import { createStyles } from '@material-ui/core';
 2 | import { createMuiTheme } from '@material-ui/core/styles';
 3 | 
 4 | export const theme = createMuiTheme({
 5 |   palette: {
 6 |     primary: {
 7 |       main: '#070ba9',
 8 |       light: '#2424f0',
 9 |       dark: '#04047a',
10 |       contrastText: '#fff'
11 |     },
12 |     secondary: {
13 |       main: '#2626d1'
14 |     }
15 |   }
16 | });
17 | 
18 | /**
19 |  * @see https://material-ui.com/customization/themes
20 |  */
21 | const authStyles = createStyles({
22 |   main: {
23 |     display: 'flex',
24 |     flexDirection: 'column',
25 |     minHeight: '100vh',
26 |     height: '1px',
27 |     alignItems: 'center',
28 |     justifyContent: 'center',
29 |     backgroundColor: '#ffffff'
30 |   },
31 |   logoImage: {
32 |     [theme.breakpoints.up('xs')]: {
33 |       width: '50px'
34 |     },
35 |     [theme.breakpoints.up('sm')]: {
36 |       width: '60px'
37 |     },
38 |     [theme.breakpoints.up('md')]: {
39 |       width: '70px'
40 |     },
41 |     verticalAlign: 'middle'
42 |   },
43 |   logoSection: {
44 |     top: '35px',
45 |     position: 'absolute'
46 |   },
47 |   logoText: {
48 |     [theme.breakpoints.up('xs')]: {
49 |       fontSize: '140%',
50 |       top: '5px'
51 |     },
52 |     [theme.breakpoints.up('sm')]: {
53 |       fontSize: '200%',
54 |       top: '10px'
55 |     },
56 |     [theme.breakpoints.up('md')]: {
57 |       fontSize: '375%',
58 |       top: '20px'
59 |     },
60 |     fontWeight: 300,
61 |     position: 'relative',
62 |     paddingLeft: '15px',
63 |     textTransform: 'uppercase',
64 |     color: theme.palette.grey.A700
65 |   },
66 |   card: {
67 |     minWidth: 300
68 |   },
69 |   title: {
70 |     margin: '20px',
71 |     textAlign: 'center',
72 |     color: theme.palette.grey.A700,
73 |     textTransform: 'uppercase'
74 |   },
75 |   form: {
76 |     padding: '10px'
77 |   },
78 |   input: {
79 |     display: 'flex',
80 |     marginBottom: '20px'
81 |   },
82 |   button: {
83 |     backgroundColor: '#fb3'
84 |   }
85 | });
86 | 
87 | export default authStyles;
88 | 


--------------------------------------------------------------------------------
/example/src/components/CustomAuth/styles.ts:
--------------------------------------------------------------------------------
 1 | import { createStyles } from '@material-ui/core';
 2 | import { createMuiTheme } from '@material-ui/core/styles';
 3 | 
 4 | export const theme = createMuiTheme({
 5 |   palette: {
 6 |     primary: {
 7 |       main: '#520049',
 8 |       light: '#520049',
 9 |       dark: '#520049',
10 |       contrastText: '#fff'
11 |     },
12 |     secondary: {
13 |       main: '#520049'
14 |     }
15 |   }
16 | });
17 | 
18 | /**
19 |  * @see https://material-ui.com/customization/themes
20 |  */
21 | const authStyles = createStyles({
22 |   main: {
23 |     display: 'flex',
24 |     flexDirection: 'column',
25 |     minHeight: '100vh',
26 |     height: '1px',
27 |     alignItems: 'center',
28 |     justifyContent: 'center',
29 |     backgroundColor: '#ffffff'
30 |   },
31 |   logoImage: {
32 |     [theme.breakpoints.up('xs')]: {
33 |       width: '50px'
34 |     },
35 |     [theme.breakpoints.up('sm')]: {
36 |       width: '60px'
37 |     },
38 |     [theme.breakpoints.up('md')]: {
39 |       width: '70px'
40 |     },
41 |     verticalAlign: 'middle'
42 |   },
43 |   logoSection: {
44 |     top: '35px',
45 |     position: 'absolute'
46 |   },
47 |   logoText: {
48 |     [theme.breakpoints.up('xs')]: {
49 |       fontSize: '140%',
50 |       top: '5px'
51 |     },
52 |     [theme.breakpoints.up('sm')]: {
53 |       fontSize: '200%',
54 |       top: '10px'
55 |     },
56 |     [theme.breakpoints.up('md')]: {
57 |       fontSize: '375%',
58 |       top: '20px'
59 |     },
60 |     fontWeight: 300,
61 |     position: 'relative',
62 |     paddingLeft: '15px',
63 |     textTransform: 'uppercase',
64 |     color: '#000152'
65 |   },
66 |   card: {
67 |     minWidth: 300
68 |   },
69 |   title: {
70 |     margin: '20px',
71 |     textAlign: 'center',
72 |     color: '#000152',
73 |     textTransform: 'uppercase'
74 |   },
75 |   form: {
76 |     padding: '10px'
77 |   },
78 |   input: {
79 |     display: 'flex',
80 |     marginBottom: '20px'
81 |   },
82 |   button: {
83 |     backgroundColor: '#2626d1',
84 |     color: '#ffffff'
85 |   }
86 | });
87 | 
88 | export default authStyles;
89 | 


--------------------------------------------------------------------------------
/lib/src/state/reducers.ts:
--------------------------------------------------------------------------------
 1 | import { Reducer } from 'redux';
 2 | import {
 3 |   AmplifyAuthStatus,
 4 |   AuthAction,
 5 |   AuthActionTypes,
 6 |   AuthState
 7 | } from './types';
 8 | 
 9 | const initialState: AuthState = {
10 |   error: undefined,
11 |   userError: undefined,
12 |   currentUser: undefined,
13 |   cognitoUser: undefined,
14 |   loggedIn: false,
15 |   checkingAuth: false,
16 |   authStatus: AmplifyAuthStatus.signIn
17 | };
18 | 
19 | const reducer: Reducer<AuthState, AuthActionTypes> = (
20 |   state = initialState,
21 |   action: AuthActionTypes
22 | ) => {
23 |   switch (action.type) {
24 |     case AuthAction.LOGOUT: {
25 |       return initialState;
26 |     }
27 |     case AuthAction.LOGIN_SUCCESS: {
28 |       return {
29 |         ...state,
30 |         currentUser: action.payload.userData,
31 |         loggedIn: true,
32 |         error: undefined
33 |       };
34 |     }
35 |     case AuthAction.FETCH_CURRENT_USER: {
36 |       return { ...state, checkingAuth: true };
37 |     }
38 |     case AuthAction.SET_AUTH_ERROR: {
39 |       return {
40 |         ...state,
41 |         currentUser: undefined,
42 |         cognitoUser: undefined,
43 |         loggedIn: false,
44 |         checkingAuth: false,
45 |         error: action.payload.errorMessage
46 |       };
47 |     }
48 |     case AuthAction.SET_USER_ERROR: {
49 |       return {
50 |         ...state,
51 |         checkingAuth: false,
52 |         userError: action.payload.errorMessage
53 |       };
54 |     }
55 |     case AuthAction.SET_CURRENT_USER: {
56 |       return {
57 |         ...state,
58 |         loggedIn: true,
59 |         checkingAuth: false,
60 |         currentUser: action.payload.userData
61 |       };
62 |     }
63 |     case AuthAction.SET_COGNITO_USER: {
64 |       return { ...state, cognitoUser: action.payload.cognitoUser };
65 |     }
66 |     case AuthAction.SET_AUTH_STATUS: {
67 |       return {
68 |         ...state,
69 |         checkingAuth: false,
70 |         authStatus: action.payload.status,
71 |         error: undefined
72 |       };
73 |     }
74 |     default: {
75 |       return state;
76 |     }
77 |   }
78 | };
79 | 
80 | export default reducer;
81 | 


--------------------------------------------------------------------------------
/lib/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from 'rollup-plugin-typescript2'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import external from 'rollup-plugin-peer-deps-external'
 4 | import postcss from 'rollup-plugin-postcss'
 5 | import resolve from 'rollup-plugin-node-resolve'
 6 | import json from 'rollup-plugin-json';
 7 | import babel from 'rollup-plugin-babel';
 8 | import url from 'rollup-plugin-url'
 9 | import svgr from '@svgr/rollup'
10 | 
11 | import pkg from './package.json'
12 | 
13 | export default {
14 |   input: 'src/index.tsx',
15 |   output: [
16 |     {
17 |       file: pkg.main,
18 |       format: 'cjs',
19 |       exports: 'named',
20 |       sourcemap: true
21 |     },
22 |     {
23 |       file: pkg.module,
24 |       format: 'es',
25 |       exports: 'named',
26 |       sourcemap: true
27 |     }
28 |   ],
29 |   external: [ 'crypto' ],
30 |   plugins: [
31 |     external(),
32 |     postcss({
33 |       extensions: [ '.css' ]
34 |     }),
35 |     url(),
36 |     svgr(),
37 |     resolve(),
38 |     typescript({
39 |       rollupCommonJSResolveHack: true,
40 |       clean: true,
41 |       tsconfig: "tsconfig.rollup.json"
42 |     }),
43 |     json(),
44 |     babel({ 
45 |       exclude: 'node_modules/**',
46 |       presets: ['@babel/preset-react'],
47 |       extensions: ['.ts', '.tsx', '.js', '.jsx']
48 |     }),
49 |     commonjs({
50 |       // If you want to use named exports, this is required, since the rollup does not know how to interpret the 
51 |       // named exports, so when bundling the library, we need specific what named exports we use. 
52 |       // Alternatively you can use "import * as A from 'A-lib'" instead of named exports if you don't want to 
53 |       // add config here.
54 |       // @see https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
55 |       namedExports: {
56 |         // left-hand side can be an absolute path, a path relative to the current directory, or the name
57 |         // of a module in node_modules.
58 |         'node_modules/react-is/index.js': [ 'isValidElementType', 'isContextConsumer', 'ForwardRef', 'Memo' ],
59 |         'node_modules/lodash/fp.js': [ 'isEmpty', 'isNil', 'curry' ],
60 |         "node_modules/aws-amplify-react/dist/index.js": [ 'Authenticator' ]
61 |       }
62 |     })
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/lib/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "amplify-redux-auth",
 3 |   "description": "React component wraps the AWS Amplify that holds auth state within Redux store.",
 4 |   "version": "0.1.8",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "module": "dist/index.es.js",
 8 |   "jsnext:main": "dist/index.es.js",
 9 |   "engines": {
10 |     "node": ">=8",
11 |     "npm": ">=5"
12 |   },
13 |   "scripts": {
14 |     "test": "cross-env CI=1 react-scripts test --env=jsdom",
15 |     "test:watch": "react-scripts test --env=jsdom",
16 |     "build": "rollup -c",
17 |     "start": "rollup -c -w",
18 |     "prepare": "npm run build"
19 |   },
20 |   "author": "Haolin Jiang <haolin.jiang@agiledigital.com.au>",
21 |   "license": "MIT",
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "https://github.com/agiledigital/amplify-redux-auth.git"
25 |   },
26 |   "peerDependencies": {
27 |     "@material-ui/core": "^4.2.1",
28 |     "@types/react": "^16.3.13",
29 |     "@types/react-dom": "^16.0.5",
30 |     "@types/react-redux": "^7.1.1",
31 |     "aws-amplify": "^1.1.30",
32 |     "prop-types": "^15.5.4",
33 |     "react": "^16.8.6",
34 |     "react-dom": "^16.8.6",
35 |     "react-redux": "^7.1.0"
36 |   },
37 |   "devDependencies": {
38 |     "@babel/core": "^7.5.4",
39 |     "@babel/preset-react": "^7.0.0",
40 |     "@material-ui/core": "^4.2.1",
41 |     "@svgr/rollup": "^2.4.1",
42 |     "@types/jest": "^23.1.5",
43 |     "@types/lodash": "^4.14.136",
44 |     "@types/react": "^16.3.13",
45 |     "@types/react-dom": "^16.0.5",
46 |     "@types/react-redux": "^7.1.1",
47 |     "@types/recompose": "^0.30.6",
48 |     "aws-amplify": "^1.1.30",
49 |     "cross-env": "^5.1.4",
50 |     "date-fns": "^1.30.1",
51 |     "enzyme": "^3.10.0",
52 |     "enzyme-adapter-react-16": "^1.14.0",
53 |     "lodash": "^4.17.14",
54 |     "react": "^16.8.6",
55 |     "react-dom": "^16.8.6",
56 |     "react-redux": "^7.1.0",
57 |     "react-scripts": "^3.4.1",
58 |     "recompose": "^0.30.0",
59 |     "redux": "^4.0.4",
60 |     "redux-saga": "^1.0.5",
61 |     "redux-saga-test-plan": "^4.0.0-beta.3",
62 |     "rollup": "^2.2.0",
63 |     "rollup-plugin-babel": "^4.3.3",
64 |     "rollup-plugin-commonjs": "^9.1.3",
65 |     "rollup-plugin-json": "^4.0.0",
66 |     "rollup-plugin-node-resolve": "^3.3.0",
67 |     "rollup-plugin-peer-deps-external": "^2.2.0",
68 |     "rollup-plugin-postcss": "^2.0.3",
69 |     "rollup-plugin-typescript2": "^0.22.0",
70 |     "rollup-plugin-url": "^1.4.0",
71 |     "typesafe-actions": "^4.4.2",
72 |     "typescript": "^3.5.3"
73 |   },
74 |   "files": [
75 |     "dist"
76 |   ]
77 | }
78 | 


--------------------------------------------------------------------------------
/lib/src/components/AmplifyReduxAuth/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Hub } from 'aws-amplify';
 2 | import { HubCapsule } from '@aws-amplify/core/lib/Hub';
 3 | import { AuthState, State } from '../../state/types';
 4 | import * as React from 'react';
 5 | import { connect } from 'react-redux';
 6 | import { compose, lifecycle } from 'recompose';
 7 | import { bindActionCreators, Dispatch } from 'redux';
 8 | import { fetchCurrentUser, setAuthError, cleanAuthState } from '../../state';
 9 | import Auth from '../Auth';
10 | 
11 | interface AmplifyReduxAuthProps extends AmplifyReduxAuthOuterProps {
12 |   readonly authCurrentUser: () => void;
13 |   readonly cleanAuthState: () => void;
14 |   readonly setAuthError: (message?: string) => void;
15 |   readonly authState: AuthState;
16 |   readonly children: JSX.Element;
17 | }
18 | 
19 | interface AmplifyReduxAuthOuterProps {
20 |   readonly AuthComponent?: JSX.Element;
21 |   readonly logoText?: string;
22 | }
23 | 
24 | const mapStateToProps = (state: State) => ({
25 |   authState: state.authState
26 | });
27 | 
28 | const mapDispatchProps = (dispatch: Dispatch) => ({
29 |   authCurrentUser: bindActionCreators(fetchCurrentUser, dispatch),
30 |   setAuthError: bindActionCreators(setAuthError, dispatch),
31 |   cleanAuthState: bindActionCreators(cleanAuthState, dispatch)
32 | });
33 | 
34 | const NotAuth = (logoText?: string, AuthComponent?: JSX.Element) =>
35 |   AuthComponent ? AuthComponent : <Auth logoText={logoText || 'Login'} />;
36 | 
37 | const AmplifyReduxAuth = ({
38 |   authState,
39 |   AuthComponent,
40 |   children,
41 |   logoText
42 | }: AmplifyReduxAuthProps) => (
43 |   <>
44 |     {authState.loggedIn || authState.checkingAuth
45 |       ? children
46 |       : NotAuth(logoText, AuthComponent)}
47 |   </>
48 | );
49 | 
50 | export default compose<AmplifyReduxAuthProps, AmplifyReduxAuthOuterProps>(
51 |   connect(
52 |     mapStateToProps,
53 |     mapDispatchProps
54 |   ),
55 |   lifecycle<AmplifyReduxAuthProps, {}>({
56 |     componentDidMount() {
57 |       // Check if currently logged in by touching current user.
58 |       this.props.authCurrentUser();
59 | 
60 |       /**
61 |        * Hub capsule is a message bus used by AWS amplify.
62 |        * The hub is used here to listen to the authentication events from Amplify.
63 |        * @see https://aws-amplify.github.io/docs/js/hub
64 |        */
65 |       Hub.listen('auth', (capsule: HubCapsule) => {
66 |         switch (capsule.payload.event) {
67 |           case 'signIn':
68 |             this.props.authCurrentUser();
69 |             break;
70 |           case 'signOut':
71 |             this.props.cleanAuthState();
72 |             break;
73 |           case 'signIn_failure':
74 |             break;
75 |           case 'configured':
76 |             this.props.authCurrentUser();
77 |             break;
78 |           default:
79 |             console.warn(`Unexpected auth event [${capsule.payload.event}].`);
80 |         }
81 |       });
82 |     }
83 |   })
84 | )(AmplifyReduxAuth);
85 | 


--------------------------------------------------------------------------------
/lib/src/components/SetNewPasswordForm/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { compose, withStateHandlers } from 'recompose';
 4 | import { CardActions, Button, TextField, Card } from '@material-ui/core';
 5 | import { withStyles } from '@material-ui/core/styles';
 6 | import authStyles from '../Auth/styles';
 7 | import { State, setNewPassword } from '../../state';
 8 | import { bindActionCreators, Dispatch } from 'redux';
 9 | import { ClassNameMap } from '@material-ui/styles/withStyles';
10 | import ErrorMessage from '../ErrorMessage';
11 | 
12 | interface SetNewPasswordFormProps {
13 |   readonly error?: string;
14 |   readonly classes: ClassNameMap;
15 |   readonly inputs: { readonly username: string; readonly password: string };
16 |   readonly setNewPassword: (password: string) => void;
17 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
18 | }
19 | 
20 | const SetNewPasswordForm = ({
21 |   classes,
22 |   setNewPassword,
23 |   handleInputChange,
24 |   inputs,
25 |   error
26 | }: SetNewPasswordFormProps) => (
27 |   <div className={classes.main}>
28 |     <Card className={classes.card}>
29 |       <div className={classes.title}>
30 |         <h2>Set New Password</h2>
31 |       </div>
32 |       <ErrorMessage errorMessage={error} />
33 |       <form
34 |         className={classes.form}
35 |         onSubmit={e => {
36 |           e.preventDefault();
37 |           setNewPassword(inputs.password);
38 |         }}>
39 |         <div className={classes.form}>
40 |           <div className={classes.input}>
41 |             <TextField
42 |               required
43 |               id="password"
44 |               name="password"
45 |               label="Password"
46 |               type="password"
47 |               value={inputs.password}
48 |               fullWidth
49 |               onChange={handleInputChange}
50 |             />
51 |           </div>
52 |           <CardActions>
53 |             <Button
54 |               variant="outlined"
55 |               className={classes.button}
56 |               type="submit"
57 |               fullWidth>
58 |               Change
59 |             </Button>
60 |           </CardActions>
61 |         </div>
62 |       </form>
63 |     </Card>
64 |   </div>
65 | );
66 | 
67 | const mapStateToProps = (state: State) => ({
68 |   error: state.authState.error
69 | });
70 | 
71 | const mapDispatchToProps = (dispatch: Dispatch) => ({
72 |   setNewPassword: bindActionCreators(setNewPassword, dispatch)
73 | });
74 | 
75 | export default compose<SetNewPasswordFormProps, {}>(
76 |   withStyles(authStyles),
77 |   connect(
78 |     mapStateToProps,
79 |     mapDispatchToProps
80 |   ),
81 |   withStateHandlers(
82 |     {
83 |       inputs: {
84 |         password: ''
85 |       }
86 |     },
87 |     {
88 |       handleInputChange: ({ inputs }) => (
89 |         e: React.ChangeEvent<HTMLInputElement>
90 |       ) => ({
91 |         inputs: {
92 |           ...inputs,
93 |           [e.target.name]: e.target.value
94 |         }
95 |       })
96 |     }
97 |   )
98 | )(SetNewPasswordForm);
99 | 


--------------------------------------------------------------------------------
/example/src/components/SetNewPasswordForm/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { connect } from 'react-redux';
 3 | import { compose, withStateHandlers } from 'recompose';
 4 | import { CardActions, Button, TextField, Card } from '@material-ui/core';
 5 | import { withStyles } from '@material-ui/core/styles';
 6 | import authStyles from '../CustomAuth/styles';
 7 | import { bindActionCreators, Dispatch } from 'redux';
 8 | import { ClassNameMap } from '@material-ui/styles/withStyles';
 9 | import ErrorMessage from '../ErrorMessage';
10 | import { State, setNewPassword } from 'amplify-redux-auth';
11 | 
12 | interface SetNewPasswordFormProps {
13 |   readonly error?: string;
14 |   readonly classes: ClassNameMap;
15 |   readonly inputs: { readonly username: string; readonly password: string };
16 |   readonly setNewPassword: (password: string) => void;
17 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
18 | }
19 | 
20 | const SetNewPasswordForm = ({
21 |   classes,
22 |   setNewPassword,
23 |   handleInputChange,
24 |   inputs,
25 |   error
26 | }: SetNewPasswordFormProps) => (
27 |   <div className={classes.main}>
28 |     <Card className={classes.card}>
29 |       <div className={classes.title}>
30 |         <h2>Set New Password</h2>
31 |       </div>
32 |       <ErrorMessage errorMessage={error} />
33 |       <form
34 |         className={classes.form}
35 |         onSubmit={e => {
36 |           e.preventDefault();
37 |           setNewPassword(inputs.password);
38 |         }}>
39 |         <div className={classes.form}>
40 |           <div className={classes.input}>
41 |             <TextField
42 |               required
43 |               id="password"
44 |               name="password"
45 |               label="Password"
46 |               type="password"
47 |               value={inputs.password}
48 |               fullWidth
49 |               onChange={handleInputChange}
50 |             />
51 |           </div>
52 |           <CardActions>
53 |             <Button
54 |               variant="outlined"
55 |               className={classes.button}
56 |               type="submit"
57 |               fullWidth>
58 |               Change
59 |             </Button>
60 |           </CardActions>
61 |         </div>
62 |       </form>
63 |     </Card>
64 |   </div>
65 | );
66 | 
67 | const mapStateToProps = (state: State) => ({
68 |   error: state.authState.error
69 | });
70 | 
71 | const mapDispatchToProps = (dispatch: Dispatch) => ({
72 |   setNewPassword: bindActionCreators(setNewPassword, dispatch)
73 | });
74 | 
75 | export default compose<SetNewPasswordFormProps, {}>(
76 |   withStyles(authStyles),
77 |   connect(
78 |     mapStateToProps,
79 |     mapDispatchToProps
80 |   ),
81 |   withStateHandlers(
82 |     {
83 |       inputs: {
84 |         password: ''
85 |       }
86 |     },
87 |     {
88 |       handleInputChange: ({ inputs }) => (
89 |         e: React.ChangeEvent<HTMLInputElement>
90 |       ) => ({
91 |         inputs: {
92 |           ...inputs,
93 |           [e.target.name]: e.target.value
94 |         }
95 |       })
96 |     }
97 |   )
98 | )(SetNewPasswordForm);
99 | 


--------------------------------------------------------------------------------
/lib/src/components/ForgotPasswordForm/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { compose, withStateHandlers } from 'recompose';
  3 | import { connect } from 'react-redux';
  4 | import { Card, CardActions, Button, TextField } from '@material-ui/core';
  5 | import { bindActionCreators, Dispatch } from 'redux';
  6 | import {
  7 |   setAuthStatus,
  8 |   forgotPassword,
  9 |   State,
 10 |   AmplifyAuthStatus
 11 | } from '../../state';
 12 | import withStyles, { ClassNameMap } from '@material-ui/styles/withStyles';
 13 | import authStyles from '../Auth/styles';
 14 | import ErrorMessage from '../ErrorMessage';
 15 | 
 16 | interface ForgotPasswordFormProps {
 17 |   readonly error?: string;
 18 |   readonly classes: ClassNameMap;
 19 |   readonly inputs: { readonly username: string };
 20 |   readonly forgotPassword: (username: string) => void;
 21 |   readonly setAuthStatus: (status: AmplifyAuthStatus) => void;
 22 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 23 | }
 24 | 
 25 | const mapStateToProps = (state: State) => ({
 26 |   error: state.authState.error
 27 | });
 28 | 
 29 | const mapDispatchToProps = (dispatch: Dispatch) => ({
 30 |   setAuthStatus: bindActionCreators(setAuthStatus, dispatch),
 31 |   forgotPassword: bindActionCreators(forgotPassword, dispatch)
 32 | });
 33 | 
 34 | const ForgotPasswordForm = ({
 35 |   classes,
 36 |   forgotPassword,
 37 |   error,
 38 |   inputs,
 39 |   handleInputChange,
 40 |   setAuthStatus
 41 | }: ForgotPasswordFormProps) => (
 42 |   <div className={classes.main}>
 43 |     <Card className={classes.card}>
 44 |       <div className={classes.title}>
 45 |         <h2>Request password reset</h2>
 46 |       </div>
 47 |       <ErrorMessage errorMessage={error} />
 48 |       <form
 49 |         className={classes.form}
 50 |         onSubmit={e => {
 51 |           e.preventDefault();
 52 |           forgotPassword(inputs.username);
 53 |         }}>
 54 |         <div className={classes.form}>
 55 |           <div className={classes.input}>
 56 |             <TextField
 57 |               required
 58 |               id="username"
 59 |               name="username"
 60 |               label="Username"
 61 |               fullWidth
 62 |               onChange={handleInputChange}
 63 |             />
 64 |           </div>
 65 |           <CardActions>
 66 |             <Button variant="outlined" color="primary" type="submit" fullWidth>
 67 |               Confirm
 68 |             </Button>
 69 |           </CardActions>
 70 |           <CardActions>
 71 |             <Button
 72 |               fullWidth
 73 |               type="button"
 74 |               onClick={() => setAuthStatus(AmplifyAuthStatus.signIn)}>
 75 |               Remembered your password?
 76 |             </Button>
 77 |           </CardActions>
 78 |         </div>
 79 |       </form>
 80 |     </Card>
 81 |   </div>
 82 | );
 83 | 
 84 | export default compose<ForgotPasswordFormProps, {}>(
 85 |   withStyles(authStyles),
 86 |   connect(
 87 |     mapStateToProps,
 88 |     mapDispatchToProps
 89 |   ),
 90 |   withStateHandlers(
 91 |     {
 92 |       inputs: {
 93 |         username: ''
 94 |       }
 95 |     },
 96 |     {
 97 |       handleInputChange: ({ inputs }) => (
 98 |         e: React.ChangeEvent<HTMLInputElement>
 99 |       ) => ({
100 |         inputs: {
101 |           ...inputs,
102 |           [e.target.name]: e.target.value
103 |         }
104 |       })
105 |     }
106 |   )
107 | )(ForgotPasswordForm);
108 | 


--------------------------------------------------------------------------------
/example/src/components/LoginForm/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { connect } from 'react-redux';
  3 | import { compose, withStateHandlers } from 'recompose';
  4 | import { CardActions, Button, TextField, Card } from '@material-ui/core';
  5 | import { withStyles } from '@material-ui/core/styles';
  6 | import authStyles from '../CustomAuth/styles';
  7 | import { bindActionCreators, Dispatch } from 'redux';
  8 | import { ClassNameMap } from '@material-ui/styles/withStyles';
  9 | import ErrorMessage from '../ErrorMessage';
 10 | import {
 11 |   State,
 12 |   setAuthStatus,
 13 |   login
 14 | } from 'amplify-redux-auth';
 15 | 
 16 | interface LoginProps extends LoginOuterProps {
 17 |   readonly error?: string;
 18 |   readonly classes: ClassNameMap;
 19 |   readonly inputs: { readonly username: string; readonly password: string };
 20 |   readonly login: (username: string, password: string) => void;
 21 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 22 | }
 23 | 
 24 | interface LoginOuterProps {
 25 |   readonly logoText: string;
 26 | }
 27 | 
 28 | const LoginForm = ({
 29 |   classes,
 30 |   logoText,
 31 |   login,
 32 |   handleInputChange,
 33 |   inputs,
 34 |   error
 35 | }: LoginProps) => (
 36 |   <div className={classes.main}>
 37 |     <Card className={classes.card}>
 38 |       <div className={classes.title}>
 39 |         <h2>{logoText}</h2>
 40 |       </div>
 41 |       <ErrorMessage errorMessage={error} />
 42 |       <form
 43 |         className={classes.form}
 44 |         onSubmit={e => {
 45 |           e.preventDefault();
 46 |           login(inputs.username, inputs.password);
 47 |         }}>
 48 |         <div className={classes.form}>
 49 |           <div className={classes.input}>
 50 |             <TextField
 51 |               required
 52 |               id="username"
 53 |               name="username"
 54 |               label="Username"
 55 |               value={inputs.username}
 56 |               fullWidth
 57 |               onChange={handleInputChange}
 58 |             />
 59 |           </div>
 60 |           <div className={classes.input}>
 61 |             <TextField
 62 |               required
 63 |               id="password"
 64 |               name="password"
 65 |               label="Password"
 66 |               type="password"
 67 |               value={inputs.password}
 68 |               fullWidth
 69 |               onChange={handleInputChange}
 70 |             />
 71 |           </div>
 72 |           <CardActions>
 73 |             <Button
 74 |               variant="outlined"
 75 |               className={classes.button}
 76 |               type="submit"
 77 |               fullWidth>
 78 |               Login
 79 |             </Button>
 80 |           </CardActions>
 81 |         </div>
 82 |       </form>
 83 |     </Card>
 84 |   </div>
 85 | );
 86 | 
 87 | const mapStateToProps = (state: State) => ({
 88 |   error: state.authState.error
 89 | });
 90 | 
 91 | const mapDispatchToProps = (dispatch: Dispatch) => ({
 92 |   setAuthStatus: bindActionCreators(setAuthStatus, dispatch),
 93 |   login: bindActionCreators(login, dispatch)
 94 | });
 95 | 
 96 | export default compose<LoginProps, LoginOuterProps>(
 97 |   withStyles(authStyles),
 98 |   connect(
 99 |     mapStateToProps,
100 |     mapDispatchToProps
101 |   ),
102 |   withStateHandlers(
103 |     {
104 |       inputs: {
105 |         username: '',
106 |         password: ''
107 |       }
108 |     },
109 |     {
110 |       handleInputChange: ({ inputs }) => (
111 |         e: React.ChangeEvent<HTMLInputElement>
112 |       ) => ({
113 |         inputs: {
114 |           ...inputs,
115 |           [e.target.name]: e.target.value
116 |         }
117 |       })
118 |     }
119 |   )
120 | )(LoginForm);
121 | 


--------------------------------------------------------------------------------
/lib/src/components/LoginForm/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { connect } from 'react-redux';
  3 | import { compose, withStateHandlers } from 'recompose';
  4 | import { CardActions, Button, TextField, Card } from '@material-ui/core';
  5 | import { withStyles } from '@material-ui/core/styles';
  6 | import authStyles from '../Auth/styles';
  7 | import { State, setAuthStatus, login, AmplifyAuthStatus } from '../../state';
  8 | import { bindActionCreators, Dispatch } from 'redux';
  9 | import { ClassNameMap } from '@material-ui/styles/withStyles';
 10 | import ErrorMessage from '../ErrorMessage';
 11 | 
 12 | interface LoginProps extends LoginOuterProps {
 13 |   readonly error?: string;
 14 |   readonly classes: ClassNameMap;
 15 |   readonly inputs: { readonly username: string; readonly password: string };
 16 |   readonly setAuthStatus: (status: AmplifyAuthStatus) => void;
 17 |   readonly login: (username: string, password: string) => void;
 18 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 19 | }
 20 | 
 21 | interface LoginOuterProps {
 22 |   readonly logoText: string;
 23 | }
 24 | 
 25 | const LoginForm = ({
 26 |   classes,
 27 |   logoText,
 28 |   login,
 29 |   handleInputChange,
 30 |   inputs,
 31 |   setAuthStatus,
 32 |   error
 33 | }: LoginProps) => (
 34 |   <div className={classes.main}>
 35 |     <Card className={classes.card}>
 36 |       <div className={classes.title}>
 37 |         <h2>{logoText}</h2>
 38 |       </div>
 39 |       <ErrorMessage errorMessage={error} />
 40 |       <form
 41 |         className={classes.form}
 42 |         onSubmit={e => {
 43 |           e.preventDefault();
 44 |           login(inputs.username, inputs.password);
 45 |         }}>
 46 |         <div className={classes.form}>
 47 |           <div className={classes.input}>
 48 |             <TextField
 49 |               required
 50 |               id="username"
 51 |               name="username"
 52 |               label="Username"
 53 |               value={inputs.username}
 54 |               fullWidth
 55 |               onChange={handleInputChange}
 56 |             />
 57 |           </div>
 58 |           <div className={classes.input}>
 59 |             <TextField
 60 |               required
 61 |               id="password"
 62 |               name="password"
 63 |               label="Password"
 64 |               type="password"
 65 |               value={inputs.password}
 66 |               fullWidth
 67 |               onChange={handleInputChange}
 68 |             />
 69 |           </div>
 70 |           <CardActions>
 71 |             <Button
 72 |               variant="outlined"
 73 |               className={classes.button}
 74 |               type="submit"
 75 |               fullWidth>
 76 |               Login
 77 |             </Button>
 78 |           </CardActions>
 79 |           <CardActions>
 80 |             <Button
 81 |               fullWidth
 82 |               type="button"
 83 |               onClick={() => setAuthStatus(AmplifyAuthStatus.forgotPassword)}>
 84 |               Forgot your password?
 85 |             </Button>
 86 |           </CardActions>
 87 |         </div>
 88 |       </form>
 89 |     </Card>
 90 |   </div>
 91 | );
 92 | 
 93 | const mapStateToProps = (state: State) => ({
 94 |   error: state.authState.error
 95 | });
 96 | 
 97 | const mapDispatchToProps = (dispatch: Dispatch) => ({
 98 |   setAuthStatus: bindActionCreators(setAuthStatus, dispatch),
 99 |   login: bindActionCreators(login, dispatch)
100 | });
101 | 
102 | export default compose<LoginProps, LoginOuterProps>(
103 |   withStyles(authStyles),
104 |   connect(
105 |     mapStateToProps,
106 |     mapDispatchToProps
107 |   ),
108 |   withStateHandlers(
109 |     {
110 |       inputs: {
111 |         username: '',
112 |         password: ''
113 |       }
114 |     },
115 |     {
116 |       handleInputChange: ({ inputs }) => (
117 |         e: React.ChangeEvent<HTMLInputElement>
118 |       ) => ({
119 |         inputs: {
120 |           ...inputs,
121 |           [e.target.name]: e.target.value
122 |         }
123 |       })
124 |     }
125 |   )
126 | )(LoginForm);
127 | 


--------------------------------------------------------------------------------
/lib/README.md:
--------------------------------------------------------------------------------
  1 | # amplify-redux-auth
  2 | 
  3 | [![CircleCI](https://circleci.com/gh/agiledigital/amplify-redux-auth.svg?style=svg)](https://circleci.com/gh/agiledigital/amplify-redux-auth)
  4 | 
  5 | [![npm version](https://badge.fury.io/js/amplify-redux-auth.svg?killcache=5)](https://badge.fury.io/js/amplify-redux-auth) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  6 | 
  7 | 
  8 | * Wraps the Amplify Authentication with Redux.
  9 | * 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.
 10 | * Redux Actions exposed for you to manipulate the auth state freely.
 11 | * BYO authentication component, you can choose your own authentication component or use the default.
 12 | 
 13 | ### Usage
 14 | `yarn add aws-amplify amplify-redux-auth react react-dom react-redux @material-ui/core`
 15 | 
 16 | Or
 17 | 
 18 | `npm install --save aws-amplify amplify-redux-auth react react-dom react-redux @material-ui/core`
 19 | 
 20 | 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).
 21 | 
 22 | Note: AWS Amplify Rollup bundling [issue](https://github.com/aws/aws-sdk-js/issues/1769), has to make it as peer dependencies.
 23 | 
 24 | ### Configure AWS Amplify from you application
 25 | ```javascript
 26 | import { configureAmplify } from 'amplify-redux-auth';
 27 | 
 28 | // You can supply AWS Amplify config in you index.ts or index.js just before ReactDOM.render.
 29 | // See https://aws-amplify.github.io/docs/js/authentication#manual-setup
 30 | const awsAmplifyConfig = {
 31 |   Auth: {
 32 |     region: process.env.REACT_APP_AWS_REGION,
 33 |     identityPoolId: process.env.REACT_APP_COGNITO_IDENTITY_ID,
 34 |     userPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,
 35 |     userPoolWebClientId: process.env.REACT_APP_COGNITO_WEB_CLIENT_ID
 36 |   }
 37 | };
 38 | 
 39 | configureAmplify(awsAmplifyConfig);
 40 | 
 41 | ReactDOM.render(rootComponent(), document.getElementById('root'));
 42 | ```
 43 | 
 44 | 
 45 | ### Hook up the state/sagas to your Redux store
 46 | ```javascript
 47 | // reducers.ts
 48 | import { combineReducers } from 'redux';
 49 | import { authState } from 'amplify-redux-auth';
 50 | 
 51 | export const rootReducer = combineReducers({
 52 |   authState,
 53 |   ... // your other reducers
 54 | });
 55 | 
 56 | // sagas.ts
 57 | import { sagaMiddleware } from './store';
 58 | import { authSagas } from 'amplify-redux-auth';
 59 | 
 60 | export const rootSaga = {
 61 |   run: () => sagaMiddleware.run(authSagas),
 62 |   .... // your other sagas
 63 | };
 64 | 
 65 | ```
 66 | 
 67 | #### Wrap it with your component
 68 | ```javascript
 69 | import ....
 70 | import AmplifyReduxAuth, { logout, State, UserData } from 'amplify-redux-auth';
 71 | 
 72 | const App = ({ logout, user, loggedIn }) => (
 73 |   <AmplifyReduxAuth logoText={'My Logo'}>
 74 |     <div>
 75 |       {'You\'ve logged in!'}
 76 |     </div>
 77 |   </AmplifyReduxAuth>
 78 | );
 79 | 
 80 | const mapStateToProps = (state: State) => ({
 81 |   user: state.authState.currentUser,
 82 |   loggedIn: state.authState.loggedIn
 83 | });
 84 | 
 85 | const mapDispatchToProps = (dispatch: Dispatch) => ({
 86 |   logout: bindActionCreators(logout, dispatch)
 87 | });
 88 | 
 89 | export default compose<AppProps, {}>(
 90 |   connect(mapStateToProps, mapDispatchToProps)
 91 | )(App);
 92 | 
 93 | ```
 94 | 
 95 | #### Custom authentication component (see [../example](https://github.com/agiledigital/amplify-redux-auth/tree/master/example) folder).
 96 | ```javascript
 97 | <AmplifyReduxAuth AuthComponent={<YourCustomAuth />>
 98 |   ...
 99 | </AmplifyReduxAuth>
100 | ```
101 | 
102 | :shipit: :shipit: :shipit:
103 | 
104 | ### TODO
105 | * Remove bunch of DRY code.
106 | * Tests! :see_no_evil:
107 | * Sign up feature with default Sign up form.
108 | * Custom auth flow, e.g. OAuth, SAML.
109 | * Improve the auth state, or make it more flexible.
110 | * Remove `@material-ui` as peer dependency.
111 | 
112 | 


--------------------------------------------------------------------------------
/lib/src/state/types.ts:
--------------------------------------------------------------------------------
  1 | import { CognitoUser } from '@aws-amplify/auth';
  2 | 
  3 | export enum AuthAction {
  4 |   LOGIN = 'AUTH/LOGIN',
  5 |   LOGOUT = 'AUTH/LOGOUT',
  6 |   LOGIN_SUCCESS = 'AUTH/LOGIN_SUCCESS',
  7 |   FETCH_CURRENT_USER = 'AUTH/FETCH_CURRENT_USER',
  8 |   SET_NEW_PASSWORD = 'AUTH/SET_NEW_PASSWORD',
  9 |   FORGOT_PASSWORD = 'AUTH/FORGOT_PASSWORD',
 10 |   RESET_PASSWORD = 'AUTH/RESET_PASSWORD',
 11 |   SET_AUTH_ERROR = 'AUTH/SET_AUTH_ERROR',
 12 |   SET_CURRENT_USER = 'AUTH/SET_CURRENT_USER',
 13 |   SET_COGNITO_USER = 'AUTH/SET_COGNITO_USER',
 14 |   SET_AUTH_STATUS = 'AUTH/SET_AUTH_STATUS',
 15 |   CLEAN_AUTH_STATE = 'AUTH/CLEAN_AUTH_STATE',
 16 |   SET_USER_ERROR = 'AUTH/SET_USER_ERROR'
 17 | }
 18 | 
 19 | export interface UserData {
 20 |   username: string;
 21 |   attributes: Map<string, string>;
 22 | }
 23 | 
 24 | export interface AuthState {
 25 |   readonly error?: string;
 26 |   readonly userError?: string;
 27 |   readonly currentUser?: UserData;
 28 |   readonly cognitoUser?: CognitoUser;
 29 |   readonly loggedIn: boolean;
 30 |   readonly checkingAuth: boolean;
 31 |   readonly authStatus: AmplifyAuthStatus;
 32 | }
 33 | 
 34 | /**
 35 |  * Authentication state that provided by AWS Amplify.
 36 |  * @see https://github.com/aws/aws-amplify/blob/master/docs/media/authentication_guide.md#example-show-your-app-only-after-user-sign-in
 37 |  *
 38 |  * With the addition of resetPassword and requireNewPassword.
 39 |  */
 40 | export enum AmplifyAuthStatus {
 41 |   signIn = 'signIn',
 42 |   signUp = 'signUp',
 43 |   confirmSignIn = 'confirmSignIn',
 44 |   confirmSignUp = 'confirmSignUp',
 45 |   forgotPassword = 'forgotPassword',
 46 |   verifyContact = 'verifyContact',
 47 |   signedIn = 'signedIn',
 48 |   resetPassword = 'resetPassword',
 49 |   requireNewPassword = 'requireNewPassword',
 50 |   mfaRequired = 'requireNewPassword'
 51 | }
 52 | 
 53 | export interface Login {
 54 |   readonly type: AuthAction.LOGIN;
 55 |   readonly payload: {
 56 |     readonly username: string;
 57 |     readonly password: string;
 58 |   };
 59 | }
 60 | 
 61 | export interface Logout {
 62 |   readonly type: AuthAction.LOGOUT;
 63 | }
 64 | 
 65 | export interface FetchCurrentUser {
 66 |   readonly type: AuthAction.FETCH_CURRENT_USER;
 67 | }
 68 | 
 69 | export interface CleanAuthState {
 70 |   readonly type: AuthAction.CLEAN_AUTH_STATE;
 71 | }
 72 | 
 73 | export interface LoginSuccess {
 74 |   readonly type: AuthAction.LOGIN_SUCCESS;
 75 |   readonly payload: { readonly userData: UserData };
 76 | }
 77 | 
 78 | export interface SetAuthError {
 79 |   readonly type: AuthAction.SET_AUTH_ERROR;
 80 |   readonly payload: { readonly errorMessage: string };
 81 | }
 82 | 
 83 | export interface SetUserError {
 84 |   readonly type: AuthAction.SET_USER_ERROR;
 85 |   readonly payload: { readonly errorMessage: string };
 86 | }
 87 | 
 88 | export interface SetCurrentUser {
 89 |   readonly type: AuthAction.SET_CURRENT_USER;
 90 |   readonly payload: { readonly userData: UserData };
 91 | }
 92 | 
 93 | export interface SetCognitoUser {
 94 |   readonly type: AuthAction.SET_COGNITO_USER;
 95 |   readonly payload: { readonly cognitoUser: CognitoUser };
 96 | }
 97 | 
 98 | export interface SetAuthStatus {
 99 |   readonly type: AuthAction.SET_AUTH_STATUS;
100 |   readonly payload: { readonly status: AmplifyAuthStatus };
101 | }
102 | 
103 | export interface SetNewPassword {
104 |   readonly type: AuthAction.SET_NEW_PASSWORD;
105 |   readonly payload: { readonly newPassword: string };
106 | }
107 | 
108 | export interface ForgotPassword {
109 |   readonly type: AuthAction.FORGOT_PASSWORD;
110 |   readonly payload: { readonly username: string };
111 | }
112 | 
113 | export interface ResetPassword {
114 |   readonly type: AuthAction.FORGOT_PASSWORD;
115 |   readonly payload: {
116 |     readonly username: string;
117 |     readonly code: string;
118 |     readonly newPassword: string;
119 |   };
120 | }
121 | 
122 | export interface State {
123 |   authState: AuthState;
124 | }
125 | 
126 | export type AuthActionTypes =
127 |   | Login
128 |   | Logout
129 |   | FetchCurrentUser
130 |   | CleanAuthState
131 |   | LoginSuccess
132 |   | SetAuthError
133 |   | SetUserError
134 |   | SetCurrentUser
135 |   | SetCognitoUser
136 |   | SetAuthStatus
137 |   | SetNewPassword
138 |   | ForgotPassword
139 |   | ResetPassword;
140 | 


--------------------------------------------------------------------------------
/lib/src/state/sagas.ts:
--------------------------------------------------------------------------------
  1 | import { Auth } from 'aws-amplify';
  2 | import { all, fork, put, takeLatest, apply, select } from 'redux-saga/effects';
  3 | import { AuthAction, AmplifyAuthStatus, State } from './types';
  4 | import {
  5 |   setCognitoUser,
  6 |   setAuthStatus,
  7 |   loginSuccess,
  8 |   setAuthError,
  9 |   setCurrentUser,
 10 |   setUserError
 11 | } from './actions';
 12 | 
 13 | const errorMessage = err => {
 14 |   if (typeof err === 'string') {
 15 |     return err;
 16 |   }
 17 | 
 18 |   if (err && err.message) {
 19 |     return err.message;
 20 |   }
 21 | 
 22 |   return 'Error occurred during auth.';
 23 | };
 24 | 
 25 | /**
 26 |  * Clean authentication state after sign out event fired from AWS Amplify.
 27 |  * @see https://aws-amplify.github.io/docs/js/hub#authentication-events
 28 |  */
 29 | const cleanAuthState = () => {
 30 |   window.localStorage.clear();
 31 |   window.sessionStorage.clear();
 32 | };
 33 | 
 34 | function* handleLogout() {
 35 |   cleanAuthState();
 36 | }
 37 | 
 38 | function* handleLogin(action) {
 39 |   const { username, password } = action.payload;
 40 |   try {
 41 |     const cognitoUser = yield apply(Auth, Auth.signIn, [username, password]);
 42 | 
 43 |     yield put(setCognitoUser(cognitoUser));
 44 | 
 45 |     if (cognitoUser.challengeName === 'NEW_PASSWORD_REQUIRED') {
 46 |       yield put(setAuthStatus(AmplifyAuthStatus.requireNewPassword));
 47 |     } else if (cognitoUser.challengeName === 'SMS_MFA') {
 48 |       yield put(setAuthStatus(AmplifyAuthStatus.mfaRequired));
 49 |     } else {
 50 |       const currentUser = yield apply(Auth, Auth.currentUserInfo, []);
 51 |       yield put(loginSuccess(currentUser));
 52 |       yield put(setAuthStatus(AmplifyAuthStatus.signedIn));
 53 |     }
 54 |   } catch (err) {
 55 |     console.error(err);
 56 |     yield put(setAuthError(errorMessage(err)));
 57 |   }
 58 | }
 59 | 
 60 | /**
 61 |  * Touches the current authenticated user, if failed to retrieve the user info, user is not logged in.
 62 |  */
 63 | function* handleFetchCurrentUser() {
 64 |   try {
 65 |     const currentUser = yield apply(Auth, Auth.currentAuthenticatedUser, [
 66 |       undefined
 67 |     ]);
 68 |     yield put(setCurrentUser(currentUser));
 69 |     yield put(setAuthStatus(AmplifyAuthStatus.signedIn));
 70 |   } catch (err) {
 71 |     console.error(err);
 72 |     yield put(setUserError(errorMessage(err)));
 73 |   }
 74 | }
 75 | 
 76 | function* handleSetNewPassword(action) {
 77 |   const { newPassword } = action.payload;
 78 |   try {
 79 |     const cognitoUser = yield select(
 80 |       (state: State) => state.authState.cognitoUser
 81 |     );
 82 | 
 83 |     yield apply(Auth, Auth.completeNewPassword, [cognitoUser, newPassword, []]);
 84 | 
 85 |     const currentUser = yield apply(Auth, Auth.currentUserInfo, []);
 86 | 
 87 |     yield put(loginSuccess(currentUser));
 88 |     yield put(setAuthStatus(AmplifyAuthStatus.signedIn));
 89 |   } catch (err) {
 90 |     console.error(err);
 91 |     yield put(setAuthError(errorMessage(err)));
 92 |   }
 93 | }
 94 | 
 95 | function* handleForgotPassword(action) {
 96 |   const { username } = action.payload;
 97 |   try {
 98 |     yield apply(Auth, Auth.forgotPassword, [username]);
 99 |     yield put(setAuthStatus(AmplifyAuthStatus.resetPassword));
100 |   } catch (err) {
101 |     console.error(err);
102 |     yield put(setAuthError(errorMessage(err)));
103 |   }
104 | }
105 | 
106 | export function* handleResetPassword(action) {
107 |   const { username, code, newPassword } = action.payload;
108 |   try {
109 |     yield apply(Auth, Auth.forgotPasswordSubmit, [username, code, newPassword]);
110 |     yield put(setAuthStatus(AmplifyAuthStatus.signIn));
111 |   } catch (err) {
112 |     console.error(err);
113 |     yield put(setAuthError(errorMessage(err)));
114 |   }
115 | }
116 | 
117 | function* watchSearchRequest() {
118 |   yield takeLatest(AuthAction.LOGIN, handleLogin);
119 |   yield takeLatest(AuthAction.LOGOUT, handleLogout);
120 |   yield takeLatest(AuthAction.FETCH_CURRENT_USER, handleFetchCurrentUser);
121 |   yield takeLatest(AuthAction.CLEAN_AUTH_STATE, cleanAuthState);
122 |   yield takeLatest(AuthAction.SET_NEW_PASSWORD, handleSetNewPassword);
123 |   yield takeLatest(AuthAction.FORGOT_PASSWORD, handleForgotPassword);
124 |   yield takeLatest(AuthAction.RESET_PASSWORD, handleResetPassword);
125 | }
126 | 
127 | function* sagas() {
128 |   yield all([fork(watchSearchRequest)]);
129 | }
130 | 
131 | export default sagas;
132 | 


--------------------------------------------------------------------------------
/lib/src/components/ResetPasswordForm/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { compose, withStateHandlers } from 'recompose';
  3 | import { connect } from 'react-redux';
  4 | import { Card, CardActions, Button, TextField } from '@material-ui/core';
  5 | import { bindActionCreators, Dispatch } from 'redux';
  6 | import {
  7 |   setAuthStatus,
  8 |   State,
  9 |   AmplifyAuthStatus,
 10 |   resetPassword
 11 | } from '../../state';
 12 | import withStyles, { ClassNameMap } from '@material-ui/styles/withStyles';
 13 | import authStyles from '../Auth/styles';
 14 | import ErrorMessage from '../ErrorMessage';
 15 | 
 16 | interface ResetPasswordFormProps {
 17 |   readonly error?: string;
 18 |   readonly classes: ClassNameMap;
 19 |   readonly inputs: {
 20 |     readonly username: string;
 21 |     readonly newPassword: string;
 22 |     readonly code: string;
 23 |   };
 24 |   readonly resetPassword: (
 25 |     username: string,
 26 |     code: string,
 27 |     newPassword: string
 28 |   ) => void;
 29 |   readonly setAuthStatus: (status: AmplifyAuthStatus) => void;
 30 |   readonly handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 31 | }
 32 | 
 33 | const mapStateToProps = (state: State) => ({
 34 |   error: state.authState.error
 35 | });
 36 | 
 37 | const mapDispatchToProps = (dispatch: Dispatch) => ({
 38 |   setAuthStatus: bindActionCreators(setAuthStatus, dispatch),
 39 |   resetPassword: bindActionCreators(resetPassword, dispatch)
 40 | });
 41 | 
 42 | const ResetPasswordForm = ({
 43 |   classes,
 44 |   setAuthStatus,
 45 |   error,
 46 |   inputs,
 47 |   handleInputChange,
 48 |   resetPassword
 49 | }: ResetPasswordFormProps) => (
 50 |   <div className={classes.main}>
 51 |     <Card className={classes.card}>
 52 |       <div className={classes.title}>
 53 |         <h2>Set your new password</h2>
 54 |       </div>
 55 |       <ErrorMessage errorMessage={error} />
 56 |       <form
 57 |         className={classes.form}
 58 |         onSubmit={e => {
 59 |           e.preventDefault();
 60 |           resetPassword(inputs.username, inputs.code, inputs.newPassword);
 61 |         }}>
 62 |         <div className={classes.form}>
 63 |           <div className={classes.input}>
 64 |             <TextField
 65 |               required
 66 |               id="username"
 67 |               name="username"
 68 |               label="Username"
 69 |               value={inputs.username}
 70 |               fullWidth
 71 |               onChange={handleInputChange}
 72 |             />
 73 |           </div>
 74 |           <div className={classes.input}>
 75 |             <TextField
 76 |               required
 77 |               id="code"
 78 |               name="code"
 79 |               label="Code"
 80 |               value={inputs.code}
 81 |               fullWidth
 82 |               onChange={handleInputChange}
 83 |             />
 84 |           </div>
 85 |           <div className={classes.input}>
 86 |             <TextField
 87 |               required
 88 |               id="new-password"
 89 |               name="newPassword"
 90 |               label="New Password"
 91 |               type="password"
 92 |               value={inputs.newPassword}
 93 |               fullWidth
 94 |               onChange={handleInputChange}
 95 |             />
 96 |           </div>
 97 |           <CardActions>
 98 |             <Button variant="outlined" color="primary" type="submit" fullWidth>
 99 |               Reset
100 |             </Button>
101 |           </CardActions>
102 |           <CardActions>
103 |             <Button
104 |               fullWidth
105 |               type="button"
106 |               onClick={() => setAuthStatus(AmplifyAuthStatus.signIn)}>
107 |               Remembered your password?
108 |             </Button>
109 |           </CardActions>
110 |         </div>
111 |       </form>
112 |     </Card>
113 |   </div>
114 | );
115 | 
116 | export default compose<ResetPasswordFormProps, {}>(
117 |   withStyles(authStyles),
118 |   connect(
119 |     mapStateToProps,
120 |     mapDispatchToProps
121 |   ),
122 |   withStateHandlers(
123 |     {
124 |       inputs: {
125 |         username: '',
126 |         code: '',
127 |         newPassword: ''
128 |       }
129 |     },
130 |     {
131 |       handleInputChange: ({ inputs }) => (
132 |         e: React.ChangeEvent<HTMLInputElement>
133 |       ) => ({
134 |         inputs: {
135 |           ...inputs,
136 |           [e.target.name]: e.target.value
137 |         }
138 |       })
139 |     }
140 |   )
141 | )(ResetPasswordForm);
142 | 


--------------------------------------------------------------------------------