Laravel + React Inertia

Use Laravel as the OAuth backend and share the authenticated user to React pages through Inertia. The browser never sees your client_secret.

Architecture

Setup

composer require inertiajs/inertia-laravel
php artisan inertia:middleware
npm install @inertiajs/react react react-dom

Configure SSO in config/services.php (same as the Laravel guide).

Share auth user with Inertia

// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user()?->only('id', 'name', 'email'),
        ],
    ]);
}

SSO controller

Reuse the Laravel SSO controller for redirect, callback, and logout. After Auth::login() in the callback, redirect with Inertia:

use Inertia\Inertia;

public function callback(Request $request): RedirectResponse
{
    // ... validate state, exchange code, fetch profile, Auth::login($user)

    return redirect()->intended(route('dashboard'));
}

public function dashboard(): Response
{
    return Inertia::render('Dashboard', [
        'welcome' => 'Signed in via WamISSO',
    ]);
}

Routes

// routes/web.php
Route::middleware('guest')->group(function () {
    Route::get('/login', [SsoController::class, 'redirect'])->name('login');
    Route::get('/auth/sso/callback', [SsoController::class, 'callback'])->name('sso.callback');
});

Route::middleware('auth')->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
    Route::post('/logout', [SsoController::class, 'logout'])->name('logout');
});

React login page

// resources/js/Pages/Login.jsx
import { Link } from '@inertiajs/react';

export default function Login() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center space-y-4">
        <h1 className="text-2xl font-semibold">Sign in</h1>
        <a
          href="/login"
          className="inline-block rounded-lg bg-blue-700 px-4 py-2 text-white"
        >
          Continue with WamISSO
        </a>
      </div>
    </div>
  );
}

React dashboard

// resources/js/Pages/Dashboard.jsx
import { usePage, router } from '@inertiajs/react';

export default function Dashboard({ welcome }) {
  const { auth } = usePage().props;

  return (
    <div className="p-8">
      <h1 className="text-xl font-semibold">{welcome}</h1>
      <p>Hello, {auth.user?.name}</p>
      <button
        onClick={() => router.post('/logout')}
        className="mt-4 rounded border px-3 py-1"
      >
        Sign out
      </button>
    </div>
  );
}