Tutorial Login Register Laravel 7 dengan Fitur Auth dan View React

Pada kesempatan kali ini admin akan berbagi tutorial membuat login register logout dengan fitur auth di laravel 7 dengan menggunakan tampilan React. Seperti yang kita tahu bahwa dengan menggunakan fitur auth kita bisa mendapatkan banyak keuntungan seperti keamanan pada data, pembatasan hak akses, dan lain sebagai,nya.

Kita akan menggunakan package laravel/ui untuk membuat tampilan yang sudah disediakan oleh package tersebut.

Installasi Laravel

Jika kalian belum paham mengenai installasi laravel 7 bisa baca artikel Cara Install Laravel 7

Installasi Package laravel/ui

composer require laravel/ui

Install NPM

Installasi npm berfungsi untuk generate view dan assets yang dibutuhkan pada auth :

install npm && npm run dev

Membuat Tampilan View dengan React

Kali ini kita akan menggunakan preset react untuk tampilan auth. Pada package laravel/ui akan membuat membuat folder baru dengan nama auth dan layouts untuk base layout,nya yang berada di dalam folder "resources/views". Berikut perintah untuk membuat view dengan react :

php artisan ui react --auth

Membuat Koneksi Database

Silahkan kalian buat database namanya terserah kalian dan buat koneksi database di file .env

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

Sebagai contoh diatas admin membuat database dengan nama login_auth, Silahkan kalian bisa menyesuaikannya sendiri.

Run Migration

Secara default saat kita menginstall frameworok laravel sudah disediakan file migrations yang ada di folder "database/migrations" 

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Sekarang kita jalankan migration dengan perintah berikut ini :

php artisan migrate

Route

Maka akan terdapat penambahan kode berikut ini pada file web.php yang ada di folder routes

Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');

Controller

Di controller sudah terdapat file dengan nama HomeController.php dengan menggunakan middleware auth. Berarti jika kita mengakses view tanpa login maka akan ke redirect ke form hamalan login.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('home');
    }
}

View

Secara otomatis maka akan terdapat beberapa file template blade auth yang ada di folder resources/views/auth dan base layout pada folder resources/views/layouts.

Membuat Dummy User dengan Seeder

Membuat seeder untuk dummy data users dengan menggunakan perintah berikut ini :

php artisan make:seeder UsersTableSeeder

Sehingga membuat file baru di folder "database/seeds" dengan nama file UsersTableSeeder.php

Kemudian kita edit :

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

Jalankan seeder dengan perintah berikut ini pada terminal :

php artisan db:seed

Setelah semua sudah selesai kita jalankan aplikasinya silahkan ketikan perintah berikut ini pada terminal :

php artisan serve

Jika sudah berjalan maka ketikan pada alamat web browser http://localhost:8000/login

Tampilan login

Tampilan Register

Tampilan Dashbord 

Itulah tutorial singkat dari admin semoga bermanfaat.