The corresponding screens will thus be shown during a signup (e.g. if passkeys are not supported or if you have configured your Corbado project to verify each email address during signup) or during a login (if no passkey has been used).

  • 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 like email, 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
class EmailVerifyOtpScreen extends HookWidget implements CorbadoScreen<EmailVerifyBlock> {
  final EmailVerifyBlock block;

  EmailVerifyOtpScreen(this.block);
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
final otpController = useTextEditingController();
3

Create OTP Input Field

Implement a text field for OTP input with proper styling and placeholder text.

lib/screens/email_verify_otp.dart
TextField(
  controller: otpController,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'XXXXXX',
  ),
),
4

Add Action Buttons

Implement buttons for submitting the OTP code, resending the email, and changing the email address.

FilledTextButton(
  isLoading: block.data.primaryLoading,
  onTap: () async {
    await block.submitOtpCode(otpController.text);
  },
  content: 'Submit',
),
5

Create Email Edit Screen

Create a separate screen for editing the email address if needed.

lib/screens/email_edit.dart
class EmailEditScreen extends HookWidget implements CorbadoScreen<EmailVerifyBlock> {
  final EmailVerifyBlock block;

  EmailEditScreen(this.block);
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
final emailController = useTextEditingController(text: email);
7

Create Email Edit Field

Implement a text field for email input with proper styling.

lib/screens/email_edit.dart
TextField(
  controller: emailController,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Email address',
  ),
),
8

Add Email Edit Actions

Implement buttons for submitting the updated email and canceling the edit.

FilledTextButton(
  isLoading: block.data.primaryLoading,
  onTap: () async {
    await block.updateEmail(emailController.text);
  },
  content: 'Edit email',
),
For a complete implementation example, see the EmailVerifyScreen implementation on GitHub and EmailEditScreen implementation on GitHub.