{"id":481,"date":"2025-04-20T08:04:07","date_gmt":"2025-04-20T08:04:07","guid":{"rendered":"https:\/\/imcodinggenius.com\/?p=481"},"modified":"2025-04-20T08:04:07","modified_gmt":"2025-04-20T08:04:07","slug":"otp-authentication-in-laravel-vue-js-for-secure-transactions","status":"publish","type":"post","link":"https:\/\/imcodinggenius.com\/?p=481","title":{"rendered":"OTP Authentication in Laravel & Vue.js for Secure Transactions"},"content":{"rendered":"

Introduction<\/h2>\n

In today\u2019s digital world, security is paramount, especially when dealing with sensitive data like user authentication and financial transactions. One of the most effective ways to enhance security is by implementing One-Time Password (OTP) authentication. This article explores how to implement OTP authentication in a Laravel backend with a Vue.js frontend, ensuring secure transactions.<\/p>\n

Why Use OTP Authentication?<\/h2>\n

OTP authentication provides an extra layer of security beyond traditional username and password authentication. Some key benefits include:<\/p>\n

Prevention of Unauthorized Access:<\/strong> Even if login credentials are compromised, an attacker cannot log in without the OTP.
\nEnhanced Security for Transactions:<\/strong> OTPs can be used to confirm high-value transactions, preventing fraud.
\nTemporary Validity:<\/strong> Since OTPs expire after a short period, they reduce the risk of reuse by attackers.<\/p>\n

Prerequisites<\/h2>\n

Before getting started, ensure you have the following:<\/p>\n

Laravel<\/a> 8 or later installed
\nVue.js configured in your project
\nA mail or SMS service provider for sending OTPs (e.g., Twilio, Mailtrap)
\nBasic understanding of Laravel and Vue.js<\/p>\n

In this guide, we\u2019ll implement OTP authentication in a Laravel (backend) and Vue.js (frontend) application<\/strong>. We\u2019ll cover:<\/p>\n

Setting up Laravel and Vue (frontend) from scratch
\nSetting up OTP generation and validation in Laravel
\nCreating a Vue.js component for OTP input
\nIntegrating OTP authentication into login workflows
\nEnhancing security with best practices<\/p>\n

By the end, you\u2019ll have a fully functional OTP authentication system ready to enhance the security of your fintech or web application.<\/p>\n

Setting Up Laravel for OTP Authentication<\/h2>\n

Step 1: Install Laravel and Required Packages<\/h3>\n

If you haven’t already set up a Laravel project, create a new one:<\/p>\n

composer create-project «laravel\/laravel:^10.0»<\/span> example-app<\/p>\n

Next, install the Laravel Breeze package<\/a> for frontend scaffolding:<\/p>\n

composer require<\/span> laravel\/breeze —dev<\/p>\n

After composer has finished installing, run the following command to select the framework you want to use\u2014the Vue configuration:<\/p>\n

php artisan breeze:install<\/p>\n

You\u2019ll see a prompt with the available stacks:<\/p>\n

Which Breeze stack would you like to install?
\n— Vue with Inertia
\nWould you like any optional features?
\n— None
\nWhich testing framework do you prefer?
\n— PHPUnit<\/p>\n

Breeze will automatically install the necessary packages for your Laravel Vue project. You should see:<\/p>\n

INFO Breeze scaffolding installed successfully.<\/p>\n

Now run the npm command to build your frontend assets:<\/p>\n

npm run dev<\/p>\n

Then, open another terminal and launch your Laravel app:<\/p>\n

php artisan serve<\/p>\n

Step 2: Setting up OTP generation and validation in Laravel<\/h3>\n

We’ll use a mail testing platform called Mailtrap to send and receive mail locally. If you don\u2019t have a mail testing service set up, sign up at Mailtrap<\/a> to get your SMTP credentials and add them to your .env file:<\/p>\n

MAIL_MAILER=smtp
\nMAIL_HOST=sandbox.smtp.mailtrap.io
\nMAIL_PORT=2525
\nMAIL_USERNAME=1780944422200a
\nMAIL_PASSWORD=a8250ee453323b
\nMAIL_ENCRYPTION=tls
\nMAIL_FROM_ADDRESS=hello@example.com
\nMAIL_FROM_NAME=»${APP_NAME}»<\/p>\n

To send OTPs to users, we\u2019ll use Laravel\u2019s built-in mail services. Create a mail class and controller:<\/p>\n

php artisan make:mail OtpMail
\nphp artisan make:controller OtpController<\/p>\n

Then modify the OtpMail class:<\/p>\n

<?php<\/span><\/p>\n

namespace<\/span> App<\/span>Mail<\/span>;<\/p>\n

use<\/span> Illuminate<\/span>Bus<\/span>Queueable<\/span>;
\nuse<\/span> Illuminate<\/span>Contracts<\/span>Queue<\/span>ShouldQueue<\/span>;
\nuse<\/span> Illuminate<\/span>Mail<\/span>Mailable<\/span>;
\nuse<\/span> Illuminate<\/span>Mail<\/span>Mailables<\/span>Content<\/span>;
\nuse<\/span> Illuminate<\/span>Mail<\/span>Mailables<\/span>Envelope<\/span>;
\nuse<\/span> Illuminate<\/span>Queue<\/span>SerializesModels<\/span>;<\/p>\n

class<\/span> OtpMail<\/span> extends<\/span> Mailable<\/span>
\n<\/span>{
\n use<\/span> Queueable<\/span>, SerializesModels<\/span>;<\/p>\n

public<\/span> $otp<\/span>;<\/p>\n

\/**
\n * Create a new message instance.
\n *\/<\/span>
\n public<\/span> function<\/span> __construct<\/span>($otp<\/span><\/span>)
\n <\/span>{
\n $this<\/span>->otp = $otp<\/span>;
\n }<\/p>\n

\/**
\n * Build the email message.
\n *\/<\/span>
\n public<\/span> function<\/span> build<\/span>(<\/span>)
\n <\/span>{
\n return<\/span> $this<\/span>->subject(‘Your OTP Code’<\/span>)
\n ->view(’emails.otp’<\/span>)
\n ->with([‘otp’<\/span> => $this<\/span>->otp]);
\n }<\/p>\n

\/**
\n * Get the message envelope.
\n *\/<\/span>
\n public<\/span> function<\/span> envelope<\/span>(<\/span>): Envelope<\/span>
\n <\/span>{
\n return<\/span> new<\/span> Envelope(
\n subject: ‘OTP Mail’<\/span>,
\n );
\n }
\n}<\/p>\n

Create a Blade view in resources\/views\/emails\/otp.blade.php:<\/p>\n

<!DOCTYPE html<\/span>><\/span>
\n<html<\/span>><\/span>
\n <head<\/span>><\/span>
\n <title<\/span>><\/span>Your OTP Code<\/title<\/span>><\/span>
\n <\/head<\/span>><\/span>
\n <body<\/span>><\/span>
\n <p<\/span>><\/span>Hello,<\/p<\/span>><\/span>
\n <p<\/span>><\/span>Your One-Time Password (OTP) is: <strong<\/span>><\/span>{{ $otp }}<\/strong<\/span>><\/span><\/p<\/span>><\/span>
\n <p<\/span>><\/span>This code is valid for 10 minutes. Do not share it with anyone.<\/p<\/span>><\/span>
\n <p<\/span>><\/span>Thank you!<\/p<\/span>><\/span>
\n <\/body<\/span>><\/span>
\n<\/html<\/span>><\/span><\/p>\n

Step 3: Creating a Vue.js component for OTP input<\/h3>\n

Normally, after login or registration, users are redirected to the dashboard. In this tutorial, we add an extra security step that validates users with an OTP before granting dashboard access.<\/p>\n

Create two Vue files:<\/p>\n

Request.vue: requests the OTP
\nVerify.vue: inputs the OTP for verification<\/p>\n

Now we create the routes for the purpose of return the View and the functionality of creating OTP codes, storing OTP codes, sending OTP codes through the mail class, we head to our web.php file:<\/p>\n

Route::middleware(‘auth’<\/span>)->group(function<\/span> (<\/span>) <\/span>{
\n Route::get(‘\/request’<\/span>, [OtpController::class, ‘create’<\/span>])->name(‘request’<\/span>);
\n Route::post(‘\/store-request’<\/span>, [OtpController::class, ‘store’<\/span>])->name(‘send.otp.request’<\/span>);<\/p>\n

Route::get(‘\/verify’<\/span>, [OtpController::class, ‘verify’<\/span>])->name(‘verify’<\/span>);
\n Route::post(‘\/verify-request’<\/span>, [OtpController::class, ‘verify_request’<\/span>])->name(‘verify.otp.request’<\/span>);
\n});<\/p>\n

Putting all of this code in the OTP controller returns the View for our request.vue and verify.vue file and the functionality of creating OTP codes, storing OTP codes, sending OTP codes through the mail class and verifying OTP codes, we head to our web.php file to set up the routes.<\/p>\n

public<\/span> function<\/span> create<\/span>(Request $request<\/span><\/span>)
\n<\/span>{
\n return<\/span> Inertia::render(‘Request’<\/span>, [
\n ’email’<\/span> => $request<\/span>->query(’email’<\/span>, »<\/span>),
\n ]);
\n}<\/p>\n

public<\/span> function<\/span> store<\/span>(Request $request<\/span><\/span>)
\n<\/span>{
\n $request<\/span>->validate([
\n ’email’<\/span> => ‘required|email|exists:users,email’<\/span>,
\n ]);<\/p>\n

$otp<\/span> = rand(100000<\/span>, 999999<\/span>);<\/p>\n

Cache::put(‘otp_’<\/span> . $request<\/span>->email, $otp<\/span>, now()->addMinutes(10<\/span>));<\/p>\n

Log::info(«OTP generated for «<\/span> . $request<\/span>->email . «: «<\/span> . $otp<\/span>);<\/p>\n

Mail::to($request<\/span>->email)->send(new<\/span> OtpMail($otp<\/span>));<\/p>\n

return<\/span> redirect()->route(‘verify’<\/span>, [’email’<\/span> => $request<\/span>->email]);
\n}<\/p>\n

public<\/span> function<\/span> verify<\/span>(Request $request<\/span><\/span>)
\n<\/span>{
\n return<\/span> Inertia::render(‘Verify’<\/span>, [
\n ’email’<\/span> => $request<\/span>->query(’email’<\/span>),
\n ]);
\n}<\/p>\n

public<\/span> function<\/span> verify_request<\/span>(Request $request<\/span><\/span>)
\n<\/span>{
\n $request<\/span>->validate([
\n ’email’<\/span> => ‘required|email|exists:users,email’<\/span>,
\n ‘otp’<\/span> => ‘required|digits:6’<\/span>,
\n ]);<\/p>\n

$cachedOtp<\/span> = Cache::get(‘otp_’<\/span> . $request<\/span>->email);<\/p>\n

Log::info(«OTP entered: «<\/span> . $request<\/span>->otp);
\n Log::info(«OTP stored in cache: «<\/span> . ($cachedOtp<\/span> ?? ‘No OTP found’<\/span>));<\/p>\n

if<\/span> (!$cachedOtp<\/span>) {
\n return<\/span> back()->withErrors([‘otp’<\/span> => ‘OTP has expired. Please request a new one.’<\/span>]);
\n }<\/p>\n

if<\/span> ((string<\/span>) $cachedOtp<\/span> !== (string<\/span>) $request<\/span>->otp) {
\n return<\/span> back()->withErrors([‘otp’<\/span> => ‘Invalid OTP. Please try again.’<\/span>]);
\n }<\/p>\n

Cache::forget(‘otp_’<\/span> . $request<\/span>->email);<\/p>\n

$user<\/span> = User::where(’email’<\/span>, $request<\/span>->email)->first();
\n if<\/span> ($user<\/span>) {
\n $user<\/span>->email_verified_at = now();
\n $user<\/span>->save();
\n }<\/p>\n

return<\/span> redirect()->route(‘dashboard’<\/span>)->with(‘success’<\/span>, ‘OTP Verified Successfully!’<\/span>);
\n}<\/p>\n

Having set all this code, we return to the request.vue file to set it up.<\/p>\n

<script setup>
\nimport<\/span> AuthenticatedLayout from<\/span> ‘@\/Layouts\/AuthenticatedLayout.vue’<\/span>;
\nimport<\/span> InputError from<\/span> ‘@\/Components\/InputError.vue’<\/span>;
\nimport<\/span> InputLabel from<\/span> ‘@\/Components\/InputLabel.vue’<\/span>;
\nimport<\/span> PrimaryButton from<\/span> ‘@\/Components\/PrimaryButton.vue’<\/span>;
\nimport<\/span> TextInput from<\/span> ‘@\/Components\/TextInput.vue’<\/span>;
\nimport<\/span> { Head, useForm } from<\/span> ‘@inertiajs\/vue3’<\/span>;<\/p>\n

const<\/span> props = defineProps({
\n email<\/span>: {
\n type<\/span>: String<\/span>,
\n required<\/span>: true<\/span>,
\n },
\n});<\/p>\n

const<\/span> form = useForm({
\n email<\/span>: props.email,
\n});<\/p>\n

const<\/span> submit = () =><\/span> {
\n form.post(route(‘send.otp.request’<\/span>), {
\n onSuccess<\/span>: () =><\/span> {
\n alert(«OTP has been sent to your email!»<\/span>);
\n form.get(route(‘verify’<\/span>), { email<\/span>: form.email }); \/\/ Redirecting to OTP verification<\/span>
\n },
\n });
\n};
\n<\/script><\/p>\n

<template<\/span>><\/span>
\n <Head<\/span> title<\/span>=«Request OTP»<\/span> \/><\/span><\/span><\/p>\n

<AuthenticatedLayout<\/span>><\/span>
\n <form<\/span> @submit.prevent<\/span>=«submit»<\/span>><\/span>
\n <div<\/span>><\/span>
\n <InputLabel<\/span> for<\/span>=«email»<\/span> value<\/span>=«Email»<\/span> \/><\/span><\/p>\n

<TextInput<\/span>
\n id<\/span>=«email»<\/span>
\n type<\/span>=«email»<\/span>
\n class<\/span>=«mt-1 block w-full»<\/span>
\n v-model<\/span>=«form.email»<\/span>
\n required<\/span>
\n autofocus<\/span>
\n \/><\/span><\/p>\n

<InputError<\/span> class<\/span>=«mt-2»<\/span> :message<\/span>=«form.errors.email»<\/span> \/><\/span>
\n <\/div<\/span>><\/span><\/p>\n

<div<\/span> class<\/span>=«mt-4 flex items-center justify-end»<\/span>><\/span>
\n <PrimaryButton<\/span> :class<\/span>=«{ ‘opacity-25’: form.processing }»<\/span> :disabled<\/span>=«form.processing»<\/span>><\/span>
\n Request OTP
\n <\/PrimaryButton<\/span>><\/span>
\n <\/div<\/span>><\/span>
\n <\/form<\/span>><\/span>
\n <\/AuthenticatedLayout<\/span>><\/span>
\n<\/template<\/span>><\/span><\/p>\n

Having set all this code, we return to the verify.vue to set it up:<\/p>\n

<script setup>
\nimport<\/span> AuthenticatedLayout from<\/span> ‘@\/Layouts\/AuthenticatedLayout.vue’<\/span>;
\nimport<\/span> InputError from<\/span> ‘@\/Components\/InputError.vue’<\/span>;
\nimport<\/span> InputLabel from<\/span> ‘@\/Components\/InputLabel.vue’<\/span>;
\nimport<\/span> PrimaryButton from<\/span> ‘@\/Components\/PrimaryButton.vue’<\/span>;
\nimport<\/span> TextInput from<\/span> ‘@\/Components\/TextInput.vue’<\/span>;
\nimport<\/span> { Head, useForm, usePage } from<\/span> ‘@inertiajs\/vue3’<\/span>;<\/p>\n

const<\/span> page = usePage();
\n\/\/ Get the email from the URL query params<\/span>
\nconst<\/span> email = page.props.email || »<\/span>;<\/p>\n

\/\/ Initialize form with email and OTP field<\/span>
\nconst<\/span> form = useForm({
\n email<\/span>: email,
\n otp<\/span>: »<\/span>,
\n});<\/p>\n

\/\/ Submit function<\/span>
\nconst<\/span> submit = () =><\/span> {
\n form.post(route(‘verify.otp.request’<\/span>), {
\n onSuccess<\/span>: () =><\/span> {
\n alert(«OTP verified successfully! Redirecting…»<\/span>);
\n window<\/span>.location.href = ‘\/dashboard’<\/span>; \/\/ Change to your desired redirect page<\/span>
\n },
\n onError<\/span>: () =><\/span> {
\n alert(«Invalid OTP. Please try again.»<\/span>);
\n },
\n });
\n};
\n<\/script><\/p>\n

<template<\/span>><\/span>
\n <Head<\/span> title<\/span>=«Verify OTP»<\/span> \/><\/span><\/span><\/p>\n

<AuthenticatedLayout<\/span>><\/span>
\n <form<\/span> @submit.prevent<\/span>=«submit»<\/span>><\/span>
\n <div<\/span>><\/span>
\n <InputLabel<\/span> for<\/span>=«otp»<\/span> value<\/span>=«Enter OTP»<\/span> \/><\/span><\/p>\n

<TextInput<\/span>
\n id<\/span>=«otp»<\/span>
\n type<\/span>=«text»<\/span>
\n class<\/span>=«mt-1 block w-full»<\/span>
\n v-model<\/span>=«form.otp»<\/span>
\n required<\/span>
\n \/><\/span><\/p>\n

<InputError<\/span> class<\/span>=«mt-2»<\/span> :message<\/span>=«form.errors.otp»<\/span> \/><\/span>
\n <\/div<\/span>><\/span><\/p>\n

<div<\/span> class<\/span>=«mt-4 flex items-center justify-end»<\/span>><\/span>
\n <PrimaryButton<\/span> :disabled<\/span>=«form.processing»<\/span>><\/span>
\n Verify OTP
\n <\/PrimaryButton<\/span>><\/span>
\n <\/div<\/span>><\/span>
\n <\/form<\/span>><\/span>
\n <\/AuthenticatedLayout<\/span>><\/span>
\n<\/template<\/span>><\/span><\/p>\n

Step 4: Integrating OTP authentication into login and register workflows<\/h3>\n

Update the login controller:<\/p>\n

public<\/span> function<\/span> store<\/span>(LoginRequest $request<\/span><\/span>): RedirectResponse<\/span>
\n<\/span>{
\n $request<\/span>->authenticate();<\/p>\n

$request<\/span>->session()->regenerate();<\/p>\n

return<\/span> redirect()->intended(route(‘request’<\/span>, absolute: false<\/span>));
\n}<\/p>\n

Update the registration controller:<\/p>\n

public<\/span> function<\/span> store<\/span>(Request $request<\/span><\/span>): RedirectResponse<\/span>
\n<\/span>{
\n $request<\/span>->validate([
\n ‘name’<\/span> => ‘required|string|max:255’<\/span>,
\n ’email’<\/span> => ‘required|string|lowercase|email|max:255|unique:’<\/span> . User::class,
\n ‘password’<\/span> => [‘required’<\/span>, ‘confirmed’<\/span>, RulesPassword::defaults()],
\n ]);<\/p>\n

$user<\/span> = User::create([
\n ‘name’<\/span> => $request<\/span>->name,
\n ’email’<\/span> => $request<\/span>->email,
\n ‘password’<\/span> => Hash::make($request<\/span>->password),
\n ]);<\/p>\n

event(new<\/span> Registered($user<\/span>));<\/p>\n

Auth::login($user<\/span>);<\/p>\n

return<\/span> redirect(route(‘request’<\/span>, absolute: false<\/span>));
\n}<\/p>\n

Conclusion<\/h2>\n

Implementing OTP authentication in Laravel and Vue.js enhances security for user logins and transactions. By generating, sending, and verifying OTPs, we can add an extra layer of protection against unauthorized access. This method is particularly useful for financial applications and sensitive user data.<\/p>","protected":false},"excerpt":{"rendered":"

Introduction In today\u2019s digital world, security is paramount, especially when dealing with sensitive data like user authentication and financial transactions. One of the most effective ways to enhance security is by implementing One-Time Password (OTP) authentication. This article explores how to implement OTP authentication in a Laravel backend with a … <\/p>\n

Read More<\/a><\/div>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-481","post","type-post","status-publish","format-standard","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/481"}],"collection":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=481"}],"version-history":[{"count":0,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=\/wp\/v2\/posts\/481\/revisions"}],"wp:attachment":[{"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imcodinggenius.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}