- When the screen for this block is rendered, Corbado has already sent out an email to the user containing a 6-digit code. The user should provide this code through the screen.
- It allows to enter the code multiple time in case of error or to resend the email (after 30s have passed).
- It allows the user to change the email address in case he typed in the wrong email.
Available block data
Stores email verification details likeemail
, verificationMethod
, retryNotBefore
, isPostLoginVerification
, and primaryLoading
.
Available block methods
navigateToEditEmail()
: Redirects users to the email edit screen.navigateToVerifyEmail()
: Redirects users to the email verify screen.submitOtpCode(String otpCode) async
: Submits the OTP for verification.resendEmail() async
: Resends the email verification code.updateEmail(String newValue) async
: Updates the email if needed.
Implementation Steps
1
Create Email Verification Screen
Create a new screen that implements the
EmailVerifyBlock
interface. This screen will handle the OTP verification process.lib/screens/email_verify_otp.dart
2
Set Up OTP Controller
Initialize a text controller for the OTP input field to capture the verification code.
lib/screens/email_verify_otp.dart
3
Create OTP Input Field
Implement a text field for OTP input with proper styling and placeholder text.
lib/screens/email_verify_otp.dart
4
Add Action Buttons
Implement buttons for submitting the OTP code, resending the email, and changing the email address.
5
Create Email Edit Screen
Create a separate screen for editing the email address if needed.
lib/screens/email_edit.dart
6
Set Up Email Edit Controller
Initialize a text controller for the email input field, pre-populated with the current email.
lib/screens/email_edit.dart
7
Create Email Edit Field
Implement a text field for email input with proper styling.
lib/screens/email_edit.dart
8
Add Email Edit Actions
Implement buttons for submitting the updated email and canceling the edit.
For a complete implementation example, see the EmailVerifyScreen implementation on GitHub and EmailEditScreen implementation on GitHub.