Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil membuat fitur login menggunakan Laravel Fortify. Pada artikel kali ini kita semua akan belajar bagaimana cara membuat fitur forgot password via email dan melakukan update password dari link yang dikirim melalui email.
Dan pada praktek kali ini, kita akan menggunakan Mailtrap untuk mengirim email-nya. Mailtrap adalah layanan fake email yang digunakan untuk pengujian tanpa harus mengirimkan ke pengguna email aslinya. Ini akan kita manfaatkan untuk proses kirim reset password via email.
Langkah 1 - Daftar Akun Mailtrap
Sekarang kita akan daftar akun di Mailtrap terlebih dahulu untuk mendapatkan username dan password untuk SMTP kirim email. Teman-teman bisa klik link berikut ini : https://mailtrap.io/register/signup?ref=header dan disini kita bisa daftar menggunakan Google, GitHub dan Microsoft atau kita bisa daftar secara manual.
Setelah berhasil mendaftar, silahkan masuk ke Demo Inbox dan disini teman-teman sudah mendapatkan credential untuk SMTP. Kurang lebih seperti ini :
Langkah 2 - Konfigurasi SMTP di Laravel
Setelah kita berhasil mendaftar dan mendapatkan credential untuk username dan password, sekarang kita lanjutkan untuk meng-konfigurasi di dalam project Laravel. Silahkan buka file .env kemudian cari kode berikut ini :
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=465
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="no-reply@santrikoding.com"
MAIL_FROM_NAME="${APP_NAME}"
Silahkan isi bagian MAIL_USERNAME dengan username yang di dapatkan dari Mailtrap dan MAIL_PASSWORD ini juga di isi password yang di dapatkan dari Mailtrap.
Langkah 3 - Membuat View Forgot Password
Sekarang kita lanjutkan untuk membuat halaman view untuk proses forgot password, silahkan buat file baru dengan nama forgot-password.blade.php di dalam folder resources/views/auth kemudian masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Forgot Password - SantriKoding.com'])
@section('content')
<div class="col-md-5">
<div class="card">
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('password.email') }}">
@csrf
<div class="form-group">
<label class="font-weight-bold text-uppercase">Email Address</label>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
placeholder="Masukkan Alamat Email">
@error('email')
<div class="alert alert-danger mt-2">
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary btn-block">SEND PASSWORD RESET LINK</button>
</form>
</div>
</div>
</div>
@endsection
Di atas untuk form action kita arahkan ke sebuah route dengan nama password.email. Kurang lebih seperti berikut ini :
<form method="POST" action="{{ route('password.email') }}">
Sekarang kita bisa coba jalankan di http://localhost:8000/forgot-password jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Silahkan masukkan email yang sudah digunakan daftar dan jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Kemudian, silahkan cek Demo Inbox di Mailtrap, maka kita akan mendapatkan email yang isinya adalah link untuk reset password. Kurang lebih seperti berikut ini :
Kemudian silahkan klik Reset Password maka kita akan mendapatkan sebuah error, kurang lebih seperti berikut ini :
Error tersebut muncul karena kita belum membuat view untuk melakukan reset password.
Langkah 4 - Membuat View Reset Password
Sekarang kita lanjutkan untuk membuat view untuk proses reset atau update password di Laravel Fortify. Silahkan buat file baru dengan nama reset-password.blade.php di dalam folder resources/views/auth kemudian masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Reset Password - SantriKoding.com'])
@section('content')
<div class="col-md-5">
<div class="card">
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('password.update') }}">
@csrf
<input type="hidden" name="token" value="{{ $request->route('token') }}">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Email Address</label>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ $request->email ?? old('email') }}" required autocomplete="email" autofocus placeholder="Masukkan Alamat Elamil">
@error('email')
<div class="alert alert-danger mt-2">
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
<div class="form-group">
<label class="font-weight-bold text-uppercase">Password</label>
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
name="password" required autocomplete="new-password" placeholder="Masukkan Password Baru">
@error('password')
<div class="alert alert-danger mt-2">
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
<div class="form-group">
<label class="font-weight-bold text-uppercase">Konfirmasi Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation"
required autocomplete="new-password" placeholder="Masukkan Konfirmasi Password Baru">
</div>
<button type="submit" class="btn btn-primary btn-block">RESET PASSWORD</button>
</form>
</div>
</div>
</div>
@endsection
Di atas untuk form action, kita arahkan ke sebuah route yang bernama password.update.
<form method="POST" action="{{ route('password.update') }}">
Dimana di dalam form ini juga kita menambahkan sebuah input type hidden untuk menyimpan informasi data Token yang digunakan untuk melakukan reset password.
<input type="hidden" name="token" value="{{ $request->route('token') }}">
Sekarang kita bisa coba klik Reset Password yaang ada di dalam email, atau bisa refresh halaman error sebelumnya, jika berhasil, kurang lebih kita akan mendapatkan sebuah form untuk proses reset atau update password.
Silahkan update password teman-teman dan klik RESET PASSWORD jika berhasil, maka akan di arahkan ke halaman login dengan pesan sukses. Kurang lebih seperti berikut ini :
Sampai disini pembahasan tentang cara membuat Authentication menggunakan Laravel Fortify. Jika teman-teman ada pertanyaan atau kesulitan, bisa bertanya melalui kolom komentar di bawah. Terima Kasih.
Download Source Code : https://github.com/SantriKoding-com/Laravel-Fortify-Bootstrap