Skip to content

Commit 3d0b2aa

Browse files
committed
chore(auth): add multi step sign up information for new passwordless steps
1 parent cadb0cb commit 3d0b2aa

File tree

1 file changed

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

1 file changed

+103
-0
lines changed

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,34 @@ if (nextStep.signInStep === 'DONE') {
116116
}
117117
```
118118

119+
If using a configuration that enables passwordless authentication, you must handle these additional next step options.
120+
121+
```typescript
122+
import {
123+
confirmSignIn,
124+
signIn,
125+
} from 'aws-amplify/auth';
126+
127+
const { nextStep } = await signIn({
128+
username: '[email protected]',
129+
});
130+
131+
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_PASSWORD') {
132+
// collect password from user
133+
await confirmSignIn({
134+
challengeResponse: 'hunter2',
135+
});
136+
}
137+
138+
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION') {
139+
// present nextStep.availableChallenges to user
140+
// collect user selection
141+
await confirmSignIn({
142+
challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP'
143+
});
144+
}
145+
```
146+
119147
## Confirm sign-in with SMS MFA
120148

121149
If the next step is `CONFIRM_SIGN_IN_WITH_SMS_CODE`, Amplify Auth has sent the user a random code over SMS and is waiting for the user to verify that code. To handle this step, your app's UI must prompt the user to enter the code. After the user enters the code, pass the value to the `confirmSignIn` API.
@@ -524,6 +552,81 @@ async function handleConfirmSignUp(username: string, confirmationCode: string) {
524552

525553
Once the sign up is confirmed, call `signIn` again to restart the sign-in flow.
526554

555+
## Confirm sign-in with password
556+
557+
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 app's UI must prompt the user to enter their password. After the user enters the password, pass the value to the `confirmSignIn` API.
558+
559+
```ts
560+
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
561+
562+
async function handleSignInResult(result: SignInOutput) {
563+
switch (result.nextStep.signInStep) {
564+
case 'CONFIRM_SIGN_IN_WITH_PASSWORD': {
565+
// Prompt user to enter their password
566+
console.log(`Please enter your password.`);
567+
break;
568+
}
569+
}
570+
}
571+
572+
async function confirmWithPassword(password: string) {
573+
const result = await confirmSignIn({ challengeResponse: password });
574+
575+
return handleSignInResult(result);
576+
}
577+
```
578+
579+
## Continue sign-in with first factor selection
580+
581+
If the next step is `CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION`, the user must select the first factor method to use. Amplify Auth currently supports SMS, Email, WebAuthn passkey, and traditional password methods. After the user selects a frist factor method, your implementation must pass the selected method to Amplify Auth using the `confirmSignIn` API.
582+
583+
The first factor types which are currently supported by Amplify Auth are:
584+
585+
- `SMS_OTP`
586+
- `EMAIL_OTP`
587+
- `WEB_AUTHN`
588+
- `PASSWORD`
589+
- `PASSWORD_SRP`
590+
591+
Not all first factor types may be available based on your configuration. Only the allowed types will be presented in `availableChallenges` for selection.
592+
593+
Once Amplify receives the users selection, you can expect to handle a follow up `nextStep` corresponding with the selected factor type:
594+
595+
- If `SMS_OTP` is selected, `CONFIRM_SIGN_IN_WITH_SMS_CODE` will be the next step.
596+
- If `EMAIL_OTP` is selected, `CONFIRM_SIGN_IN_WITH_EMAIL_CODE` will be the next step.
597+
- If `WEB_AUTHN` is selected, `DONE` will be the next step.
598+
- If `PASSWORD` or `PASSWORD_SRP` is selected, `CONFIRM_SIGN_IN_WITH_PASSWORD` will be the next step.
599+
600+
```ts
601+
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
602+
603+
async function handleSignInResult(result: SignInOutput) {
604+
switch (result.nextStep.signInStep) {
605+
case 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION': {
606+
const { availableChallenges } = result.nextStep;
607+
// Present available first factor options to user
608+
// Prompt for selection
609+
console.log(`There are multiple first factor options available for sign in.`);
610+
console.log(`Select a first factor type from the availableChallenges list.`);
611+
break;
612+
}
613+
}
614+
}
615+
616+
type AuthFactorType =
617+
| 'SMS_OTP'
618+
| 'EMAIL_OTP'
619+
| 'WEB_AUTHN'
620+
| 'PASSWORD'
621+
| 'PASSWORD_SRP';
622+
623+
async function handleFirstFactorSelection(firstFactorType: AuthFactorType) {
624+
const result = await confirmSignIn({ challengeResponse: firstFactorType });
625+
626+
return handleSignInResult(result);
627+
}
628+
```
629+
527630
## Done
528631

529632
The sign-in flow is complete when the next step is `DONE`, which means the user is successfully authenticated.

0 commit comments

Comments
 (0)