Implementasi Passwordless dengan Laravel Setup Laravel Project

Sebenarnya kita bisa melakukan nya dengan laravel breeze, namun saya berfikir tidak semua orang ingin menggunakan laravel breeze sebagai starter kit nya. Namun jangan khawatir, nantinya kita juga akan membahas bagaiamana cara membuat passwordless ini dengan laravel breeze.

Instalasi Laravel

Yang paling pertama, karena kita benar-benar mulai dari awal, mari kita lakukan dengan instalasi Larave terlebih dahulu.

Terminal
laravel new passwordless

Kemudian setelah itu, Anda bisa start project nya dengan menggunakan artisan serve, atau jika Anda menggunakan valet itu akan sangat mudah sekali dengan mengetikkan nama folder yang telah dibuat saja seperti http://passwordless.test.

Modifikasi Users Migration

Kita sama-sama mengetahui, bahwa ketika kita instal laravel, default users migration akan ada pada folder database/migrations. Sekarang kita bisa modifikasi migration nya dengan menambahkan nullable kepada kolom password seperti:

2014_10_12_000000_create_users_table.php
Schema::create('users', function (Blueprint $table) {
    // ...
    $table->string('password')->nullable();
    // ...    
});

Setelah itu, Anda bisa melakukan migrate, namun pastikan Anda sudah membuat database nya.

Sejak Laravel 9.*, Kita bisa langsung migrate tanpa membuat database terlebih dahulu. Artinya dia akan langsung buat secara otomatis dan membuat namanya sesuai dengan apa yang ada di file .env.

Setelah itu Anda berhasil melakukan migrate, maka sekarang kita bisa membuat layout nya.

Layout

Pertama, mari kita buat satu komponen dengan nama AppLayout.

Terminal
php artisan make:component AppLayout

Jika sudah, harusnya Anda bisa melihat file nya tepat di app/View/Components/AppLayout.php. Dan jika Anda familiar dengan Laravel components, pastinya Anda akan mengetahuinya bahwa dia akan membuat file .blade tepat pada resources/views/components/app-layout.blade.php.

Dan harusnya Anda akan melihat ini method render tepat pada AppLayout.php seperti berikut:

app/View/Components/AppLayout.php
public function render(): View|Closure|string
{
    return view('components.app-layout');
}

Kita akan modifikasi view nya ke path yang berbeda. Silakan ganti menjadi:

app/View/Components/AppLayout.php
public function render(): View|Closure|string
{
    return view('layouts.app');
}

Master Layout

Jika sudah, silakan buat 1 folder dengan nama layouts tepat di dalam resources/views, dan didalamnya kita bisa membuat file baru dengan nama app.blade.php. Dan silakan buat boilerplate berikut ini:

resources/views/app.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel passwordless</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
    {{ $slot }}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
</body>
</html>

Jika Anda perhatikan, disini saya membuat boilerplate layout nya menggunakan bootstrap, agar kita tidak direpotkan lagi dengan desain-desain seperti text form dan lain-lain.

Setelah itu, kita bisa buat folder baru tepat di dalam folder views dengan nama auth. Dan kemudian di dalam nya kita bisa file login.blade.php.

Jadi untuk struktur folder views kita akan sudah seperti ini:

Terminal
resources/views
├── auth
│   └── login.blade.php
├── components
│   └── app-layout.blade.php
├── layouts
│   └── app.blade.php
└── welcome.blade.php

Oia, sebelum kita lanjut untuk membuat halaman login nya. Mari kita hapus terlebih dahulu file file yang tidak pentin seperti welcome.blade.php dan juga components/app-layout.blade.php. Dan harusnya, struktur nya akan sudah seperti ini:

Terminal
resources/views
├── auth
│   └── login.blade.php
└── layouts
    └── app.blade.php