+91 9999968096
Photo Gallery
About Us
Table of Contents
- Step for implement OTP login on Laravel application
- 1. Create database table 'phone_verification'
- 2. create phone_verification.js containing jquery for sending and validating otp
- 3. Add jquery and phone_verification.js inside resources/views/app.blade.php
- 4. Edit default login.blade.php file
- Enter OTP
- 5. Update register.blade.php
- 6. Add on route file
- 7. Add PhoneVerification.php modal file
- 8. Create new controller file SMSController.php
- 9. Update RegisterController.php
In most of our client websites they ask to implement login with otp .
Today I will write on this topic about integrating the otp login system on the default login page of laravel.
We also need a SMS api to send otp from our website code logic. So, be prepared for your SMS api.
If you don't have an SMS api then it's not matter for now. Lets dig on it, you can test without the SMS api. 
Below tutorial assumes you already have installed laravel application. Now, you are all set for login with OTP on your laravel application.
You can open login url
ex: 
Note: If you don't have a SMS api currently then you can leave this function 'sms_send' of SMSController.php . Means do not edit anything.
Then you can find OTP from the database table 'phone_verification' and use it on the login screen.
If you have any query feel free to comment below. I will try my best to reply soon.
I am a freelance web developer having 12+ years of experience in web development and designing. I also provide paid support on a task basis.
Below tutorial assumes you already have installed laravel application. Step for implement OTP login on Laravel application
1. Create database table 'phone_verification'
First of all we need to create a database table 'phone_verification' . In which we will put OTP that is sent to the user to validate when the user enters the otp. Execute below sql to create this database table . You can execute in your phpmyadmin 'SQL' tab2. create phone_verification.js containing jquery for sending and validating otp
Now I will create phone_verification.js . It will mainly contain otp send and validation javascript code. We are using it with jquery. So, make sure you already included jquery in your laravel application. Below complete code of this file. I have put it under my laravel website path3. Add jquery and phone_verification.js inside resources/views/app.blade.php
Open your master file of laravel frontend template and add below 4. Edit default login.blade.php file
Let's edit the default login.blade.php file provided by the laravel bootstrap authentication system. You can take a backup of this file and edit it. Here we have to remove the password field and add an otp field with some javascript function for our logic. You can replace with my below code to resources/views/auth/login.blade.php @endsection 5. Update register.blade.php
Since we are making a login with OTP. the phone number field is must.So, let add phone field in default register.blade.php underresources\views\layouts\auth\ My complete code of this file6. Add on route file
Below route will handle url request for OTP send and OTP validate. Put below inside routes/web.php.7. Add PhoneVerification.php modal file
Now add PhoneVerification.php modal file inside app\Models8. Create new controller file SMSController.php
Let's work on the main part of this tutorial. Create a new SMScontroller.php inside app\Http\Controllers . This will have 3 function1.sms_send
The first function 'sms_send' will handle SMS API calls. We will be using this function to call sms sending requests to the API.2.ajax_otp_send_for_login
This function handles otp sending logic. It create OTP and store to our table 'phone_verification' then send OTP to the user phone number3.check_otp_for_login_with_phone
This function handles the logic of validating otp entered by the user. Note: Replace 'PUT_API_KEY_HERE' and 'PUT_SENDER_ID_HERE' with your original value. Final complete code of SMSController.php9. Update RegisterController.php
Now update RegisterController.php inside app\Http\Controllers\Auth Added 'phone' column. So, that new register form will be able to send the 'phone' field value to database table 'users'. My edited RegisterController.php file
.webp)
