Router Guard for SvelteKit Apps

svelte-guard is a versatile package designed to streamline the process of implementing route guards in SvelteKit applications. Route guards play a crucial role in ensuring that specific routes are accessible only to authorized users, enhancing the security of your application. With svelte-guard, you can efficiently manage and implement route guards without cluttering your codebase with repetitive guard logic.

Features

✅ Simplicity: svelte-guard simplifies the implementation of route guards by allowing you to define guards for individual routes within your project directory structure.
✅ Flexibility: Guards can be implemented as synchronous or asynchronous functions, and requests can be redirected to a different route if necessary.
✅ Inheritance: Guards can be inherited from parent routes, allowing you to define a single guard for multiple routes.
✅ Extensibility: Alongside inheriting guards, you can also extend guards to add additional functionality to specific routes.

Installation

You can easily install svelte-guard via npm using the following command:

npm install svelte-guard

Getting Started

Implementing route guards with svelte-guard involves two main steps: creating guard files and registering the guards.

app                                      #
|-- routes                               #
|   |-- login                            #
|   |   |-- -guard.ts                    # redirect if user is logged in
|   |   |-- +page.svelte                 #
|   |-- admin                            #
|   |   |   |-- settings                 #
|   |   |   |   |-- -guard.ts            # extend parent guard
|   |   |   |   |-- +page.svelte         #
|   |   |-- -guard.ts                    # protect admin route and sub-routes
|   |   |-- +page.svelte                 #
|   |-- user                             #
|   |   |-- +page.svelte                 #
|   |-- +page.svelte                     #
|   |-- +layout.svelte                   #
|-- hooks.server.ts                      # register guards and hooks

This structure provides a clear separation of concerns, making it easy to manage and extend the route guarding functionality within SvelteKit applications.

1. Create Guard Files

Create guard files for your routes following the convention -guard.js or -guard.ts and place them within the respective route directories. These guard files encapsulate the authorization logic for each route and its child routes.

// routes/admin/-guard.ts
import type { Guard } from 'svelte-guard';

export const guard: Guard = async ({ locals }) => {
	// Implement your authorization logic here
	return locals.user.isAdmin;
};

2. Register Guards

Register the guards by creating a hook to handle app requests in the hooks.server.js or hooks.server.ts file. Utilize the createGuardHook function provided by svelte-guard to register the guards.

// hooks.server.ts
import { createGuardHook } from 'svelte-guard';

const guards = import.meta.glob('./routes/**/-guard.*');
export const handle = createGuardHook(guards);

Additional Configuration

If you have multiple hooks or need to execute guards in a specific sequence, you can utilize the sequence function from @sveltejs/kit/hooks to serialize the hooks.

// hooks.server.ts
import { sequence } from '@sveltejs/kit/hooks';
import { createGuardHook } from 'svelte-guard';

const guards = import.meta.glob('./routes/**/-guard.*');
const GuardHook = createGuardHook(guards);

export const handle = sequence(AuthHook, GuardHook);

VSCode Settings

Having multiple -guard.{ts|js} files open can be difficult to distinguish. As such, custom labels for open tabs can be set in VSCode.

You can configure your workspace's settings.json file to the settings below. Now, each open -guard.{ts,js} tab will show the guard file's directory with designation that it is a guard file.

"workbench.editor.customLabels.enabled": true
"workbench.editor.customLabels.patterns": {
  "**/src/routes/**/-guard.{ts,js}": "/${dirname} - Guard"
}

Contribution

Contributions to svelte-guard are highly encouraged! Whether it's bug fixes, feature enhancements, or new ideas, your contributions are valuable. You can contribute by submitting bug reports, feature requests, or pull requests on GitHub.

For any questions, feedback, or support inquiries, feel free to reach out via the GitHub repository. We're here to help and improve the library together!

License

svelte-guard is licensed under the MIT License. You can find the detailed licensing information in the LICENSE file.

nicelion/svelte-guard