 Hey, everyone. What's up? It's Rob. Welcome back to the show. So I got on Twitter recently and I asked folks, what would they like to see in upcoming Polycasts? And kind of resoundingly, a lot of folks said they want to see more Firebase. So I thought it'd be cool to kind of kick off a multi-part series where we talk about how you can integrate polymer and Firebase together into your projects. So today, what we're going to do is just get started. We're going to set up a very simple Firebase project and we're going to do some Firebase authentication. So follow me over here to my laptop. And the first thing I'm going to do is I'm going to go to console.firebase.google.com. You'll want to have a Google account already that you can sign into. So I've signed into my personal account here. And I'm going to create a new project for my Firebase app. And this is going to let me do all sorts of really cool things. I can do hosting with Firebase. I can do database work with Firebase, authentication, et cetera. I've got to give it a name, so I'm just going to call this polyfire or something like that. And we'll create that project. Firebase will go off. It'll think for a second. The hamster wheels are spinning up. Polyfire is getting created and released into the world. OK, cool. After that's done, you're going to see a dashboard that looks kind of like this. And there's a bunch of options and things right here. It can be a little bit overwhelming. But we're going to start off really, really small. And the only thing we're going to really deal with today is authentication. And so what I want to do is click on this authentication tab. And it's going to ask me up here at the top what sort of sign-in methods I would like to allow in this app. Now, being a Googler, I've got to represent. So I'm going to enable Google sign-in. And we just flip this little switch and click Save. And what this is going to let us do is anybody who's got a Google account will be able to hit a sign-in button and sign-in through that account in our Firebase app. The other thing that we need to do is we need to go over here to our settings. We go to Project Settings. And we're going to need this web API key that I'm copying here. Otherwise, our authentication will not work. So copy that. OK. So I think that's basically everything we need in the Firebase console. There's a ton more that you can do here. And we're going to cover that in some of the future episodes. But for now, we're pretty much ready to go with just the default setup. So the next thing I want to do is switch over to my command line. And I've already gone ahead and created a directory to hold my demo application. And Firebase also provides a really useful set of command line tools that you can install that will go ahead and like scaffold a project for you. So if you don't have those installed already, you can do npm install-g firebase-tools. That'll go out, fetch all that stuff, set it up for you so you'll now have a firebase command. I've already got those installed, so you don't have to watch me do any of that. So what I'm going to do is I'm just going to run firebase init. And it's going to put a very rad emoji on my screen. And it's going to ask me some questions about what sort of firebase features I would like to have in this project. Firebase provides a real-time database, which is awesome. And we will be using that, so we'll leave that checked. And then we've got firebase-hosting. And that lets us basically just do hosting of static assets. We can host our entire site on firebase if we want. So I will leave that in there as well. I'll hit Enter. It's going to ask us what project we want to associate with. So since we just created that one called polyfire, here I'll move this up a little bit. This is a little easier to see. So we will associate with polyfire. What file should be associated with the database? We'll just use the default value there, database rules.json. What directory do we want to use? We'll say our public one. And then it's going to ask if firebase should sort of configure its local server rules to direct everything to index HTML. So if we were building like a single-page web app, I'm going to say yes, I would like that feature, because that's pretty cool. And at that point, it's basically done. And if we go ahead and we open this up in our code editor, we'll see that this has started to kind of scaffold some things out for us. So I've got these Firebase JSON, Firebase RC file that points to my project name, stuff like that. This is all just configuration to make Firebase work. What we're mainly going to be working with today, though, is this public directory. So this is where our code is going to live. The other nice thing that we can do with the Firebase tools is we can start up a local dev server. So we'll say Firebase serve. And it's actually going to look at the rules that we have in our Firebase JSON there that tells it to serve our public directory. So we can then just open up a local host, 5,000. And you'll see a page that looks like this, letting you know that your local instance of Firebase is working. Cool. All right. The next thing we want to do is we want to go ahead and install Polymer. And we want to install Polymer Fire, which is a set of Polymer elements that work specifically with Firebase. So because I want everything to live in this public directory, I'm actually going to create a .bauerrc file. So I'll create a .bauerrc file. So .bauerrc. And I will use this to tell Bauer to install all my stuff into that public dir. So I will say directory is public slash BauerComponents. Cool. And then in my terminal, bauer init, yeah, it'll ask us a bunch of questions about our project. We can just use the default values. That's fine. And then we will bauer install save. We definitely want Polymer slash Polymer. We're going to want Firebase slash Polymer Fire. And we're going to want Polymer elements slash PaperButton. All right. So that's going to go out and fetch all of those resources and dump them into our public directory, finished pretty quickly, which is good. And now we're basically ready to start building our app. And remember, the goal of this app is to basically have a simple sign-in flow for the user. So all I'm going to build today is a button that when you click on it, it'll take you through the OAuth flow for Google sign-in. And when the user is actually signed in, it'll just display their name on screen. That way we know we at least have something working there. So let's go into our index.html file. And there's a bunch of code here that Firebase set up for us that I'm just going to go ahead and delete, because I don't really need any of this stuff. So we'll get rid of that. We'll get rid of everything in the body. That makes this a little bit bigger. We'll rename this Firebase auth or something like that. And because we're using Polymer, because we're building kind of a Polymer app, I want to start off by creating just like a MyApp element that can sort of hold all of my logic. So I'll have a MyApp element here. I'm going to make sure to include an HTML import for that. So we're going to ask for MyApp.html. And inside of this MyApp element, MyApp.html, we're going to want to import some of the Polymer fire elements. So let's go check those out really quick. So we'll go to beta.webcomponents.org. This is the new catalog where you can find all sorts of interesting custom elements. The ones that I am looking for are called Polymer fire. So go check these out. So this is a suite of elements created by the Firebase team, specifically for Polymer. And you can see here that basically what we want is this Firebase app element. And we're going to combine it with this Firebase auth element. So when I power installed these, I got both of these already. But you can sort of see the signature for how these work. Here, I'll bump this up a little bit so you can read that. So you create a Firebase app element. You basically tell it about your domain. You give it that API key that we copied earlier. And you create a Firebase auth element. And that'll tell you when your user is signed in or not. So far, so good. So in our MyAppElement over here, I basically want to create an element that's going to hold that Firebase app element. So I've got some code here that I've already written and kind of stolen from another project. And let's go through and we'll update this a little bit. I can kind of explain what's happening. So I've got a DOM module from my MyAppElement. I've got this Firebase app element inside of here. And I want to give it the domain for my project. So if we go back to Firebase, we go back to the console. We look at our project settings. What it actually wants is this project ID right here. So it says PolymerFire or Polyfire11D42. So that's what we're going to use. So our auth domain is going to be Polyfire11D42. Our database URL, even though we're not using it yet, we can go ahead and set that up. And then our API key is going to be that one that we copied. Get rid of that. And we'll drop in API key that we copied there. And the last thing I'm going to do is I'm going to have this login element that I'm going to create. But essentially, this is all that my app is going to do for us. It's just going to set up the connection to Firebase app. And then it's going to have a little login element that we'll sort of toggle on and off. So let's go ahead and create that. Create a MyLogin HTML. So again, I've got a little bit of code that I'm just going to steal and drop in here just to start to scaffold out my login element. What I want to do is I want to make sure that I am importing the Firebase app elements. I'm going to steal this link tag here. I don't have any of my snippets now that I'm using Visual Studio Code. It's making me like the world's slowest developer. So if anybody wants to create a Visual Studio Code snippets package for Polymer, I would totally be your best friend. But what we're going to do is we're going to import our components slash, is it, PolymerFire? I believe PolymerFire slash Firebase-Auth, all right. So PolymerFire slash Firebase-Auth.html. And we're also going to pull in the PaperButton, all right. So we'll have PaperButton slash PaperButton.html. Uh-huh, uh-huh, uh-huh. It's looking good. Inside of our template, I'm going to drop in a Firebase-Auth element. This is the basic signature for a Firebase-Auth element. I want to give it an ID, because I am going to need to reference it in JavaScript a little bit. And then it's got a user property that we are going to expose to the outside world using this binding. So we're just going to have a thing called user. It's also got this value called status known, which could be interesting. It's a Boolean that tells you whether or not you can assert the presence of a user and whether or not you're allowed to check the user object. So I'm including it here. I'm actually not going to use it in my code today, because I'll be 100% honest. I'm not entirely sure if I need to use it in my code, but I am including it here just so you know about it. Maybe in the next episode, we'll discover if it's actually useful or not. But I'm just going to drop it in there, so it's on everyone's radar. And lastly, we have this provider value, which I'm just going to set to Google, because if you remember, we went through, and when we were in our dashboard, we set up the authentication method as signed in with Google. The next thing we need to do is we need to drop in some paper buttons. Here, I'll close the sidebar so you can see this bit easier. So I got a paper button here. It's raised, so it'll have a bit of a drop shadow. And when the user taps it, it's going to run a login method. And I've got this little thing that I'm doing here where I'm hiding the button if there is a user present. So if the user is already signed in, let's not show the sign in button. And I've got basically the exact same thing going down here for this other button. This will be our log out button. And we just sort of flip the logic. So if there is already a user, then let's display the log out button. And if there is not a user, we'll display the log in button. Cool, so far so good. Let's also add a little bit of script here to define our element. So we'll say this element is a my log in element. And for the properties, we basically want to expose this user property. So let's say user, let's see, which is an object. Let's see. We also want to have that status known property. So status known. And that is also going to be an object. And now I want to implement these log in and log out methods. So these should be pretty straightforward. We're basically just going to use some of the APIs that the Firebase auth element exposes for us. So I'm going to just go ahead and paste some code in here that I already copied. And what we're going to do is we're going to use the ID of the auth element. So remember when we say this.$ sign, that's Polymer's way of saying reference this thing with this ID. So we'll say this.$ sign.auth sign in with popup. And that method basically tells the auth element to open the OAuth screen and ask someone to sign in using Google. For the log out method, it's basically just call sign out using that. The last thing that I want to do is I want to add just a little template here that will toggle on and off when we have a user or not. And it will display that user's name just so we can verify that the user object we get back is correct. So I've got some code that I'm just going to paste in here. And yeah, so I'm using a DOM if. I'm checking if we have a user already. And then I've just got an H1 where I'm just going to bind to the user's display name. All right, so I think we're pretty close to having everything where we want it. Let's just double check all of our imports here. We don't want to have a white screen of death that does happen from time to time. So everything in my login looks good. In my app, we need to make sure that we are importing my login. So let's do that. Let's go back up here. So we will pull in my login.html. We're also going to want to pull in that Firebase app element. So Polymer fire, Firebase app. All right. And then in our index file, we are pulling in the my app element. So my app contains Firebase app and login. And then login contains Firebase auth. Let's cross our fingers and see if this works on the first try. We will run the provided Firebase server. I know sometimes we use Polymer CLI to serve things. But right now, I'm just doing everything with the provided Firebase tools. We're following their project structure and everything. In a later episode, I'll actually show how to integrate both Polymer tools and Firebase tools. But for now, let's just use the Firebase server. And it'll tell us that the app is at local host 5,000. So copy that. Drop that in here to the chromes. I see I have a sign in button there. Let's zoom in a little bit so you can see that. Clicking on that should give me an OAuth pop-up. It asked me to sign in, sign in, and then boom. It says, welcome, Rob Dodson. Let's me know that we have a user object. And if I want, I can then sign out and start the process all over again. So that about covers it for today. We've now got the basics of setting up Firebase and setting up Firebase authentication in our project. There's still a lot more to talk about, but I'm going to save that for the next episode. So if you have any questions, as always, you can leave them for me down below in the comments. Or you can hit me up on a social network of your choosing at hashtag as Polymer. As always, thank you so much for watching. And I'll see you next time. Hey there, Polycast Series. What's up? If you liked this episode and you want to see some more, you can check them out over here. And also, be sure to click that little Subscribe button. Thanks.