Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(js): more passwordless sign in examples #8135

Merged
merged 3 commits into from
Nov 27, 2024
Merged

docs(js): more passwordless sign in examples #8135

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38d12ea
more sign in examples
jjarvisp Nov 27, 2024
eb5a851
Apply suggestions from code review
jjarvisp Nov 27, 2024
2056168
fix typo
jjarvisp Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 82 additions & 29 deletions src/pages/[platform]/build-a-backend/auth/connect-your-frontend/sign-in/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1120,17 +1120,28 @@ Your application's users can also sign in using passwordless methods. To learn m

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

To request an OTP code via SMS for authentication, the challenge is passed as the challenge response to the confirm sign in API.
Pass `SMS_OTP` as the `preferredChallenge` when calling the `signIn` API in order to initiate a passwordless authentication flow with SMS OTP.

Amplify will respond appropriately to Cognito and return the challenge as sign in next step: `CONFIRM_SIGN_IN_WITH_SMS_CODE`:

```ts
const { nextStep } = await confirmSignIn({
challengeResponse: "SMS_OTP"
const { nextStep: signInNextStep } = await signIn({
username: '+15551234567',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'SMS_OTP',
},
});

// nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_SMS_CODE'
handleNextSignInStep(nextStep);
if (signInNextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_SMS_CODE') {
// prompt user for otp code delivered via SMS
const { nextStep: confirmSignInNextStep } = await confirmSignIn({
challengeResponse: '123456',
});

if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
}
```

</InlineFilter>
Expand Down Expand Up @@ -1223,17 +1234,27 @@ func confirmSignIn() -> AnyCancellable {

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

To request an OTP code via email for authentication, the challenge is passed as the challenge response to the confirm sign in API.

Amplify will respond appropriately to Cognito and return the challenge as sign in next step: `CONFIRM_SIGN_IN_WITH_EMAIL_CODE`:
Pass `EMAIL_OTP` as the `preferredChallenge` when calling the `signIn` API in order to initiate a passwordless authentication flow using email OTP.

```ts
const { nextStep } = await confirmSignIn({
challengeResponse: "EMAIL_OTP"
const { nextStep: signInNextStep } = await signIn({
username: '[email protected]',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'EMAIL_OTP',
},
});

// nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE'
handleNextSignInStep(nextStep);
if (signInNextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE') {
// prompt user for otp code delivered via email
const { nextStep: confirmSignInNextStep } = await confirmSignIn({
challengeResponse: '123456',
});

if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
}
```

</InlineFilter>
Expand Down Expand Up @@ -1326,15 +1347,20 @@ func confirmSignIn() -> AnyCancellable {

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

The WebAuthn credential flow is initiated by passing the challenge name to the confirm sign in api.
Pass `WEB_AUTHN` as the `preferredChallenge` in order to initiate the passwordless authentication flow using a WebAuthn credential.

```ts
const { nextStep } = await confirmSignIn({
challengeResponse: "WEB_AUTHN",
const { nextStep: signInNextStep } = await signIn({
username: '[email protected]',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'WEB_AUTHN',
},
});

// nextStep.signInStep === 'DONE'
handleNextSignInStep(nextStep);
if (signInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
```

</InlineFilter>
Expand All @@ -1356,25 +1382,52 @@ handleNextSignInStep(nextStep);

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

### Password or SRP
### Password

Traditional password based authentication is available from this flow as well. To initiate this flow from select challenge, either `PASSWORD` or `PASSWORD_SRP` is passed as the challenge response.
Pass either `PASSWORD` or `PASSWORD_SRP` as the `preferredChallenge` in order to initiate a traditional password based authentication flow.

```ts
const { nextStep } = await confirmSignIn({
challengeResponse: "PASSWORD_SRP", // or "PASSWORD"
const { nextStep: signInNextStep } = await signIn({
username: '[email protected]',
password: 'example-password',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'PASSWORD_SRP', // or 'PASSWORD'
},
});

// in both cases
// nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_PASSWORD'
handleNextSignInStep(nextStep);
if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
```


const { nextStep: nextNextStep } = await confirmSignIn({
challengeResponse: "Test123#",
### First Factor Selection

Omit the `preferredChallenge` parameter to discover what first factors are available for a given user.

The `confirmSignIn` API can then be used to select a challenge and initiate the associated authentication flow.

```ts
const { nextStep: signInNextStep } = await signIn({
username: '+15551234567',
options: {
authFlowType: 'USER_AUTH',
},
});

// nextNextStep.signInStep === 'DONE'
handleNextSignInStep(nextNextStep);
if (
signInNextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION'
) {
// present user with list of available challenges
console.log(`Available Challenges: ${signInNextStep.availableChallenges}`);

// respond with user selection using `confirmSignIn` API
const { nextStep: nextConfirmSignInStep } = await confirmSignIn({
challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP'
});
}

```

</InlineFilter>
Expand Down