My React/Laravel Auth Setup: No More Polling /me!

The New Flow: An Event-Driven Approach

Let's put the pieces together. Our goal is to create a system that fetches the user *once* on initial load and then only reacts to specific events.

Step 1: Configuring Laravel Sanctum

First, ensure Sanctum is configured for SPA authentication. In your .env file, specify which domains your SPA will run on:

SANCTUM_STATEFUL_DOMAINS=localhost:3000,your-app.com
SESSION_DOMAIN=localhost

In your config/cors.php, make sure your settings allow credentials and match your paths:

'paths' => ['api/*', 'login', 'logout'],
'allowed_origins' => ['http://localhost:3000'],
'supports_credentials' => true,

Finally, protect your API routes in routes/api.php with Sanctum's middleware. This will ensure only authenticated users can access them.

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

This /api/user route is crucial, but we promise we won't be calling it every five seconds.

Step 2: Building the React Auth Provider

In your React app, create an AuthContext. This will hold our user data and loading state.

// AuthContext.js
import { createContext, useState, useContext } from 'react';

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    // We will add more logic here soon...

    const value = { user, isLoggedIn, setUser, setIsLoggedIn };

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
};

export const useAuth = () => useContext(AuthContext);

We'll also need `login` and `logout` functions that interact with our Laravel API and, critically, notify other tabs.

// Inside AuthProvider...

const login = async (credentials) => {
    await axios.get('/sanctum/csrf-cookie');
    await axios.post('/login', credentials);
    // Fetch the user and update state
    refetchUser();
};

const logout = async () => {
    await axios.post('/logout');
    setUser(null);
    setIsLoggedIn(false);
    // **The notification part!**
    window.localStorage.setItem('logout', Date.now());
};

const refetchUser = async () => {
    try {
        const { data } = await axios.get('/api/user');
        setUser(data);
        setIsLoggedIn(true);
        // **The notification part!**
        window.localStorage.setItem('login', Date.now());
    } catch (error) {
        setUser(null);
        setIsLoggedIn(false);
    }
};

Notice how after a successful logout or refetch (after login), we write a key to localStorage. The key name itself is the event (`'logout'`, `'login'`), and the value is just a timestamp to ensure it's a new change.

Step 3: The One-Time Check on Load

We still need to know the user's status when the app first loads a tab. We do this with a single `useEffect` hook in our `AuthProvider`. This runs *only once* when the component mounts.

// Inside AuthProvider...
import { useEffect } from 'react';

// ... state and functions

useEffect(() => {
    // On initial load, try to fetch the user
    refetchUser();
}, []); // Empty dependency array means this runs once on mount

This is our replacement for polling. Instead of asking repeatedly, we ask once. If the user has a valid session cookie, `refetchUser` will succeed and populate our state. If not, it will fail, and our state will correctly reflect a logged-out user.

Step 4: Syncing Across Tabs with Browser Events

Here's the final piece of the puzzle. We add another `useEffect` to listen for the `storage` event. This hook will fire in all other tabs when `localStorage` is changed by our `login` or `logout` functions.

// Inside AuthProvider...

useEffect(() => {
    const syncAuth = (event) => {
        if (event.key === 'logout') {
            console.log('Logged out from another tab!');
            setUser(null);
            setIsLoggedIn(false);
        }
        if (event.key === 'login') {
            console.log('Logged in from another tab!');
            // Re-fetch user to get the latest data
            refetchUser();
        }
    };

    window.addEventListener('storage', syncAuth);

    return () => {
        window.removeEventListener('storage', syncAuth);
    };
}, []); // Runs once on mount

And that’s it! When a user logs out in Tab A, it sets the `'logout'` item in `localStorage`. Tab B, C, and D, which are all listening, will have their `syncAuth` function triggered. They'll see the `'logout'` key, immediately clear their local auth state, and update the UI to a logged-out view—all without a single API call.

Polling vs. Event-Driven: A Quick Comparison

Let's visualize the difference.

A Quieter, Smarter Frontend

By shifting from a "pull" model (constantly polling for changes) to a "push" model (reacting to events), we've created an authentication system that is more performant, scalable, and provides a significantly better user experience. Your network tab will be blissfully quiet, your server will thank you for the reduced load, and your users will appreciate an app that feels seamlessly in sync with their actions, no matter which tab they're in.

This pattern isn't just limited to authentication. You can use the same `storage` event technique to sync any kind of global state across tabs, like theme changes or user preferences. So go ahead, give your /api/me endpoint a well-deserved break and embrace the quiet efficiency of an event-driven frontend.