Membuat Login dengan Email atau Username atau Phone pada Laravel

Pada fitur login di framework Laravel secara default menggunakan field email dan password. Bagaimana jika ingin merubah default email tersebut:

• Merubah field email menjadi username
• Menggunakan username dan email dalam satu field di form login
• Menggunakan username, email, dan phone dalam satu field di form login

Untuk implementasi kondisi ini kita perlu merubah default LoginController pada Laravel.

Sebelum memulai tutorial ini, pastikan kita sudah install project laravel dan generate auth pada Laravel dengan mengikuti tutorial pada tautan berikut:

Membuat Authentication pada Laravel 7 | Dotlocal

Setelah selesai generate auth maka akan ada file controller pada folder Auth seperti LoginController, ConfirmPasswordController, RegisterController dan sebagainya. Mari kita buka file controller LoginController.php

// open file LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */
    use AuthenticatesUsers;
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
}

Pada LoginController secara default menggunakan class AuthenticatesUsers yang handle proses login termasuk validasi, auth, dll.

Untuk lokasi class AuthenticatesUsers terdapat pada vendor package laravel/ui, jadi jangan edit atau merubah yang ada pada class ini.

Jika kita akan melakukan custom pada login kita dapat merubah method yang ada pada class AuthenticatesUsers dengan cara menimpa/menulis kembali methodnya di class LoginController.

Merubah field email menjadi username

Step 1— Tambah field username pada table users

Pada step ini kita akan membuat migration baru untuk menambahkan field username pada table users. Kita menggunakan datatype varchar pada field username.

Buka terminal dan jalankan perintah artisan berikut:

php artisan make:migration add_username_column_to_users_table
// Created Migration: xx_xx_xx_xx_add_username_column_to_users_table

Kemudian edit file migration xx_xx_xx_xx_add_username_column_to_users_table yang ada pada folder database/migrations:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddUsernameColumnToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->unique()
                  ->after('email');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}

Step 2— Buat Dummy Users dengan Seeder

Buat seeder untuk dummy data users dengan menggunakan perintah artisan make:seeder

php artisan make:seeder UsersTableSeeder
// Seeder created successfully.

Perintah artisan di atas membuat file baru di database/seeds/UsersTableSeeder.php

// edit file database/seeds/UsersTableSeeder.php
<?php
use Illuminate\Database\Seeder;
class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $users = [];
        $faker = Faker\Factory::create();
        for($i=0;$i<15;$i++){
        $data[$i] = [
                'name' => $faker->name,
                'email' => $faker->unique()->safeEmail,
                'username' => $faker->unique()->userName,
                'email_verified_at' => now(),
                'password' => bcrypt('password'),
                'remember_token' => Str::random(10),
            ];
        }
        DB::table('users')->insert($data);
    }
}

Refresh migration dan seeder dengan perintah berikut pada terminal:

php artisan migrate:refresh --seed

Silahkan check dummy data yang ada pada database:

Step 3— Edit Method Username

Laravel secara default menggunakan email untuk proses auth, jika kita ingin merubahnya, tambahkan method username() pada file Auth/LoginController.php.

Karena kita akan merubah field email menjadi field username, maka isi value pada method username() diisi “username”.

Untuk custom field bisa disesuaikan dengan kebutuhan misal ingin menggunakan no_hp atau id_user.

// edit file Auth/LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */
    use AuthenticatesUsers;
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
    public function username()
    {
        return 'username';
    }
}

Step 4— Edit view login.blade.php

Kemudikan pada view login kita hapus field email diganti dengan field username:

// edit file login.blade.php
@extends('layouts.app')
@section('content')
.......
 <form method="POST" action="{{ route('login') }}">
    @csrf
    <div class="form-group row">
        <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>
    <div class="col-md-6">
            <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autofocus>
            @error('username')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
.......
</form>
......
@endsection

Step 5— Buka route pada browser

Jalankan perintah php artisan serve pada terminal, dan akses routes login pada browser, kemudian test login menggunakan username dan password.

Menggunakan username dan email dalam satu field di form login

Jika kita ingin menggunakan username dan email dalam satu field pada form login, kita harus custom di view login.blade.php dan LoginController.php

Step 1— Edit view login.blade.php

Pada view login kita hapus field email diganti dengan field username:

// edit file login.blade.php
@extends('layouts.app')
@section('content')
.......
<form method="POST" action="{{ route('login') }}">
    @csrf
<div class="form-group row">
        <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username or Email') }}</label>
<div class="col-md-6">
            <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autofocus>
@error('username')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
.......
</form>
......
@endsection

Step 2— Tambah Method Username

Tambahkan filter pada field username yang dikirim dari form login pada method username() di file Auth/LoginController.php, tambah juga method sendFailedLoginResponse supaya pesan error muncul untuk semua kondisi.

Filter untuk memvalidasi HTTP request yang diterima dalam bentuk email atau tidak menggunakan function filter_var yang telah disediakan oleh PHP:

if( filter_var($email, FILTER_VALIDATE_EMAIL))
{
    /*
     * Rest of your code
     */
}

Tambahkan function filter_var pada method username():

// edit file Auth/LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */
    use AuthenticatesUsers;
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
    /**
     * Get the failed login response instance.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Symfony\Component\HttpFoundation\Response
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    protected function sendFailedLoginResponse(Request $request)
    {
        throw ValidationException::withMessages([
            'username' => [trans('auth.failed')],
        ]);
    }
    /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function username()
    {
        $login = request()->input('username');
        $field = filter_var($login, FILTER_VALIDATE_EMAIL) ? 'email' : 'username';
        request()->merge([$field => $login]);
        return $field;
    }
}

Step 3— Buka route pada browser

Jalankan perintah php artisan serve pada terminal, dan akses routes login pada browser, kemudian test login menggunakan username/email dan password.

Menggunakan username, email, dan phone dalam satu field di form login

Sebelumnya pastikan field phone sudah ditambahkan pada database table users.

Step 1 — Edit view login.blade.php

Pada view login kita hapus field email diganti dengan field username:

// edit file login.blade.php
@extends('layouts.app')
@section('content')
.......
<form method="POST" action="{{ route('login') }}">
    @csrf
<div class="form-group row">
        <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username/Email/Phone') }}</label>
<div class="col-md-6">
            <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autofocus>
@error('username')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
.......
</form>
......
@endsection

Step 2 — Tambah Method Username

Tambahkan filter pada field username yang dikirim dari form login pada method username() di file Auth/LoginController.php.

Terdapat 3 kondisi filter untuk memvalidasi HTTP request pada controller yang dikirim oleh form input username, value input berupa :

• phone dengan method is_numeric
• email dengan filter_var
• username sebagai pilihan terakhir

// edit file Auth/LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */
    use AuthenticatesUsers;
     /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
    /**
     * Get the failed login response instance.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Symfony\Component\HttpFoundation\Response
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    protected function sendFailedLoginResponse(Request $request)
    {
        throw ValidationException::withMessages([
            'username' => [trans('auth.failed')],
        ]);
    }
    /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function username()
    {
        $login = request()->input('username');
        if(is_numeric($login)){
            $field = 'phone';
        } elseif (filter_var($login, FILTER_VALIDATE_EMAIL)) {
            $field = 'email';
        } else {
            $field = 'username';
        }
        request()->merge([$field => $login]);
        return $field;
    }
}

Step 3 — Buka route pada browser

Jalankan perintah php artisan serve pada terminal, dan akses routes login pada browser, kemudian test login menggunakan username/email/phone dan password.

Tutorial Lainnya

Email Verification dengan SMTP atau Mailgun pada Laravel

Laravel Basic | dotlocal

Support the Author

Jika suka dengan artikel ini, bisa support saya ditautan berikut ini https://karyakarsa.com/tobidsn :)

Cheers
Tobi Ahmad
Founder of Dot Local