TL;DR
If you just want to see the code, it is here. You can also have a look at the xState 4 implementation here.
Background
After successfully implementing the authentication flow with Firebase, my next focus for the web app is real-time updates, which I intend to achieve using Cloud Firestore.
Use case
Building upon our existing codebase, we will add functionalities for logged-in users. This includes creating a mechanism for writing and reading messages from the database, with real-time updates.
Disclaimer
For simplicity, the message text will be hardcoded. Form input and validation will be covered in a future blog post. After fetching the messages list, we will only display the number of messages.
Setting data in Firestore
The messages will consist of two properties: text and sender. The more interesting property is sender, which will hold the uid of the authenticated Firebase user who created the message.
interface Message {
sender: string;
text: string;
}
In the userSubscriber actor, we will extract the uid from the user parameter and pass it to the GO_TO_AUTHENTICATED event. After adding this transition, we can introduce a setUid action that reads it from the event object and sets it in the machine's context.
const appMachine = setup({
/* ... */
actions: {
setUid: assign({
uid: ({ event }) => {
assertEvent(event, "GO_TO_AUTHENTICATED");
return event.uid;
},
}),
/* ... */
},
actors: {
userSubscriber: fromCallback(({ sendBack }) => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
sendBack({ type: "GO_TO_AUTHENTICATED", uid: user.uid });
} else {
sendBack({ type: "GO_TO_UNAUTHENTICATED" });
}
});
return () => unsubscribe();
}),
/* ... */
},
}).createMachine({
context: { uid: ""},
invoke: { src: "userSubscriber" },
on: {
GO_TO_AUTHENTICATED: {
actions: ["setUid"],
target: ".authenticated",
},
/* ... */
},
initial: "loading",
states: {
loading: { tags: "loading" },
authenticated: {
/* ... */
},
/* ... */
},
});
Now, we can proceed with creating the actual message. First, we need UI elements that trigger the event. In the root page, we add a button that initiates the process:
<button
className="button"
onClick={() => {
actorRef.send({ type: "ADD_MESSAGE" });
}}
>
We need to implement the ADD_MESSAGE event within the authenticated state to ensure it's available only to existing users. This event targets the .addingMessage substate, which, in turn, invokes the addMessage actor.
We use the setDoc Firestore method and we want our newly created messages to be organized in a messages collection. Each message will be a document with its id based on the current time in milliseconds. However, it's important to note that this approach is not recommended for production as there is still a technical chance of duplicating IDs. The message itself consists of a text value (currently hardcoded) and a sender that reads the authenticated user's ID from the context.
Don't forget to set your database access permissions.
import firebaseApp from "@/firebase";
/* ... */
const firestore = getFirestore(firebaseApp);
const appMachine = setup({
/* ... */
actors: {
/* ... */
addMessage: fromPromise(async ({ input }: { input: { uid: string } }) => {
await setDoc(doc(firestore, "messages", `${Date.now()}`), {
sender: input.uid,
text: "Lorem Ipsumm",
});
}),
/* ... */
},
}).createMachine({
/* ... */
initial: "loading",
states: {
loading: { tags: "loading" },
authenticated: {
/* ... */
on: {
ADD_MESSAGE: { target: ".addingMessage" },
/* ... */
},
initial: "idle",
states: {
idle: {},
/* ... */
addingMessage: {
invoke: {
src: "addMessage",
input: ({ context }) => {
return { uid: context.uid };
},
onDone: { target: "idle" },
onError: {
actions: ["logError"],
},
},
},
},
},
/* ... */
},
});
Reading data from Firestore
With messages now being written to the database, we can proceed to demonstrate the power of Firestore in real-time updates.
To do this, we use the onSnapshot method, which attaches listeners to the parts of the database we need to monitor for changes and returns the newly updated data.
Similar to the onAuthStateChanged listener, we utilize the onSnapshot method in a actor callback. From there, we can set the retrieved messages in the context by triggering the SET_MESSAGES. This allows us to easily subscribe to the messages collection and provide the latest information to all authenticated users.
const appMachine = setup({
/* ... */
actions: {
/* ... */
setMessages: assign({
messages: ({ event }) => {
assertEvent(event, "SET_MESSAGES");
return event.messages;
},
}),
/* ... */
},
actors: {
/* ... */
messagesSubscriber: fromCallback(({ sendBack }) => {
const unsubscribe = onSnapshot(
query(collection(firestore, "messages")),
(querySnapshot) => {
const messages: Message[] = [];
querySnapshot.forEach((doc) => {
messages.push(doc.data() as Message);
});
sendBack({ type: "SET_MESSAGES", messages });
}
);
return () => unsubscribe();
}),
/* ... */
},
}).createMachine({
context: { messages: [] },
/* ... */
initial: "loading",
states: {
loading: { tags: "loading" },
authenticated: {
invoke: { src: "messagesSubscriber" },
on: {
SET_MESSAGES: { actions: ["setMessages"] },
/* ... */
},
initial: "idle",
states: {
idle: {},
/* ... */
},
},
/* ... */
},
});
From this point, you can display your messages in a way that suits your application. In our case, we choose to display only the number of messages in the collection next to the Add message button.
const [state, send] = AppContext.useActor();
<span>{state.context.messages.length}</span>
Conclusion
Overall, this example sets the foundation for building real-time applications that react to dynamic data changes. From what I've experienced, the possibilities for expanding and refining this setup are extensive, making it a solid choice for developing interactive web applications.