danoshi
commented
6 months ago 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>
);
cwomack
israx
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
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