Guide for Magento 2 Firebase OTP Login Extension

Magento 2 Firebase OTP Login extension allows the users to register seamlessly using the OTP sent to the user’s mobile device or email address.

Apart from that, an OTP/email OTP is sent at the time of the forget password verification procedure for changing the password.

The login verification also requires verification via the OTP sent to the user’s mobile device and email address.

Implementing Magento 2 OTP login via mobile number and email in a Magento 2-based e-commerce store can enhance security, improve user experience, and provide several business benefits.

• Admin can enable/disable the OTP module from admin configuration.
• Mobile/Email OTP verification at customer registration.
• Mobile/Email OTP verification at customer login.
• Mobile/Email OTP verification at the forgot password page.
• Mobile/Email OTP verification when users have to log in during checkout.
• Admin can select Email templates from the system to be used for OTP verification notifications.
• The extension is compatible with the Hyva Theme.

#1 Download Module

Firstly, you need to log in to the Webkul Store, go to My Account>My Purchased Products section, verify, and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

For translating the Magento 2 OTP Login extension language, navigate through src/app/code/Webkul/FirebaseOTPLogin/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

Now, upload it to the path src/app/code/Webkul/FirebaseOTPLogin/i18n where the installation of Magento 2 is on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

The user can edit the CSV like the image below.

You must have a Gmail account to create the Firebase credentials. To create a Google account, tap here.

If you already have a Gmail account then login to it.

After that, open the Firebase Console and log in using the same Gmail account. Now tap on Go to Console Option at the top right-hand corner.

That brings up the below section. Here, tap the Create a Project button.

Enter the project name and tap the Continue button after that.

Then the page that appears tap the Continue button.

Choose or create a Google Analytics account and tap the Create Project button.

The process will take some time. When the project is ready tap the Continue button.

Your project appears with different options as shown below in the snapshot. Here, tap the Web option for the app to create.

Now, set up the app nickname and tap the Register app button.

Tap Next for Add Firebase SDK.

Tap the Next button for Install Firebase CLI.

Now tap the Continue to Console button.

After that, under the Build side panel option, go to the Authentication sub-menu option.

Under Authentication, tap Get Started.

Go to the Sign-In method and tap the Add new provider button.

Here, choose Phone.

Then Enable it and Save it.

Now the phone provider has been added.

Go to Authentication->Settings->Domains->Authorized Domains and add the domain.

It should be your website base URL – https://example.com/

After entering the details of the base URL tap the Add button.

Now, go to Project Overview, tap the app that we had created, and then tap the cog icon.

This will bring up the section where you can scroll down to check the credentials being generated.

Lastly, you will have the credentials that will be used to configure the extension in the first place.

If you’re looking to create a custom e-commerce website, it’s a great idea to hire Magento developers who can help you build a powerful and scalable online store.

After the successful installation of the Magento 2 Mobile OTP Authentication Login Extension, the admin will configure the initial settings.

For the same, navigate through Stores->Configuration->Firebase OTP Login.

Here, the admin will –

• Enable the module for use at the storefront.
• Enable the option for OTP validation on new customer registration.
• Set the option of OTP validation on customer login.
• Option to enable OTP validation on customer forgot password.
• Set the OTP expiry time in seconds as required.
• Set up the option while creating an account to send OTP via – Mobile or Email.
• For other cases send OTP via – Mobile, Email, or Mobile/Email.

Apart from that, we have a few more configuration settings.

Firebase Settings:

Here, the admin will enter the –

• Firebase API Key.
• Firebase Auth Domain.
• Firebase Project ID.
• Firebase Storage Bucket.
• Firebase Messaging Sender ID.
• Firebase APP ID.
• Set the test mode as No or Yes as required. The captcha appears for test mode set as No, but if set as Yes, the captcha is not visible.

OTP Email Settings:

Here, the admin will –

• Select the OTP email template that will be used to send the OTP to the customer.

Lastly, save the configuration settings by tapping the Save Config button at the top right-hand corner.

You can also check our complete Magento 2 extensions list.

The new user will navigate to the Create an Account page and fill in the required details along with their mobile number and country code. After that, tap the Create an Account Button.

An SMS with the OTP will be sent to the phone number and a pop-up to enter the OTP is displayed.

This is how the user will get the OTP on their mobile phone number.

Now, the user has to enter the OTP to register on the website.

After tapping the Submit button on the pop-up the user gets registered on the website after the SMS authentication.

Also, if you want to allow your customers to conveniently log in or register using their WhatsApp phone number, then check the Magento 2 WhatsApp Login extension.

An already-registered customer can log in after OTP validation.

The customer on the Sign-in page needs to enter the registered phone number with country code and the password of their account.

An SMS notification with the OTP is sent to the number.

After entering the details, tap the Sign In button.

If you have not received the OTP verification SMS, tap the resend link on the pop-up.

Now, enter the OTP verification SMS and tap the Submit button after that.

The customer will be logs into his account on the website.

In the event that the customer forgets his password, he can log in via the OTP received on his registered number.

To do so, go to the forget password page on the storefront.

Here, enter the registered phone number and the captch. After that, tap the Reset My Password button.

Enter the received OTP for verification and tap the submit button after that.

Lastly, a success message displays that you will receive an email with a link to reset your password.

If a user who is register at the store adds products to the cart and directly moves to the checkout without login then they will see the OTP verification at checkout as well.

For that, they will have to tap the Sign In link, and it brings up the pop-up where they have to enter their phone number with password and proceed accordingly.

In case the same user is adding a downloadable product to the cart and tries to make a checkout in that case the same details need to be enter as per the snapshot below.

User Registration:

If the admin has enabled the email OTP verification then the users will get the OTP on their entered email address.

After tapping the Create an Account button, a popup will appear where the user needs to enter the OTP received on their entered email address.

This is how the OTP receive in the user’s email address. Now enter the OTP in the pop-up section.

If the OTP has expired in that case you will see a notification for the same.

To resend the OTP on the email address tap Resend OTP link.

Now proceed. After verifying the OTP your account creates on the Store after email OTP verification.

Sign In via email OTP:

On the Sign in page, the customers will see the Sign in via email option.

After entering the details, tap the Sign in button. Then enter the email OTP and tap submit to login to your account panel using the Magento 2 Firebase OTP login extension.

Purchase Product if not Login:

If the user is not logged in and tries to purchase a product then at checkout the Email verification method displays to login and proceed.

In the case of a downloadable product, the same email OTP verification is visible if already not logged in.

So, that is all about the Magento 2 Firebase OTP Login extension. If you have any queries regarding the plugin, please contact us at Webkul Support System.