Overview:
This product is a SvelteKit sample app with Firebase authentication and server-side rendering (SSR) that includes user data. It provides a live example and includes instructions for setup and installation.
Features:
- Integration of SvelteKit with Firebase authentication and SSR
- Ability to create a .env file with client and server configuration values
- User authentication functionality with sign-in and sign-out buttons
- Reading and retrieving data from Firebase using firebase-admin on the server and firebase on the client
- Implementation of document models using classes
- Firebase reactivity to subscribe to changes and update the user interface
Installation:
- Create a .env file at the root of the folder.
- Add the following entries to the .env file:
- PUBLIC_FIREBASE_CLIENT_CONFIG: This value will be sent to the client in the user’s session. Obtain the client config from the Firebase console.
- FIREBASE_SERVER_CONFIG: This value is used to retrieve data from Firebase on the server. Obtain the admin server config from the Firebase console.
- Obtain the admin server config by logging in to the Firebase console, clicking the settings icon, selecting Project Settings, and then the Service accounts tab. In the Firebase Admin SDK, click Generate new private key.
- Keep the admin server config private and secure (not shared or committed to Git).
- To authenticate the user, use the signInWith and signOut functions in /src/lib/utils/firebase.ts.
- In /src/routes/+layout.svelte, the Auth component shows a button to sign in and out.
- The script section of /src/routes/+layout.svelte invokes listenForAuthChanges() (/src/lib/utils/firebase.ts) if the app is running in the browser. It updates the session data with the logged in user and sets a cookie with its token.
- The handle function in /src/hooks.server.ts reads the cookie and decodes the token to include user information in the session object.
- To read data, use /src/lib/server/firebase.ts for server-side operations and /src/lib/utils/firebase.ts for client-side operations.
- Use /src/routes/api/data.ts to get the initial data for components from both the client and the server.
- Document models are implemented using classes, with /src/lib/models/Document.ts as the base class for Firebase documents.
- Customize the _collection property in the Document class to specify the path to the collection.
- Customize the _dbFields property in the Document class to define the fields that will be stored in the database.
- The Counter component demonstrates subscription to Firebase changes. It retrieves data from the server, creates a Document, and uses the .getStore() function to create a readable store that updates when changes occur.
Summary:
The SvelteKit app with Firebase authentication and SSR is a comprehensive starter for building web applications with user data. It provides features such as user authentication, data retrieval from Firebase, and document models using classes. With Firebase reactivity, the app allows users to see real-time changes across multiple browser windows. The installation process involves setting up the environment variables and configuring Firebase settings.
