Skip to content

Commit 014b305

Browse files
committed
add passwordless steps to multistep sign in page
1 parent cadb0cb commit 014b305

File tree

1 file changed

+87
-0
lines changed
  • src/pages/[platform]/build-a-backend/auth/connect-your-frontend/multi-step-sign-in

1 file changed

+87
-0
lines changed

src/pages/[platform]/build-a-backend/auth/connect-your-frontend/multi-step-sign-in/index.mdx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,21 @@ if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_TOTP_SETUP') {
8080
});
8181
}
8282

83+
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_PASSWORD') {
84+
// collect password from user
85+
await confirmSignIn({
86+
challengeResponse: 'hunter2',
87+
});
88+
}
89+
90+
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION') {
91+
// present nextStep.availableChallenges to user
92+
// collect user selection
93+
await confirmSignIn({
94+
challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP'
95+
});
96+
}
97+
8398
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE') {
8499
// collect custom challenge answer from user
85100
await confirmSignIn({
@@ -361,6 +376,78 @@ async function handleMfaSelection(mfaType: MfaType) {
361376

362377
```
363378

379+
## Confirm sign-in with Password
380+
381+
If the next step is `CONFIRM_SIGN_IN_WITH_PASSWORD`, the user must provide their password as the first factor authentication method. To handle this step, your implementation should prompt the user to enter their password. After the user enters the password, pass the value to the `confirmSignIn` API.
382+
383+
```ts
384+
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
385+
386+
async function handleSignInResult(result: SignInOutput) {
387+
switch (result.nextStep.signInStep) {
388+
case 'CONFIRM_SIGN_IN_WITH_PASSWORD': {
389+
// Prompt user to enter their password
390+
console.log(`Please enter your password.`);
391+
break;
392+
}
393+
}
394+
}
395+
396+
async function confirmWithPassword(password: string) {
397+
const result = await confirmSignIn({ challengeResponse: password });
398+
399+
return handleSignInResult(result);
400+
}
401+
```
402+
403+
## Continue sign-in with First Factor Selection
404+
405+
If the next step is `CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION`,the user must select a first factor method for authentication. After the user selects an option, your implementation should pass the selected method to the `confirmSignIn` API.
406+
407+
The first factor types which are currently supported by Amplify Auth are:
408+
- `SMS_OTP`
409+
- `EMAIL_OTP`
410+
- `WEB_AUTHN`
411+
- `PASSWORD`
412+
- `PASSWORD_SRP`
413+
414+
Depending on your configuration and what factors the user has previously setup, not all options may be available. Only the available options will be presented in `availableChallenges` for selection.
415+
416+
Once Amplify receives the users selection, you can expect to handle a follow up `nextStep` corresponding with the selected factor type:
417+
418+
- If `SMS_OTP` is selected, you can expect to receive `CONFIRM_SIGN_IN_WITH_SMS_CODE` as the next step.
419+
- If `EMAIL_OTP` is selected, you can expect to receive `CONFIRM_SIGN_IN_WITH_EMAIL_CODE` as the next step.
420+
- If `WEB_AUTHN` is selected, Amplify will initiate the authentication ceremony on the user's device. If successful, the next step will be `DONE`.
421+
- If `PASSWORD` or `PASSWORD_SRP` is selected, `CONFIRM_SIGN_IN_WITH_PASSWORD` will be the next step.
422+
423+
```ts
424+
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
425+
426+
async function handleSignInResult(result: SignInOutput) {
427+
switch (result.nextStep.signInStep) {
428+
case 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION': {
429+
const { availableChallenges } = result.nextStep;
430+
// Present available first factor options to user
431+
// Prompt for selection
432+
console.log(
433+
`There are multiple first factor options available for sign in.`,
434+
);
435+
console.log(
436+
`Select a first factor type from the availableChallenges list.`,
437+
);
438+
break;
439+
}
440+
}
441+
}
442+
443+
async function handleFirstFactorSelection(firstFactorType: string) {
444+
const result = await confirmSignIn({ challengeResponse: firstFactorType });
445+
446+
return handleSignInResult(result);
447+
}
448+
449+
```
450+
364451
## Confirm sign-in with custom challenge
365452

366453
If the next step is `CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE`, Amplify Auth is awaiting completion of a custom authentication challenge. The challenge is based on the AWS Lambda trigger you configured as part of a custom sign in flow.

0 commit comments

Comments
 (0)