Reading list Switch to dark mode

    Guide for Magento 2 Firebase OTP Login Extension

    Updated 23 February 2024

    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.

    Features

    • 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.

    Installation

    #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.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    #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:

    M2-installation-1

    #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

    Language Translation

    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.

    Magento 2 Firebase OTP Login language translation

    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.

    Magento 2 Firebase OTP Login i8file_csv

    How to Get API Credentials – Magento 2 Firebase OTP Login

    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.

    Firebase console option

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

    create project firebase console

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

    enter project name for firebase project

    Then the page that appears tap the Continue button.

    click continue firebase console

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

    configure google analytics

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

    firebase project is ready

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

    web option for the firebase app to create

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

    add details for the firebase app

    Tap Next for Add Firebase SDK.

    tap next for the app

    Tap the Next button for Install Firebase CLI.

    choose next

    Now tap the Continue to Console button.

    continue to console

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

    My firebase project created

    Under Authentication, tap Get Started.

    Tap get started

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

    choose sign in method and add new service provider as phone

    Here, choose Phone.

    choose phone as service provider and enable it

    Then Enable it and Save it.

    Magento 2 Firebase OTP Login

    Now the phone provider has been added.

    Magento 2 Firebase OTP Login

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

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

    Magento 2 Firebase OTP Login

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

    Magento 2 Firebase OTP Login settings firebase console

    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.

    Magento 2 Firebase OTP Login app settings

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

    Magento 2 Firebase OTP Login credentials access

    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.

    Initial Configuration Settings

    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.

    Magento 2 Firebase OTP Login backend configuration

    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.

    Magento 2 Firebase OTP Login backend configuration

    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.

    New User Registration Via Magento 2 OTP Verification

    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.

    Magento 2 Firebase OTP Login

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

    magento234.vachak.com_ee2466_pub_customer_account_create_screenshot-1

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

    mockup-1

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

    magento234.vachak.com_ee2466_pub_customer_account_create_screenshot-2-1

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

    magento234.vachak.com_ee2466_pub_customer_account_screenshot

    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.

    Customer Login via OTP Validation

    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.

    magento234.vachak.com_ee2466_pub_customer_account_login_referer_aHR0cHM6Ly9tYWdlbnRvMjM0LnZhY2hhay5jb20vZWUyNDY2L3B1Yi8_screenshot

    After entering the details, tap the Sign In button.

    magento234.vachak.com_ee2466_pub_customer_account_login_referer_aHR0cHM6Ly9tYWdlbnRvMjM0LnZhY2hhay5jb20vZWUyNDY2L3B1Yi8_screenshot-1

    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.

    magento234.vachak.com_ee2466_pub_customer_account_login_referer_aHR0cHM6Ly9tYWdlbnRvMjM0LnZhY2hhay5jb20vZWUyNDY2L3B1Yi8_screenshot-2

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

    magento234.vachak.com_ee2466_pub_customer_address_index_screenshot

    Reset Password – Forgot Password OTP Validation

    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.

    magento234.vachak.com_ee2466_pub_customer_account_forgotpassword_screenshot

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

    magento234.vachak.com_ee2466_pub_customer_account_forgotpassword_screenshot-2

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

    magento234.vachak.com_ee2466_pub_customer_account_forgotpassword_screenshot-3

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

    magento234.vachak.com_ee2466_pub_customer_account_login_referer_aHR0cHM6Ly9tYWdlbnRvMjM0LnZhY2hhay5jb20vZWUyNDY2L3B1Yi9jdXN0b21lci9hY2NvdW50L2luZGV4Lw_screenshot-1

    Checkout Page – OTP Verification

    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.

    magento234.vachak.com_ee2466_pub_checkout_screenshot

    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.

    magento234.vachak.com_ee2466_pub_downloadable.htmlscreenshot

    Email OTP Verification – Registration/Sign In & Other Sections

    User Registration:

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

    magento234.vachak.com_ee2466_pub_customer_account_create_screenshot-3

    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.

    magento234.vachak.com_ee2466_pub_customer_account_create_screenshot-4

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

    mail.google.com_mail_u_0_screenshot

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

    Magento 2 Firebase OTP Login OTP expired Message on Popup

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

    Magento 2 Firebase OTP Login sign up authntication via email

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

    Magento 2 Firebase OTP Login account created section

    Sign In via email OTP:

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

    Magento 2 Firebase OTP Login

    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.

    Magento 2 Firebase OTP Login OTP on Email

    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.

    Sign in option at checkout Magento 2 Firebase OTP Login

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

    Magento 2 Firebase OTP Login at Guest Checkout

    Support

    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.

    Current Product Version - 4.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content