Table of Contents

Penjelasan

Disini kita akan membuat penerapan komunikasi antara Frontend ke Backend dengan Token sebagai pengaman dari komuniikasi tersebut dengan spesifikasi sbb :

  1. ReactJS sebagai Frontend
  2. Sanctum untuk Token pengaman(merupakan package bawaan di laravel 9)
  3. Laravel sebagi Backend API
Persiapan Backend
Install Laravel
				
					//via Laravel Installer
composer global require laravel/installer
laravel new laravelsantumreactjs

//via Composer
composer create-project laravel/laravel laravelsantumreactjs
				
			
Setting Database

Buka file .env lalu edit baris berikut :

				
					//.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=myusername
DB_PASSWORD=mypassword
				
			
Install Sanctum(Laravel < 9)

Langka ini diperlukan hanya jika anda menggunakan Laravel versi 9 ke bawah. Install sanctum melalui composer.

				
					composer require laravel/sanctum
				
			

Jalankan database migration.

				
					php artisan migrate
				
			

Sanctum akan membuat satu table di database untuk menyimpan token API.

Buat AuthController
				
					php artisan make:controller Api/AuthController
				
			

Sesuaikan file Controller App/Http/Controllers/Api/AuthController.php

				
					<?php
namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Auth;
use Validator;
use App\Models\User;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $validator = Validator::make($request->all(),[
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8'
        ]);

        if($validator->fails()){
            return response()->json($validator->errors());       
        }

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password)
         ]);

        $token = $user->createToken('auth_token')->plainTextToken;

        return response()
            ->json(['data' => $user,'access_token' => $token, 'token_type' => 'Bearer', ]);
    }

    public function login(Request $request)
    {
        if (!Auth::attempt($request->only('email', 'password')))
        {
            return response()
                ->json(['message' => 'Unauthorized'], 401);
        }

        $user = User::where('email', $request['email'])->firstOrFail();

        $token = $user->createToken('auth_token')->plainTextToken;

        return response()
            ->json(['message' => 'Hi '.$user->name.', welcome to home','access_token' => $token, 'token_type' => 'Bearer', ]);
    }

    // method for user logout and delete token
    public function logout()
    {
        auth()->user()->tokens()->delete();

        return [
            'message' => 'You have successfully logged out and the token was successfully deleted'
        ];
    }
}
				
			
Define Route

Selanjutnya, buka file routes/api.php dan tambahkan kode route seperti di bawah ini.

				
					//Api route for register new user
Route::post('/register', [App\Http\Controllers\Api\AuthController::class, 'register']);
//Api route for login user
Route::post('/login', [App\Http\Controllers\Api\AuthController::class, 'login']);

//Sanctum Route Protection
Route::group(['middleware' => ['auth:sanctum']], function () {
    Route::get('/profile', function(Request $request) {
        return auth()->user();
    });

    // API route for logout user
    Route::post('/logout', [App\Http\Controllers\Api\AuthController::class, 'logout']);
});
				
			
Persiapan Frontend
Install Laravel UI
				
					composer require laravel/ui
				
			
Install ReactJS
				
					php artisan ui react
				
			
Install Dependency
				
					npm install
				
			

&

				
					npm run dev
				
			
Menyiapkan View

Buat file baru resources/views/layout/app.blade.php.

				
					<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    
        <title>{{ config('app.name', 'Laravel') }}</title>
    
        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    
        <!-- Scripts -->
        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    </head>
    <body>
        <div id="example"></div>
    </body>
</html>

				
			
Define Route Frontend

Edit routes/web.php lalu tambahkan baris berikut.

				
					Route::get('/frontend', function () {
    return view('layouts.app');
});
				
			
Run Laravel Server
				
					php artisan serve
				
			

Buka browser http://localhost:8000/frontend hasilnya sbb :

Menyiapkan Tampilan reactJS
Menyesuaikan index

Pada resource/view/layouts/app.blade.php kita lihat element utamanya yaitu id=”example” dimana pada reactjs biasanya kita menggunakan id=”root”. Untuk memudahkan kedepannya baiknya kita sesuaikan element root tesrsebut.

				
					body>
    <!--<div id="example"></div>-->
    <div id="root"></div>
</body>
				
			
Menyesuaikan app.js

Buat file baru bernama /resources/js/App.jsx

				
					import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
    return (
        <div className="container mt-5">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">App Component</div>
                        <div className="card-body">Using `div id=root`</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

if (document.getElementById('root')) {
    const Index = ReactDOM.createRoot(document.getElementById("root"));

    Index.render(
        <React.StrictMode>
            <App/>
        </React.StrictMode>
    )
}

				
			

Edit file resources/js/app.js tambahkan baris berikut.

				
					//import './components/Example'; ganti
import './App';
				
			

Struktur direktorinya seperti gambar berikut.

Buka kembali browser http://localhost:8000/frontend hasilnya sbb :

Membuat Halaman Authentikasi