PHPackages                             jaroslawzielinski/otpcomponent-m2 - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Authentication & Authorization](/categories/authentication)
4. /
5. jaroslawzielinski/otpcomponent-m2

ActiveMagento2-module[Authentication & Authorization](/categories/authentication)

jaroslawzielinski/otpcomponent-m2
=================================

One Time Password Component Magento2 Module

1.0.5(9mo ago)0211MITPHP

Since Jul 9Pushed 9mo agoCompare

[ Source](https://github.com/JaroslawZielinski/OTPComponent-M2)[ Packagist](https://packagist.org/packages/jaroslawzielinski/otpcomponent-m2)[ Fund](https://www.buymeacoffee.com/jaroslawzielinski)[ RSS](/packages/jaroslawzielinski-otpcomponent-m2/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)Dependencies (1)Versions (7)Used By (1)

OTP Component Magento2 Module
=============================

[](#otp-component-magento2-module)

One Time Password Component Magento2 Module.

A comprehensive One-Time Password (OTP) component module that provides both frontend and backend implementations for secure email-based verification workflows.

If you're excited about this project and want to support its ongoing development, consider buying me a coffee! Your support means a lot and helps keep this project alive.

[!["Buy Me A Coffee"](https://camo.githubusercontent.com/9f44ce2dc3b3eecdd02598900866ffc518801df1932849703dae1e5ce5031070/68747470733a2f2f7777772e6275796d6561636f666665652e636f6d2f6173736574732f696d672f637573746f6d5f696d616765732f6f72616e67655f696d672e706e67)](https://www.buymeacoffee.com/jaroslawzielinski)

Features
--------

[](#features)

### Frontend Component

[](#frontend-component)

- **Multiple Integration Options**: Can be used in CMS pages, blocks, or widgets
- **Form Integration**: Seamlessly integrates with existing forms
- **Multiple Instances**: Support for multiple concurrent forms on the same page
- **reCAPTCHA Integration**: Built-in support for reCAPTCHA v2 (invisible mode)
- **Customizable Fields**: Hidden fields that can be overridden (e.g., Date of Birth)
- **Event-Driven Architecture**: Custom validation and action events

### Backend Component

[](#backend-component)

- **UI Component**: Knockout.js-based backend interface
- **Admin Integration**: Native admin panel integration with menu links
- **Single Instance**: Optimized for single-instance backend usage
- **Test Interface**: Built-in test pages for both frontend and backend

### Core Functionality

[](#core-functionality)

- **6-Digit OTP**: Secure email-based verification codes
- **Two-Step Process**: Initial form submission followed by OTP verification
- **Custom Actions**: Configurable post-verification actions (database saves, API calls, etc.)
- **Validation Hooks**: Custom validation logic integration

How It Works
------------

[](#how-it-works)

1. **Initial Form Submission**: User fills out the basic form data and clicks Send button
2. **OTP Generation**: A 6-digit code is generated and sent to the provided email address
3. **Code Verification**: User enters the received code in the verification step
4. **Action Execution**: Upon successful verification, configured actions are executed

Installation
------------

[](#installation)

You can find the module on [Packagist](https://packagist.org/packages/jaroslawzielinski/otpcomponent-m2). To install:

```
cd YourProject
composer require jaroslawzielinski/otpcomponent-m2
```

Configuration
-------------

[](#configuration)

### Settings

[](#settings)

[![](docs/settings_config.png)](docs/settings_config.png)

### OTP Form Configuration

[](#otp-form-configuration)

[![](docs/otp_form_config.png)](docs/otp_form_config.png)

### reCaptcha

[](#recaptcha)

Configure reCAPTCHA v2 (invisible mode):

[![](docs/reCaptcha_config.png)](docs/reCaptcha_config.png)

#### Widget Separation

[](#widget-separation)

Multiple frontend forms are supported through unique widget IDs (opt\_widget\_id)

### Sending Email

[](#sending-email)

[![](docs/sending_email_configg.png)](docs/sending_email_configg.png)

Usage Examples
--------------

[](#usage-examples)

### Frontend Widget Implementation

[](#frontend-widget-implementation)

Use this code to implement OTP Component in your form:

```

            otp6_value

        JaroslawZielinski\OTPComponent\ViewModel\Otp

```

[![](docs/otp_front1.png)](docs/otp_front1.png)

[![](docs/otp_front2.png)](docs/otp_front2.png)

### CMS Page/Block/Widget Usages

[](#cms-pageblockwidget-usages)

#### Admin Panel -> CONTENT -> Elements -> Pages

[](#admin-panel---content---elements---pages)

[![](docs/widget_page.png)](docs/widget_page.png)

[![](docs/page.png)](docs/page.png)

#### Admin Panel -> CONTENT -> Elements -> Blocks

[](#admin-panel---content---elements---blocks)

[![](docs/widget_block.png)](docs/widget_block.png)

[![](docs/page.png)](docs/page.png)

#### Admin Panel -> CONTENT -> Elements -> Widgets

[](#admin-panel---content---elements---widgets)

[![](docs/widget.png)](docs/widget.png)

**NOTE**: *Just remember to use different Html ID of forms in order to proper working.*

### Backend UI Component

[](#backend-ui-component)

```

            JaroslawZielinski_OTPComponent/js/form/element/otp

            JaroslawZielinski_OTPComponent/form/element/otp

            6

        text

        OTP Code

        Enter the 6-digit verification code

            true

            true

            6

            6

```

[![](docs/otp_backend1.png)](docs/otp_backend1.png)

[![](docs/otp_backend2.png)](docs/otp_backend2.png)

Events
------

[](#events)

### Frontend Events

[](#frontend-events)

#### Validation Event:

[](#validation-event)

```
eventManager->dispatch('otpcomponent_controller_validation', [
    'request' => $request
]);
```

**NOTE**: *Validation of all fields in the form. You may add your custom validation there.*

#### Action Event:

[](#action-event)

```
eventManager->dispatch('otpcomponent_controller_authenticated', [
    'tuple' => $tuple,
    'totals' => &$totals
]);
```

where `$tuple` is user form data, and `$totals` are array return in json response.

**NOTE**: *Your custom action. In this example it is addition of new entry User in data base after success OTP authentication.*

### Backend Events

[](#backend-events)

Similar event structure available for backend implementations.

Menu Integration
----------------

[](#menu-integration)

The module automatically adds menu items for testing:

- **Frontend Test**: `otpcomponent/form/test`
- **Backend Test**: `jaroslawzielinski_otpcomponent/form/test`

Field Customization
-------------------

[](#field-customization)

### 1 Override extra hidden fields in the OTP Form by editing files:

[](#1-override-extra-hidden-fields-in-the-otp-form-by-editing-files)

#### 1.1 Hidden Extra Fields in `view/frontend/layout/jaroslawzielinski_otpcomponent_form_test.xml`

[](#11-hidden-extra-fields-in-viewfrontendlayoutjaroslawzielinski_otpcomponent_form_testxml)

```

            dob

```

**Note**: *Edit arguments. Change **fields** section only.*

#### 1.2 Hidden Extra Fields in `etc/frontend/di.xml`

[](#12-hidden-extra-fields-in-etcfrontenddixml)

```

        JaroslawZielinski_OTPComponent::container/form/hiddenextrafields.phtml

                dob

```

**Note**: *Edit arguments. Change **data** section only.*

### 2 Override extra fields in the OTP Form by editing files:

[](#2-override-extra-fields-in-the-otp-form-by-editing-files)

#### 2.1 Extra Fields in `etc/frontend/di.xml`

[](#21-extra-fields-in-etcfrontenddixml)

```

        Vendor_OTPComponent::container/form/extrafields.phtml

```

**Note**: *Edit arguments. Change **template** section only. Provide your .phtml template with your fields.*

For example:

`view/frontend/templates/container/form/extrafields.phtml`

```