Secure your app with Gemini

Key Takeaways

Christian, we left off talking about adding authentication to protect the customer's information. Where do we start? >> First, I want to make another backup of our code because it's in a good place right now and I want to protect that. Let's jump into CloudShell. And do you remember the command to copy all the contents of a folder? Oo, testing me right off the bat, huh? I think it was cp-r, then the folder you want to copy, then the destination. >> A plus. I'll copy the contents of my customers into [music] MC backups and call it past biz because we've added that past business button. >> Perfect. Now to add authentication, I'm assuming we use the Gemini web app to help us create a prompt to give to Gemini CLI again. >> You are correct. And we'll dig into prompting in the last module of this course. But yes, I use the Gemini web app to write a prompt that makes a few changes. Only the site owner will have access to the website and otherwise customer [music] data will be hidden entirely. Even if someone inspects the page with developer tools. >> Oh, sneaky. If we just make the web page invisible, someone could still find all its information if they inspect the elements. >> They could, which is why the prompt says, "Please provide the new text for fire store." And storage.ruules. [music] So, let's copy the whole prompt, head to our cloud shell tab, and paste it into Gemini CLI. >> Okay, it's asking permission to add the login logout buttons. So, we're going to allow once. >> Yes, we'll allow once to all its changes. It's making some big changes to firestore. The website owner will now have to log in before they can read and write data. Now that Gemini CLI is done, let's jump back to our other terminal tab [music] and create the testing environment with Firebase Serve. We'll click on the local server link to visit our previewed web app. >> Good sign. I notice a login button. The question is, does it work? >> It does not. But that's not a bug in the code. Authentication is handled by Firebase, but we need to actually set it up. We'll navigate to our project in Firebase console, then build authentication. Oh, cool. So, we can choose from any of these sign-in methods. >> We can, but we'll stick with Google for now. I'll add a public facing name for the project, my customers, and the support email, which is my Gmail. >> Okay, we added Google authentication. So, now we should be able to log in, right? But I'm watching you click it and it's not working. What's going on? >> Well, remember we are in the test environment which has its own specific domain. If I go back to inspect using the developer tools, we find this error. The current domain is not authorized. So, let's copy the test URL and go back into Firebase authentication and then settings. >> Okay. So, there's all the domains that will work, but our test environment isn't listed >> exactly. So, let's click add domain and paste the URL. I'll [music] delete the last bit of the URL to make it apply to the whole site. All right. So, now we can go back to our site, do a hard refresh, and then log in. In theory, so far so good. There's the sign-in popup window. Yep. I'll choose my account, click continue, and it worked. Let's click into Sam's card and check if it actually has a log out button, too. Still there. What if you log on now? >> Let's try it. Sam disappeared. Great. That's what we wanted. >> But can someone still find the info the sneaky way? Let's try. We use inspect to bring up the developer tools. And no, we can't access any of that sensitive info. There's status and account balance, but the actual entries are hidden. >> Great. And if we log back in, will Sam reappear? He does. Let's test it out in the [music] past business tab by logging out and back in. Great. So, everything is working as it should. >> But this is the test environment. We should test it on the live site. Yes, we should. We'll end the preview in CloudShell, then run Firebase deploy. Clicking on the hosting URL, it doesn't seem good, but if this ever happens, do a hard refresh. And there we go. Everything is there. And when I log out, everything disappears. All right, we got a pretty good web app. We can add and edit customers. We can find past work. And now we have authentication to keep everything protected. What's next? For folks watching, check out the self-guided lesson on authentication to solidify what you've learned. After that, Joe, we just have one more thing to add, an invoice generator. We'll do that in the next video. Stay tuned.