Take an early look at RxFire - an official library combining RxJS & Firebase for better control over realtime streams https://angularfirebase.com/lessons/introduction-to-rxfire-rxjs-for-firebase/


- RxFire https://www.npmjs.com/package/rxfire
- Stencil https://stenciljs.com/
- RxJS https://github.com/ReactiveX/rxjs
2024-02-04T07:20:23.526Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b0508267-d3d3-4bdf-902a-abd05b02d2bd
1d7dbd7b86701fc6cff7bbcf850cfe89fe32237d4cd9ecfddab7c7380400434f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the biggest challenges for a web developer is to maintain asynchronous callback based code.
In Firebase, everything is real time, so it only makes sense We use the best reactive programming library out there, which is RxJS.
In today's video, you'll learn about a brand new officially supported library from Firebase called RX Fire.
We'll use it along with Stencil JS to compose full stack reactive web components that can be Used in any JavaScript framework or just in some plain HTML.
If you're new here, like and subscribe, and grab the full source code from angularfirebase.com.
Let's start by talking a little bit more about what RX fire is and when you would want to use it.
The first thing I'll point out is that it's not a replacement for AngularFire 2, so So you wanna continue using AngularFire 2 in an Angular project.
But it does provide a way for other frameworks to have a consistent implementation of Firebase with RxJS.
So you can get really good control flow on your real time streams, whether you're using Vue, React, Stencil as we'll see later in the video, or just plain JavaScript.
I recommend taking a look at the RX Fire samples repo so you can see it in action in a variety of different settings.
And another really cool thing about this library is that it doesn't take The Firebase SDK has a hard dependency which opens the door for lazy loading.
The Firebase SDK is pretty large, so if you can get Out of your critical path, you'll get much quicker page loads for your Progressive Web App.
So what I wanna show you today is how we can take this library and use it with a web component tool like StencilJS to build a reusable to do list that you can just drop into any other app that's already using Firebase.
There's a ton of potential here to build web components that get reused across multiple applications.
For example, you might build a chat client that is similar to intercom, Or maybe you just wanna have a consistent login button that you can easily share across multiple web applications.
There's just tons of potential there, but it's time to get moving on to the code.
I'm going to start by initializing Stencil.
If you're not familiar with Stencil, don't worry.
It's a very approachable tool for building web components.
I'm going to give it a dedicated video in the near future, but it should feel pretty comfortable for you if you're an Angular or React developer.
We just run npm init stencil And then we select a project name and we'll pick the starter component project which is just for one off web components.
If we open up the project, we should see a single component in the source directory, that's where we're going to build out our to do list.
For now, we can run npm run start from the command line and that will serve our web component in the browser.
It has some basic text for now, but we'll build this out into a Web Component that can handle user authentication and also the creating, reading, and deleting of of data in the Firestore database.
If we look at how this component is used across multiple frameworks, you can see that it's just a script tag along with a custom element that we can declare in the DOM.
At the end of the video, we'll build this component and then we'll install it into an existing Angular project.
But But for now, we need a couple extra things in our stencil project, including RXFire, Firebase, and RXJS.
We could initialize Firebase directly in our Web Component, But I want my component to be agnostic to the Firebase project, meaning you could just drop this component into any Firebase project.
It should pick up the config and work seamlessly from there.
So to do that, I'm just going to follow the web setup instructions that you can find in the official docs, And we'll only be using Firestore and user authentication.
Then in the script tag, we'll just go ahead and call Firebase initialize app with our credentials, And then we'll also go ahead and configure Firestore here as well.
Now we'll go ahead and jump into our Stencil Web Component, and you'll notice that it looks pretty similar to an Angular or React component.
It has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator in Angular.
But the decorator that we want to use is state and this property will re render the component anytime its value changes.
And that's actually a really nice mechanism for working with RX fire because every time our observable emits some new data or the data changes, it will rerender the component in the UI.
This component will have 2 different Stateful objects which represent our real time streams.
1 is the to do list which will be in Fire store and the other one is the user, which is the user authentication account.
Then we're not going to actually import Firebase in this component because we don't want it as a hard dependency.
So I'll go ahead and reference the types for Firebase just for IntelliSense up at the top.
And the first thing we'll do with RXFire is observe the user's authentication state.
Auth state is just a function that returns an observable, and that observable will either emit null if the user is not logged in or it will emit their user auth account if they are logged Then we have a bunch of different functions for working with Firestore.
If we want to just get the raw data from the collection, we can use collection data.
Or if we want more fine grain control, there's a number of different methods that allow you to observe specific changes to the documents in your database.
The first thing we wanna do in our component is observe the user's auth state.
Stencil has a life cycle hook called componentWillLoad, which is roughly the equivalent to ngOnInit in Angular.
So we've initialized Firebase outside of this component.
So I'm going to declare a global variable for Firebase and then type it to the Firebase app.
This step is just so we get IntelliSense with our TypeScript and Versus Code.
Then going down to the componentWillLoad lifecycle hook, We're going to subscribe to the auth state of the Firebase user and then the value that this observable emits will be the state of the user property on our component.
So now whenever this observable emits something, it will rerender the component based on the logic that we have down here in our render function.
For right now, we'll just inspect that we actually have a logged in user by JSON stringifying the user object.
Then our component will automatically reload when we save it, and you'll notice that it says Hello World Null.
That's because we're not logged in.
To fix that, we'll go ahead and add a login and logout button to our component.
I'm going to be using Google Auth, so make sure you have that enabled on the Firebase dashboard.
First, we'll set a variable called provider that is a new instance of the Google auth provider.
Then we can say Firebase auth sign in with pop up, And that's all we need to do to get logged in to a Google account.
And while we're at it, let's go ahead and create a logout method.
That's Just a single line of code saying Firebase auth sign out.
The next thing we'll want to do is rewrite this render function so that if the user's logged in, we show them the to do list and a sign out button.
Otherwise, we show them the sign in with Google button.
In TSX, we can handle events such as clicks by saying on click followed by brackets and the method that we wanna call, in this case, login.
If the user's logged in, we'll go ahead and show them their display name And we'll also give them a button to log out.
If we go back to the app now and click the login button, you'll see that Firebase does its thing with a pop up window for Google authentication.
Then when that auth state changes, it will rerender that component to show the user's display name and the logout button.
So, basically, we just created a Google login web component that can be used anywhere with any framework.
But I wanna take things a step further and build a to do list for this user in Firestore that is only associated with this user.
And this is actually really easy to do, thanks to RX Fire.
So I'm bringing in the switch map operator from RXJS, then I'm making a reference to a Firestore collection that contains all the to dos for all of our users.
We'll get to the database in just a minute, but what I'm going to do is save a user property on every to do item, then I'll query it based on the user's authentication UID.
So we'll go ahead and create an observable that's based on the auth state and then we'll switch map to a different observable of the collection in Firestore.
When we run switch map, it's kind of like being inside of subscribe, so we'll have access to the user object.
At that point, we can make a query on the reference that we set earlier.
So we'll create a query that says get all to dos where the user is equal to this user's user ID.
Then we can get all of that collection's data unwrapped by just calling collection data with this query object.
And then the final step is just to subscribe to this observable, And then we'll set its value equal to the to do state on the component.
And the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working.
Right now, it displays an empty array because we don't have any data in our database.
So let's go ahead and change that.
The beauty of this setup is that our component will re render anytime our real time data changes.
We can demonstrate this by creating our Todoce collection.
And then we'll create a document in that collection where the user property is equal to this user's ID.
I'm just copying the user ID from the UI over to our document.
And as soon as we click Save on this document, it will be updated in the UI in our stencil component on the left.
And any changes that happen to this document, no matter where it comes from, will trigger this component to be rerendered.
Then just to prove that our relational data is set up properly, I'm gonna create another document, but this time give it a user that's different than the currently authenticated user.
You'll notice that nothing renders in the UI because our query is based on only the to dos for the currently logged in user.
Another thing r expire does is it tries to make life easier for you.
For example, a common need is to have the document ID mapped to every document in the collection.
Normally, that takes a bunch of JavaScript mapping.
But in RExpir, we can just pass in the field that we want the ID mapped to and it will return that data for us without any additional work.
Now, we can go back into our render function.
And this time, we'll loop over the array of documents and map each one of them to a list item.
And you'll notice that I have a property on this list called task ID, which is what I defined in that collection data method above.
And the reason you give it your custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite.
I've also added a create and delete method here which you can finding the full source code.
And our finished product looks something like this.
It's not very pretty from a design standpoint, but it's a real time full stack web component which is pretty impressive on its own.
But I promised you that we'd be able to run this web component anywhere.
And the first step in that process is to run a production build in Stencil.
The stencil project itself sets you up to build an npm package that you can either install locally or publish on npm.
After our build is finished, we'll go ahead and copy the path to this project folder.
And then we can use that path to install an npm package in a completely different project.
I happen to have an existing Angular project that has AngularFire 2 and Firebase already installed in it.
But I'd like to reuse my stencil to do list because I've already written this code and I don't want to have to rewrite everything in Angular.
So let's see if we can make our Stencil component work in this Angular project.
The first thing you'll do is run npm install in the Angular project and have it point to the path of your stencil project.
If you didn't change any of the defaults, that should resolve to a package of my component version 0.0.1.
In Angular, we have to enable the custom element schema.
So you can import that from Angular core, then add that to the schemas array in the app module.
The final step is to bootstrap the custom elements in this project by calling define custom elements, which is provided by Stencil.
We can handle that in the main TS file, so we'll import Define Custom Elements from my component.
And then we'll also register Firebase on the window object so it's available there as well.
And lastly, we'll call define custom elements and pass it the window.
At this point, we can use our web component anywhere in this Angular project as if it was just a regular DOM element.
I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens.
As you can see here, we have our login with Google button and once we log in we get our to do list from the database.
So hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine RxJS with Firebase.
I'm gonna go ahead and wrap things up there, but I have a lot more content planned for RX Fire and Stencil in the future.
Let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content.
Thanks for watching, and I'll talk to you soon.

Speaker 0: One of the biggest challenges for a web developer is to maintain asynchronous callback based code. In Firebase, everything is real time, so it only makes sense We use the best reactive programming library out there, which is RxJS. In today's video, you'll learn about a brand new officially supported library from Firebase called RX Fire. We'll use it along with Stencil JS to compose full stack reactive web components that can be Used in any JavaScript framework or just in some plain HTML. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com.

Let's start by talking a little bit more about what RX fire is and when you would want to use it. The first thing I'll point out is that it's not a replacement for AngularFire 2, so So you wanna continue using AngularFire 2 in an Angular project. But it does provide a way for other frameworks to have a consistent implementation of Firebase with RxJS. So you can get really good control flow on your real time streams, whether you're using Vue, React, Stencil as we'll see later in the video, or just plain JavaScript. I recommend taking a look at the RX Fire samples repo so you can see it in action in a variety of different settings.

And another really cool thing about this library is that it doesn't take The Firebase SDK has a hard dependency which opens the door for lazy loading. The Firebase SDK is pretty large, so if you can get Out of your critical path, you'll get much quicker page loads for your Progressive Web App. So what I wanna show you today is how we can take this library and use it with a web component tool like StencilJS to build a reusable to do list that you can just drop into any other app that's already using Firebase. There's a ton of potential here to build web components that get reused across multiple applications. For example, you might build a chat client that is similar to intercom, Or maybe you just wanna have a consistent login button that you can easily share across multiple web applications.

There's just tons of potential there, but it's time to get moving on to the code. I'm going to start by initializing Stencil. If you're not familiar with Stencil, don't worry. It's a very approachable tool for building web components. I'm going to give it a dedicated video in the near future, but it should feel pretty comfortable for you if you're an Angular or React developer.

We just run npm init stencil And then we select a project name and we'll pick the starter component project which is just for one off web components. If we open up the project, we should see a single component in the source directory, that's where we're going to build out our to do list. For now, we can run npm run start from the command line and that will serve our web component in the browser. It has some basic text for now, but we'll build this out into a Web Component that can handle user authentication and also the creating, reading, and deleting of of data in the Firestore database. If we look at how this component is used across multiple frameworks, you can see that it's just a script tag along with a custom element that we can declare in the DOM.

At the end of the video, we'll build this component and then we'll install it into an existing Angular project. But But for now, we need a couple extra things in our stencil project, including RXFire, Firebase, and RXJS. We could initialize Firebase directly in our Web Component, But I want my component to be agnostic to the Firebase project, meaning you could just drop this component into any Firebase project. It should pick up the config and work seamlessly from there. So to do that, I'm just going to follow the web setup instructions that you can find in the official docs, And we'll only be using Firestore and user authentication.

Then in the script tag, we'll just go ahead and call Firebase initialize app with our credentials, And then we'll also go ahead and configure Firestore here as well. Now we'll go ahead and jump into our Stencil Web Component, and you'll notice that it looks pretty similar to an Angular or React component. It has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator in Angular. But the decorator that we want to use is state and this property will re render the component anytime its value changes. And that's actually a really nice mechanism for working with RX fire because every time our observable emits some new data or the data changes, it will rerender the component in the UI.

This component will have 2 different Stateful objects which represent our real time streams. 1 is the to do list which will be in Fire store and the other one is the user, which is the user authentication account. Then we're not going to actually import Firebase in this component because we don't want it as a hard dependency. So I'll go ahead and reference the types for Firebase just for IntelliSense up at the top. And the first thing we'll do with RXFire is observe the user's authentication state.

Auth state is just a function that returns an observable, and that observable will either emit null if the user is not logged in or it will emit their user auth account if they are logged Then we have a bunch of different functions for working with Firestore. If we want to just get the raw data from the collection, we can use collection data. Or if we want more fine grain control, there's a number of different methods that allow you to observe specific changes to the documents in your database. The first thing we wanna do in our component is observe the user's auth state. Stencil has a life cycle hook called componentWillLoad, which is roughly the equivalent to ngOnInit in Angular.

So we've initialized Firebase outside of this component. So I'm going to declare a global variable for Firebase and then type it to the Firebase app. This step is just so we get IntelliSense with our TypeScript and Versus Code. Then going down to the componentWillLoad lifecycle hook, We're going to subscribe to the auth state of the Firebase user and then the value that this observable emits will be the state of the user property on our component. So now whenever this observable emits something, it will rerender the component based on the logic that we have down here in our render function.

For right now, we'll just inspect that we actually have a logged in user by JSON stringifying the user object. Then our component will automatically reload when we save it, and you'll notice that it says Hello World Null. That's because we're not logged in. To fix that, we'll go ahead and add a login and logout button to our component. I'm going to be using Google Auth, so make sure you have that enabled on the Firebase dashboard.

First, we'll set a variable called provider that is a new instance of the Google auth provider. Then we can say Firebase auth sign in with pop up, And that's all we need to do to get logged in to a Google account. And while we're at it, let's go ahead and create a logout method. That's Just a single line of code saying Firebase auth sign out. The next thing we'll want to do is rewrite this render function so that if the user's logged in, we show them the to do list and a sign out button.

Otherwise, we show them the sign in with Google button. In TSX, we can handle events such as clicks by saying on click followed by brackets and the method that we wanna call, in this case, login. If the user's logged in, we'll go ahead and show them their display name And we'll also give them a button to log out. If we go back to the app now and click the login button, you'll see that Firebase does its thing with a pop up window for Google authentication. Then when that auth state changes, it will rerender that component to show the user's display name and the logout button.

So, basically, we just created a Google login web component that can be used anywhere with any framework. But I wanna take things a step further and build a to do list for this user in Firestore that is only associated with this user. And this is actually really easy to do, thanks to RX Fire. So I'm bringing in the switch map operator from RXJS, then I'm making a reference to a Firestore collection that contains all the to dos for all of our users. We'll get to the database in just a minute, but what I'm going to do is save a user property on every to do item, then I'll query it based on the user's authentication UID.

So we'll go ahead and create an observable that's based on the auth state and then we'll switch map to a different observable of the collection in Firestore. When we run switch map, it's kind of like being inside of subscribe, so we'll have access to the user object. At that point, we can make a query on the reference that we set earlier. So we'll create a query that says get all to dos where the user is equal to this user's user ID. Then we can get all of that collection's data unwrapped by just calling collection data with this query object.

And then the final step is just to subscribe to this observable, And then we'll set its value equal to the to do state on the component. And the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working. Right now, it displays an empty array because we don't have any data in our database. So let's go ahead and change that. The beauty of this setup is that our component will re render anytime our real time data changes.

We can demonstrate this by creating our Todoce collection. And then we'll create a document in that collection where the user property is equal to this user's ID. I'm just copying the user ID from the UI over to our document. And as soon as we click Save on this document, it will be updated in the UI in our stencil component on the left. And any changes that happen to this document, no matter where it comes from, will trigger this component to be rerendered.

Then just to prove that our relational data is set up properly, I'm gonna create another document, but this time give it a user that's different than the currently authenticated user. You'll notice that nothing renders in the UI because our query is based on only the to dos for the currently logged in user. Another thing r expire does is it tries to make life easier for you. For example, a common need is to have the document ID mapped to every document in the collection. Normally, that takes a bunch of JavaScript mapping.

But in RExpir, we can just pass in the field that we want the ID mapped to and it will return that data for us without any additional work. Now, we can go back into our render function. And this time, we'll loop over the array of documents and map each one of them to a list item. And you'll notice that I have a property on this list called task ID, which is what I defined in that collection data method above. And the reason you give it your custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite.

I've also added a create and delete method here which you can finding the full source code. And our finished product looks something like this. It's not very pretty from a design standpoint, but it's a real time full stack web component which is pretty impressive on its own. But I promised you that we'd be able to run this web component anywhere. And the first step in that process is to run a production build in Stencil.

The stencil project itself sets you up to build an npm package that you can either install locally or publish on npm. After our build is finished, we'll go ahead and copy the path to this project folder. And then we can use that path to install an npm package in a completely different project. I happen to have an existing Angular project that has AngularFire 2 and Firebase already installed in it. But I'd like to reuse my stencil to do list because I've already written this code and I don't want to have to rewrite everything in Angular.

So let's see if we can make our Stencil component work in this Angular project. The first thing you'll do is run npm install in the Angular project and have it point to the path of your stencil project. If you didn't change any of the defaults, that should resolve to a package of my component version 0.0.1. In Angular, we have to enable the custom element schema. So you can import that from Angular core, then add that to the schemas array in the app module.

The final step is to bootstrap the custom elements in this project by calling define custom elements, which is provided by Stencil. We can handle that in the main TS file, so we'll import Define Custom Elements from my component. And then we'll also register Firebase on the window object so it's available there as well. And lastly, we'll call define custom elements and pass it the window. At this point, we can use our web component anywhere in this Angular project as if it was just a regular DOM element.

I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens. As you can see here, we have our login with Google button and once we log in we get our to do list from the database. So hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine RxJS with Firebase. I'm gonna go ahead and wrap things up there, but I have a lot more content planned for RX Fire and Stencil in the future. Let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content.

Thanks for watching, and I'll talk to you soon.
One of the biggest challenges for a web developer is to maintain asynchronous callback based code. In Firebase, everything is real time, so it only makes sense We use the best reactive programming library out there, which is RxJS. In today's video, you'll learn about a brand new officially supported library from Firebase called RX Fire. We'll use it along with Stencil JS to compose full stack reactive web components that can be Used in any JavaScript framework or just in some plain HTML. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. Let's start by talking a little bit more about what RX fire is and when you would want to use it. The first thing I'll point out is that it's not a replacement for AngularFire 2, so So you wanna continue using AngularFire 2 in an Angular project. But it does provide a way for other frameworks to have a consistent implementation of Firebase with RxJS. So you can get really good control flow on your real time streams, whether you're using Vue, React, Stencil as we'll see later in the video, or just plain JavaScript. I recommend taking a look at the RX Fire samples repo so you can see it in action in a variety of different settings. And another really cool thing about this library is that it doesn't take The Firebase SDK has a hard dependency which opens the door for lazy loading. The Firebase SDK is pretty large, so if you can get Out of your critical path, you'll get much quicker page loads for your Progressive Web App.
So what I wanna show you today is how we can take this library and use it with a web component tool like StencilJS to build a reusable to do list that you can just drop into any other app that's already using Firebase. There's a ton of potential here to build web components that get reused across multiple applications.
software
software development
For example, you might build a chat client that is similar to intercom, Or maybe you just wanna have a consistent login button that you can easily share across multiple web applications.
There's just tons of potential there, but it's time to get moving on to the code. I'm going to start by initializing Stencil. If you're not familiar with Stencil, don't worry. It's a very approachable tool for building web components. I'm going to give it a dedicated video in the near future, but it should feel pretty comfortable for you if you're an Angular or React developer. We just run npm init stencil And then we select a project name and we'll pick the starter component project which is just for one off web components.
software development
graphic design
software
If we open up the project, we should see a single component in the source directory, that's where we're going to build out our to do list. For now, we can run npm run start from the command line and that will serve our web component in the browser. It has some basic text for now, but we'll build this out into a Web Component that can handle user authentication and also the creating, reading, and deleting of of data in the Firestore database. If we look at how this component is used across multiple frameworks, you can see that it's just a script tag along with a custom element that we can declare in the DOM. At the end of the video, we'll build this component and then we'll install it into an existing Angular project. But But for now, we need a couple extra things in our stencil project, including RXFire, Firebase, and RXJS. We could initialize Firebase directly in our Web Component, But I want my component to be agnostic to the Firebase project, meaning you could just drop this component into any Firebase project.
It should pick up the config and work seamlessly from there. So to do that, I'm just going to follow the web setup instructions that you can find in the official docs, And we'll only be using Firestore and user authentication. Then in the script tag, we'll just go ahead and call Firebase initialize app with our credentials, And then we'll also go ahead and configure Firestore here as well.
software
Now we'll go ahead and jump into our Stencil Web Component, and you'll notice that it looks pretty similar to an Angular or React component. It has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator in Angular. But the decorator that we want to use is state and this property will re render the component anytime its value changes. And that's actually a really nice mechanism for working with RX fire because every time our observable emits some new data or the data changes, it will rerender the component in the UI. This component will have 2 different Stateful objects which represent our real time streams. 1 is the to do list which will be in Fire store and the other one is the user, which is the user authentication account. Then we're not going to actually import Firebase in this component because we don't want it as a hard dependency. So I'll go ahead and reference the types for Firebase just for IntelliSense up at the top. And the first thing we'll do with RXFire is observe the user's authentication state. Auth state is just a function that returns an observable, and that observable will either emit null if the user is not logged in or it will emit their user auth account if they are logged Then we have a bunch of different functions for working with Firestore.
If we want to just get the raw data from the collection, we can use collection data. Or if we want more fine grain control, there's a number of different methods that allow you to observe specific changes to the documents in your database. The first thing we wanna do in our component is observe the user's auth state.
data
databases
data management
data analysis
Stencil has a life cycle hook called componentWillLoad, which is roughly the equivalent to ngOnInit in Angular. So we've initialized Firebase outside of this component. So I'm going to declare a global variable for Firebase and then type it to the Firebase app. This step is just so we get IntelliSense with our TypeScript and Versus Code. Then going down to the componentWillLoad lifecycle hook, We're going to subscribe to the auth state of the Firebase user and then the value that this observable emits will be the state of the user property on our component. So now whenever this observable emits something, it will rerender the component based on the logic that we have down here in our render function. For right now, we'll just inspect that we actually have a logged in user by JSON stringifying the user object. Then our component will automatically reload when we save it, and you'll notice that it says Hello World Null.
That's because we're not logged in. To fix that, we'll go ahead and add a login and logout button to our component. I'm going to be using Google Auth, so make sure you have that enabled on the Firebase dashboard. First, we'll set a variable called provider that is a new instance of the Google auth provider. Then we can say Firebase auth sign in with pop up, And that's all we need to do to get logged in to a Google account. And while we're at it, let's go ahead and create a logout method.
google
That's Just a single line of code saying Firebase auth sign out. The next thing we'll want to do is rewrite this render function so that if the user's logged in, we show them the to do list and a sign out button.
Otherwise, we show them the sign in with Google button. In TSX, we can handle events such as clicks by saying on click followed by brackets and the method that we wanna call, in this case, login. If the user's logged in, we'll go ahead and show them their display name And we'll also give them a button to log out.
google
If we go back to the app now and click the login button, you'll see that Firebase does its thing with a pop up window for Google authentication.
Then when that auth state changes, it will rerender that component to show the user's display name and the logout button. So, basically, we just created a Google login web component that can be used anywhere with any framework. But I wanna take things a step further and build a to do list for this user in Firestore that is only associated with this user.
google
And this is actually really easy to do, thanks to RX Fire. So I'm bringing in the switch map operator from RXJS, then I'm making a reference to a Firestore collection that contains all the to dos for all of our users. We'll get to the database in just a minute, but what I'm going to do is save a user property on every to do item, then I'll query it based on the user's authentication UID. So we'll go ahead and create an observable that's based on the auth state and then we'll switch map to a different observable of the collection in Firestore.
databases
data management
When we run switch map, it's kind of like being inside of subscribe, so we'll have access to the user object. At that point, we can make a query on the reference that we set earlier.
So we'll create a query that says get all to dos where the user is equal to this user's user ID. Then we can get all of that collection's data unwrapped by just calling collection data with this query object. And then the final step is just to subscribe to this observable, And then we'll set its value equal to the to do state on the component.
data
data management
databases
And the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working.
Right now, it displays an empty array because we don't have any data in our database. So let's go ahead and change that. The beauty of this setup is that our component will re render anytime our real time data changes. We can demonstrate this by creating our Todoce collection.
data management
databases
data
And then we'll create a document in that collection where the user property is equal to this user's ID. I'm just copying the user ID from the UI over to our document. And as soon as we click Save on this document, it will be updated in the UI in our stencil component on the left.
And any changes that happen to this document, no matter where it comes from, will trigger this component to be rerendered. Then just to prove that our relational data is set up properly, I'm gonna create another document, but this time give it a user that's different than the currently authenticated user.
documentation
You'll notice that nothing renders in the UI because our query is based on only the to dos for the currently logged in user. Another thing r expire does is it tries to make life easier for you. For example, a common need is to have the document ID mapped to every document in the collection. Normally, that takes a bunch of JavaScript mapping. But in RExpir, we can just pass in the field that we want the ID mapped to and it will return that data for us without any additional work. Now, we can go back into our render function. And this time, we'll loop over the array of documents and map each one of them to a list item. And you'll notice that I have a property on this list called task ID, which is what I defined in that collection data method above. And the reason you give it your custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite.
I've also added a create and delete method here which you can finding the full source code. And our finished product looks something like this. It's not very pretty from a design standpoint, but it's a real time full stack web component which is pretty impressive on its own. But I promised you that we'd be able to run this web component anywhere. And the first step in that process is to run a production build in Stencil.
graphic design
software
The stencil project itself sets you up to build an npm package that you can either install locally or publish on npm. After our build is finished, we'll go ahead and copy the path to this project folder. And then we can use that path to install an npm package in a completely different project. I happen to have an existing Angular project that has AngularFire 2 and Firebase already installed in it. But I'd like to reuse my stencil to do list because I've already written this code and I don't want to have to rewrite everything in Angular. So let's see if we can make our Stencil component work in this Angular project. The first thing you'll do is run npm install in the Angular project and have it point to the path of your stencil project. If you didn't change any of the defaults, that should resolve to a package of my component version 0.0.1. In Angular, we have to enable the custom element schema. So you can import that from Angular core, then add that to the schemas array in the app module. The final step is to bootstrap the custom elements in this project by calling define custom elements, which is provided by Stencil. We can handle that in the main TS file, so we'll import Define Custom Elements from my component. And then we'll also register Firebase on the window object so it's available there as well. And lastly, we'll call define custom elements and pass it the window. At this point, we can use our web component anywhere in this Angular project as if it was just a regular DOM element.
I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens. As you can see here, we have our login with Google button and once we log in we get our to do list from the database. So hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine RxJS with Firebase. I'm gonna go ahead and wrap things up there, but I have a lot more content planned for RX Fire and Stencil in the future. Let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content.
streaming
multimedia
video gaming
blogging
youtube
Thanks for watching, and I'll talk to you soon.
One of the biggest challenges for a web developer is to maintain asynchronous callback based code. In Firebase, everything is real time, so it only makes sense We use the best reactive programming library out there, which is RxJS. In today's video, you'll learn about a brand new officially supported library from Firebase called RX Fire. We'll use it along with Stencil JS to compose full stack reactive web components that can be Used in any JavaScript framework or just in some plain HTML. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. Let's start by talking a little bit more about what RX fire is and when you would want to use it. The first thing I'll point out is that it's not a replacement for AngularFire 2, so So you wanna continue using AngularFire 2 in an Angular project. But it does provide a way for other frameworks to have a consistent implementation of Firebase with RxJS. So you can get really good control flow on your real time streams, whether you're using Vue, React, Stencil as we'll see later in the video, or just plain JavaScript. I recommend taking a look at the RX Fire samples repo so you can see it in action in a variety of different settings. And another really cool thing about this library is that it doesn't take The Firebase SDK has a hard dependency which opens the door for lazy loading. The Firebase SDK is pretty large, so if you can get Out of your critical path, you'll get much quicker page loads for your Progressive Web App. So what I wanna show you today is how we can take this library and use it with a web component tool like StencilJS to build a reusable to do list that you can just drop into any other app that's already using Firebase. There's a ton of potential here to build web components that get reused across multiple applications. For example, you might build a chat client that is similar to intercom, Or maybe you just wanna have a consistent login button that you can easily share across multiple web applications. There's just tons of potential there, but it's time to get moving on to the code. I'm going to start by initializing Stencil. If you're not familiar with Stencil, don't worry. It's a very approachable tool for building web components. I'm going to give it a dedicated video in the near future, but it should feel pretty comfortable for you if you're an Angular or React developer. We just run npm init stencil And then we select a project name and we'll pick the starter component project which is just for one off web components. If we open up the project, we should see a single component in the source directory, that's where we're going to build out our to do list. For now, we can run npm run start from the command line and that will serve our web component in the browser. It has some basic text for now, but we'll build this out into a Web Component that can handle user authentication and also the creating, reading, and deleting of of data in the Firestore database. If we look at how this component is used across multiple frameworks, you can see that it's just a script tag along with a custom element that we can declare in the DOM. At the end of the video, we'll build this component and then we'll install it into an existing Angular project. But But for now, we need a couple extra things in our stencil project, including RXFire, Firebase, and RXJS. We could initialize Firebase directly in our Web Component, But I want my component to be agnostic to the Firebase project, meaning you could just drop this component into any Firebase project. It should pick up the config and work seamlessly from there. So to do that, I'm just going to follow the web setup instructions that you can find in the official docs, And we'll only be using Firestore and user authentication. Then in the script tag, we'll just go ahead and call Firebase initialize app with our credentials, And then we'll also go ahead and configure Firestore here as well. Now we'll go ahead and jump into our Stencil Web Component, and you'll notice that it looks pretty similar to an Angular or React component. It has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator in Angular. But the decorator that we want to use is state and this property will re render the component anytime its value changes. And that's actually a really nice mechanism for working with RX fire because every time our observable emits some new data or the data changes, it will rerender the component in the UI. This component will have 2 different Stateful objects which represent our real time streams. 1 is the to do list which will be in Fire store and the other one is the user, which is the user authentication account. Then we're not going to actually import Firebase in this component because we don't want it as a hard dependency. So I'll go ahead and reference the types for Firebase just for IntelliSense up at the top. And the first thing we'll do with RXFire is observe the user's authentication state. Auth state is just a function that returns an observable, and that observable will either emit null if the user is not logged in or it will emit their user auth account if they are logged Then we have a bunch of different functions for working with Firestore. If we want to just get the raw data from the collection, we can use collection data. Or if we want more fine grain control, there's a number of different methods that allow you to observe specific changes to the documents in your database. The first thing we wanna do in our component is observe the user's auth state. Stencil has a life cycle hook called componentWillLoad, which is roughly the equivalent to ngOnInit in Angular. So we've initialized Firebase outside of this component. So I'm going to declare a global variable for Firebase and then type it to the Firebase app. This step is just so we get IntelliSense with our TypeScript and Versus Code. Then going down to the componentWillLoad lifecycle hook, We're going to subscribe to the auth state of the Firebase user and then the value that this observable emits will be the state of the user property on our component. So now whenever this observable emits something, it will rerender the component based on the logic that we have down here in our render function. For right now, we'll just inspect that we actually have a logged in user by JSON stringifying the user object. Then our component will automatically reload when we save it, and you'll notice that it says Hello World Null. That's because we're not logged in. To fix that, we'll go ahead and add a login and logout button to our component. I'm going to be using Google Auth, so make sure you have that enabled on the Firebase dashboard. First, we'll set a variable called provider that is a new instance of the Google auth provider. Then we can say Firebase auth sign in with pop up, And that's all we need to do to get logged in to a Google account. And while we're at it, let's go ahead and create a logout method. That's Just a single line of code saying Firebase auth sign out. The next thing we'll want to do is rewrite this render function so that if the user's logged in, we show them the to do list and a sign out button. Otherwise, we show them the sign in with Google button. In TSX, we can handle events such as clicks by saying on click followed by brackets and the method that we wanna call, in this case, login. If the user's logged in, we'll go ahead and show them their display name And we'll also give them a button to log out. If we go back to the app now and click the login button, you'll see that Firebase does its thing with a pop up window for Google authentication. Then when that auth state changes, it will rerender that component to show the user's display name and the logout button. So, basically, we just created a Google login web component that can be used anywhere with any framework. But I wanna take things a step further and build a to do list for this user in Firestore that is only associated with this user. And this is actually really easy to do, thanks to RX Fire. So I'm bringing in the switch map operator from RXJS, then I'm making a reference to a Firestore collection that contains all the to dos for all of our users. We'll get to the database in just a minute, but what I'm going to do is save a user property on every to do item, then I'll query it based on the user's authentication UID. So we'll go ahead and create an observable that's based on the auth state and then we'll switch map to a different observable of the collection in Firestore. When we run switch map, it's kind of like being inside of subscribe, so we'll have access to the user object. At that point, we can make a query on the reference that we set earlier. So we'll create a query that says get all to dos where the user is equal to this user's user ID. Then we can get all of that collection's data unwrapped by just calling collection data with this query object. And then the final step is just to subscribe to this observable, And then we'll set its value equal to the to do state on the component. And the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working. Right now, it displays an empty array because we don't have any data in our database. So let's go ahead and change that. The beauty of this setup is that our component will re render anytime our real time data changes. We can demonstrate this by creating our Todoce collection. And then we'll create a document in that collection where the user property is equal to this user's ID. I'm just copying the user ID from the UI over to our document. And as soon as we click Save on this document, it will be updated in the UI in our stencil component on the left. And any changes that happen to this document, no matter where it comes from, will trigger this component to be rerendered. Then just to prove that our relational data is set up properly, I'm gonna create another document, but this time give it a user that's different than the currently authenticated user. You'll notice that nothing renders in the UI because our query is based on only the to dos for the currently logged in user. Another thing r expire does is it tries to make life easier for you. For example, a common need is to have the document ID mapped to every document in the collection. Normally, that takes a bunch of JavaScript mapping. But in RExpir, we can just pass in the field that we want the ID mapped to and it will return that data for us without any additional work. Now, we can go back into our render function. And this time, we'll loop over the array of documents and map each one of them to a list item. And you'll notice that I have a property on this list called task ID, which is what I defined in that collection data method above. And the reason you give it your custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite. I've also added a create and delete method here which you can finding the full source code. And our finished product looks something like this. It's not very pretty from a design standpoint, but it's a real time full stack web component which is pretty impressive on its own. But I promised you that we'd be able to run this web component anywhere. And the first step in that process is to run a production build in Stencil. The stencil project itself sets you up to build an npm package that you can either install locally or publish on npm. After our build is finished, we'll go ahead and copy the path to this project folder. And then we can use that path to install an npm package in a completely different project. I happen to have an existing Angular project that has AngularFire 2 and Firebase already installed in it. But I'd like to reuse my stencil to do list because I've already written this code and I don't want to have to rewrite everything in Angular. So let's see if we can make our Stencil component work in this Angular project. The first thing you'll do is run npm install in the Angular project and have it point to the path of your stencil project. If you didn't change any of the defaults, that should resolve to a package of my component version 0.0.1. In Angular, we have to enable the custom element schema. So you can import that from Angular core, then add that to the schemas array in the app module. The final step is to bootstrap the custom elements in this project by calling define custom elements, which is provided by Stencil. We can handle that in the main TS file, so we'll import Define Custom Elements from my component. And then we'll also register Firebase on the window object so it's available there as well. And lastly, we'll call define custom elements and pass it the window. At this point, we can use our web component anywhere in this Angular project as if it was just a regular DOM element. I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens. As you can see here, we have our login with Google button and once we log in we get our to do list from the database. So hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine RxJS with Firebase. I'm gonna go ahead and wrap things up there, but I have a lot more content planned for RX Fire and Stencil in the future. Let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content. Thanks for watching, and I'll talk to you soon.
One
one
of
of
the
the
biggest
biggest
challenges
challenges
for
for
a
a
web
web
developer
developer
is
is
to
to
maintain
maintain
asynchronous
asynchronous
callback
callback
based
based
code.
code
In
in
Firebase,
firebase
everything
everything
is
is
real
real
time,
time
so
so
it
it
only
only
makes
makes
sense
sense
We
we
use
use
the
the
best
best
reactive
reactive
programming
programming
library
library
out
out
there,
there
which
which
is
is
RxJS.
rxjs
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
about
about
a
a
brand
brand
new
new
officially
officially
supported
supported
library
library
from
from
Firebase
firebase
called
called
RX
rx
Fire.
fire
We'll
we'll
use
use
it
it
along
along
with
with
Stencil
stencil
JS
js
to
to
compose
compose
full
full
stack
stack
reactive
reactive
web
web
components
components
that
that
can
can
be
be
Used
used
in
in
any
any
JavaScript
javascript
framework
framework
or
or
just
just
in
in
some
some
plain
plain
HTML.
html
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
grab
grab
the
the
full
full
source
source
code
code
from
from
angularfirebase.com.
angularfirebase.com
Let's
let's
start
start
by
by
talking
talking
a
a
little
little
bit
bit
more
more
about
about
what
what
RX
rx
fire
fire
is
is
and
and
when
when
you
you
would
would
want
want
to
to
use
use
it.
it
The
the
first
first
thing
thing
I'll
i'll
point
point
out
out
is
is
that
that
it's
it's
not
not
a
a
replacement
replacement
for
for
AngularFire
angularfire
2,
2
so
so
So
so
you
you
wanna
wanna
continue
continue
using
using
AngularFire
angularfire
2
2
in
in
an
an
Angular
angular
project.
project
But
but
it
it
does
does
provide
provide
a
a
way
way
for
for
other
other
frameworks
frameworks
to
to
have
have
a
a
consistent
consistent
implementation
implementation
of
of
Firebase
firebase
with
with
RxJS.
rxjs
So
so
you
you
can
can
get
get
really
really
good
good
control
control
flow
flow
on
on
your
your
real
real
time
time
streams,
streams
whether
whether
you're
you're
using
using
Vue,
vue
React,
react
Stencil
stencil
as
as
we'll
we'll
see
see
later
later
in
in
the
the
video,
video
or
or
just
just
plain
plain
JavaScript.
javascript
I
i
recommend
recommend
taking
taking
a
a
look
look
at
at
the
the
RX
rx
Fire
fire
samples
samples
repo
repo
so
so
you
you
can
can
see
see
it
it
in
in
action
action
in
in
a
a
variety
variety
of
of
different
different
settings.
settings
And
and
another
another
really
really
cool
cool
thing
thing
about
about
this
this
library
library
is
is
that
that
it
it
doesn't
doesn't
take
take
The
the
Firebase
firebase
SDK
sdk
has
has
a
a
hard
hard
dependency
dependency
which
which
opens
opens
the
the
door
door
for
for
lazy
lazy
loading.
loading
The
the
Firebase
firebase
SDK
sdk
is
is
pretty
pretty
large,
large
so
so
if
if
you
you
can
can
get
get
Out
out
of
of
your
your
critical
critical
path,
path
you'll
you'll
get
get
much
much
quicker
quicker
page
page
loads
loads
for
for
your
your
Progressive
progressive
Web
web
App.
app
So
so
what
what
I
i
wanna
wanna
show
show
you
you
today
today
is
is
how
how
we
we
can
can
take
take
this
this
library
library
and
and
use
use
it
it
with
with
a
a
web
web
component
component
tool
tool
like
like
StencilJS
stenciljs
to
to
build
build
a
a
reusable
reusable
to
to
do
do
list
list
that
that
you
you
can
can
just
just
drop
drop
into
into
any
any
other
other
app
app
that's
that's
already
already
using
using
Firebase.
firebase
There's
there's
a
a
ton
ton
of
of
potential
potential
here
here
to
to
build
build
web
web
components
components
that
that
get
get
reused
reused
across
across
multiple
multiple
applications.
applications
For
for
example,
example
you
you
might
might
build
build
a
a
chat
chat
client
client
that
that
is
is
similar
similar
to
to
intercom,
intercom
Or
or
maybe
maybe
you
you
just
just
wanna
wanna
have
have
a
a
consistent
consistent
login
login
button
button
that
that
you
you
can
can
easily
easily
share
share
across
across
multiple
multiple
web
web
applications.
applications
There's
there's
just
just
tons
tons
of
of
potential
potential
there,
there
but
but
it's
it's
time
time
to
to
get
get
moving
moving
on
on
to
to
the
the
code.
code
I'm
i'm
going
going
to
to
start
start
by
by
initializing
initializing
Stencil.
stencil
If
if
you're
you're
not
not
familiar
familiar
with
with
Stencil,
stencil
don't
don't
worry.
worry
It's
it's
a
a
very
very
approachable
approachable
tool
tool
for
for
building
building
web
web
components.
components
I'm
i'm
going
going
to
to
give
give
it
it
a
a
dedicated
dedicated
video
video
in
in
the
the
near
near
future,
future
but
but
it
it
should
should
feel
feel
pretty
pretty
comfortable
comfortable
for
for
you
you
if
if
you're
you're
an
an
Angular
angular
or
or
React
react
developer.
developer
We
we
just
just
run
run
npm
npm
init
init
stencil
stencil
And
and
then
then
we
we
select
select
a
a
project
project
name
name
and
and
we'll
we'll
pick
pick
the
the
starter
starter
component
component
project
project
which
which
is
is
just
just
for
for
one
one
off
off
web
web
components.
components
If
if
we
we
open
open
up
up
the
the
project,
project
we
we
should
should
see
see
a
a
single
single
component
component
in
in
the
the
source
source
directory,
directory
that's
that's
where
where
we're
we're
going
going
to
to
build
build
out
out
our
our
to
to
do
do
list.
list
For
for
now,
now
we
we
can
can
run
run
npm
npm
run
run
start
start
from
from
the
the
command
command
line
line
and
and
that
that
will
will
serve
serve
our
our
web
web
component
component
in
in
the
the
browser.
browser
It
it
has
has
some
some
basic
basic
text
text
for
for
now,
now
but
but
we'll
we'll
build
build
this
this
out
out
into
into
a
a
Web
web
Component
component
that
that
can
can
handle
handle
user
user
authentication
authentication
and
and
also
also
the
the
creating,
creating
reading,
reading
and
and
deleting
deleting
of
of
of
of
data
data
in
in
the
the
Firestore
firestore
database.
database
If
if
we
we
look
look
at
at
how
how
this
this
component
component
is
is
used
used
across
across
multiple
multiple
frameworks,
frameworks
you
you
can
can
see
see
that
that
it's
it's
just
just
a
a
script
script
tag
tag
along
along
with
with
a
a
custom
custom
element
element
that
that
we
we
can
can
declare
declare
in
in
the
the
DOM.
dom
At
at
the
the
end
end
of
of
the
the
video,
video
we'll
we'll
build
build
this
this
component
component
and
and
then
then
we'll
we'll
install
install
it
it
into
into
an
an
existing
existing
Angular
angular
project.
project
But
but
But
but
for
for
now,
now
we
we
need
need
a
a
couple
couple
extra
extra
things
things
in
in
our
our
stencil
stencil
project,
project
including
including
RXFire,
rxfire
Firebase,
firebase
and
and
RXJS.
rxjs
We
we
could
could
initialize
initialize
Firebase
firebase
directly
directly
in
in
our
our
Web
web
Component,
component
But
but
I
i
want
want
my
my
component
component
to
to
be
be
agnostic
agnostic
to
to
the
the
Firebase
firebase
project,
project
meaning
meaning
you
you
could
could
just
just
drop
drop
this
this
component
component
into
into
any
any
Firebase
firebase
project.
project
It
it
should
should
pick
pick
up
up
the
the
config
config
and
and
work
work
seamlessly
seamlessly
from
from
there.
there
So
so
to
to
do
do
that,
that
I'm
i'm
just
just
going
going
to
to
follow
follow
the
the
web
web
setup
setup
instructions
instructions
that
that
you
you
can
can
find
find
in
in
the
the
official
official
docs,
docs
And
and
we'll
we'll
only
only
be
be
using
using
Firestore
firestore
and
and
user
user
authentication.
authentication
Then
then
in
in
the
the
script
script
tag,
tag
we'll
we'll
just
just
go
go
ahead
ahead
and
and
call
call
Firebase
firebase
initialize
initialize
app
app
with
with
our
our
credentials,
credentials
And
and
then
then
we'll
we'll
also
also
go
go
ahead
ahead
and
and
configure
configure
Firestore
firestore
here
here
as
as
well.
well
Now
now
we'll
we'll
go
go
ahead
ahead
and
and
jump
jump
into
into
our
our
Stencil
stencil
Web
web
Component,
component
and
and
you'll
you'll
notice
notice
that
that
it
it
looks
looks
pretty
pretty
similar
similar
to
to
an
an
Angular
angular
or
or
React
react
component.
component
It
it
has
has
these
these
prop
prop
decorators
decorators
which
which
allow
allow
you
you
to
to
pass
pass
in
in
information
information
from
from
the
the
HTML
html
directly
directly
similar
similar
to
to
the
the
input
input
decorator
decorator
in
in
Angular.
angular
But
but
the
the
decorator
decorator
that
that
we
we
want
want
to
to
use
use
is
is
state
state
and
and
this
this
property
property
will
will
re
re
render
render
the
the
component
component
anytime
anytime
its
its
value
value
changes.
changes
And
and
that's
that's
actually
actually
a
a
really
really
nice
nice
mechanism
mechanism
for
for
working
working
with
with
RX
rx
fire
fire
because
because
every
every
time
time
our
our
observable
observable
emits
emits
some
some
new
new
data
data
or
or
the
the
data
data
changes,
changes
it
it
will
will
rerender
rerender
the
the
component
component
in
in
the
the
UI.
ui
This
this
component
component
will
will
have
have
2
2
different
different
Stateful
stateful
objects
objects
which
which
represent
represent
our
our
real
real
time
time
streams.
streams
1
1
is
is
the
the
to
to
do
do
list
list
which
which
will
will
be
be
in
in
Fire
fire
store
store
and
and
the
the
other
other
one
one
is
is
the
the
user,
user
which
which
is
is
the
the
user
user
authentication
authentication
account.
account
Then
then
we're
we're
not
not
going
going
to
to
actually
actually
import
import
Firebase
firebase
in
in
this
this
component
component
because
because
we
we
don't
don't
want
want
it
it
as
as
a
a
hard
hard
dependency.
dependency
So
so
I'll
i'll
go
go
ahead
ahead
and
and
reference
reference
the
the
types
types
for
for
Firebase
firebase
just
just
for
for
IntelliSense
intellisense
up
up
at
at
the
the
top.
top
And
and
the
the
first
first
thing
thing
we'll
we'll
do
do
with
with
RXFire
rxfire
is
is
observe
observe
the
the
user's
user's
authentication
authentication
state.
state
Auth
auth
state
state
is
is
just
just
a
a
function
function
that
that
returns
returns
an
an
observable,
observable
and
and
that
that
observable
observable
will
will
either
either
emit
emit
null
null
if
if
the
the
user
user
is
is
not
not
logged
logged
in
in
or
or
it
it
will
will
emit
emit
their
their
user
user
auth
auth
account
account
if
if
they
they
are
are
logged
logged
Then
then
we
we
have
have
a
a
bunch
bunch
of
of
different
different
functions
functions
for
for
working
working
with
with
Firestore.
firestore
If
if
we
we
want
want
to
to
just
just
get
get
the
the
raw
raw
data
data
from
from
the
the
collection,
collection
we
we
can
can
use
use
collection
collection
data.
data
Or
or
if
if
we
we
want
want
more
more
fine
fine
grain
grain
control,
control
there's
there's
a
a
number
number
of
of
different
different
methods
methods
that
that
allow
allow
you
you
to
to
observe
observe
specific
specific
changes
changes
to
to
the
the
documents
documents
in
in
your
your
database.
database
The
the
first
first
thing
thing
we
we
wanna
wanna
do
do
in
in
our
our
component
component
is
is
observe
observe
the
the
user's
user's
auth
auth
state.
state
Stencil
stencil
has
has
a
a
life
life
cycle
cycle
hook
hook
called
called
componentWillLoad,
componentwillload
which
which
is
is
roughly
roughly
the
the
equivalent
equivalent
to
to
ngOnInit
ngoninit
in
in
Angular.
angular
So
so
we've
we've
initialized
initialized
Firebase
firebase
outside
outside
of
of
this
this
component.
component
So
so
I'm
i'm
going
going
to
to
declare
declare
a
a
global
global
variable
variable
for
for
Firebase
firebase
and
and
then
then
type
type
it
it
to
to
the
the
Firebase
firebase
app.
app
This
this
step
step
is
is
just
just
so
so
we
we
get
get
IntelliSense
intellisense
with
with
our
our
TypeScript
typescript
and
and
Versus
versus
Code.
code
Then
then
going
going
down
down
to
to
the
the
componentWillLoad
componentwillload
lifecycle
lifecycle
hook,
hook
We're
we're
going
going
to
to
subscribe
subscribe
to
to
the
the
auth
auth
state
state
of
of
the
the
Firebase
firebase
user
user
and
and
then
then
the
the
value
value
that
that
this
this
observable
observable
emits
emits
will
will
be
be
the
the
state
state
of
of
the
the
user
user
property
property
on
on
our
our
component.
component
So
so
now
now
whenever
whenever
this
this
observable
observable
emits
emits
something,
something
it
it
will
will
rerender
rerender
the
the
component
component
based
based
on
on
the
the
logic
logic
that
that
we
we
have
have
down
down
here
here
in
in
our
our
render
render
function.
function
For
for
right
right
now,
now
we'll
we'll
just
just
inspect
inspect
that
that
we
we
actually
actually
have
have
a
a
logged
logged
in
in
user
user
by
by
JSON
json
stringifying
stringifying
the
the
user
user
object.
object
Then
then
our
our
component
component
will
will
automatically
automatically
reload
reload
when
when
we
we
save
save
it,
it
and
and
you'll
you'll
notice
notice
that
that
it
it
says
says
Hello
hello
World
world
Null.
null
That's
that's
because
because
we're
we're
not
not
logged
logged
in.
in
To
to
fix
fix
that,
that
we'll
we'll
go
go
ahead
ahead
and
and
add
add
a
a
login
login
and
and
logout
logout
button
button
to
to
our
our
component.
component
I'm
i'm
going
going
to
to
be
be
using
using
Google
google
Auth,
auth
so
so
make
make
sure
sure
you
you
have
have
that
that
enabled
enabled
on
on
the
the
Firebase
firebase
dashboard.
dashboard
First,
first
we'll
we'll
set
set
a
a
variable
variable
called
called
provider
provider
that
that
is
is
a
a
new
new
instance
instance
of
of
the
the
Google
google
auth
auth
provider.
provider
Then
then
we
we
can
can
say
say
Firebase
firebase
auth
auth
sign
sign
in
in
with
with
pop
pop
up,
up
And
and
that's
that's
all
all
we
we
need
need
to
to
do
do
to
to
get
get
logged
logged
in
in
to
to
a
a
Google
google
account.
account
And
and
while
while
we're
we're
at
at
it,
it
let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
logout
logout
method.
method
That's
that's
Just
just
a
a
single
single
line
line
of
of
code
code
saying
saying
Firebase
firebase
auth
auth
sign
sign
out.
out
The
the
next
next
thing
thing
we'll
we'll
want
want
to
to
do
do
is
is
rewrite
rewrite
this
this
render
render
function
function
so
so
that
that
if
if
the
the
user's
user's
logged
logged
in,
in
we
we
show
show
them
them
the
the
to
to
do
do
list
list
and
and
a
a
sign
sign
out
out
button.
button
Otherwise,
otherwise
we
we
show
show
them
them
the
the
sign
sign
in
in
with
with
Google
google
button.
button
In
in
TSX,
tsx
we
we
can
can
handle
handle
events
events
such
such
as
as
clicks
clicks
by
by
saying
saying
on
on
click
click
followed
followed
by
by
brackets
brackets
and
and
the
the
method
method
that
that
we
we
wanna
wanna
call,
call
in
in
this
this
case,
case
login.
login
If
if
the
the
user's
user's
logged
logged
in,
in
we'll
we'll
go
go
ahead
ahead
and
and
show
show
them
them
their
their
display
display
name
name
And
and
we'll
we'll
also
also
give
give
them
them
a
a
button
button
to
to
log
log
out.
out
If
if
we
we
go
go
back
back
to
to
the
the
app
app
now
now
and
and
click
click
the
the
login
login
button,
button
you'll
you'll
see
see
that
that
Firebase
firebase
does
does
its
its
thing
thing
with
with
a
a
pop
pop
up
up
window
window
for
for
Google
google
authentication.
authentication
Then
then
when
when
that
that
auth
auth
state
state
changes,
changes
it
it
will
will
rerender
rerender
that
that
component
component
to
to
show
show
the
the
user's
user's
display
display
name
name
and
and
the
the
logout
logout
button.
button
So,
so
basically,
basically
we
we
just
just
created
created
a
a
Google
google
login
login
web
web
component
component
that
that
can
can
be
be
used
used
anywhere
anywhere
with
with
any
any
framework.
framework
But
but
I
i
wanna
wanna
take
take
things
things
a
a
step
step
further
further
and
and
build
build
a
a
to
to
do
do
list
list
for
for
this
this
user
user
in
in
Firestore
firestore
that
that
is
is
only
only
associated
associated
with
with
this
this
user.
user
And
and
this
this
is
is
actually
actually
really
really
easy
easy
to
to
do,
do
thanks
thanks
to
to
RX
rx
Fire.
fire
So
so
I'm
i'm
bringing
bringing
in
in
the
the
switch
switch
map
map
operator
operator
from
from
RXJS,
rxjs
then
then
I'm
i'm
making
making
a
a
reference
reference
to
to
a
a
Firestore
firestore
collection
collection
that
that
contains
contains
all
all
the
the
to
to
dos
dos
for
for
all
all
of
of
our
our
users.
users
We'll
we'll
get
get
to
to
the
the
database
database
in
in
just
just
a
a
minute,
minute
but
but
what
what
I'm
i'm
going
going
to
to
do
do
is
is
save
save
a
a
user
user
property
property
on
on
every
every
to
to
do
do
item,
item
then
then
I'll
i'll
query
query
it
it
based
based
on
on
the
the
user's
user's
authentication
authentication
UID.
uid
So
so
we'll
we'll
go
go
ahead
ahead
and
and
create
create
an
an
observable
observable
that's
that's
based
based
on
on
the
the
auth
auth
state
state
and
and
then
then
we'll
we'll
switch
switch
map
map
to
to
a
a
different
different
observable
observable
of
of
the
the
collection
collection
in
in
Firestore.
firestore
When
when
we
we
run
run
switch
switch
map,
map
it's
it's
kind
kind
of
of
like
like
being
being
inside
inside
of
of
subscribe,
subscribe
so
so
we'll
we'll
have
have
access
access
to
to
the
the
user
user
object.
object
At
at
that
that
point,
point
we
we
can
can
make
make
a
a
query
query
on
on
the
the
reference
reference
that
that
we
we
set
set
earlier.
earlier
So
so
we'll
we'll
create
create
a
a
query
query
that
that
says
says
get
get
all
all
to
to
dos
dos
where
where
the
the
user
user
is
is
equal
equal
to
to
this
this
user's
user's
user
user
ID.
id
Then
then
we
we
can
can
get
get
all
all
of
of
that
that
collection's
collection's
data
data
unwrapped
unwrapped
by
by
just
just
calling
calling
collection
collection
data
data
with
with
this
this
query
query
object.
object
And
and
then
then
the
the
final
final
step
step
is
is
just
just
to
to
subscribe
subscribe
to
to
this
this
observable,
observable
And
and
then
then
we'll
we'll
set
set
its
its
value
value
equal
equal
to
to
the
the
to
to
do
do
state
state
on
on
the
the
component.
component
And
and
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
go
go
down
down
to
to
our
our
render
render
function
function
and
and
then
then
just
just
display
display
it
it
as
as
JSON
json
for
for
now
now
to
to
make
make
sure
sure
that
that
it's
it's
working.
working
Right
right
now,
now
it
it
displays
displays
an
an
empty
empty
array
array
because
because
we
we
don't
don't
have
have
any
any
data
data
in
in
our
our
database.
database
So
so
let's
let's
go
go
ahead
ahead
and
and
change
change
that.
that
The
the
beauty
beauty
of
of
this
this
setup
setup
is
is
that
that
our
our
component
component
will
will
re
re
render
render
anytime
anytime
our
our
real
real
time
time
data
data
changes.
changes
We
we
can
can
demonstrate
demonstrate
this
this
by
by
creating
creating
our
our
Todoce
todoce
collection.
collection
And
and
then
then
we'll
we'll
create
create
a
a
document
document
in
in
that
that
collection
collection
where
where
the
the
user
user
property
property
is
is
equal
equal
to
to
this
this
user's
user's
ID.
id
I'm
i'm
just
just
copying
copying
the
the
user
user
ID
id
from
from
the
the
UI
ui
over
over
to
to
our
our
document.
document
And
and
as
as
soon
soon
as
as
we
we
click
click
Save
save
on
on
this
this
document,
document
it
it
will
will
be
be
updated
updated
in
in
the
the
UI
ui
in
in
our
our
stencil
stencil
component
component
on
on
the
the
left.
left
And
and
any
any
changes
changes
that
that
happen
happen
to
to
this
this
document,
document
no
no
matter
matter
where
where
it
it
comes
comes
from,
from
will
will
trigger
trigger
this
this
component
component
to
to
be
be
rerendered.
rerendered
Then
then
just
just
to
to
prove
prove
that
that
our
our
relational
relational
data
data
is
is
set
set
up
up
properly,
properly
I'm
i'm
gonna
gonna
create
create
another
another
document,
document
but
but
this
this
time
time
give
give
it
it
a
a
user
user
that's
that's
different
different
than
than
the
the
currently
currently
authenticated
authenticated
user.
user
You'll
you'll
notice
notice
that
that
nothing
nothing
renders
renders
in
in
the
the
UI
ui
because
because
our
our
query
query
is
is
based
based
on
on
only
only
the
the
to
to
dos
dos
for
for
the
the
currently
currently
logged
logged
in
in
user.
user
Another
another
thing
thing
r
r
expire
expire
does
does
is
is
it
it
tries
tries
to
to
make
make
life
life
easier
easier
for
for
you.
you
For
for
example,
example
a
a
common
common
need
need
is
is
to
to
have
have
the
the
document
document
ID
id
mapped
mapped
to
to
every
every
document
document
in
in
the
the
collection.
collection
Normally,
normally
that
that
takes
takes
a
a
bunch
bunch
of
of
JavaScript
javascript
mapping.
mapping
But
but
in
in
RExpir,
rexpir
we
we
can
can
just
just
pass
pass
in
in
the
the
field
field
that
that
we
we
want
want
the
the
ID
id
mapped
mapped
to
to
and
and
it
it
will
will
return
return
that
that
data
data
for
for
us
us
without
without
any
any
additional
additional
work.
work
Now,
now
we
we
can
can
go
go
back
back
into
into
our
our
render
render
function.
function
And
and
this
this
time,
time
we'll
we'll
loop
loop
over
over
the
the
array
array
of
of
documents
documents
and
and
map
map
each
each
one
one
of
of
them
them
to
to
a
a
list
list
item.
item
And
and
you'll
you'll
notice
notice
that
that
I
i
have
have
a
a
property
property
on
on
this
this
list
list
called
called
task
task
ID,
id
which
which
is
is
what
what
I
i
defined
defined
in
in
that
that
collection
collection
data
data
method
method
above.
above
And
and
the
the
reason
reason
you
you
give
give
it
it
your
your
custom
custom
property
property
name
name
instead
instead
of
of
just
just
ID
id
is
is
in
in
case
case
you
you
already
already
have
have
an
an
existing
existing
ID
id
that
that
you
you
don't
don't
want
want
to
to
overwrite.
overwrite
I've
i've
also
also
added
added
a
a
create
create
and
and
delete
delete
method
method
here
here
which
which
you
you
can
can
finding
finding
the
the
full
full
source
source
code.
code
And
and
our
our
finished
finished
product
product
looks
looks
something
something
like
like
this.
this
It's
it's
not
not
very
very
pretty
pretty
from
from
a
a
design
design
standpoint,
standpoint
but
but
it's
it's
a
a
real
real
time
time
full
full
stack
stack
web
web
component
component
which
which
is
is
pretty
pretty
impressive
impressive
on
on
its
its
own.
own
But
but
I
i
promised
promised
you
you
that
that
we'd
we'd
be
be
able
able
to
to
run
run
this
this
web
web
component
component
anywhere.
anywhere
And
and
the
the
first
first
step
step
in
in
that
that
process
process
is
is
to
to
run
run
a
a
production
production
build
build
in
in
Stencil.
stencil
The
the
stencil
stencil
project
project
itself
itself
sets
sets
you
you
up
up
to
to
build
build
an
an
npm
npm
package
package
that
that
you
you
can
can
either
either
install
install
locally
locally
or
or
publish
publish
on
on
npm.
npm
After
after
our
our
build
build
is
is
finished,
finished
we'll
we'll
go
go
ahead
ahead
and
and
copy
copy
the
the
path
path
to
to
this
this
project
project
folder.
folder
And
and
then
then
we
we
can
can
use
use
that
that
path
path
to
to
install
install
an
an
npm
npm
package
package
in
in
a
a
completely
completely
different
different
project.
project
I
i
happen
happen
to
to
have
have
an
an
existing
existing
Angular
angular
project
project
that
that
has
has
AngularFire
angularfire
2
2
and
and
Firebase
firebase
already
already
installed
installed
in
in
it.
it
But
but
I'd
i'd
like
like
to
to
reuse
reuse
my
my
stencil
stencil
to
to
do
do
list
list
because
because
I've
i've
already
already
written
written
this
this
code
code
and
and
I
i
don't
don't
want
want
to
to
have
have
to
to
rewrite
rewrite
everything
everything
in
in
Angular.
angular
So
so
let's
let's
see
see
if
if
we
we
can
can
make
make
our
our
Stencil
stencil
component
component
work
work
in
in
this
this
Angular
angular
project.
project
The
the
first
first
thing
thing
you'll
you'll
do
do
is
is
run
run
npm
npm
install
install
in
in
the
the
Angular
angular
project
project
and
and
have
have
it
it
point
point
to
to
the
the
path
path
of
of
your
your
stencil
stencil
project.
project
If
if
you
you
didn't
didn't
change
change
any
any
of
of
the
the
defaults,
defaults
that
that
should
should
resolve
resolve
to
to
a
a
package
package
of
of
my
my
component
component
version
version
0.0.1.
0.0.1
In
in
Angular,
angular
we
we
have
have
to
to
enable
enable
the
the
custom
custom
element
element
schema.
schema
So
so
you
you
can
can
import
import
that
that
from
from
Angular
angular
core,
core
then
then
add
add
that
that
to
to
the
the
schemas
schemas
array
array
in
in
the
the
app
app
module.
module
The
the
final
final
step
step
is
is
to
to
bootstrap
bootstrap
the
the
custom
custom
elements
elements
in
in
this
this
project
project
by
by
calling
calling
define
define
custom
custom
elements,
elements
which
which
is
is
provided
provided
by
by
Stencil.
stencil
We
we
can
can
handle
handle
that
that
in
in
the
the
main
main
TS
ts
file,
file
so
so
we'll
we'll
import
import
Define
define
Custom
custom
Elements
elements
from
from
my
my
component.
component
And
and
then
then
we'll
we'll
also
also
register
register
Firebase
firebase
on
on
the
the
window
window
object
object
so
so
it's
it's
available
available
there
there
as
as
well.
well
And
and
lastly,
lastly
we'll
we'll
call
call
define
define
custom
custom
elements
elements
and
and
pass
pass
it
it
the
the
window.
window
At
at
this
this
point,
point
we
we
can
can
use
use
our
our
web
web
component
component
anywhere
anywhere
in
in
this
this
Angular
angular
project
project
as
as
if
if
it
it
was
was
just
just
a
a
regular
regular
DOM
dom
element.
element
I'm
i'm
just
just
going
going
to
to
go
go
ahead
ahead
and
and
declare
declare
my
my
component
component
in
in
the
the
app
app
component
component
HTML
html
and
and
we'll
we'll
see
see
what
what
happens.
happens
As
as
you
you
can
can
see
see
here,
here
we
we
have
have
our
our
login
login
with
with
Google
google
button
button
and
and
once
once
we
we
log
log
in
in
we
we
get
get
our
our
to
to
do
do
list
list
from
from
the
the
database.
database
So
so
hopefully
hopefully
this
this
video
video
gave
gave
you
you
a
a
decent
decent
introduction
introduction
into
into
how
how
easy
easy
it
it
is
is
to
to
work
work
with
with
real
real
time
time
streams
streams
when
when
you
you
combine
combine
RxJS
rxjs
with
with
Firebase.
firebase
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
I
i
have
have
a
a
lot
lot
more
more
content
content
planned
planned
for
for
RX
rx
Fire
fire
and
and
Stencil
stencil
in
in
the
the
future.
future
Let
let
me
me
know
know
what
what
you
you
want
want
to
to
see
see
next
next
in
in
the
the
comments
comments
and
and
consider
consider
upgrading
upgrading
to
to
a
a
pro
pro
membership
membership
to
to
get
get
access
access
to
to
all
all
kinds
kinds
of
of
exclusive
exclusive
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The use of RX Fire as a web component tool is recommended for reusable web components, as it allows for creating a to-do list and accessing user input and log-in information. The speaker then gives a demonstration of how to use the tool in building a reusable web component, including creating a to-do list and using APIs to access data. They also explain how to manipulate user data and create a to-do list, using the web setup instructions and setting a variable for the user's authentication state. The speaker then demonstrates how to use the code to manipulate user data and create a to-do list, using the app's render function and creating a document for the user ID. Finally, they discuss the process for installing an application in a different project and mention a potential upgrade for access to exclusive content.
RxFire - Firebase meets RxJS
One of the biggest challenges for a web developer is to maintain asynchronous callback based code. In Firebase, everything is real time, so it only makes sense We use the best reactive programming library out there, which is RxJS. In today's video, you'll learn about a brand new officially supported library from Firebase called RX Fire. We'll use it along with Stencil JS to compose full stack reactive web components that can be Used in any JavaScript framework or just in some plain HTML. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. Let's start by talking a little bit more about what RX fire is and when you would want to use it. The first thing I'll point out is that it's not a replacement for AngularFire 2, so So you wanna continue using AngularFire 2 in an Angular project. But it does provide a way for other frameworks to have a consistent implementation of Firebase with RxJS. So you can get really good control flow on your real time streams, whether you're using Vue, React, Stencil as we'll see later in the video, or just plain JavaScript. I recommend taking a look at the RX Fire samples repo so you can see it in action in a variety of different settings. And another really cool thing about this library is that it doesn't take The Firebase SDK has a hard dependency which opens the door for lazy loading. The Firebase SDK is pretty large, so if you can get Out of your critical path, you'll get much quicker page loads for your Progressive Web App. So what I wanna show you today is how we can take this library and use it with a web component tool like StencilJS to build a reusable to do list that you can just drop into any other app that's already using Firebase. There's a ton of potential here to build web components that get reused across multiple applications. For example, you might build a chat client that is similar to intercom, Or maybe you just wanna have a consistent login button that you can easily share across multiple web applications. There's just tons of potential there, but it's time to get moving on to the code. I'm going to start by initializing Stencil. If you're not familiar with Stencil, don't worry. It's a very approachable tool for building web components. I'm going to give it a dedicated video in the near future, but it should feel pretty comfortable for you if you're an Angular or React developer. We just run npm init stencil And then we select a project name and we'll pick the starter component project which is just for one off web components. If we open up the project, we should see a single component in the source directory, that's where we're going to build out our to do list. For now, we can run npm run start from the command line and that will serve our web component in the browser. It has some basic text for now, but we'll build this out into a Web Component that can handle user authentication and also the creating, reading, and deleting of of data in the Firestore database. If we look at how this component is used across multiple frameworks, you can see that it's just a script tag along with a custom element that we can declare in the DOM. At the end of the video, we'll build this component and then we'll install it into an existing Angular project. But But for now, we need a couple extra things in our stencil project, including RXFire, Firebase, and RXJS. We could initialize Firebase directly in our Web Component, But I want my component to be agnostic to the Firebase project, meaning you could just drop this component into any Firebase project. It should pick up the config and work seamlessly from there. So to do that, I'm just going to follow the web setup instructions that you can find in the official docs, And we'll only be using Firestore and user authentication. Then in the script tag, we'll just go ahead and call Firebase initialize app with our credentials, And then we'll also go ahead and configure Firestore here as well. Now we'll go ahead and jump into our Stencil Web Component, and you'll notice that it looks pretty similar to an Angular or React component. It has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator in Angular. But the decorator that we want to use is state and this property will re render the component anytime its value changes. And that's actually a really nice mechanism for working with RX fire because every time our observable emits some new data or the data changes, it will rerender the component in the UI. This component will have 2 different Stateful objects which represent our real time streams. 1 is the to do list which will be in Fire store and the other one is the user, which is the user authentication account. Then we're not going to actually import Firebase in this component because we don't want it as a hard dependency. So I'll go ahead and reference the types for Firebase just for IntelliSense up at the top. And the first thing we'll do with RXFire is observe the user's authentication state. Auth state is just a function that returns an observable, and that observable will either emit null if the user is not logged in or it will emit their user auth account if they are logged Then we have a bunch of different functions for working with Firestore. If we want to just get the raw data from the collection, we can use collection data. Or if we want more fine grain control, there's a number of different methods that allow you to observe specific changes to the documents in your database. The first thing we wanna do in our component is observe the user's auth state. Stencil has a life cycle hook called componentWillLoad, which is roughly the equivalent to ngOnInit in Angular. So we've initialized Firebase outside of this component. So I'm going to declare a global variable for Firebase and then type it to the Firebase app. This step is just so we get IntelliSense with our TypeScript and Versus Code. Then going down to the componentWillLoad lifecycle hook, We're going to subscribe to the auth state of the Firebase user and then the value that this observable emits will be the state of the user property on our component. So now whenever this observable emits something, it will rerender the component based on the logic that we have down here in our render function. For right now, we'll just inspect that we actually have a logged in user by JSON stringifying the user object. Then our component will automatically reload when we save it, and you'll notice that it says Hello World Null. That's because we're not logged in. To fix that, we'll go ahead and add a login and logout button to our component. I'm going to be using Google Auth, so make sure you have that enabled on the Firebase dashboard. First, we'll set a variable called provider that is a new instance of the Google auth provider. Then we can say Firebase auth sign in with pop up, And that's all we need to do to get logged in to a Google account. And while we're at it, let's go ahead and create a logout method. That's Just a single line of code saying Firebase auth sign out. The next thing we'll want to do is rewrite this render function so that if the user's logged in, we show them the to do list and a sign out button. Otherwise, we show them the sign in with Google button. In TSX, we can handle events such as clicks by saying on click followed by brackets and the method that we wanna call, in this case, login. If the user's logged in, we'll go ahead and show them their display name And we'll also give them a button to log out. If we go back to the app now and click the login button, you'll see that Firebase does its thing with a pop up window for Google authentication. Then when that auth state changes, it will rerender that component to show the user's display name and the logout button. So, basically, we just created a Google login web component that can be used anywhere with any framework. But I wanna take things a step further and build a to do list for this user in Firestore that is only associated with this user. And this is actually really easy to do, thanks to RX Fire. So I'm bringing in the switch map operator from RXJS, then I'm making a reference to a Firestore collection that contains all the to dos for all of our users. We'll get to the database in just a minute, but what I'm going to do is save a user property on every to do item, then I'll query it based on the user's authentication UID. So we'll go ahead and create an observable that's based on the auth state and then we'll switch map to a different observable of the collection in Firestore. When we run switch map, it's kind of like being inside of subscribe, so we'll have access to the user object. At that point, we can make a query on the reference that we set earlier. So we'll create a query that says get all to dos where the user is equal to this user's user ID. Then we can get all of that collection's data unwrapped by just calling collection data with this query object. And then the final step is just to subscribe to this observable, And then we'll set its value equal to the to do state on the component. And the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working. Right now, it displays an empty array because we don't have any data in our database. So let's go ahead and change that. The beauty of this setup is that our component will re render anytime our real time data changes. We can demonstrate this by creating our Todoce collection. And then we'll create a document in that collection where the user property is equal to this user's ID. I'm just copying the user ID from the UI over to our document. And as soon as we click Save on this document, it will be updated in the UI in our stencil component on the left. And any changes that happen to this document, no matter where it comes from, will trigger this component to be rerendered. Then just to prove that our relational data is set up properly, I'm gonna create another document, but this time give it a user that's different than the currently authenticated user. You'll notice that nothing renders in the UI because our query is based on only the to dos for the currently logged in user. Another thing r expire does is it tries to make life easier for you. For example, a common need is to have the document ID mapped to every document in the collection. Normally, that takes a bunch of JavaScript mapping. But in RExpir, we can just pass in the field that we want the ID mapped to and it will return that data for us without any additional work. Now, we can go back into our render function. And this time, we'll loop over the array of documents and map each one of them to a list item. And you'll notice that I have a property on this list called task ID, which is what I defined in that collection data method above. And the reason you give it your custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite. I've also added a create and delete method here which you can finding the full source code. And our finished product looks something like this. It's not very pretty from a design standpoint, but it's a real time full stack web component which is pretty impressive on its own. But I promised you that we'd be able to run this web component anywhere. And the first step in that process is to run a production build in Stencil. The stencil project itself sets you up to build an npm package that you can either install locally or publish on npm. After our build is finished, we'll go ahead and copy the path to this project folder. And then we can use that path to install an npm package in a completely different project. I happen to have an existing Angular project that has AngularFire 2 and Firebase already installed in it. But I'd like to reuse my stencil to do list because I've already written this code and I don't want to have to rewrite everything in Angular. So let's see if we can make our Stencil component work in this Angular project. The first thing you'll do is run npm install in the Angular project and have it point to the path of your stencil project. If you didn't change any of the defaults, that should resolve to a package of my component version 0.0.1. In Angular, we have to enable the custom element schema. So you can import that from Angular core, then add that to the schemas array in the app module. The final step is to bootstrap the custom elements in this project by calling define custom elements, which is provided by Stencil. We can handle that in the main TS file, so we'll import Define Custom Elements from my component. And then we'll also register Firebase on the window object so it's available there as well. And lastly, we'll call define custom elements and pass it the window. At this point, we can use our web component anywhere in this Angular project as if it was just a regular DOM element. I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens. As you can see here, we have our login with Google button and once we log in we get our to do list from the database. So hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine RxJS with Firebase. I'm gonna go ahead and wrap things up there, but I have a lot more content planned for RX Fire and Stencil in the future. Let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content. Thanks for watching, and I'll talk to you soon.
The use of RX Fire as a web component tool is recommended for reusable web components, as it allows for creating a to-do list and accessing user input and log-in information. The speaker then gives a demonstration of how to use the tool in building a reusable web component, including creating a to-do list and using APIs to access data. They also explain how to manipulate user data and create a to-do list, using the web setup instructions and setting a variable for the user's authentication state. The speaker then demonstrates how to use the code to manipulate user data and create a to-do list, using the app's render function and creating a document for the user ID. Finally, they discuss the process for installing an application in a different project and mention a potential upgrade for access to exclusive content.