Gen2: Setup of MFA is not working #13359
Comments
|
For completness below my HTML: return (
<main className="flex min-h-screen flex-col p-6">
{/* ... Image and other code remains the same */}
<div className="flex justify-center flex-col gap-4 pt-20 md:pt-0 md:flex-row">
<Button onClick={handleSignOut}> Sign Out</Button>
{!showChangePassword && !showMFASetup && !showMFAVerify && (
<form onSubmit={handleSignIn}>
<Label htmlFor="email">Email</Label>
<Input
className="mt-2 mb-4 bg-transparent rounded-full "
type="username"
id="username"
placeholder="Email"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Label htmlFor="password">Password</Label>
<Input
className="mt-2 mb-4 bg-transparent rounded-full "
type="password"
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" className="w-full mt-6 rounded-full ">
Login
</Button>
{error && <p className="text-red-500">{error}</p>}
</form>
)}
{showChangePassword && (
<form onSubmit={handleSignIn}>
<Input
className="mt-2 mb-4 bg-transparent rounded-full "
type="password"
placeholder="New Password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
/>
<Input
className="mt-2 mb-4 bg-transparent rounded-full "
type="password"
placeholder="Confirm New Password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<Button type="submit" className="w-full mt-6 rounded-full ">
Change Password
</Button>
</form>
)}
{showMFASetup && (
<form onSubmit={handleSignIn}>
{/* ... MFA setup form (provide instructions and input for MFA code) */}
<p>Please scan the QR code with your MFA app.</p>
{/* The code which is generated (display as QR code or clickable link) */}
<Canvas
text={setupUri}
options={{
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
{/* Input for the MFA code from the user */}
<Input
className="mt-2 mb-4 bg-transparent rounded-full"
type="text"
placeholder="Enter OTP code"
value={otpCode}
onChange={(e) => setOtpCode(e.target.value)}
/>
<Button type="submit" className="w-full mt-6 rounded-full">
Confirm MFA
</Button>
</form>
)}
{showMFAVerify && (
<form onSubmit={handleSignIn}>
{/* ... MFA verification form (input for MFA code) */}
<Input
className="mt-2 mb-4 bg-transparent rounded-full"
type="text"
placeholder="Enter OTP code"
value={otpCode}
onChange={(e) => setOtpCode(e.target.value)}
/>
<Button type="submit" className="w-full mt-6 rounded-full">
Submit
</Button>
</form>
)}
</div>
</main>
); |
|
@danoshi, can you clarify what application you're using for your QR code? The code mismatch error is usually due to there being a "off by one" scenario due to API's running 2x, but want to understand how you've set up Auth better to diagnose this. |
cwomack
added
question
|
I actually scanned the QR code in my google authenticator app. Here is how I set it up: import { useQRCode } from 'next-qrcode';
const { Canvas } = useQRCode();
<Canvas
text={setupUri} // the url from the object
options={{
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/> |
github-actions
bot
removed
the
pending-response
|
@danoshi, can you confirm if you're getting the secrets back from Cognito when making your Authentication calls? Are you able to use the third party Authenticator app to manually input the code rather than using the QR code? |
cwomack
added
the
pending-response
|
Hi, as you can see below I can confirm that I get the secret back and yes I tried to scan the code without success, as well as manuelly input it into the google authenticator app but this as well without success.
|
github-actions
bot
removed
the
pending-response
|
Is there any update? @cwomack |
|
hello @danoshi . Sorry for any inconvenience using the library. Can you share the request payload after calling |
|
also how is your app retrieving this otp code ? |
|
Here is the payload Request URL: As you can see in the code which I provided above I have an input field where I add the insert the mfa code and with a button I submit it else if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_TOTP_SETUP') {
setShowMFASetup(true);
const totpSetupDetails = nextStep.totpSetupDetails;
const appName = 'my_app_name';
const setupUri = totpSetupDetails.getSetupUri(appName);
console.log(setupUri);
setsetupUri(setupUri.href);
const challengeResponse = otpCode;
const result = await confirmSignIn({
challengeResponse,
});
console.log(result); <form onSubmit={handleSignIn}>
{/* ... MFA setup form (provide instructions and input for MFA code) */}
<p>Please scan the QR code with your MFA app.</p>
{/* The code which is generated (display as QR code or clickable link) */}
<Canvas
text={setupUri}
options={{
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
{/* Input for the MFA code from the user */}
<Input
className="mt-2 mb-4 bg-transparent rounded-full"
type="text"
placeholder="Enter the mfa"
value={otpCode}
onChange={(e) => setMfaCode(e.target.value)}
/>
<Button type="submit" className="w-full mt-6 rounded-full">
Confirm MFA
</Button>
</form>Please let me know if I can provide more details to have it sorted out as soon as possible @israx @cwomack |
|
I think the issue is that calling Can you separate the call of The flow should be something like: receive |
|
Thanks to your suggestions, the code works now @israx @cwomack ! I have two related questions:
|
Before opening, please confirm:
JavaScript Framework
Next.js
Amplify APIs
Authentication
Amplify Version
v6
Amplify Categories
auth
Backend
Amplify CLI
Environment information
Describe the bug
My current use case is as follows: I manually create users in the Cognito pool, so I only use the signIn function. When a user receives their credentials via email, they will go to the page and attempt to log in for the first time. After the first login, they will be redirected to the change password page because it is mandatory. I receive the flag "CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED", and the password change works fine when executing the following two lines.
Now, my user has the following flag: 'CONTINUE_SIGN_IN_WITH_TOTP_SETUP'. What is currently happening is that I create the QR code with the URL, scan it with my phone, but when I enter the code and submit it, I receive a 'Code Mismatch' error in the console.
Here is the code
I logged the setupUri object and what I see is that the username field is empty. So, my assumption is that it couldn't bind the MFA code with the user.
Here is the output of the log:
Here as well, the output after the successful challenge response when I changed the password:
Expected behavior
The MFA token matches, and the user successfully finishes the setup process.
Reproduction steps
In the describe the bug section I entered the code snippets.
Code Snippet
Log output
aws-exports.js
{ "auth": { "user_pool_id": "user-pool-id-xxx", "aws_region": "region-xxxx", "user_pool_client_id": "clientid-xxxxx", "identity_pool_id": "identity-pool-xxxx", "mfa_methods": [ "TOTP" ], "standard_required_attributes": [ "email" ], "username_attributes": [ "email" ], "user_verification_types": [ "email" ], "mfa_configuration": "ON", "password_policy": { "min_length": 8, "require_numbers": true, "require_lowercase": true, "require_uppercase": true, "require_symbols": true }, "unauthenticated_identities_enabled": true }, "data": { "url": "https://some-url/graphql", "aws_region": "eu-central-1", "default_authorization_type": "AWS_IAM", "authorization_types": [ "AMAZON_COGNITO_USER_POOLS" ], "model_introspection": { "version": 1, "models": { "Todo": { "name": "Todo", "fields": { "id": { "name": "id", "isArray": false, "type": "ID", "isRequired": true, "attributes": [] }, "content": { "name": "content", "isArray": false, "type": "String", "isRequired": false, "attributes": [] }, "createdAt": { "name": "createdAt", "isArray": false, "type": "AWSDateTime", "isRequired": false, "attributes": [], "isReadOnly": true }, "updatedAt": { "name": "updatedAt", "isArray": false, "type": "AWSDateTime", "isRequired": false, "attributes": [], "isReadOnly": true } }, "syncable": true, "pluralName": "Todos", "attributes": [ { "type": "model", "properties": {} }, { "type": "auth", "properties": { "rules": [ { "allow": "public", "provider": "iam", "operations": [ "create", "update", "delete", "read" ] } ] } } ], "primaryKeyInfo": { "isCustomPrimaryKey": false, "primaryKeyFieldName": "id", "sortKeyFieldNames": [] } } }, "enums": {}, "nonModels": {} } }, "version": "1" }Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
The text was updated successfully, but these errors were encountered: