Supercharge your app with Firebase and Stream

In this talk Peter and Stefan take a look how you can enhance your application with the power of Firebase and Stream. Specifically they will talk about how you can leverage the power of Firebase Extensions to give your applications superpowers with pre-built enhancements to the Firebase ecosystem.

Transcript

1. Supercharge your app Supercharge your app with Firebase and Stream with Firebase and Stream
2. Peter Friese Peter Friese Stefan Blos Stefan Blos Developer Advocate, Firebase Developer Advocate, Firebase Developer Advocate, Stream Developer Advocate, Stream @pete rf riese @pete rf riese @stefanjblos @stefanjblos
3. Side business / Moonlighting
4. Side business / Moonlighting
5. Firebase Backend Cloud Storage Cloud Firestore Tech Stack Authentication Client
6. New Features
7. Challenge Basically, I’m very smol
8. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client Chat Backend ? Chat UI +
9. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client Chat Backend Stream Stream UI +
10. UI Components 􀟜 Stream Overview Infrastructure Authentication 􀎥 • UIKit • Swi ft UI • JWT • BYOS* * Bring Your Own Server • Managed service
11. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client Chat Backend A miracle happens here ? Stream Stream UI +
12. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client https://getstream.io/blog/ vapor-swift-stream-server/ ? Custom Backend Vapor Chat Backend Stream Stream UI +
13. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client ? Chat Backend Stream Stream UI +
14. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client Cloud Functions Stream UI + Chat Backend Stream
16. Serverless JavaScript / TypeScript Automatic scaling Run in trusted environment
17. But… Basically, I’m very smol
18. Firebase Backend Cloud Storage Cloud Firestore Updated tech stack Authentication Client Cloud Functions Extensions Chat Backend Stream Stream UI +
20. Pre-built packages of functionality One-click install to Firebase project Con fi gurable
21. Live Demo - Chat
22. Live Demo - Chat Install Firebase Extension Implement token exchange Connect the UI
23. Install Firebase Extension Implement token exchange Connect the UI 􀆅 Live Demo - Chat
24. Install Firebase Extension Implement token exchange Connect the UI 􀆅 􀆅 Live Demo - Chat
25. Install Firebase Extension Implement token exchange Connect the UI 􀆅 􀆅 􀆅 Live Demo - Chat
26. New Features
27. Live Demo - Email
28. Live Demo - Email Install Firebase Extension Trigger sending email (via Firestore) Add UI to send the email
29. Live Demo - Email Install Firebase Extension Trigger sending email (via Firestore) Add UI to send the email 􀆅
30. Live Demo - Email Install Firebase Extension Trigger sending email (via Firestore) Add UI to send the email 􀆅 􀆅
31. Live Demo - Email Install Firebase Extension Trigger sending email (via Firestore) Add UI to send the email 􀆅 􀆅 􀆅
32. New Features
35. One more thing… One more thing…
38. Building an Extension Install Firebase tools (CLI) Write Cloud Functions (triggers) Package Extension
39. name: auth-chat version: 0.2.0 specVersion: v1beta displayName: Authenticate with Stream Chat description: Synchronizes Firebase Authentication users with Stream, and creates and revoke Stream Chat authentication tokens. license: Apache-2.0 author: authorName: Stream url: https: / / getstream.io/ sourceUrl: https: // github.com/GetStream/stream-firebase-extensions/tree/ main/auth-chat billingRequired: true params: - param: LOCATION label: Cloud Functions location description: >- Where do you want to deploy the functions created for this extension? type: select extension.yaml
40. import * as admin from "firebase-admin"; import * as functions from "firebase-functions"; import { StreamChat } from "stream-chat"; admin.initializeApp(); const serverClient = StreamChat.getInstance( process.env.STREAM_API_KEY!, process.env.STREAM_API_SECRET!, ); // When a user is created in Firebase an associated Stream account is also created. export const createStreamUser = functions.auth.user().onCreate(async (user) => { functions.logger.log("Firebase user created", user); / / Create user using the serverClient. const response = await serverClient.upsertUser({ id: user.uid, name: user.displayName, email: user.email, image: user.photoURL, }); index.ts
41. import * as functions from "firebase-functions"; import { StreamChat } from "stream-chat"; admin.initializeApp(); const serverClient = StreamChat.getInstance( process.env.STREAM_API_KEY!, process.env.STREAM_API_SECRET!, ); // When a user is created in Firebase an associated Stream account is also created. export const createStreamUser = functions.auth.user().onCreate(async (user) => { functions.logger.log("Firebase user created", user); / / Create user using the serverClient. const response = await serverClient.upsertUser({ id: user.uid, name: user.displayName, email: user.email, image: user.photoURL, }); functions.logger.log("Stream user created", response); return response; }); index.ts
42. Wrapping up
43. New Features
44. Firebase Backend Cloud Storage Cloud Firestore Tech Stack - Before Authentication Client
45. Firebase Backend Cloud Storage Cloud Firestore Authentication Client Extensions Chat Backend Stream Stream UI + Tech Stack - A ft er
46. Thanks Thanks @pete rf riese @pete rf riese @stefanjblos @stefanjblos Thanks