In this post, we will learn how to implement Laravel login with OTP. Let's discuss Laravel Passport login with OTP. This article will provide a simple example of Laravel login with mobile number OTP. We will go into detail on Laravel login using OTP.
Laravel offers basic authentication using email and password, but if you want to add a mobile number OTP-based login, how can you do that? In this tutorial, I will show you how to implement login with OTP in Laravel.
For this example, we will install Laravel UI for basic authentication. During registration, we will ask for the user's mobile number.
Then, we will add a button for login with a mobile number OTP in Laravel. When the user enters their mobile number, they will receive an OTP via SMS.
The user will enter the OTP to log in. We will send the OTP (One Time Password) via SMS using the Twilio API.
So, let's see the following steps to complete this example. You can implement this in Laravel 6, 7, 8, and 9 versions.
Login Preview:
Mobile Number Preview:
OTP Verify Preview:
Registration Page Preview:
1: Install Laravel
This is optional, but if you have not created the Laravel app, you may execute the following command:
composer create-project laravel/laravel example-app
2: Setup Database Configuration
After successfully installing the Laravel app, configure the database setup. Then, open the '.env' file and change the database name, username, and password in the file.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
3: Install Auth Scaffold
The laravel/ui package provided by Laravel offers a convenient way to scaffold all the routes and views necessary for authentication through a few simple commands:
composer require laravel/ui
Next, we need to generate the authentication scaffold with bootstrap. To do so, run the following command:
php artisan ui bootstrap --auth
Then, install npm packages by running the following command:
npm install
Finally, build the bootstrap CSS by running the following command:
npm run build
4: Create Migration
In this step, we need to create two new migrations to add the 'mobile_no' field to the users table and create a new table, 'user_otps'. Run the following code and then run the migration:
php artisan make:migration add_new_fields_users
database/migrations/2022_11_24_110854_add_new_fields_users.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::table('users', function (Blueprint $table) {
$table->string('mobile_no')->nullable();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('mobile_no');
});
}
};
php artisan make:migration create_user_otps_table
database/migrations/2022_11_24_110854_create_user_otps_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_otps', function (Blueprint $table) {
$table->id();
$table->bigInteger('user_id');
$table->string('otp');
$table->timestamp('expire_at')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('user_otps');
}
};
Now, run the migration using the following command:
php artisan migrate
5. Create Model
In this step, we will update the User.php model and create a new model called UserOtp.php. Update the code accordingly:
Next, update the User.php model file.
app/Models/User.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'mobile_no'
];
/**
* 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',
];
}
app/Models/UserOtp.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Exception;
use Twilio\Rest\Client;
class UserOtp extends Model
{
use HasFactory;
/**
* Write code on Method
*
* @return response()
*/
protected $fillable = ['user_id', 'otp', 'expire_at'];
/**
* Write code on Method
*
* @return response()
*/
public function sendSMS($receiverNumber)
{
$message = "Login OTP is ".$this->otp;
try {
$account_sid = getenv("TWILIO_SID");
$auth_token = getenv("TWILIO_TOKEN");
$twilio_number = getenv("TWILIO_FROM");
$client = new Client($account_sid, $auth_token);
$client->messages->create($receiverNumber, [
'from' => $twilio_number,
'body' => $message]);
info('SMS Sent Successfully.');
} catch (Exception $e) {
info("Error: ". $e->getMessage());
}
}
}
6. Create Routes
In this step, we will create new routes for OTP and submit OTP code. You can see the routes below:
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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!
|
*/
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::controller(App\Http\Controllers\Auth\AuthOtpController::class)->group(function(){
Route::get('otp/login', 'login')->name('otp.login');
Route::post('otp/generate', 'generate')->name('otp.generate');
Route::get('otp/verification/{user_id}', 'verification')->name('otp.verification');
Route::post('otp/login', 'loginWithOtp')->name('otp.getlogin');
});
7. Create Controller
Here, we will create the AuthOtpController with some methods and update the register controller file as well. Copy the following code and add it to the controller file:
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
{
/*
|--------------------------------------------------------------------------
| Register Controller
|--------------------------------------------------------------------------
|
| This controller handles the registration of new users as well as their
| validation and creation. By default this controller uses a trait to
| provide this functionality without requiring any additional code.
|
*/
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'],
'mobile_no' => ['required', 'numeric', 'digits:10'],
'email' => ['required', 'string', 'email', 'max:255', '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'],
'mobile_no' => $data['mobile_no'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
}
}
app/Http/Controllers/Auth/AuthOtpController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\User;
use App\Models\UserOtp;
class AuthOtpController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function login()
{
return view('auth.otpLogin');
}
/**
* Write code on Method
*
* @return response()
*/
public function generate(Request $request)
{
/* Validate Data */
$request->validate([
'mobile_no' => 'required|exists:users,mobile_no'
]);
/* Generate An OTP */
$userOtp = $this->generateOtp($request->mobile_no);
$userOtp->sendSMS($request->mobile_no);
return redirect()->route('otp.verification', ['user_id' => $userOtp->user_id])
->with('success', "OTP has been sent on Your Mobile Number.");
}
/**
* Write code on Method
*
* @return response()
*/
public function generateOtp($mobile_no)
{
$user = User::where('mobile_no', $mobile_no)->first();
/* User Does not Have Any Existing OTP */
$userOtp = UserOtp::where('user_id', $user->id)->latest()->first();
$now = now();
if($userOtp && $now->isBefore($userOtp->expire_at)){
return $userOtp;
}
/* Create a New OTP */
return UserOtp::create([
'user_id' => $user->id,
'otp' => rand(123456, 999999),
'expire_at' => $now->addMinutes(10)
]);
}
/**
* Write code on Method
*
* @return response()
*/
public function verification($user_id)
{
return view('auth.otpVerification')->with([
'user_id' => $user_id
]);
}
/**
* Write code on Method
*
* @return response()
*/
public function loginWithOtp(Request $request)
{
/* Validation */
$request->validate([
'user_id' => 'required|exists:users,id',
'otp' => 'required'
]);
/* Validation Logic */
$userOtp = UserOtp::where('user_id', $request->user_id)->where('otp', $request->otp)->first();
$now = now();
if (!$userOtp) {
return redirect()->back()->with('error', 'Your OTP is not correct');
}else if($userOtp && $now->isAfter($userOtp->expire_at)){
return redirect()->route('otp.login')->with('error', 'Your OTP has been expired');
}
$user = User::whereId($request->user_id)->first();
if($user){
$userOtp->update([
'expire_at' => now()
]);
Auth::login($user);
return redirect('/home');
}
return redirect()->route('otp.login')->with('error', 'Your Otp is not correct');
}
}
8. Create Blade File
In this step, we will create new blade files for OTP login and OTP verification and then update the login and register pages as well. Update the following files:
resources/views/auth/otpLogin.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">{{ __('OTP Login') }}</div>
<div class="card-body">
@if (session('error'))
<div class="alert alert-danger" role="alert"> {{session('error')}}
</div>
@endif
<form method="POST" action="{{ route('otp.generate') }}">
@csrf
<div class="row mb-3">
<label for="mobile_no" class="col-md-4 col-form-label text-md-end">{{ __('Mobile No') }}</label>
<div class="col-md-6">
<input id="mobile_no" type="text" class="form-control @error('mobile_no') is-invalid @enderror" name="mobile_no" value="{{ old('mobile_no') }}" required autocomplete="mobile_no" autofocus placeholder="Enter Your Registered Mobile Number">
@error('mobile_no')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Generate OTP') }}
</button>
@if (Route::has('login'))
<a class="btn btn-link" href="{{ route('login') }}">
{{ __('Login With Email') }}
</a>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
resources/views/auth/otpVerification.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">{{ __('OTP Login') }}</div>
<div class="card-body">
@if (session('success'))
<div class="alert alert-success" role="alert"> {{session('success')}}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger" role="alert"> {{session('error')}}
</div>
@endif
<form method="POST" action="{{ route('otp.getlogin') }}">
@csrf
<input type="hidden" name="user_id" value="{{$user_id}}" />
<div class="row mb-3">
<label for="mobile_no" class="col-md-4 col-form-label text-md-end">{{ __('OTP') }}</label>
<div class="col-md-6">
<input id="otp" type="text" class="form-control @error('otp') is-invalid @enderror" name="otp" value="{{ old('otp') }}" required autocomplete="otp" autofocus placeholder="Enter OTP">
@error('otp')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Now, we need to update the login and register view files:
resources/views/auth/login.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">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email 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" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
OR
<a class="btn btn-success" href="{{ route('otp.login') }}">
Login with OTP
</a>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
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="row mb-3">
<label for="name" class="col-md-4 col-form-label text-md-end">{{ __('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="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email 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="row mb-3">
<label for="mobile_no" class="col-md-4 col-form-label text-md-end">{{ __('Mobile No') }}</label>
<div class="col-md-6">
<input id="mobile_no" type="text" class="form-control @error('mobile_no') is-invalid @enderror" name="mobile_no" value="{{ old('mobile_no') }}" required autocomplete="mobile_no" autofocus>
@error('mobile_no')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('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="row mb-3">
<label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('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="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>
@endsection
9. Create Twilio Account & Install
First, you need to create and add a phone number. Then, you can easily get the Account SID, Token, and Number.
Create an account here: www.twilio.com.
Next, add a Twilio phone number.
You can then get the Account SID, Token, and Number and add them to the .env file as follows:
.env
TWILIO_SID=XXXXXXXXXXXXXXXXX
TWILIO_TOKEN=XXXXXXXXXXXXX
TWILIO_FROM=+XXXXXXXXXXX
Next, we need to install the twilio/sdk composer package to use SMS sending via Twilio. Run the following command:
composer require twilio/sdk
Run Laravel App
All the required steps have been completed. To run the Laravel app, type the following command and hit enter:
php artisan serve
Now, go to your web browser, type the URL specified, and view the app output:
http://localhost:8000/
