DEV Community: CaStIeL SiDdIqUi

Dynamic Flash Notifications and Form Alerts in Laravel 11 & Inertia React

CaStIeL SiDdIqUi — Mon, 21 Sep 2026 21:10:38 +0000

When building Single Page Applications with Laravel and Inertia.js, handling session alerts (like "Workspace updated" or "Member removed") can be tricky because traditional Laravel session flashes don't automatically trigger state re-renders in React.

Here is how to set up clean, real-time flash notifications using Laravel 11, Inertia.js, and React components.

1. Share Flash Data via Middleware

Inertia provides the HandleInertiaRequests middleware to bridge Laravel sessions into React props. Update app/Http/Middleware/HandleInertiaRequests.php:

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'flash' => [
            'success' => fn () => $request->session()->get('success'),
            'error'   => fn () => $request->session()->get('error'),
        ],
    ]);
}

Using closure wrappers (fn () => ...) ensures session messages are lazily evaluated only when needed during responses.

2. Flashing Messages in Controllers

Now you can send flash feedback from any Laravel controller:

// Success alert
return back()->with('success', 'Workspace settings updated successfully.');

// Error alert
return back()->with('error', 'You do not have permission to perform this action.');

3. Rendering Banners in React Components

Create a reusable FlashBanner.jsx component to render incoming alerts:

import { usePage } from '@inertiajs/react';
import { useState, useEffect } from 'react';

export default function FlashBanner() {
    const { flash } = usePage().props;
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        if (flash.success || flash.error) {
            setVisible(true);
        }
    }, [flash]);

    if (!visible || (!flash.success && !flash.error)) return null;

    return (
        <div className={`p-4 mb-4 text-sm rounded-lg flex justify-between items-center ${
            flash.success ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300' : 
                            'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300'
        }`}>
            <span>{flash.success || flash.error}</span>
            <button onClick={() => setVisible(false)} className="font-bold ml-4">✕</button>
        </div>
    );
}

Place <FlashBanner /> inside your main layout wrapper (AuthenticatedLayout.jsx) to display feedback automatically across every page of your app!

Wrap Up

By exposing Laravel session keys through Inertia's share() method, your React components can react instantly to backend actions without writing extra API event handlers.

⚡ Save time on your next SaaS project:
Check out the Pro Laravel 11 + React SaaS Starter Kit on Gumroad featuring workspace management, dark mode, Stripe billing, and flash messaging pre-configured out of the box. Free open-source tier available on GitHub.

Secure Team Invitations and Onboarding with Signed URLs in Laravel 11 & React

CaStIeL SiDdIqUi — Mon, 21 Sep 2026 21:04:47 +0000

Onboarding team members into a SaaS platform requires a clean user experience and tight security. Allowing workspace owners to directly add emails works fine—until an invited user doesn't have an account yet, or an unauthorized link is intercepted.

In this tutorial, we’ll build a secure invitation workflow using Laravel 11 Signed URLs, tokenized invitation tables, and an auto-attachment session handler for new registrations.

1. Database Structure for Invitations

Create a dedicated team_invitations table to store pending invites:

Schema::create('team_invitations', function (Blueprint $table) {
    $table->id();
    $table->foreignId('team_id')->constrained()->cascadeOnDelete();
    $table->string('email');
    $table->string('role')->default('member');
    $table->string('token', 32)->unique();
    $table->timestamps();
});

2. Generating Tokenized Signed Links

When an owner sends an invite, generate a 32-character random token and build a signed URL that expires in 7 days:

use Illuminate\Support\Str;
use Illuminate\Support\Facades\URL;

$token = Str::random(32);

$invitation = TeamInvitation::create([
    'team_id' => $currentTeam->id,
    'email' => $request->email,
    'role' => $request->role,
    'token' => $token,
]);

// Build tamper-proof signed link
$acceptUrl = URL::signedRoute('invitations.accept', [
    'token' => $invitation->token
], now()->addDays(7));

// Send mailable or queued notification with $acceptUrl...

3. Handling Unauthenticated & New Users

When a user clicks the invitation link, verify the signature and token in InvitationController.php:

public function accept(Request $request, string $token)
{
    // 1. Verify URL signature
    if (! $request->hasValidSignature()) {
        abort(401, 'This invitation link has expired or is invalid.');
    }

    $invitation = TeamInvitation::where('token', $token)->firstOrFail();

    // 2. If user is logged in, attach immediately
    if (auth()->check()) {
        $this->attachUserToTeam(auth()->user(), $invitation);
        return redirect()->route('dashboard')->with('success', 'Joined workspace successfully!');
    }

    // 3. If unauthenticated, store token in session and send to registration
    session(['pending_invitation_token' => $invitation->token]);

    return redirect()->route('register')->with('info', 'Please create an account to accept your invitation.');
}

4. Auto-Attaching on Registration

Inside RegisteredUserController.php, check for the session token immediately after user creation:

$user = User::create([ ... ]);

event(new Registered($user));
Auth::login($user);

// Check for pending invitation token in session
if (session()->has('pending_invitation_token')) {
    $token = session()->pull('pending_invitation_token');
    $invitation = TeamInvitation::where('token',$token)->first();

    if ($invitation) {
        // Attach user with assigned pivot role
        $user->teams()->attach($invitation->team_id, ['role' => $invitation->role]);$user->update(['current_team_id' => $invitation->team_id]);$invitation->delete();
    }
}

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

Summary
Using signed URLs guarantees that invitation parameters cannot be modified in the browser address bar, while session bridging provides a seamless experience for brand-new users.

💡 Looking for a pre-built solution?
Get this entire invitation workflow along with multi-tenancy, team switching, and Stripe billing in the Pro Laravel 11 + React SaaS Starter Kit on Gumroad or explore the free open-source base on GitHub.

Multi-Tenancy Made Simple

CaStIeL SiDdIqUi — Mon, 21 Sep 2026 20:57:57 +0000

Adding multi-tenancy to a SaaS product often leads developers down a rabbit hole of complex packages, multi-database setups, and difficult migrations. However, for 90% of SaaS applications, a clean, single-database multi-tenant architecture with workspace switching is all you need.

In this guide, we'll walk through building a lightweight multi-tenant workspace architecture in Laravel 11, Inertia.js, and React 18 without relying on external multi-tenancy packages.

1. Database Isolation with Global Scopes

To ensure users never see data from another workspace, we can use an Eloquent Global Scope inside a reusable trait.

Create app/Traits/BelongsToTeam.php:

namespace App\Traits;

use Illuminate\Database\Eloquent\Builder;

trait BelongsToTeam
{
    protected static function bootBelongsToTeam(): void
    {
        // 1. Automatically scope all SELECT queries to the active workspace
        static::addGlobalScope('team', function (Builder $builder) {
            if (auth()->check() && auth()->user()->current_team_id) {
                // Table qualification is critical to prevent SQL ambiguity
                $builder->where($builder->getModel()->getTable() . '.team_id', auth()->user()->current_team_id);
            }
        });

        // 2. Automatically assign current workspace ID on model creation
        static::creating(function ($model) {
            if (auth()->check() && !$model->team_id && auth()->user()->current_team_id) {
                $model->team_id = auth()->user()->current_team_id;
            }
        });
    }
}

Fixing Pivot Table Ambiguities When validating workspace membership during team switching, writing raw column checks on pivot relationships can trigger SQL errors. Avoid this:

// ❌ WRONG: Causes MySQL column ambiguity
if (!$user->teams()->where('team_id', $team->id)->exists()) {
    abort(403);
}

Instead, explicitly qualify the table name:

// ✅ CORRECT: Fully qualified column
if (!$user->teams()->where('teams.id', $team->id)->exists()) {
    abort(403);
}

Sharing Active Workspace State via Inertia.js To keep workspace selection available everywhere in React without re-fetching on every page reload, share the current workspace globally in app/Http/Middleware/HandleInertiaRequests.php:

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user() ? array_merge($request->user()->toArray(), [
                'current_team' => $request->user()->currentTeam,
                'teams' => $request->user()->teams,
            ]) : null,
        ],
    ]);
}

Now, inside your React navigation bar (AuthenticatedLayout.jsx), you can access auth.user.current_team and render a dropdown to switch workspaces seamlessly!

Conclusion & Starter Kit
With just a custom trait, explicit query scoping, and shared Inertia props, you get complete workspace isolation without bringing in bulky third-party dependencies.

🚀 Want to save weeks of development time?

Check out the free base starter kit on GitHub.

Need Multi-Tenant Workspaces, Roles, Email Invitations, and Stripe Subscriptions ready out of the box? Grab the Pro SaaS Starter Kit on Gumroad.