Skip to content

Commit

Permalink
chore(auth): add multi step sign up information for new passwordless …
Browse files Browse the repository at this point in the history
…steps
  • Loading branch information
scanlonp committed Nov 27, 2024
1 parent cadb0cb commit 3d0b2aa
Showing 1 changed file with 103 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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: 'hello@mycompany.com',
});

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.
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 3d0b2aa

Please sign in to comment.