rohit-chouhan/email_otp

Email OTP is a Flutter package designed to simplify email authentication using one-time passwords (OTPs). With Email OTP, you can effortlessly generate OTPs and send them to users' email addresses, ensuring secure identity verification. This package offers an efficient and secure method for incorporating email-based OTP authentication into your Flutter applications.

Email OTP Banner

GitHub Sponsor

Table of Contents

• Configuration
  • Advanced Configuration
• SMTP (Optional)
• Template (Optional)
• Sending OTP
• Verifying OTP
• Get OTP
• OTP Expiry Validation
• Example
• Report bugs or issues
• Contributors

Configuration

The simplest way to 🛠️ configure the EmailOTP package is by calling the config method.

void main() {
  EmailOTP.config(
    appName: 'MyApp',
    otpType: OTPType.numeric,
    emailTheme: EmailTheme.v1,
  );
}

SMTP Configuration (Required)

⚠️ IMPORTANT: As of version 3.1.0, this package no longer uses a default server. You MUST configure your own SMTP server to send emails.

  EmailOTP.setSMTP(
    host: 'smtp.gmail.com',
    emailPort: EmailPort.port587,
    secureType: SecureType.tls,
    username: 'your-email@gmail.com',
    password: 'your-app-password',
  );

Note: For Gmail, use an App Password if 2-Step Verification is enabled.

Advanced Configuration

For more control over the OTP generation and email settings, you can pass various parameters to the config method.

void main() {
  EmailOTP.config(
    appName: 'App Name',
    otpType: OTPType.numeric,
    expiry : 30000,
    emailTheme: EmailTheme.v6,
    appEmail: 'me@rohitchouhan.com',
    otpLength: 6,
    headers: {
      'Reply-To': 'support@rohitchouhan.com'
    }
  );
}

Parameters

1. host: The hostname of your SMTP server.
2. emailPort: The port number used by the SMTP server. Supported values include:
   • EmailPort.port25
   • EmailPort.port465
   • EmailPort.port587
   • EmailPort.port1025 (For MailHog/Local Testing)
3. secureType: The type of security used by the SMTP server. Supported values include:
   • SecureType.none
   • SecureType.tls
   • SecureType.ssl
4. username: The username for your SMTP server account.
5. password: The password for your SMTP server account.

By configuring these parameters, you can ensure that your application is able to send OTP emails securely and efficiently.

Themes

Theme	Theme Preview
EmailTheme.v1	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v1.png
EmailTheme.v2	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v2.png
EmailTheme.v3	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v3.png
EmailTheme.v4	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v4.png
EmailTheme.v5	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v5.png
EmailTheme.v6	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v6.png
EmailTheme.v7	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v7.png
EmailTheme.v8	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v8.png
EmailTheme.v9	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v9.png
EmailTheme.v10	https://cdn.jsdelivr.net/gh/rohit-chouhan/email_otp@main/themes/v10.png

Template (Optional)

You can also customize the email 🌐 template used to send the OTP. Use the setTemplate method to provide your own HTML template.

void main() {
  EmailOTP.config();
  EmailOTP.setTemplate(
    template: '''
    <div style="background-color: #f4f4f4; padding: 20px; font-family: Arial, sans-serif;">
      <div style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
        <h1 style="color: #333;">{{appName}}</h1>
        <p style="color: #333;">Your OTP is <strong>{{otp}}</strong></p>
        <p style="color: #333;">This OTP is valid for 5 minutes.</p>
        <p style="color: #333;">Thank you for using our service.</p>
      </div>
    </div>
    ''',
  );
}

Parameters

• template: A string containing the HTML content of your custom email template. Use placeholders such as {{appName}} and {{otp}} to dynamically insert the application name and OTP respectively.

By configuring these parameters and using a custom template, you can ensure that your OTP emails are tailored to match your application's branding and style.

Sending OTP

To 📧 send an 🔐 OTP to a user's email address, use the sendOTP method. This method takes the recipient's email address as a parameter.

  bool isSent = await EmailOTP.sendOTP(email: emailController.text);
  if (!isSent) {
    print(EmailOTP.lastError); // Prints specific error (e.g. SMTP Auth failed)
  }

Parameters

• email: The recipient's email address where the OTP will be sent.

Resending OTP

If a user requests a new OTP because they didn't receive the first one, you can use resendOTP instead of generating a new one. This will re-send the existing valid OTP. If it has already expired, a new one will automatically be generated.

  EmailOTP.resendOTP(email: emailController.text);

Verifying OTP

To verify an 🔐 OTP entered by the user, use the verifyOTP method. This method takes the OTP entered by the user as a parameter and returns a boolean indicating whether the OTP is correct.

  EmailOTP.verifyOTP(otp: otpController.text)

Parameters

• otp: The OTP entered by the user.

Get OTP

This code will print the OTP generated by the getOTP() method.

  print(EmailOTP.getOTP());

Is Expired

This method will helps you to validate your otp expiry time.

  print(EmailOTP.isExpired());

Example

👉 For a complete example, refer to the Email OTP package documentation.

Report bugs or issues

You are welcome to open a ticket on github if any 🐞 problems arise. New ideas are always welcome.

Contributors

Rahul Chouhan
_{Chouhan Rahul}

Copyright © 2024 Rohit Chouhan. Licensed under the MIT LICENSE