Interactive Playground

Try ngxsmk-gatekeeper in your browser with our interactive playground examples.

Quick Start

Choose a playground platform and example to get started:

StackBlitz

CodeSandbox

Available Examples

Minimal Authentication

Try it now:

What you'll learn:

Basic authentication protection
Route guard setup
Middleware configuration
Login/logout flow

Features:

Public home page
Protected dashboard route
Login page with authentication
Debug mode enabled

Role-Based Access Control

Coming soon:

Multiple user roles
Role-based middleware
Permission checks
Admin panel example

HTTP Request Protection

Coming soon:

HTTP interceptor setup
API request protection
Token-based authentication
Request/response handling

How to Use

Click a playground link above to open the example
Explore the code - all files are editable
Make changes - see results instantly
Share your work - playgrounds are shareable via URL

What's Included

Each playground example includes:

✅ Complete working Angular application
✅ All necessary dependencies
✅ Pre-configured ngxsmk-gatekeeper setup
✅ Example components and routes
✅ Styled UI for better visualization
✅ Debug mode enabled

Creating Your Own

Want to create your own playground example?

Check out the playground templates
Copy an existing example
Modify the code
Share the URL

Troubleshooting

StackBlitz Issues

Make sure all dependencies are in package.json
Check that angular.json is properly configured
Verify TypeScript configuration

CodeSandbox Issues

Ensure package.json includes all dependencies
Check file paths match CodeSandbox structure
Verify imports are correct

Feedback

Found a bug or have a suggestion? Open an issue or start a discussion.