Email Authentication

The Dynamic Flutter SDK provides email authentication using OTP (One-Time Password) verification. Users can sign in by receiving a verification code sent to their email address.

Email Authentication Flow

Email authentication must be enabled in your environment’s dashboard settings before it can be used in your application.

Send Email OTP

Send a verification code to the user’s email address:

OutlinedButton(
  onPressed: () async {
    await DynamicSDK.instance.auth.email.sendOTP("[email protected]");
  },
  child: const Text('Send Email Code'),
)

Verify Email OTP

Verify the OTP code entered by the user:

OutlinedButton(
  onPressed: () async {
    await DynamicSDK.instance.auth.email.verifyOTP("123456");
  },
  child: const Text('Verify Code'),
)

Resend Email OTP

Allow users to request a new OTP code if the previous one expired or wasn’t received:

OutlinedButton(
  onPressed: () async {
    await DynamicSDK.instance.auth.email.resendOTP();
  },
  child: const Text('Resend Code'),
)

Complete Authentication Flow

Here’s a complete example of the email authentication flow:

class EmailAuthScreen extends StatefulWidget {
  @override
  _EmailAuthScreenState createState() => _EmailAuthScreenState();
}

class _EmailAuthScreenState extends State<EmailAuthScreen> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _otpController = TextEditingController();
  bool _otpSent = false;

  Future<void> _sendOTP() async {
    try {
      await DynamicSDK.instance.auth.email.sendOTP(_emailController.text);
      setState(() {
        _otpSent = true;
      });
    } catch (e) {
      // Handle error
      print('Error sending OTP: $e');
    }
  }

  Future<void> _verifyOTP() async {
    try {
      await DynamicSDK.instance.auth.email.verifyOTP(_otpController.text);
      // User is now authenticated
      Navigator.pushReplacementNamed(context, '/home');
    } catch (e) {
      // Handle error
      print('Error verifying OTP: $e');
    }
  }

  Future<void> _resendOTP() async {
    try {
      await DynamicSDK.instance.auth.email.resendOTP();
      // Show success message
    } catch (e) {
      // Handle error
      print('Error resending OTP: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Email Authentication')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            if (!_otpSent) ...[
              TextField(
                controller: _emailController,
                decoration: InputDecoration(
                  labelText: 'Email Address',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: _sendOTP,
                child: Text('Send Verification Code'),
              ),
            ] else ...[
              Text('Enter the verification code sent to ${_emailController.text}'),
              SizedBox(height: 16),
              TextField(
                controller: _otpController,
                decoration: InputDecoration(
                  labelText: 'Verification Code',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                maxLength: 6,
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: _verifyOTP,
                child: Text('Verify Code'),
              ),
              SizedBox(height: 8),
              TextButton(
                onPressed: _resendOTP,
                child: Text('Resend Code'),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

## Configuration

### Dashboard Settings

Configure email authentication in your Dynamic dashboard:

1. **Enable Email Authentication**:
   - Go to [Log in and User Profile](https://app.dynamic.xyz/dashboard/log-in-user-profile)
   - Toggle "Email" on to enable email authentication
   - That's it! No additional configuration is required


You can read more about the email authentication module [here](/flutter/package-references/client#auth-email-submodule).

Flutter