Demo & Live Testing

The best way to understand AuthRail is to see it in action. We've provided a comprehensive demo application and a playground to help you explore its capabilities.

View Demo Repository

View Core Source

Interactive Demo

Our official demo showcases AuthRail integrated into a real-world React application using Vite and React Router. It demonstrates how to handle authentication state, multi-step policies, and real-time UI updates.

What's Inside?

Route Protection: Automated redirects for unauthorized users. Experience how AuthRail intercepts unauthorized navigation attempts before they reach your components, ensuring a secure and seamless flow.
Granular Permissions: UI elements that appear or disappear based on user roles. See how easy it is to conditionally render components or disable actions using the protect() HOC or RailBoundary.
Dynamic Policy Toggling: A control panel to modify permissions in real-time. This highlights AuthRail's reactivity—watch the UI instantly adapt as you toggle policies without a page reload.
Detailed Debugging: Real-time logs showing why a policy was allowed or denied. AuthRail provides a transparent look into the decision-making process, making it incredibly easy to debug complex permission logic.

Why use the demo?

The demo serves as a living blueprint. Instead of just reading about middleware and rails, you can interact with them. It demonstrates best practices for:

Managing authentication state in a React app.
Structuring complex permission rules into maintainable rails.
Handling redirects and "Access Denied" states gracefully.
Integrating AuthRail with popular routing libraries like React Router.

Try it Locally

You can run the demo on your own machine to experiment with the code:

Clone the repository:

git clone https://github.com/Rahmannugar/authrail-demo
cd authrail-demo

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

Visit http://localhost:5173 to start testing.

Testing Scenarios

When running the demo, try the following scenarios to see how AuthRail handle edge cases:

1. Unauthenticated Access

Action: Log out and try to navigate directly to /dashboard.

Observation: AuthRail's requireAuth middleware detects the null user and emits a redirect decision. The application intercepts this and sends you to /login.

2. Role-Based Access Control (RBAC)

Action: Log in as a standard user and try to click the "Admin Settings" link.

Observation: The link might be hidden (using RailBoundary), but if you navigate directly to /admin, the requireRole('admin') middleware returns a deny decision, rendering the "Access Restricted" fallback.

3. Real-time Policy Updates

Action: In the Dashboard, toggle the "Emergency Lockdown" button.

Observation: Watch how the protected content instantly disappears and is replaced by the lockdown fallback. This demonstrates AuthRail's reactivity—by updating the evaluation context, your RailBoundary or protect() HOC responds immediately without a page reload.

4. Deterministic Debugging

Action: Open your browser's Developer Tools (Console tab).

Observation: With debug: true enabled in the rail configuration, you can see every step of the evaluation. It will show exactly which check failed and what data was in the context at that moment.

Explore the Source

The demo is built using the core AuthRail library. You can find the source code for both below:

AuthRail Core: The framework-agnostic engine.
AuthRail Demo: The React/Vite implementation.

Ready to integrate it into your own project? Head over to the Quick Start guide.