Introduction
In the Flutter application, when we need to authenticate Email via OTP, we have many ways to achieve this, such as:
Send OTP directly from within the Flutter app. This method will not be safe because it is easy to reveal the email configuration.
Send OTP via API call to the Server, the Server will be responsible for generating the OTP code and sending it to the user's email. In this way, we have two cases:
The OTP when the user enters from Email will be re-authenticated at the Server. In this way, we need to store the Email on the Server. Therefore, with this method, we need more configuration to use it and can affect the privacy policy if not set up carefully.
OTP when the user enters from Email will be authenticated on the Client side. With this method, the Server only makes a request to send OTP to the user's email, and at the same time sends OTP to the application and the application will be responsible for re-authenticating the OTP when the user enters the code. This is also the way I will guide in this article.
Currently, Shared Hosting is very cheap and popular in the market, so this is the goal I aim for. Besides, I chose the PHP language to perform the task of sending OTP because this is a very portable language, and can be used anywhere in Shared Hosting without any additional configuration (Javascript is supported but must be used with Nodejs and must configure Shared Hosting to run a Nodejs application).
The package mentioned is auth_email, I will give more specific instructions in this article.
Configuration And Usage
Server
On the Server side, the package uses PHP as the language and also uses the PHPMailer library to send emails to users.
First, you need to download v0.0.4 and unzip it, you will get a folder named src with the following structure:
And here is the content in index.php:
// Set the SMTP server to send through
$HOST = 'example.com';
// SMTP username
$USER_NAME = 'auth@example.com';
// SMTP password
$PASSWORD = 'password';
// TCP port to connect to
$PORT = 587;
// Send from
$SEND_FROM = $USER_NAME;
// Default subject for the email
$DEFAULT_SUBJECT = 'Verify Email';
// Default body for the email
$DEFAULT_BODY = 'Please use this OTP to verify your email for the <b>{appName}</b>, do not share this code to anyone: <b>{otp}</b>';
// Default length of the OTP
$DEFAULT_OTP_LENGTH = 6;
// Server key in SHA256 encryption (Ex: authemailtestkey)
$SERVER_SHA256_KEY = '6955c3a2dbfd121697623896b38f5eb759d2cd503476980e14b9beb0cc036c4d';
// Secure your applications
$ALLOWED_APPS = [
// App name. Must be the same as the `appName` on the client side
'Auth Email Test' => [
// Allow/Disallow the app using the modified subject
'modifiedSubject' => false,
// Allow/Disallow the app using the modified body
'modifiedBody' => false,
// Allow/Disallow the app using the modified OTP length
'modifiedOtpLength' => false,
],
];
With $DEFAULT_BODY, {appName} and {otp} will be replaced by the appName taken from the Client and the OTP is automatically generated at the Server.
The server only allows applications named in $ALLOWED_APPS to call to send an email.
After the configuration is complete, upload PHPMailer, config.php, and index.php to your Shared Hosting. For example, where you upload is https://example.com/auth/email to prepare for the next step.
So, we have completed the installation on the Server side.
Client
Add this package to your app:
flutter pub add auth_email
Create a new instance for AuthEmail:
final authEmail = AuthEmail(
// App name. Must be available in `$ALLOWED_APPS` on the Server.
appName: 'Auth Email Test',
// Uploaded path.
server: 'https://example.com/auth/email',
// Normal form of the server key.
serverKey: 'authemailtestkey',
// Print the debug log.
isDebug: true,
);
Next, OTP will be looked like this:
final bool result = await authEmail.sendOTP(
email: 'exampleclient@gmail.com',
subject: 'Verify Email',
body: 'Please use this OTP to verify your email for the <b>{appName}</b>, do not share this code to anyone: <b>{otp}</b>',
otpLength: 6,
);
Notice that you can only change the subject, body and otpLength when the configuration on the Server side allows to change these values.
And here is the way to re-authenticate an OTP inputted by the user:
final bool isVerified = authEmail.verifyOTP(
email: 'exampleclient@gmail.com',
otp: '<code>'
);
isVerified will be true if the inputted OTP is right and false if it's wrong.
So, you can confirm whether the Email the user entered is a valid Email or not.
Additional Information
Before sending OTP, you can check whether the user's email is correct or not with this method:
final isValid = AuthEmail.isValidEmail('exampleclient@gmail.com');
Conclusion
Thus, we can simply and safely send and confirm OTP in the Flutter/Dart application when using Shared Hosting with PHP programming language.