π§ Email OTP Auth
A simple Flutter package for email-based OTP authentication! This package allows developers to send a 6-digit OTP to a userβs email and verify it for seamless email authentication. Perfect for apps that require email-based verification!
π Features
- π Send OTP: Generate and send a 6-digit OTP to the specified email address.
- β Verify OTP: Verify the OTP input to confirm the email's authenticity.
- β οΈ Expiration Time: OTP will expired after 5 minutes.
π Installation
Add the following to your pubspec.yaml
file:
dependencies:
email_otp_auth: ^1.0.0
Then, run:
flutter pub get
π² Usage
Import the package
import 'package:email_otp_auth/email_otp_auth.dart';
Sending and Verifying OTP
Here's how to use the package to send and verify an OTP:
import 'package:flutter/material.dart';
import 'package:email_otp_auth/email_otp_auth.dart';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// controllar's declartion
TextEditingController emailController = TextEditingController();
TextEditingController otpController = TextEditingController();
// disposing of textEditingControllers
@override
void dispose() {
emailController.dispose();
otpController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// ----------------------
// Method for sending OTP
// ----------------------
Future<void> sendOtp() async {
try {
// showing CircularProgressIndicator.
showDialog(
context: context,
builder: (context) {
return const Center(
child: CircularProgressIndicator(),
);
},
);
// getting response from sendOTP Method.
var res = await EmailOtpAuth.sendOTP(email: emailController.text);
// poping out CircularProgressIndicator.
if (context.mounted) {
Navigator.of(context).pop();
}
// if response[message == "Email Send"] then..
if (res["message"] == "Email Send" && context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("OTP Send Successfully β
"),
),
);
}
// else show Invalid Email Address.
else {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Invalid E-Mail Address β"),
),
);
}
}
}
// error handling
catch (error) {
throw error.toString();
}
}
// ------------------------
// Method for verifying OTP
// ------------------------
Future<void> verifyOTP() async {
try {
// showing CircularProgressIndicator.
showDialog(
context: context,
builder: (context) {
return const Center(
child: CircularProgressIndicator(),
);
},
);
// getting response from sendOTP Method.
var res = await EmailOtpAuth.verifyOtp(otp: otpController.text);
// poping out CircularProgressIndicator.
if (context.mounted) {
Navigator.of(context).pop();
}
// if response[message == "OTP Verified"] then..
if (res["message"] == "OTP Verified" && context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("OTP verified β
"),
),
);
}
// if response[message == "Invalid OTP"] then..
else if (res["data"] == "Invalid OTP" && context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Invalid OTP β"),
),
);
}
// if response[message == "OTP Expired"] then..
else if (res["data"] == "OTP Expired" && context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("OTP Expired β οΈ"),
),
);
}
// else return nothing.
else {
return;
}
} catch (error) {
throw error.toString();
}
}
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple[200],
title: const Text('Email OTP Auth'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: emailController,
decoration: InputDecoration(
hintText: "E-mail",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: sendOtp,
child: const Text('Send OTP'),
),
const SizedBox(height: 20),
TextFormField(
controller: otpController,
decoration: InputDecoration(
hintText: "OTP",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: verifyOTP,
child: const Text('Verify OTP'),
),
],
),
),
),
);
}
}
πΈ Screenshots
OTP Send successfully β | OTP Verified β | OTP Invalid β | OTP Expired β οΈ |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
π Methods
sendOTP({required String email})
- Sends a 6-digit OTP to the provided email address.verifyOtp({required String otp})
- Verifies the provided OTP against the one sent to the email.
π Notes
- Ensure a valid email format to successfully receive OTPs.
- OTP expiration, retries, and error handling are managed within the
verifyOtp
method.
π Devloper Info & License
KAMESH SINGH
Flutter Developer
Copyright Β© 2024 Kamesh Singh Sisodiya. Licensed under the MIT LICENSE