Laravel Jetstream Login dengan Email, Username atau Nomor Telepon

Optimalkan login Laravel Jetstream dengan fleksibilitas email, username, atau nomor telepon. Pelajari integrasi yang efisien untuk pengalaman pengguna terbaik.

1. Install Laravel

Langkah pertama dalam memulai perjalanan pengembangan web dengan Laravel adalah menginstalnya di sistem Anda. Untungnya, proses instalasi ini relatif sederhana. Berikut adalah langkah-langkahnya.

composer create-project laravel/laravel myproject

Anda juga bisa menginstalnya melalui laravel installer

laravel new myproject

2. Install Jetstream

Langkah-langkah menginstal Laravel Jetstream hanyalah beberapa langkah sederhana untuk meningkatkan pengalaman pengembangan Anda.

composer require laravel/jetstream

Setelah Jetstream terinstal, jalankan perintah berikut untuk mengonfigurasi dan menginstalnya.

php artisan jetstream:install livewire

Anda dapat memilih antara menggunakan Livewire atau Inertia.js sebagai stack pembaruan antarmuka. dan jangan lupa jalankan perintah npm untuk menginstal dependensi JavaScript dan mengompilasi aset CSS.

npm install && npm run dev

3. Setup Database

Buka file .env dalam proyek Laravel Anda. Di sini, Anda akan menemukan berbagai pengaturan yang berkaitan dengan database. Pastikan untuk mengonfigurasi parameter seperti DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai dengan detail database yang Anda miliki.

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

4. Update Migration File

Jika Anda perlu menambahkan kolom baru ke tabel yang sudah ada, buka file xxx_create_users_table.php dan ubah menjadi seperti ini.

public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('username')->unique();
            $table->string('phone')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->foreignId('current_team_id')->nullable();
            $table->string('profile_photo_path', 2048)->nullable();
            $table->timestamps();
        });
    }

Selanjutnya yang perlu Anda lakukan adalah melakukan proses migrate database.

php artisan migrate

5. Update User Model

Jika Anda perlu menambahkan kolom baru pada Model Pengguna, buka file User.php yang berada di direktori app dan tambahkan propertinya.

protected $fillable = [
        'name',
        'username',
        'phone',
        'email',
        'password',
    ];

6. Update Register Form

Anda perlu menambahkan dua input field untuk username dan phone number di halaman register yang terletak di resources/views/auth/register.blade.php. Tambahkan kode dibawah ini di bawah input field name.

<div class="mt-4">
    <x-label for="username" value="{{ __('Username') }}" />
    <x-input id="username" class="block mt-1 w-full" type="text" name="username" :value="old('username')" required autofocus autocomplete="username" />
</div>

<div class="mt-4">
    <x-label for="phone" value="{{ __('Phone Number') }}" />
    <x-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autofocus autocomplete="phone" />
</div>

7. Update CreateNewUser.php

Buka file app/Actions/Fortify/CreateNewUser.php, tambahkan username dan phone pada method create sehinggal hasilnya seperti ini.

public function create(array $input): User
    {
        Validator::make($input, [
            'name'      => ['required', 'string', 'max:255'],
            'username'  => ['required', 'string', 'max:255', 'unique:users'],
            'phone'     => ['required', 'string', 'max:255', 'unique:users'],
            'email'     => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password'  => $this->passwordRules(),
            'terms'     => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['required', 'accepted'] : '',
        ])->validate();

        return User::create([
            'name'      => $input['name'],
            'username'  => $input['username'],
            'phone'     => $input['phone'],
            'email'     => $input['email'],
            'password'  => Hash::make($input['password']),
        ]);
    }

8. Update Login Form

Anda perlu memperbarui halaman login form yang terleletak di resources/views/auth/login.blade.php. Kemudia cari ubah field email menjadi seperti ini.

<div>
    <x-label for="auth" value="{{ __('Email/Username/Phone Number') }}" />
    <x-input id="auth" class="block mt-1 w-full" type="text" name="auth" :value="old('auth')" autofocus autocomplete="auth" />
</div>

9. Update Fortify Config

File konfigurasi Fortify dapat ditemukan di config/fortify.php. Buka file ini untuk mengakses berbagai opsi konfigurasi kemudian cari kode di bawah ini.

'username' => 'email',

dan ubah menjadi seperti di bawah ini.

'username' => 'auth',

10. Update JetstreamServiceProvider.php

File dapat ditemukan di app/Providers/JetstreamServiceProvider.php. Buka file ini untuk mengakses konfigurasi Jetstream dan tambahkan kode seperti di bawah ini.

Anda perlu menambahkan logika untuk membuat fitur login dengan opsi menggunakan email, username dan phone number.

<?php

namespace App\Providers;

use App\Actions\Jetstream\DeleteUser;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Laravel\Fortify\Fortify;

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        $this->configurePermissions();

        Jetstream::deleteUsersUsing(DeleteUser::class);

        Fortify::authenticateUsing(function (Request $request) {
            $user = User::where('email', $request->auth)
                ->orWhere('username', $request->auth)
                ->orWhere('phone', $request->auth)
                ->first();

            if (
                $user &&
                Hash::check($request->password, $user->password)
            ) {
                return $user;
            }
        });
    }

    /**
     * Configure the permissions that are available within the application.
     */
    protected function configurePermissions(): void
    {
        Jetstream::defaultApiTokenPermissions(['read']);

        Jetstream::permissions([
            'create',
            'read',
            'update',
            'delete',
        ]);
    }
}

11. Pengujian

jalankan project laravel menggunakan perintah php artisan serve, kemudian buka laravel project di browser. Arahkan ke menu register dan lakukan registrasi user baru.

Setelah berhasil melakukan registrasi, Anda akan di arahkan pada halaman dashboard,  silahkan logout dan coba masuk menggunakan username atau nomor telepon.

Temukan kisah para pekerja penuh gairah dengan pendekatan tak konvensional, menggabungkan keanehan dan efisiensi dalam produktivitas mereka.

Anda mungkin juga menyukainya
Chat WhatsApp
WhatsApp