8 |
9 |
10 |
8 |
9 |
10 |
8 |
9 |
10 |
8 |
14 |
11 |
12 |
13 |
8 |
29 |
11 |
22 |
23 | 26 | 27 |
28 |
8 |
32 |
11 |
16 |
29 |
30 |
31 |
11 |
12 | 
13 |
25 | Test
26 |
27 |
14 | Edit src/App.tsx and save to reload.
15 |
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /packages/amplify-auth-hooks/src/use-sign-in.tsx: -------------------------------------------------------------------------------- 1 | import invariant from 'tiny-invariant'; 2 | 3 | import Auth from '@aws-amplify/auth'; 4 | import { ConsoleLogger as Logger } from '@aws-amplify/core'; 5 | 6 | import { useAuthContext } from './use-auth-context'; 7 | import { useCheckContact } from './use-check-contact'; 8 | 9 | const logger = new Logger('useSignIn'); 10 | 11 | export const useSignIn = (): (( 12 | username: string, 13 | password: string, 14 | validationData?: Record
8 |
61 |
11 |
19 |
60 |
22 |
44 |
45 |
59 | {title}
93 | )}
94 |
30 |
31 |
32 |
44 |
45 | );
46 |
47 | export default withAuthenticator(App);
48 | ```
49 |
50 | ## Hide default components
51 |
52 | You can hide default components of your Authenticator.
53 |
54 | ```typescript
55 | withAuthenticator(App, {
56 | hide: [Greetings],
57 | });
58 | ```
59 |
60 | ## Hide links in default components
61 |
62 | You can disable sign up if you do not allow users to sign up themselves.
63 |
64 | ```typescript
65 | withAuthenticator(App, {
66 | hide: [SignUp],
67 | hideSignUpLink: true,
68 | //hideForgotPasswordLink: true,
69 | });
70 | ```
71 |
72 | ## Customize initial authState
73 |
74 | You can change the initial auth state for your Authenticator. By default the initial state is signIn which will shows the signIn component.
75 |
76 | ```typescript
77 | withAuthenticator(App, {
78 | initialAuthState: 'signUp',
79 | });
80 | ```
81 |
82 |
83 | ## Localization
84 |
85 | amplify-material-ui is built with [react-intl](https://formatjs.io/docs/getting-started/installation/) support. You can add your own localized strings translations by passing the intlProps into the authenticator.
86 |
87 | ```typescript
88 | withAuthenticator(App, {
89 | intlProps: {
90 | customMessages: {
91 | de: {
92 | global: {
93 | labels: {
94 | username: 'Overwrite username label',
95 | },
96 | },
97 | },
98 | },
99 | },
100 | });
101 | ```
102 |
103 |
104 | ## Customize sign-up form
105 |
106 | You can customize the sign-up fields as well as the initial values passed into the form:
107 |
108 | ```typescript
109 | const signUpConfig = {
110 | signUpFields: [
111 | {
112 | label: 'First name',
113 | key: 'given_name',
114 | required: true,
115 | displayOrder: 1,
116 | type: 'text',
117 | intl: {
118 | label: 'signUp.labels.family_name',
119 | }
120 | },
121 | {
122 | label: 'Surname',
123 | key: 'family_name',
124 | required: true,
125 | displayOrder: 2,
126 | type: 'text',
127 | intl: {
128 | label: 'signUp.labels.given_name',
129 | }
130 | },
131 | {
132 | label: 'Email',
133 | key: 'email',
134 | required: true,
135 | displayOrder: 3,
136 | type: 'email',
137 | },
138 | {
139 | label: 'Password',
140 | key: 'password',
141 | required: true,
142 | displayOrder: 4,
143 | type: 'password',
144 | },
145 | ],
146 | initialValues: {
147 | given_name: 'John',
148 | family_name: 'Smith',
149 | },
150 | };
151 |
152 | withAuthenticator(App, {
153 | signUpConfig,
154 | intlProps: {
155 | customMessages: {
156 | de: {
157 | signUp: {
158 | labels: {
159 | given_name: 'Translated given name',
160 | family_name: 'Translated family name',
161 | },
162 | },
163 | },
164 | },
165 | },
166 | });
167 |
168 | ```
169 |
170 | ## Customize sign-up fields
171 |
172 | ## License
173 |
174 | [MIT](LICENSE)
175 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | executors:
2 | node:
3 | parameters:
4 | image:
5 | type: string
6 | default: "14"
7 | docker:
8 | - image: circleci/node:<< parameters.image >>
9 |
10 | aliases:
11 | e2e-executor: &e2e-executor
12 | docker:
13 | - image: cypress/browsers:node14.15.0-chrome86-ff82
14 |
15 | restore_cache: &restore_cache
16 | restore_cache:
17 | name: Restore node_modules cache
18 | keys:
19 | - yarn-cache-{{ checksum "yarn.lock" }}
20 |
21 | install_node_modules: &install_node_modules
22 | run:
23 | name: Install node modules
24 | command: yarn --frozen-lockfile
25 |
26 | persist_cache: &persist_cache
27 | save_cache:
28 | name: Save node modules cache
29 | key: yarn-cache-{{ checksum "yarn.lock" }}
30 | paths:
31 | - ~/.cache
32 |
33 | attach_to_bootstrap: &attach_to_bootstrap
34 | attach_workspace:
35 | at: packages
36 |
37 | ignore_master: &ignore_master
38 | filters:
39 | branches:
40 | ignore:
41 | - master
42 |
43 | e2e-test-workflow: &e2e-test-workflow
44 | filters:
45 | branches:
46 | ignore:
47 | - master
48 | requires:
49 | - lint
50 | - unit_tests_node14
51 | - unit_tests_node16
52 |
53 | test_template: &test_template
54 | steps:
55 | - checkout
56 | - <<: *restore_cache
57 | - <<: *install_node_modules
58 | - <<: *persist_cache
59 | - <<: *attach_to_bootstrap
60 | - run: yarn test:unit
61 |
62 | commands:
63 | e2e-test:
64 | parameters:
65 | trigger_pattern:
66 | type: string
67 | default: "packages/*|.circleci/*"
68 | test_path:
69 | type: string
70 | test_command:
71 | type: string
72 | default: "" # if unset, e2e-test.sh specifies the command
73 | steps:
74 | - checkout
75 | - run: ./scripts/assert-changed-files.sh "<< parameters.trigger_pattern >>|<< parameters.test_path >>/*"
76 | - <<: *restore_cache
77 | - <<: *install_node_modules
78 | - <<: *persist_cache
79 | - <<: *attach_to_bootstrap
80 | - run: yarn build
81 | - run: ./scripts/e2e-test.sh "<< parameters.test_path >>" "<< parameters.test_command >>"
82 |
83 | version: 2.1
84 |
85 | jobs:
86 | bootstrap:
87 | executor: node
88 | steps:
89 | - checkout
90 | - run: ./scripts/assert-changed-files.sh "packages/*|(e2e-tests/*|.circleci/*"
91 | - <<: *restore_cache
92 | - <<: *install_node_modules
93 | - <<: *persist_cache
94 | - persist_to_workspace:
95 | root: packages
96 | paths:
97 | - "*"
98 |
99 | lint:
100 | executor: node
101 | steps:
102 | - checkout
103 | - <<: *restore_cache
104 | - <<: *install_node_modules
105 | - <<: *persist_cache
106 | - run: yarn lint
107 |
108 | unit_tests_node14:
109 | executor: node
110 | <<: *test_template
111 |
112 | unit_tests_node16:
113 | executor:
114 | name: node
115 | image: "16"
116 | <<: *test_template
117 |
118 | e2e_tests_auth:
119 | <<: *e2e-executor
120 | steps:
121 | - e2e-test:
122 | test_path: e2e-tests/auth
123 | trigger_pattern: "packages/amplify-material-ui|.circleci/*"
124 |
125 | workflows:
126 | version: 2
127 | build-test:
128 | jobs:
129 | - bootstrap
130 | - lint:
131 | requires:
132 | - bootstrap
133 | - unit_tests_node14:
134 | requires:
135 | - lint
136 | - unit_tests_node16:
137 | requires:
138 | - lint
139 | - e2e_tests_auth:
140 | <<: *e2e-test-workflow
141 |
--------------------------------------------------------------------------------
/packages/amplify-material-ui/src/auth/require-new-password.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useIntl, FormattedMessage } from 'react-intl';
3 | import { useRequireNewPassword } from 'amplify-auth-hooks';
4 | import { Button, Grid } from '@mui/material';
5 | import { Theme } from '@mui/material/styles';
6 | import makeStyles from '@mui/styles/makeStyles';
7 | import createStyles from '@mui/styles/createStyles';
8 | import { Formik, Field, Form } from 'formik';
9 | import { TextField } from 'formik-mui';
10 | import * as Yup from 'yup';
11 |
12 | import { FormSection, SectionHeader, SectionBody, SectionFooter } from '../ui';
13 | import { useNotificationContext } from '../notification';
14 | import { ChangeAuthStateLink } from './change-auth-state-link';
15 |
16 | const useStyles = makeStyles((theme: Theme) =>
17 | createStyles({
18 | form: {
19 | width: '100%', // Fix IE 11 issue.
20 | marginTop: theme.spacing(1),
21 | },
22 | submit: {
23 | margin: theme.spacing(3, 0, 2),
24 | },
25 | }),
26 | );
27 |
28 | export const RequireNewPassword: React.FC = () => {
29 | const classes = useStyles();
30 | const { formatMessage } = useIntl();
31 | const { showNotification } = useNotificationContext();
32 | const completeNewPassword = useRequireNewPassword();
33 |
34 | return (
35 |
33 | Edit src/App.tsx and save to reload.
34 |
8 |
117 |
11 |
116 |
14 |
35 |
115 |
17 |
28 |
29 | 32 | Reset your password 33 |
34 |
8 |
118 |
11 |
117 |
14 |
35 |
116 |
17 |
28 |
29 | 32 | Confirm SMS Code 33 |
34 |
8 |
128 |
11 |
127 |
14 |
35 |
126 |
17 |
28 |
29 | 32 | Confirm Sign Up 33 |
34 |
8 |
175 |
11 |
174 |
14 |
35 |
173 |
17 |
28 |
29 |