In this article, we will see laravel 9 two-factor authentication with SMS. we will send an OTP SMS to the mobile number and authenticate the login user. we will use the Twilio service to send SMS to international mobile numbers. Also, we will use the Twilio SDK library to send SMS from the laravel 9 application
Twilio is an American company based in San Francisco, California, which provides programmable communication tools for making and receiving phone calls, sending and receiving text messages, and performing other communication functions using its web service APIs.
Two-factor authentication (2FA) is an identity and access management security method that requires two forms of identification to access resources and data. Two-factor authentication (2FA) is a specific type of multi-factor authentication that strengthens access security by requiring two methods to verify your identity.
So, let's see how to add two-factor authentication with SMS in laravel 9 and 2FA authentication in laravel 9.
Step 1: Install Laravel 9
In this step, we will install 9 using the following command.
composer create-project laravel/laravel laravel-9-two-factor-auth-smsStep 2: Install Twilio SDK
Now, we will install Twilio SDK. Twilio provides easy-to-send SMS in laravel 9.
composer require twilio/sdkAfter that, we will create a Twilio account and get the account SID, token, and number.
After creating a Twilio account, add Twilio credentials to the .env file.
.env
TWILIO_SID=twilio_sid
TWILIO_TOKEN=twilio_token
TWILIO_FROM=phone_numberStep 3: Configure Database
Now, we will configure the database.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_9_auth
DB_USERNAME=root
DB_PASSWORD=rootStep 4: Create Migration
In this step, will create migration using the following command.
php artisan make:migration create_user_codes_tabledatabase/migrations/create_user_codes_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('user_codes', function (Blueprint $table) {
$table->id();
$table->integer('user_id');
$table->string('code');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('user_codes');
}
}
In the user's table migration file, add the phone field.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->string('phone')->nullable();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Now, we will migrate the table in the database using the following command.
php artisan migrateStep 5: Add Model
In this step, we will create the UserCode model using the following command.
php artisan make:model UserCodeapp/Models/UserCode.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class UserCode extends Model
{
use HasFactory;
public $table = "user_codes";
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'user_id',
'code',
];
}
Also, we will some changes to the app/Models/User.php file.
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Twilio\Rest\Client;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var string[]
*/
protected $fillable = [
'name',
'email',
'phone',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
/**
* generate OTP and send sms
*
* @return response()
*/
public function generateCode()
{
$code = rand(100000, 999999);
UserCode::updateOrCreate([
'user_id' => auth()->user()->id,
'code' => $code
]);
$receiverNumber = auth()->user()->phone;
$message = "Your 6 Digit OTP Number is ". $code;
try {
$account_sid = env("TWILIO_SID");
$auth_token = env("TWILIO_TOKEN");
$from_number = env("TWILIO_FROM");
$client = new Client($account_sid, $auth_token);
$client->messages->create($receiverNumber, [
'from' => $from_number,
'body' => $message]);
} catch (\Exception $e) {
info("Error...");
}
}
}
Step 6: Create Laravel Authentication
Now, we will create a laravel default authentication scaffold using the composer command.
composer require laravel/uiAfter that, we will install bootstrap UI using the following command.
php artisan ui bootstrap --authRun the following npm command to compile the assets.
npm install
npm run dev
Step 7: Add Middleware
In this step, we will create a middleware and check if the user has two-factor authentication enabled or not.
php artisan make:middleware CheckTwoFactorAuthenticationapp/Http/Middleware/CheckTwoFactorAuthentication
<?php
namespace App\Http\Middleware;
use Closure;
use Session;
use Illuminate\Http\Request;
class CheckTwoFactorAuthentication
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle(Request $request, Closure $next)
{
if (!Session::has('2fa')) {
return redirect()->route('check2fa.index');
}
return $next($request);
}
}
We will also register new middleware into the app/Http/Kernel.php file.
app/Http/Kernel.php
<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
/**
* The application's route middleware.
*
* These middleware may be assigned to groups or used individually.
*
* @var array
*/
protected $routeMiddleware = [
....
'check2fa' => \App\Http\Middleware\CheckTwoFactorAuthentication::class,
];
}
Read Also: Laravel 9 User Role and Permission
Step 8: Add Routes
Now, we will add a route in the web.php file.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\TwoFactorAuthController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Auth::routes();
Route::get('/home', [HomeController::class, 'index'])->name('home');
Route::get('two-factor-authentication', [TwoFactorAuthController::class, 'index'])->name('check2fa.index');
Route::post('two-factor-authentication', [TwoFactorAuthController::class, 'store'])->name('check2fa.store');
Route::get('two-factor-authentication/resend', [TwoFactorAuthController::class, 'resend'])->name('check2fa.resend');
Step 9: Add Controller
Now, we will some changes to the RegisterController and LoginController.
app/Http/Controllers/Auth/RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
class RegisterController extends Controller
{
use RegistersUsers;
/**
* Where to redirect users after registration.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest');
}
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
return Validator::make($data, [
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'phone' => ['required', 'max:15', 'unique:users'],
'password' => ['required', 'string', 'min:8', 'confirmed'],
]);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\Models\User
*/
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'phone' => $data['phone'],
'password' => Hash::make($data['password']),
]);
}
}
app/Http/Controllers/Auth/LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
/**
* process login
*
* @return response()
*/
public function login(Request $request)
{
$validated = $request->validate([
'email' => 'required',
'password' => 'required',
]);
if (Auth::attempt($validated)) {
auth()->user()->generateCode();
return redirect()->route('check2fa.index');
}
return redirect()
->route('login')
->with('error', 'You have entered invalid credentials');
}
}
app/Http/Controllers/TwoFactorAuthController.php
<?php
namespace App\Http\Controllers;
use App\Models\UserCode;
use Illuminate\Http\Request;
class TwoFactorAuthController extends Controller
{
/**
* index method for 2fa
*
* @return response()
*/
public function index()
{
return view('2fa');
}
/**
* validate sms
*
* @return response()
*/
public function store(Request $request)
{
$validated = $request->validate([
'code' => 'required',
]);
$exists = UserCode::where('user_id', auth()->user()->id)
->where('code', $validated['code'])
->where('updated_at', '>=', now()->subMinutes(5))
->exists();
if ($exists) {
\Session::put('2fa', auth()->user()->id);
return redirect()->route('home');
}
return redirect()
->back()
->with('error', 'You entered wrong OTP code.');
}
/**
* resend otp code
*
* @return response()
*/
public function resend()
{
auth()->user()->generateCode();
return back()
->with('success', 'We have resend OTP on your mobile number.');
}
}
Step 10: Add Blade Files
Now, will Add the phone field into the register view.
resources/views/auth/register.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Phone</label>
<div class="col-md-6">
<input id="phone" type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone" autofocus>
@error('phone')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionNow, we will create the 2fa.blade.php file and add the below code.
resources/view/2fa.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">2FA authentication laravel 9</div>
<div class="card-body">
<form method="POST" action="{{ route('check2fa.store') }}">
@csrf
<p class="text-center">We sent code to your phone : {{ substr(auth()->user()->phone, 0, 5) . '******' . substr(auth()->user()->phone, -2) }}</p>
@if ($message = Session::get('success'))
<div class="row">
<div class="col-md-12">
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
</div>
</div>
@endif
@if ($message = Session::get('error'))
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
</div>
</div>
@endif
<div class="form-group row">
<label for="code" class="col-md-4 col-form-label text-md-right">Code</label>
<div class="col-md-6">
<input id="code" type="number" class="form-control @error('code') is-invalid @enderror" name="code" value="{{ old('code') }}" required autocomplete="code" autofocus>
@error('code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<a class="btn btn-link" href="{{ route('check2fa.resend') }}">Resend Code?</a>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionYou might also like:
- Read Also: How To Run Python Script In Laravel 9
- Read Also: How To Get Current Date And Time In Node.js
- Read Also: How To Send Email In Laravel 9 Using Mailgun
- Read Also: How To Use Google Recaptcha V2 In Laravel 9
