Svault: the Spanish Fly of Svelte Security
Because what good is a fast website without protection?
Svault is a user management, authorization and authentication library created and designed for Svelte/SvelteKit. It was created to fill a gap in the rapidly growing framework + compiler known as Svelte.
According to the 2023 Stack Overflow Developer Survey, Svelte is one of the most admired technologies by developers. Its rise in popularity is due to its light-weight, highly performant capabilities as a framework thanks to its ability to compile the frontend code into pure vanilla JavaScript. Already during its brief lifetime, Svelte has set itself apart from other frameworks like React, Angular, and Vue by offering server-side rendering, build-time validation, and a streamlined setup thanks to SvelteKit. SvelteKit is also considered a Vite plugin, which means it is responsible for turning its requests into responses and can run anywhere Javascript can run.
Sounds pretty great, but as the saying goes, “if it sounds too good to be true, it probably is.” While Svelte does a lot and is regularly tinkering with new ways for developers to use it, there are gaps in this swiss army knife of frameworks — authentication and authorization being chief among them. There have been several attempts to solve this, but bugs are a persistent issue with all of them.
What is Svault?
Enter Svault, an unopinionated-ish user and management library. Svault streamlines authorization and authentication for developers ensuring security is locked down without the headache of navigating the intricacies of authentication setup in Svelte. Even though Svault creates an abstraction layer between your app and your database, the developer still has autonomy in setup and implementation. Modularized to allow for as few or as many login options as the developer wants to setup, add or reconfigure.
Features
OAuth
Beyond the traditional native authorization functionality, Svault comes with a variety of OAuth options, including Google, Discord, and GitHub. Designed to make authentication as quick and painless as possible, Svault walks the developer through the entire process. The plug-and-play nature of Svault makes it so you can use one, some, or all available OAuth features. The OAuth functionality includes taking the access token received by the OAuth provider and using it to in exchange receive the user’s username. This username is being stored in the locals variable which can be used and accessed by the developer to store in a database or do whatever they want with it.
Working with Svault looks something like this. In the code below, you’re setting up Google’s OAuth 2.0 and assigning it to a handle for Svelte’s hooks.server.ts where you can connect it with cookie management.
// Import if you would like to use Oauth login (necessary for all Oauth)
import { SvaultOauth } from 'svault';// Import if you would like to use Google Oauth
import { google } from 'svault';
import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } from '$env/static/private';
// Google callback urls have to match the callback url you setup in your development app so paste it here to pass into the Oauth function
const googleCallback = 'http://localhost:5173/oauth/google/validate';// Set redirect path to your desired endpoint upon user login
const redirectPath = '/(yourPathHere)'; //ex. 'const redirectPath = '/redirectPage'// Place the Oauth providers here
const providers = [
google(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, redirectPath, googleCallback),
];// Svault Oauth handler
export const handle = SvaultOauth({ providers });Cookies
Cookie management is also made easy with Svault. Cookie management is intelligent enough to know whether OAuth or Native Auth is being used and appropriately label the cookie. Management works across web browsers without fear of bugs. With the ability to set cookie age and cleanup handled by Svault, it’s like driving a Tesla on autopilot. Working in tandem with cookie management is a page accessibility feature that ensures only authenticated users can access secure pages on the website, regardless of endpoint knowledge.
Password Encryption
Another key feature of Svault is built-in hashing and salting for native authorization. After all, it wouldn’t be much of a vault if the password is taped to the side. Upon user registration, hashing and salting deploys and has the pipeline created to funnel user info directly to local sessions and your database.
PostgreSQL adapter
On the topic of databases, at launch Svault has a PostgreSQL adapter with detailed documentation for setup. Additionally, a template table (which can be named whatever the developer wants) can be connected to your application to get the database up and running as soon as possible. This bonus feature includes prewritten queries for user registration, validation, session tracking, and user login preferences (i.e. name, password, OAuth preferences and associated information, etc.)
Logout
Unlike other authentication libraries, Svault includes a logout feature that triggers cookie cleanup. It doesn’t matter whether users are logging out after using the native authentication or OAuth feature to login, Svault will log them out and clean up those cookies.
What’s Next?
This is just the beginning for Svault. There’s still lots of work to do — launching session management, cookie name customization, adding additional OAuth options, expanding the database adapters, and adding a UI component element to the Svault offerings.
But developers can already build more secure user authorization and authentication into their apps with the stable/beta release. Check out our guide, find us in the NPM registry, visit our website or head over to our GitHub to take your Svelte experience to the next level. Security isn’t always sexy, but Svault makes it a little more desirable.
