Updating and expanding this answer based on clarification in this comment:
What if I don't want to use Supabase though - what if I want to query Postgres directly, how do I ensure the connection string stays private? Will I run into platform constraints if using JAMstack orientated PaaS[?]
To ensure secrets stay private, the typical approach is to use environment variables in endpoints or hooks.
To quote Sillvva in the Svelte Discord (links added by me):
Endpoints run exclusively on the server. For page endpoints, the client calls them via fetch and the server calls them directly via function call during SSR.
We use environment variables to as part of a security strategy to make them “easy to change between deploys without changing any code” and to reduce the chance “of them being checked into the code repo accidentally.” Make sure you add all variations of whatever .env files you use to .gitignore.
Platforms like Netlify and Vercel allow one to set them in the UI or from their CLI.
From How do I use environment variables? in the SvelteKit docs FAQ:
To use environment variables at runtime, you would need to instantiate dotenv yourself in your server-side code so that they are exposed at process.env.YOUR_ENV_VAR. You may also use $session to pass them to the client if needed.
Load functions, which run on the server and the client, can be used to access data from endpoints. Note:
Code called inside load blocks […] should not directly reference any API keys or secrets, which will be exposed to the client, but instead call an endpoint that uses any required secrets
The Supabase links in the original answer were meant as an example of file structure, but the video link up top covers endpoints, hooks, and load fairly well, though I prefer to read rather than watch this kind of thing. This Reddit thread has a good summary of setting up a connection to Postgres in hooks handle function, making that available to endpoints via event.locals, and using load in svelte files. (Note some of the docs links have changed since that Reddit answer was posted but the ones in this answer are current.)
For PaaS much of the above holds, although Netlify, Vercel, and Cloudflare Pages have official adapters that one can use to take advantage of platform-specific features like (edge) functions and workers.
Original answer:
I am pressed for time, and can expand on this later, but for now…
Here are some resources to look into:
Better Protected Routes with endpoints, hooks, and load in SvelteKit
You can use load() to protect web pages in SvelteKit and enable your application to still work with and without JavaScript enabled. In this episode, I walk through converting from our other ProtectedLayout format using slots and switch to using > load.
Svelte Starter Kit
…is an opinionated boilerplate based off of SvelteKit, with all the bells and whistles you want ready, up and running when > starting any Full-stack Svelte/Javascript project. Out of the box you get all the essentials
- Typescript as the language choice
- Tailwind CSS for quick styling without getting out of your HTML
- ESLint and Prettier for static code analysis and code formatting
- SEO pre-configured
with Supabase as the 3rd Party Persistence Layer for
- Authentication System with Supabase GoTrue
- User Profiles available on /profile as an example for Supabase PostgREST (CRUD API)
- User Avatar which is Supbase Storage(AWS S3 backed effortless uploads) supported
Quickstart: SvelteKit | Supabase
This example provides the steps to build a simple user management app (from scratch!) using Supabase and Svelte.
Supabase Auth With SvelteKit
Implementing a secure JWT token authentication system for server-rendered applications.
Please comment with any specific concerns not covered in these.
