Coding Guru
Home

Laravel Inertia React Protected Routes

6 min read Oct 13, 2024
Laravel Inertia React Protected Routes

Unlocking Protected Routes with Laravel Inertia & React

Building a single-page application (SPA) with Laravel and React? You'll need a way to secure your routes, allowing only authorized users to access certain pages. This is where Laravel Inertia's ability to seamlessly integrate with React's routing comes into play. Let's explore how to create and manage protected routes in your Laravel Inertia project.

Why Bother with Protected Routes?

Think of your application as a house. You want to keep some rooms private (your personal belongings, sensitive data), while others are open to guests (public pages). Protected routes ensure only authenticated users have access to your "private rooms," protecting your application's integrity and user privacy.

The Laravel Inertia & React Duo

Laravel Inertia serves as the bridge between your Laravel backend and your React frontend. It simplifies data transfer and component management, making the development process smooth and efficient. For protected routes, Inertia plays a key role in:

  • Authenticating Users: Laravel handles user authentication, ensuring only authorized individuals can access specific routes.
  • Route Validation: Inertia checks if a user is logged in before rendering components associated with protected routes.
  • Redirects & Errors: If a user tries to access a protected route without proper authorization, Inertia can redirect them to a login page or display an error message.

Crafting Your Strategy

There are multiple approaches to secure your routes:

1. Route-Based Authentication:

  • Laravel Route Middleware: This is the go-to method for defining authentication rules at the route level.
Route::group(['middleware' => 'auth'], function () {
    Route::get('/dashboard', function () {
        // Only authenticated users can access this route
        return Inertia::render('Dashboard');
    });
});
  • Inertia Props & Component Logic: In your React components, check for the auth prop (passed by Inertia) to determine user authentication status.
// Your React Component
function Dashboard() {
  const { auth } = usePage();

  if (!auth.user) {
    return ; 
  }

  // If authenticated, render dashboard content
  return (
    

      // Dashboard components here
    

  );
}

2. Component-Based Authentication:

  • React Router's PrivateRoute: Wrap your protected routes in a custom PrivateRoute component.
// Your React PrivateRoute Component
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { usePage } from '@inertiajs/inertia-react';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { auth } = usePage();
  return (
     
        auth.user ? (
          
        ) : (
          
        )
      }
    />
  );
};

3. Authentication in Your React App:

  • Context API: Use React's Context API to manage user authentication state throughout your application. This allows you to control access to components based on authentication status.

Example: Route-Based Authentication in Action

  1. Laravel: Create a route group in your web.php file.
Route::group(['middleware' => 'auth'], function () {
    Route::get('/admin', function () {
        return Inertia::render('Admin/Dashboard');
    });
});
  1. React: Inside your Admin/Dashboard.jsx component, access the auth prop from Inertia.
import React from 'react';
import { usePage } from '@inertiajs/inertia-react';

function Dashboard() {
  const { auth } = usePage();

  if (!auth.user) {
    return ; 
  }

  return (
    

      
Welcome to the Admin Dashboard

      
This is only accessible to authenticated users.

    

  );
}

export default Dashboard;

Important Notes:

  • Laravel Authentication: Set up your authentication system in Laravel (using Passport, Sanctum, or your preferred method). This is the foundation for authenticating users and granting access.
  • Error Handling: Ensure you have appropriate error handling in place for unauthenticated access.
  • User Roles: You can use a mix of route middleware and React component logic to implement more complex permission systems based on user roles.

Conclusion

Implementing protected routes in your Laravel Inertia and React application is essential for security and user management. By leveraging Laravel's route middleware and Inertia's integration with React's routing system, you can build a robust and user-friendly application where only authorized users can access sensitive resources.

Featured Posts