sveltekit-example - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #llm #golang #deep-learning #linux #docker #windows #awesome-list #pytorch #security #ios #open-source

sveltekit-example

(★ 151)

Example showing SvelteKit used with Firebase

File Explorer

Download Latest Version (.zip)

- - admin.server.ts
  - app.ts
  - Auth.svelte
  - auth.ts
  - dedupe.ts
  - session.ts
  - types.ts
  - user.ts
- - +layout.server.ts
  - +layout.svelte
  - +page.svelte
- app.d.ts
- app.html
- hooks.server.ts
- favicon.ico
- robots.txt
.env
.firebaserc
.gitignore
firebase.json
LICENSE
package.json
pnpm-lock.yaml
README.md
svelte.config.js
tsconfig.json
vite.config.js

# Installation Guide

1. Get the code

git clone https://github.com/CaptainCodeman/sveltekit-example

Downloads the entire project code from GitHub to your computer.

cd sveltekit-example

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# sveltekit-example

Example to show firebase auth used on the client and accessed via a Svelte Store.

Updated to show lazy-loading the Firebase 9.0 SDK for faster startup / higher lighthouse score.

Updated to show syncing the client-side auth state with the server to set a cookie and provide a SvelteKit "session"

~~Updated to use the new Firebase 9.0 SDK, so lazy-loading firebase from the CDN has been removed.~~

~~Firebase SDK Packages are lazy-loaded from the CDN. This ensures that the application starts up quickly (rather than waiting for the large firebase bundles to load) and also auth can load and initialize before other packages (e.g. firestore isn't loaded unless the user is signed in and on a route that requests data).~~

The auth store ensures that the firebase code is only loaded and called when the page is running in the browser and when the auth status has been referenced. Comment out the `<Auth />` import in `$layout.svelte` and notice that no firebase libs are requested.

~~A simpler example _could_ just include the firebase CDN scripts in the `app.html` file but I find this approach keeps the page zippy while also avoiding re-bundling the firebase SDK into the app so it has the benefit of potentially loading faster via the CDN.~~

## Roadmap

Some additional pieces I'll try to add:

- ~~how the firebase-admin SDK can also be referenced and used to set firebase session cookies in order to enable firebase auth checks inside server endpoints and also to server-side-render (SSR) pages with data coming from firestore.~~
- auth guards to prevent routes rendering or to show an "access denied" message based on auth status
- role-based UI customization where elements are shown or hidden based on auth claims (e.g. hide an "edit" button if the user doesn't have "author" permissions)
- how to use SvelteKit stores with Firestore to simplify querying / subscribing to data
- how to use Firestore with SSR and SPA mode working efficiently (transparent hand-off of SSR data to a client-side subscription for live updates)