Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit 9ff528f

Browse files
justonianjustonian
committed
Refined module 1 guide
1 parent 1f85d9f commit 9ff528f

File tree

2 files changed

+90
-75
lines changed

2 files changed

+90
-75
lines changed

‎Auth/1_UserAuthentication/README.md

Lines changed: 90 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,9 @@ You will need to create a Cognito Identity Pool linked to the Cognito User Pool
160160

161161
1. Choose **Allow** to allow Cognito Identity Pools to setup IAM roles for your application's users. Permissions and settings of these roles can be customized later.
162162

163-
1. Copy/paste the *Identity Pool ID*, highlighted in red within the code sample in the Get AWS Credentials section, into your Cloud9 scatchpad editor tab. Make sure not to copy the quotation marks, but include the region code and ":" character!
163+
1. Copy/paste the *Identity Pool ID*, highlighted in red within the code sample in the Get AWS Credentials section, into your Cloud9 scatchpad editor tab.
164+
165+
> Do not copy the quotation marks, but include the region code and ":" character.
164166

165167
![Copy Identity Pool Id to Cloud9 scratchpad](../images/cognito-identitypool-copyId.png)
166168
@@ -193,7 +195,7 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
193195

194196
> Be sure to fill in the **'' blanks** with your config values. You do not need to modify the example values shown in the comments as they are just for reference and not leveraged by your application.
195197

196-
1. Be sure to **save your changes** to the config file so your new Amplify settings take effect. Any unsaved changes to a file are indicated by a dot icon in the tab of the editor so if you see a gray dot next to the file name, you may have forgotten to save.
198+
1. **Save your changes** to the Amplify config file so your new settings take effect. Any unsaved changes to a file are indicated by a dot icon in the tab of the editor so if you see a gray dot next to the file name, you may have forgotten to save.
197199

198200
1. Next, edit the *website/src/index.js* file to add the following lines to the **top of the file** **(but below all the other imports)** to configure Amplify then save your changes:
199201

@@ -203,6 +205,12 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
203205
204206
Amplify.configure(awsConfig);
205207
```
208+
209+
> After making this changes, your imports should be in the following order:
210+
211+
![Amplify imports order](../images/amplify-imports-order.png)
212+
213+
1. **Save your changes** to the *website/src/index.js* file.
206214

207215
1. Next, we need to ensure our application evaluates the user's authenticated state. In the same */website/src/index.js* file, find and replace the **isAuthenticated method** with the code below to use our Amplify library's built-in user session to check this status.
208216

@@ -212,7 +220,7 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
212220
213221
1. **Save your changes** to the */website/src/index.js* file.
214222

215-
1. Now that we've imported the Amplify and configured the Amplify library, we need to update our application's code to sign-up users using Amplify and Cognito User Pools by finding and replacing the following methods within the */website/src/auth/SignUp.js* file with the code below **then save your changes**.
223+
1. Now that we've imported the Amplify and configured the Amplify library, we need to update our application's code to sign-up users using Amplify and Cognito User Pools by finding and replacing the following methods within the */website/src/auth/SignUp.js* file with the following code.
216224

217225
> You only need to replace these two methods. The rest of the SignUp.js file should not be modified.
218226
@@ -222,22 +230,26 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
222230

223231
```
224232
async onSubmitForm(e) {
225-
e.preventDefault();
226-
try {
227-
const params = {
228-
username: this.state.email.replace(/[@.]/g, '|'),
229-
password: this.state.password,
230-
attributes: {
231-
email: this.state.email,
232-
phone_number: this.state.phone
233-
},
234-
validationData: []
235-
};
236-
const data = await Auth.signUp(params);
237-
console.log(data);
238-
this.setState({ stage: 1 });
239-
} catch (err) {
240-
if (err.message === "User already exists") {
233+
e.preventDefault();
234+
try {
235+
const params = {
236+
username: this.state.email.replace(/[@.]/g, '|'),
237+
password: this.state.password,
238+
attributes: {
239+
email: this.state.email,
240+
phone_number: this.state.phone
241+
},
242+
validationData: []
243+
};
244+
const data = await Auth.signUp(params);
245+
console.log(data);
246+
this.setState({ stage: 1 });
247+
} catch (err) {
248+
if (err === "No userPool") {
249+
// User pool not defined in Amplify config file
250+
console.error("User Pool not defined");
251+
alert("User Pool not defined. Amplify config must be updated with user pool config");
252+
} else if (err.message === "User already exists") {
241253
// Setting state to allow user to proceed to enter verification code
242254
this.setState({ stage: 1 });
243255
} else {
@@ -246,27 +258,29 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
246258
console.error("Exception from Auth.signUp: ", err);
247259
this.setState({ stage: 0, email: '', password: '', confirm: '' });
248260
}
249-
}
261+
}
250262
}
251263
252264
async onSubmitVerification(e) {
253265
e.preventDefault();
254266
try {
255-
const data = await Auth.confirmSignUp(
256-
this.state.email.replace(/[@.]/g, '|'),
257-
this.state.code
258-
);
259-
console.log(data);
260-
// Go to the sign in page
261-
this.props.history.replace('/signin');
267+
const data = await Auth.confirmSignUp(
268+
this.state.email.replace(/[@.]/g, '|'),
269+
this.state.code
270+
);
271+
console.log(data);
272+
// Go to the sign in page
273+
this.props.history.replace('/signin');
262274
} catch (err) {
263-
alert(err.message);
264-
console.error("Exception from Auth.confirmSignUp: ", err);
275+
alert(err.message);
276+
console.error("Exception from Auth.confirmSignUp: ", err);
265277
}
266278
}
267279
```
280+
281+
1. **Save your changes** to the */website/src/auth/SignUp.js* file.
268282

269-
1. You additionally need to integrate the sign-in capability to use AWS Amplify and Cognito by finding and replacing the following methods within the */website/src/auth/SignIn.js* file with the code below **then save your changes**.
283+
1. You additionally need to integrate the sign-in capability to use AWS Amplify and Cognito by finding and replacing the following methods within the */website/src/auth/SignIn.js* file with the code below.
270284

271285
> You only need to replace these two methods. The rest of the SignIn.js file should not be modified.
272286
@@ -275,52 +289,53 @@ You'll need to complete the implementation of the onSubmitForm and onSubmitVerif
275289
> The onSubmitVerification method is used to submit a verification code whenever multi-factor authentication is required to authenticate. For this workshop, this method will not be invoked since you did not require multi-factor authentication earlier when configuring your Cognito User Pool.
276290

277291
```
278-
async onSubmitForm(e) {
279-
e.preventDefault();
280-
try {
281-
const userObject = await Auth.signIn(
282-
this.state.email.replace(/[@.]/g, '|'),
283-
this.state.password
284-
);
285-
console.log('userObject', userObject);
286-
if (userObject.challengeName) {
287-
// Auth challenges are pending prior to token issuance
288-
this.setState({ userObject, stage: 1 });
289-
} else {
290-
// No remaining auth challenges need to be satisfied
291-
const session = await Auth.currentSession();
292-
// console.log('Cognito User Access Token:', session.getAccessToken().getJwtToken());
293-
console.log('Cognito User Identity Token:', session.getIdToken().getJwtToken());
294-
// console.log('Cognito User Refresh Token', session.getRefreshToken().getToken());
295-
this.setState({ stage: 0, email: '', password: '', code: '' });
296-
this.props.history.replace('/app');
297-
}
298-
} catch (err) {
299-
alert(err.message);
300-
console.error('Auth.signIn(): ', err);
301-
}
302-
}
303-
304-
async onSubmitVerification(e) {
305-
e.preventDefault();
306-
try {
307-
const data = await Auth.confirmSignIn(
308-
this.state.userObject,
309-
this.state.code
310-
);
311-
console.log('Cognito User Data:', data);
312-
const session = await Auth.currentSession();
313-
// console.log('Cognito User Access Token:', session.getAccessToken().getJwtToken());
314-
console.log('Cognito User Identity Token:', session.getIdToken().getJwtToken());
315-
// console.log('Cognito User Refresh Token', session.getRefreshToken().getToken());
316-
this.setState({ stage: 0, email: '', password: '', code: '' });
317-
this.props.history.replace('/app');
318-
} catch (err) {
319-
alert(err.message);
320-
console.error('Auth.confirmSignIn(): ', err);
321-
}
322-
}
292+
async onSubmitForm(e) {
293+
e.preventDefault();
294+
try {
295+
const userObject = await Auth.signIn(
296+
this.state.email.replace(/[@.]/g, '|'),
297+
this.state.password
298+
);
299+
console.log('userObject', userObject);
300+
if (userObject.challengeName) {
301+
// Auth challenges are pending prior to token issuance
302+
this.setState({ userObject, stage: 1 });
303+
} else {
304+
// No remaining auth challenges need to be satisfied
305+
const session = await Auth.currentSession();
306+
// console.log('Cognito User Access Token:', session.getAccessToken().getJwtToken());
307+
console.log('Cognito User Identity Token:', session.getIdToken().getJwtToken());
308+
// console.log('Cognito User Refresh Token', session.getRefreshToken().getToken());
309+
this.setState({ stage: 0, email: '', password: '', code: '' });
310+
this.props.history.replace('/app');
311+
}
312+
} catch (err) {
313+
alert(err.message);
314+
console.error('Auth.signIn(): ', err);
315+
}
316+
}
317+
318+
async onSubmitVerification(e) {
319+
e.preventDefault();
320+
try {
321+
const data = await Auth.confirmSignIn(
322+
this.state.userObject,
323+
this.state.code
324+
);
325+
console.log('Cognito User Data:', data);
326+
const session = await Auth.currentSession();
327+
// console.log('Cognito User Access Token:', session.getAccessToken().getJwtToken());
328+
console.log('Cognito User Identity Token:', session.getIdToken().getJwtToken());
329+
// console.log('Cognito User Refresh Token', session.getRefreshToken().getToken());
330+
this.setState({ stage: 0, email: '', password: '', code: '' });
331+
this.props.history.replace('/app');
332+
} catch (err) {
333+
alert(err.message);
334+
console.error('Auth.confirmSignIn(): ', err);
335+
}
336+
}
323337
```
338+
1. **Save your changes** to the */website/src/auth/SignIn.js* file.
324339

325340
</p></details>
326341

‎Auth/images/amplify-imports-order.png

111 KB
Loading

0 commit comments

Comments
 (0)