Laravel 9 Ajax Login And Registration Example

Hello artisan.

In this laravel ajax login tutorial, I will show you how to create login with ajax laravel 9. If you do not know laravel custom login and registration with ajax then this example is for you. From this tutorial, you will learn step by step how to create login system in laravel using ajax request.

We are going to create custom login and registration with ajax request. You know that using ajax request login system, will give a better user experience. I will let you know an example of laravel ajax login and register. I will explain laravel custom login and registration with ajax. Let us see will learn laravel custom login with ajax. We will look at step by step an example of laravel authentication with ajax.

Step 1: Install Laravel

First of all, we need to get a fresh Laravel 9 version application using the bellow command, So open your terminal OR command prompt and run the bellow command:

composer create-project laravel/laravel example-app

Step 2: Database Configuration

In this step, we need to add database configuration in the .env file. so let's add the following details and then run the migration command:

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_name
DB_USERNAME=root
DB_PASSWORD=

Next, run the migration command to create users table like php artisan migrate.

Read also: Artisan Command to Run All Seeders In Laravel

Step 3: Create Route

In this step, we need to create a custom route for login, register, home, and logout. so open your routes/web.php file and add the following route.

routes/web.php

use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\Auth\AuthController;
  
  
/*
|--------------------------------------------------------------------------
| 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');
});
  
Route::get('login', [AuthController::class, 'index'])->name('login');
Route::post('post-login', [AuthController::class, 'postLogin'])->name('login.post'); 
Route::get('registration', [AuthController::class, 'registration'])->name('register');
Route::post('post-registration', [AuthController::class, 'postRegistration'])->name('register.post'); 
Route::get('dashboard', [AuthController::class, 'dashboard']); 
Route::get('logout', [AuthController::class, 'logout'])->name('logout');

Step 4: Create Controller

in this step, we need to create AuthController and add the following code to that file:

app/Http/Controllers/Auth/AuthController.php

namespace App\Http\Controllers\Auth;
    
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
use Session;
use App\Models\User;
use Hash;
    
class AuthController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('auth.login');
    }   
        
    /**  
     * Write code on Method
     *
     * @return response()
     */
    public function registration()
    {
        return view('auth.register');
    } 
         
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function postLogin(Request $request)
    {
  
        $validator = Validator::make($request->all(), [
            'email' => 'required|email',
            'password' => 'required'
        ]);
  
        if ($validator->fails()){
            return response()->json([
                    "status" => false,
                    "errors" => $validator->errors()
                ]);
        } else {
            if (Auth::attempt($request->only(["email", "password"]))) {
                return response()->json([
                    "status" => true, 
                    "redirect" => url("dashboard")
                ]);
            } else {
                return response()->json([
                    "status" => false,
                    "errors" => ["Invalid credentials"]
                ]);
            }
        }
    }
        
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function postRegistration(Request $request)
    {  
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:6',
            'confirm_password' => 'required|min:6|same:password',
        ]);
  
        if ($validator->fails()){
            return response()->json([
                    "status" => false,
                    "errors" => $validator->errors()
                ]);
        }
  
        $data = $request->all();
        $user = $this->create($data);
  
        Auth::login($user);
  
        return response()->json([
            "status" => true, 
            "redirect" => url("dashboard")
        ]);
        
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function dashboard()
    {
        if(Auth::check()){
            return view('dashboard');
        }
    
        return redirect("login")->withSuccess('Opps! You do not have access');
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create(array $data)
    {
      return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password'])
      ]);
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function logout() {
        Session::flush();
        Auth::logout();
    
        return Redirect('login');
    }
}

Step 5: Create Blade Files

Now, you have to create blade files for layout, login, register, and home page. so let's create one by one file:

resources/views/auth/login.blade.php

resources/views/auth/register.blade.php

resources/views/dashboard.blade.php

resources/views/layout.blade.php

Now start the server php artisan serve and visit the following URL to test the application.

Read also: Create Custom Two Factor Authentication System in Laravel

Hope it can help you.