-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(auth): add multi step sign up information for new passwordless …
…steps
- Loading branch information
Showing
1 changed file
with
103 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -116,6 +116,34 @@ if (nextStep.signInStep === 'DONE') { | |
} | ||
``` | ||
|
||
If using a configuration that enables passwordless authentication, you must handle these additional next step options. | ||
|
||
```typescript | ||
import { | ||
confirmSignIn, | ||
signIn, | ||
} from 'aws-amplify/auth'; | ||
|
||
const { nextStep } = await signIn({ | ||
username: '[email protected]', | ||
}); | ||
|
||
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_PASSWORD') { | ||
// collect password from user | ||
await confirmSignIn({ | ||
challengeResponse: 'hunter2', | ||
}); | ||
} | ||
|
||
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION') { | ||
// present nextStep.availableChallenges to user | ||
// collect user selection | ||
await confirmSignIn({ | ||
challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP' | ||
}); | ||
} | ||
``` | ||
|
||
## Confirm sign-in with SMS MFA | ||
|
||
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) { | |
|
||
Once the sign up is confirmed, call `signIn` again to restart the sign-in flow. | ||
|
||
## Confirm sign-in with password | ||
|
||
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. | ||
|
||
```ts | ||
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth'; | ||
|
||
async function handleSignInResult(result: SignInOutput) { | ||
switch (result.nextStep.signInStep) { | ||
case 'CONFIRM_SIGN_IN_WITH_PASSWORD': { | ||
// Prompt user to enter their password | ||
console.log(`Please enter your password.`); | ||
break; | ||
} | ||
} | ||
} | ||
|
||
async function confirmWithPassword(password: string) { | ||
const result = await confirmSignIn({ challengeResponse: password }); | ||
|
||
return handleSignInResult(result); | ||
} | ||
``` | ||
|
||
## Continue sign-in with first factor selection | ||
|
||
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. | ||
|
||
The first factor types which are currently supported by Amplify Auth are: | ||
|
||
- `SMS_OTP` | ||
- `EMAIL_OTP` | ||
- `WEB_AUTHN` | ||
- `PASSWORD` | ||
- `PASSWORD_SRP` | ||
|
||
Not all first factor types may be available based on your configuration. Only the allowed types will be presented in `availableChallenges` for selection. | ||
|
||
Once Amplify receives the users selection, you can expect to handle a follow up `nextStep` corresponding with the selected factor type: | ||
|
||
- If `SMS_OTP` is selected, `CONFIRM_SIGN_IN_WITH_SMS_CODE` will be the next step. | ||
- If `EMAIL_OTP` is selected, `CONFIRM_SIGN_IN_WITH_EMAIL_CODE` will be the next step. | ||
- If `WEB_AUTHN` is selected, `DONE` will be the next step. | ||
- If `PASSWORD` or `PASSWORD_SRP` is selected, `CONFIRM_SIGN_IN_WITH_PASSWORD` will be the next step. | ||
|
||
```ts | ||
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth'; | ||
|
||
async function handleSignInResult(result: SignInOutput) { | ||
switch (result.nextStep.signInStep) { | ||
case 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION': { | ||
const { availableChallenges } = result.nextStep; | ||
// Present available first factor options to user | ||
// Prompt for selection | ||
console.log(`There are multiple first factor options available for sign in.`); | ||
console.log(`Select a first factor type from the availableChallenges list.`); | ||
break; | ||
} | ||
} | ||
} | ||
|
||
type AuthFactorType = | ||
| 'SMS_OTP' | ||
| 'EMAIL_OTP' | ||
| 'WEB_AUTHN' | ||
| 'PASSWORD' | ||
| 'PASSWORD_SRP'; | ||
|
||
async function handleFirstFactorSelection(firstFactorType: AuthFactorType) { | ||
const result = await confirmSignIn({ challengeResponse: firstFactorType }); | ||
|
||
return handleSignInResult(result); | ||
} | ||
``` | ||
|
||
## Done | ||
|
||
The sign-in flow is complete when the next step is `DONE`, which means the user is successfully authenticated. | ||
|