@jerrythomas/sentry NPM

Sentry

Drop in authentication including route protection and redirects for SvelteKit apps.

sentry

Why?

Adding authentication to front end is one of the most time consuming tasks. Building apps in Svelte is great but there is no standard way to implement authentication. There are multiple libraries that allow us to add authentication for multiple providers. However, switching from one to another is not easy. The UI components for all the providers also need to meet the provider guidelines for the final app to be approved.

This is an attempt to make adding authentication to SvelteKit apps as simple as possible. This framework has been designed for Svelte.

Features

Configuration driven
Secrets using environment variables
Emulator tests where available
Route protection
- Public pages
- Protected routes
- Role based protection for route
- Caching blocked routes to be redirected on login
Different auth libraries
- Firebase
- Auth0
- Supabase
- Amplify
Multiple providers
- Google
- Password
- Github
- Microsoft
- Twitter
- Facebook

Getting started

Get started quickly using degit. Select the library you want to use and run degit to get a sample app.

Firebase

degit jerrythomas/sentry/examples/firebase my-app

Take a look at the following files in the sample to understand how it works.

config.js
hooks.js
__layout.svelte
login.svelte
logout.svelte

Tailwind

This library uses tailwind and the components will not render properly if the tailwind does not include the requires css classes. Ensure that the sentry library is included in the purge array of tailwind.config.cjs

purge: [
    './src/**/*.{html,js,svelte,ts}',
    'node_modules/@jerrythomas/sentry/src/**/*.{html,js,svelte,ts,css}}',
  ],

Route Configuration

Routes are configurable as shown in the example config.js file. Sentry assumes that all routes are private by default. Public routes need to be listed so that they can be accessed without logging in.

There are three attributes in the routes configuration.

home: Landing page after logging in.
start: Start page to be used as welcome/login page
public: A list of routes to be treated as public. All child routes are assumed to be public too.