Pada tutorial kali ini saya akan membahas cara custom login dan register pada laravel jetstream. Jika kalian telah menginstal Laravel Jetstream maka default loginnya email dan password, Kemudian untuk registernya dengan default nama,email,password dan konfirmasi password.
Nah, jika kita ingin menambahkan atau mengubah opsi dari login dan resgiter maka kita perlu melakukan custom.
Laravel Fortify
Laravel Jetstream menggunakan package Laravel Fortify untuk sistem authenticationnya. Fortify ini digunakan sebagai Backend. File fortify terletak pada foder config/fortify.php yang ototmatis dibuat ketika kita menginstall laravel jetstream.
File config ini digunakan untuk melakukan perubahan sistem authentication, seperti melakukan redirect ketika user telah login dan juga masih banyak lagi
Kita juga bisa menonaktifkan dan mengaktifkan fitur-fitur di dalam fortify seperti registration, password reset two factor login, update profile dan lainnya.
Actions
Action merupakan logika yang dijalankan untuk memenuhi permintaan, seperti menjalankan sistem authentication yang akan diletakan kedalam classs action.
Seperti pada file App\Actions\Fortify\CreateNewUser.php nantinya akan di panggil ketika akan membuat user baru. Di dalam class ini akan melakukan validasi, memasukkan data user dan juga memperbarui data user.
Langka awal kalian harus menginstal laravel jetstream terlebih dahulu, Untuk tutorialnya bisa dilihat disini BERKENALAN DENGAN LARAVEL JETSTREAM
Update Tabel DATABASE
Pada tutorial kali ini saya akan custom login dengan opsi username/email dan password, Kemudian untuk register kita tambahkan username dan phone.
Kita perlu menambahkan terlebih dahulu pada table user yaitu username dan phone, kita tinggal ubah pada bagian database/migration/create_user_table.php. Maka akan jadi seperti berikut ini
Kemudian lakukan migrate database dengan printah php artisan migrate:fresh, kita menggunakan fresh karena pada awal saat instalasi laravel jetstream kita telah melakukan migrate,
Nahh fungsinya yaitu akan menghapus semua tabel dan membuat tabel baru, Layaknya baru melakukan migrate.
Setelah melakukan migrate, maka yang baru kita tambahkan di file migration yaitu username dan phone sudah ada di dalam table user. kalian bisa cek di http://localhost/phpmyadmin
Custom Register
Setelah kalian sudah menambahkan field baru yaitu username dan phone pada table user, maka langkah selanjutnya kita ubah pada bagian model user, filenya berada di App/Models/User.php.
Disini saya akan menambahkan username dan phone pada form register, Silahkan tambahkan username dan phone pada bagian protected $fillable.
protected $fillable = [
'name',
'email',
'username',
'phone',
'alamat',
'password',
];Selanjutnya kita tambahkan input username dan phone di bagian form register. Silahkan buka file resources/views/auth/register.blade.php. Tambahkan input username dan phone seperti ini.
<div class="mt-4">
<x-jet-label for="phone" value="{{ __('Phone') }}" />
<x-jet-input id="phone" class="block mt-1 w-full" type="number" name="phone" :value="old('phone')" required />
</div>
<div class="mt-4">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
</div>Kemudian kita tambahkan validatornya, silahkan buka file app/Actions/Fortify/CreateNewUser.php. Tambahkan untuk validator username dan phone seperti berikut ini.
Validator::make($input, [ 'name' => ['required', 'string', 'max:255'], 'username' => ['required', 'string','max:255', 'unique:users'], 'phone' => ['required', 'string','max:15', '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']), ]);
Kita sudah berhasil custom bagian register, tampilannya sebagai berikut ini. Silahkan daftarkan user baru.
Apabila telah mendaftarkan user otomatis redirect ke bagian dashboard, seperti ini tampilan dashboard default dari laravel jetstream.
Coba kalian perhatikan di bagian pojok kiri atas terdapat tulisan admin itu adalah nama yang telah saya daftarkan tadi, nahh jika kalian ingin ganti dengan nama username kalian bisa ganti dibagian ini pada file resources/views/navigation-menu.blade.php. Jadi ubah dibagian Auth::user() menjadi username.
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
{{ Auth::user()->username }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>Setelah itu silahkan refresh page dashboard dibagian pojok kiri atas otomatis akan mengganti dengan leravio yaitu username yang sudah saya daftarkan tadi.
Custom Login
Selanjutnya mari kita custom bagian login. Dibagian login ini default dari laravel jetstream hanya menggunakan email, nahh disini saya akan tambahkan username, jadi nanti loginnya bisa menggunakan email/username.
Kita ubah terlebih dahulu pada bagian views login, silahkan buka file resources/views/auth/login.blade.php. Ubah inputan bagian email jadi seperti ini.
<div>
<x-jet-label for="auth" value="{{ __('Email/Username') }}" />
<x-jet-input id="auth" class="block mt-1 w-full" type="text" name="auth" :value="old('auth')" required autofocus />
</div>Selanjutnya silahkan buka file config/fortify.php. Pada line 49 kita ubah dibagian usernamenya karena tadi kita sudah mengubah dibagian input email dengan set name auth maka kita ganti juga pada username di file fortify.php dengan auth
'username' => 'auth',
Selanjutnya kita buka file app/Providers/JetstreamServiceProvider. Kita tambahkan pada function boot authenticateUsing menjadi seperti ini
Fortify::authenticateUsing(function (Request $request) {
$user = User::where('email', $request->auth)
->orWhere('username', $request->auth)
->first();Sekarang kalian bisa menggunakan email atau username untuk loginnya
Sekian tutorial Custom Login dan Register Laravel Jetstreaam. Jika ada kesulitan maupun error kalian bisa komentar dibawah sini.