feat: add session reactions (#3799)

- closes #1168

Author: abraham

README.md

@@ -24,6 +24,7 @@ Our goal is to allow event organizers to set up a professional conference websit
 | **SEO optimized**                    | index all content and get to the top in search results                                                                       |
 | **Speakers and schedule management** | keep and update all information in the Firebase                                                                              |
 | **My schedule**                      | let attendees save sessions they want to visit                                                                               |
+| **Reactions**                        | let attendees react to sessions with applause, love and more                                                                 |
 | **Customizable theme**               | light and dark themes, with your own colors and fonts                                                                        |
 | **Blog**                             | post announcements, updates and useful information                                                                           |
 

docs/tutorials/01-configure-app.md

@@ -33,12 +33,12 @@ Upstream defaults for the other settings in `site.json`, such as `navigation` an
 
 `theme` picks the look: the `festival`, `spotlight`, `paper` or `glass` theme, the color scheme, colors, fonts, spacing and decorations. See [Styling][style app].
 
-`auth.providers` lists the ways visitors sign in, in the order the sign-in dialog shows them. Visitors sign in to save sessions to My Schedule and to rate sessions.
+`auth.providers` lists the ways visitors sign in, in the order the sign-in dialog shows them. Visitors sign in to save sessions to My Schedule, to rate sessions and to react to them.
 
 - `emailLink` (the default): visitors enter their email address and get a link that signs them in, with no password. It is the only one on by default.
 - `google`, `facebook` and `twitter`: sign in with that account in a popup.
 
-For example, `["emailLink", "google"]` adds Google, and `["google"]` turns email links off. Turn on each method you list in the Firebase console too. See [Sign-in](02-firebase.md#sign-in). When `mySchedule` or `feedback` is on, the list can't be empty.
+For example, `["emailLink", "google"]` adds Google, and `["google"]` turns email links off. Turn on each method you list in the Firebase console too. See [Sign-in](02-firebase.md#sign-in). When `mySchedule` or `feedback` is on, the list can't be empty. With an empty list, turn `reactions` off too, since nobody could react.
 
 ## Validation
 
@@ -122,7 +122,7 @@ Turn parts of the site off in `features` in `packages/config/site.json`. Every f
 }
 ```
 
-A feature that is off has no pages, navigation entry or home page block, and its code is left out of the build. The features are `blog`, `codeOfConduct`, `demo`, `faq`, `feedback`, `forkMe`, `functions`, `gallery`, `map`, `mySchedule`, `notifications`, `partners`, `previousSpeakers`, `schedule`, `socialImages`, `speakers`, `subscribe`, `team`, `tickets` and `videos`.
+A feature that is off has no pages, navigation entry or home page block, and its code is left out of the build. The features are `blog`, `codeOfConduct`, `demo`, `faq`, `feedback`, `forkMe`, `functions`, `gallery`, `map`, `mySchedule`, `notifications`, `partners`, `previousSpeakers`, `reactions`, `schedule`, `socialImages`, `speakers`, `subscribe`, `team`, `tickets` and `videos`.
 
 The build fails when:
 
@@ -137,11 +137,17 @@ With `functions` on, every Cloud Function always deploys. When its feature is of
 
 When `feedback` is off, the feedback dialog is still in the build, but nothing opens it. Save buttons show only when `mySchedule` is on.
 
+`reactions` adds a row of reactions to each session page: Applause, Love, Insightful, Mind blown and Funny. Signed-in visitors add any of them, each once. Everyone sees the counts, and each count's label names the latest people who reacted. Visitors can react before a session and until a week after it ends, in `event.timezone`. After that, they can only take their reactions away. Reactions show only on session pages, so they need `schedule` to show anywhere. They don't need `functions`.
+
+The first time visitors react, they pick the name to show, and the photo from their sign-in account if it has one. That is their public profile, in the `profiles` collection, and anyone can read it. Visitors change it or delete it under **Public profile** in the account menu. Deleting it deletes their reactions too. Reactions are in `sessions/{sessionId}/reactions/{userId}`. To remove an abusive name or reaction, delete the document in the Firebase console.
+
+A session page reads every reaction to its session, and the profiles of up to 10 people it names, each time it opens. A session with 200 reactions costs about 210 Firestore reads per view (verify).
+
 `socialImages` builds a share image for each session and speaker page, which social networks and chat apps show with a link to the page. A session's image has its title, speakers, day, time and track. A speaker's image has their photo, name, company and the event's dates. Both have the logo from `packages/web/public/images/logo.svg`, the venue and the site's address, in the theme's colors and fonts. The build downloads speaker photos for them, and a photo that fails to download shows the speaker's initials, with a warning in the build output. With `socialImages` off, those pages share the first speaker's photo or `image` from `site.json`.
 
 The images come from the content at build time, like the rest of the page. After changing sessions or speakers, deploy again to update them. Each image's file name changes with what it shows, so social networks fetch the new one. To check how a page looks when shared, paste its URL into the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) or the [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/).
 
-The header follows the features too. Its button links to tickets until the event is over, or to the schedule otherwise. The account button shows when `mySchedule` or `feedback` is on, and the notifications bell when `notifications` is on. The footer links to the home page's subscribe band when `subscribe` is on, and shows a "Fork me on GitHub" sticker when `forkMe` is on.
+The header follows the features too. Its button links to tickets until the event is over, or to the schedule otherwise. The account button shows when `mySchedule`, `feedback` or `reactions` is on, and the notifications bell when `notifications` is on. The footer links to the home page's subscribe band when `subscribe` is on, and shows a "Fork me on GitHub" sticker when `forkMe` is on.
 
 ## Content Security Policy
 

docs/tutorials/06-security.md

@@ -4,11 +4,12 @@ What Hoverboard protects for you, and what you set in your own Firebase project
 
 ## What Hoverboard does
 
-- **Firestore rules.** Visitors can only read your content. You change it in the Firebase console or with `./hb firestore-*`. Signed-in visitors can write only their own saved sessions, notification settings and feedback. The subscribe and partner forms can only add documents, with checked fields and sizes, and nobody can read them from the site. Export them with [`./hb firestore-csv`](01-configure-app.md#subscribers-and-partner-leads).
+- **Firestore rules.** Visitors can only read your content. You change it in the Firebase console or with `./hb firestore-*`. Signed-in visitors can write only their own saved sessions, notification settings, feedback, reactions and public profile. A reaction needs its author's profile and a session that exists, and the rules check every field. The subscribe and partner forms can only add documents, with checked fields and sizes, and nobody can read them from the site. Export them with [`./hb firestore-csv`](01-configure-app.md#subscribers-and-partner-leads).
 - **Storage rules.** The site can't read or write your Storage bucket.
 - **Content.** Links in your config and content can only be `https:`, `http:`, `mailto:` or a path on your site. The site drops other links, such as `javascript:` ones, even when they come straight from the Firebase console. Markdown is sanitized before it is shown, and the build sanitizes the hero illustration.
 - **Headers.** `firebase.json` sends `Strict-Transport-Security`, `Referrer-Policy`, `Permissions-Policy` and other headers on every page, and every page has a [Content Security Policy](01-configure-app.md#content-security-policy).
 - **Sign-out.** Signing out deletes the copy of the visitor's data that the site keeps in the browser for offline use.
+- **Public profiles.** With `reactions` on, the name and photo a visitor picks show to anyone, with their reactions. Nobody has a profile until they react and confirm it. The photo can only be the one from their sign-in account, so a profile can't point other visitors' browsers at any other address. Visitors delete their profile and reactions themselves. To delete someone's data on request, delete their `profiles/{userId}` document and their documents in `sessions/*/reactions` in the Firebase console.
 - **Logs.** The functions don't log emails, push tokens or user IDs.
 - **Deploys.** GitHub Actions deploy without a service account key, with only the roles a deploy needs. See [Deploying to Firebase with Github Actions](04-deploy.md#deploying-to-firebase-with-github-actions).
 

packages/storage/__tests__/rules/profiles.rules.test.ts

@@ -0,0 +1,82 @@
+import {
+  deleteDoc,
+  doc,
+  getDoc,
+  serverTimestamp,
+  setDoc,
+  Timestamp,
+  updateDoc,
+} from 'firebase/firestore';
+import { beforeEach, describe, it } from 'vitest';
+import { expect } from '../helpers';
+import { anonContext, authedContext, seed } from './setup';
+
+const ownerUid = 'owner-uid';
+const otherUid = 'other-uid';
+const picture = 'https://photos.test/ada.jpg';
+const profilePath = `profiles/${ownerUid}`;
+const profile = () => ({ name: 'Ada Lovelace', photoUrl: picture, updatedAt: serverTimestamp() });
+
+const asOwner = (token: Record<string, string> = { picture }) =>
+  authedContext(ownerUid, token).firestore();
+
+describe('profiles rules', () => {
+  beforeEach(() =>
+    seed({
+      [`profiles/${otherUid}`]: { name: 'Grace Hopper', photoUrl: '', updatedAt: new Date() },
+    }),
+  );
+
+  it('lets anyone read a profile', async () => {
+    await expect(getDoc(doc(anonContext().firestore(), `profiles/${otherUid}`))).toAllow();
+    await expect(getDoc(doc(asOwner(), `profiles/${otherUid}`))).toAllow();
+  });
+
+  it('lets the owner create, update and delete their profile', async () => {
+    await expect(setDoc(doc(asOwner(), profilePath), profile())).toAllow();
+    await expect(
+      updateDoc(doc(asOwner(), profilePath), { name: 'Ada King', updatedAt: serverTimestamp() }),
+    ).toAllow();
+    await expect(deleteDoc(doc(asOwner(), profilePath))).toAllow();
+  });
+
+  it('allows no photo, with or without a photo from the sign-in provider', async () => {
+    await expect(setDoc(doc(asOwner(), profilePath), { ...profile(), photoUrl: '' })).toAllow();
+    await expect(setDoc(doc(asOwner({}), profilePath), { ...profile(), photoUrl: '' })).toAllow();
+  });
+
+  it("denies a photo that isn't the sign-in provider's", async () => {
+    await expect(
+      setDoc(doc(asOwner(), profilePath), { ...profile(), photoUrl: 'https://tracker.test/1.gif' }),
+    ).toDeny();
+    await expect(setDoc(doc(asOwner({}), profilePath), profile())).toDeny();
+  });
+
+  it.each([
+    ['an empty name', { name: '' }],
+    ['a blank name', { name: '   ' }],
+    ['a name over 100 characters', { name: 'x'.repeat(101) }],
+    ['a name that is not text', { name: 42 }],
+    ['an extra field', { bio: 'Hi' }],
+    ['a time from the client', { updatedAt: Timestamp.fromDate(new Date('2026-01-01')) }],
+  ])('denies %s', async (_description, overrides) => {
+    await expect(setDoc(doc(asOwner(), profilePath), { ...profile(), ...overrides })).toDeny();
+  });
+
+  it('denies a profile without a name', async () => {
+    const { name: _name, ...withoutName } = profile();
+    await expect(setDoc(doc(asOwner(), profilePath), withoutName)).toDeny();
+  });
+
+  it("denies writing or deleting someone else's profile", async () => {
+    const path = `profiles/${otherUid}`;
+    await expect(setDoc(doc(asOwner(), path), profile())).toDeny();
+    await expect(deleteDoc(doc(asOwner(), path))).toDeny();
+  });
+
+  it('denies signed-out visitors any write', async () => {
+    const firestore = anonContext().firestore();
+    await expect(setDoc(doc(firestore, profilePath), profile())).toDeny();
+    await expect(deleteDoc(doc(firestore, `profiles/${otherUid}`))).toDeny();
+  });
+});