Autentikasi dengan Laravel Sanctum & Fortify untuk SPA

Kita sama - sama tau, begitu banyak first party package untuk melakukan autentikasi, seperti breeze, ui, jetstream.

Nah jetstream sendiri juga menggunakan fortify sebagai api auth nya, namun, jika kita tidak ingin menggunakan jetstream melainkan ingin memakai fortify nya saja juga bisa, terlebih lagi, kita bisa turn off view nya yang by default bisa kita tentukan dalam AppServiceProvider, kali ini saya akan menganggap bahwa Anda ingin memakai fortify sebagai api saja, dan untuk view auth nya menggunakan spa yang telah Anda punya.

Pertama sekali, silahkan install laravel nya dengan composer ataupun laravel command cli yang telah di install di machine Anda.

1laravel new fortify-api
2
bashCopy

Setelah itu, silahakan masuk kedalam folder fortify-api, kemudian install fortify nya dengan cara seperti ini.

1fortify-api > composer require laravel/fortify
2
bashCopy

Jika sudah, langsung aja publish vendor dari fortify tersebut dengan artisan command

1fortify-api > php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
2
bashCopy

Jika sudah, silahkan masukkan sanctum middleware nya kedalam app/Http/Kernel.php tepat pada api key.

1'api' => [
2    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
3    'throttle:api',
4    \Illuminate\Routing\Middleware\SubstituteBindings::class,
5],
6
phpCopy

Setelah itu, pastikan FortifyServiceProvider telah terdaftar di config/app.php, karena jika tidak, dia tidak akan dikenali. Buka config/app.php

1/*
2 * Application Service Providers...
3 */
4App\Providers\FortifyServiceProvider::class,
5
phpCopy

Setelah itu, silahkan buat satu seeder untuk user dengan artisan command seperti berikut.

fortify-api > php artisan make:seed UserSeeder

Silahkan buka filenya tepat pada database/seeders/UserSeeder.php dan masukkan satu user saja tepat pada run method seperti berikut.

1public function run()
2{
3    DB::table('users')->insert([
4        'name' => 'Irsyad A. Panjaitan',
5        'email' => '[email protected]',
6        'email_verified_at' => null,
7        'password' => bcrypt('password'),
8    ]);
9}
10
phpCopy

Setelah itu, pastikan Anda sudah setup database sesuai dengan konfigurasi yang Anda punya, buka file .env.

1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=fortify_api
5DB_USERNAME=root
6DB_PASSWORD=
7
phpCopy

Jika sudah, maka kita bisa lanjut untuk melakukan migrate sekalian memasukkan seedernya dengan cara.

fortify-api > php artisan migrate --seed

Lanjut, buka kembali .env file, dan setup sanctum dan juga mailnya.

1# Sanctum
2SANCTUM_STATEFUL_DOMAINS=localhost:3000
3SPA_URL=http://localhost:3000
4SESSION_DOMAIN=localhost
5# Mail
6MAIL_FROM_ADDRESS=[email protected].com
7
phpCopy

Silahkan sesuaikan port SPA yang Anda punyai dengan url yang ada di atas. Disini saya menganggap Anda menggunakan react, jadi saya berasumsi portnya 3000, jika Anda menggunakan vue, itu seharusnya 8080 jika tidak di modifikasi.

Lanjut, silahkan buka file konfig untuk cors yang by default sudah diberi sewaktu kita install laravel config/cors.php

1'paths' => [
2    'api/*',
3    'login',
4    'logout',
5    'register',
6    'user/password',
7    'forgot-password',
8    'reset-password',
9    'sanctum/csrf-cookie',
10    'user/profile-information',
11    'email/verification-notification',
12],
13
phpCopy

Masih tetap di file yang sama, silahkan scroll kebawah dan pastikan supports_credentials nya turn on seperti berikut.

1'supports_credentials' => true,
2
phpCopy

Nah, sekarang waktunya kita setup fortify itu sendiri yang ada di config/fortify.php. Untuk default redirect nya kita akan masukkan url spa kita yang sudah setup didalam .env tadi seperti berikut.

1'home' => env('SPA_URL') . '/dashboard',
2
phpCopy

Jangan lupa, karena view auth nya kita ingin dari SPA, maka kita akan turn off view nya seperti berikut.

1'views' => false,
2
phpCopy

Selanjutnya, silahkan uncomment fitur yang ingin Anda pakai di fortify itu sendiri.

1'features' => [
2    Features::registration(),
3    Features::resetPasswords(),
4    Features::emailVerification(),
5    Features::updateProfileInformation(),
6    Features::updatePasswords(),
7],
8
phpCopy

Jika sudah, kita bisa lanjut untuk edit file middleware RedirectIfAuthenticated yang ada di app/Http/Middleware/RedirectIfAuthenticated.php dan modifikasi loop untuk guard yang ada di dalam method handle tersebut seperti berikut.

1foreach ($guards as $guard) {
2    if (Auth::guard($guard)->check()) {
3        if ($request->expectsJson()) {
4            return response()->json(['error' => 'You already authenticated.'], 200);
5        }
6        return redirect(RouteServiceProvider::HOME);
7    }
8}
9
phpCopy

Apa yang kita tambahkan adalah, ketika request mengharapkan json, kita akan return json dengan pesan You already authenticated.

Masih didalam folder middleware, silahkan buka file Authenticate.php dan buat default nya ke SPA url yang kita punya jika request tidak di dapat dari json.

1protected function redirectTo($request)
2{
3    if (! $request->expectsJson()) {
4        return url(env('SPA_URL') . '/login');
5    }
6}
7
phpCopy

Untuk mengaktifkan email, ada yang perlu Anda tambahkan pada model User, silahkan buka filenya di app/Models/User.php dan implementasikan MustVerifyEmail ke dalam kelas User tersebut seperti berikut.

1class User extends Authenticatable implements MustVerifyEmail
2{
3    use Notifiable;
4    // ...
5}
6
phpCopy

Next, kita setup untuk reset password, apa yang kita lakukan disini hanyalah memodifikasi url default yang diberi laravel itu sendiri ke dalam SPA kita. silahkan buka AuthServiceProvider yang ada di App\Providers\AuthServiceProvider.php dan tepat pada boot method.

1public function boot()
2{
3    ResetPassword::createUrlUsing(function ($user, string $token) {
4        return env('SPA_URL') . '/reset-password?token=' . $token;
5    });
6}
7
phpCopy

Jangan lupa untuk memasukkan ResetPassword class kedalam AuthServiceProvider seperti berikut.

1namespace App\Providers;
2use Illuminate\Auth\Notifications\ResetPassword;
3...
4
phpCopy

Jika sudah, maka kita hampir selesai, silahkan buka route api.php dan masukkan authenticated user didalam auth:sanctum seperti berikut.

1use Illuminate\Http\Request;
2Route::middleware('auth:sanctum')->get('/users/{user}', function (Request $request) {
3    return $request->user();
4});
5
phpCopy

Nah jika sudah, harusnya semua sudah selesai, jika kalian ingin tau bagaimana kerja dengan breeze, kalian bisa lihat disini.