Start Database
We will store our users in a MongoDB database. We will use MongoDB Altas which is their cloud-based solution.
Open your MongoDB dashboard and create a cluster (if you are unsure how that works, check out their tutorial). By clicking "Connect", you will get a URI of the form.
Save the URI as an environment variable SECRET_MONGODB_URI in the .env file (located at the root of the project).
Also generate a JWT Secret and save it as an environment variable SECRET_JWT_KEY in the .env file.
SECRET_MONGODB_URI="mongodb+srv://{USER_NAME}:{USER_PASSWORD}@{CLUSTER_NAME}.mongodb.net/data?retryWrites=true&w=majority"
SECRET_JWT_KEY="{YOUR_RANDOMLY_GENERATED_JWT_SECRET}"
NOTE: You can replace SECRET_MONGODB_URI with any connection string format. The password needs to be URL encoded if needed! Notice that I have added data before the question mark. This will be the name of the database under which the user collection will be created. Otherwise, MongoDB will call it test by default.
Protecting Routes
Our goal is to protect certain pages from non-authenticated users. Simply head to `hooks.server.ts` and find this section of code and add a directory!export const handle = async ({ event, resolve }) => {
const is_protected =
event.url.pathname.startsWith('/dashboard') ||
event.url.pathname.startsWith('/account')
//YOU CAN ADD MORE HERE
TailwindCSS Colors / Custom Properties
If you are using a color/properties too much and you want to organize them, especially when it involves a theme, go the `.css` file and the rest is self-explanatory!@theme {
--font-poppins: 'Poppins', sans-serif;
/* It works with fonts! */color
/* === COLORS === */
--color-backdrop: #1f1f39;
--color-backdrop-light: #f0f0f2;
--color-primary: #3d5cff;
--color-secondary: #2f2f42;
--color-subheading: #b8d8d2;
/* Add as many as you want */
}
Unplugin Icons
This repository has unplugin-icons, which is a great npm package.
Check them out here!
Packages and Their Uses
| Package | Purpose / Description |
|---|---|
bcrypt |
Library for hashing passwords securely. Used to store user passwords safely in your database. |
jsonwebtoken |
Library for creating and verifying JWT tokens. Essential for authentication and protecting routes. |
mongoose |
ODM (Object Document Mapper) for MongoDB. Simplifies interacting with MongoDB using schemas and models. |
nodemailer |
Library to send emails from Node.js. Useful for account verification, password reset, or notifications. |
randomstring |
Library to generate random strings. Often used for temporary tokens, passwords, or unique identifiers. |
sveltekit-superforms |
Library for building forms in SvelteKit with built-in validation, error handling, and easy integration with server actions. |
sk-clib |
A component library for SvelteKit (custom library, likely providing pre-built UI components and utilities) created by github user TreltaSev. |
tailwind-merge |
Utility to intelligently merge Tailwind CSS classes, avoiding duplicate or conflicting class names dynamically. |
unplugin-icons |
Vite/Svelte plugin to use icons as components. Works with multiple icon packs like Iconify. |
zod |
Type-safe schema validation library, often used with Superforms to define and validate form data. |
If you use TypeScript, you will also want to install the types as a dev dependency for certain packages.
