The goal of this block is to ask the user for their unique identifier (the email address). The corresponding screen will thus be shown at the beginning of a login.

When the screen for this block is rendered, conditional UI will be started. If the user has a passkey available he can log in without typing his identifier. It that’s not the case he has to provide the email address to the block through an input field.

​
Available block data

Stores login initialization details like loginIdentifier, loginIdentifierError, emailEnabled, phoneEnabled, usernameEnabled, and primaryLoading.

​
Available block methods

  • navigateToSignup(): Redirects users to the signup screen.
  • submitLogin({required String loginIdentifier, bool isPhone = false}) async: Sends the login identifier for authentication.

​
Implementation Steps

1

Create Login Screen

Create a new screen that implements the LoginInitBlock interface. This screen will serve as the entry point for the login process.

lib/screens/login_init.dart
class LoginInitScreen extends HookWidget implements CorbadoScreen<LoginInitBlock> {
  final LoginInitBlock block;
 
  LoginInitScreen(this.block);
2

Set Up Email Controller

Initialize a text controller for the email input field, pre-populated with any existing login identifier from the block data.

lib/screens/login_init.dart
final emailController = useTextEditingController(text: block.data.loginIdentifier);
3

Create Email Input Field

Implement a text field for email input with proper autofill hints and styling. This field will capture the user’s email address.

lib/screens/login_init.dart
TextField(
  controller: emailController,
  autofillHints: [_getAutofillHint()],
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Email address',
  ),
),
4

Add Navigation and Action Buttons

Implement the signup navigation button and login submission button with proper loading states and error handling.

OutlinedTextButton(
  onTap: block.navigateToSignup,
  content: 'Create a new account',
),
For a complete implementation example, see the LoginInitScreen implementation on GitHub.