Firebase App Check using reCAPTCHA v3

all right so what is Firebase app check uh Firebase app check is a security service provided by Google for Firebase uh it's both a mobile and web application development platform uh app check is designed to protect your Firebase project uh this is tough to read through from abuse such as fraudulent access spam and other malicious behavior um so the interesting piece on all of this you're probably wondering how does this fit in with Firebase authentication they're kind of Partners in a way so Firebase app check is going to check your application whether it be mobile or web-based the second access to that is when you're authenticating users that's kind of the true back end side to this so just keep that in mind uh if that's one of your questions as we go along um from app check uh with the different different methods the one that will be focused on tonight is recaptcha since it's the web version so at a station huge word I'm not big on huge words that don't make sense basically all this it does make sense if you know the work but what the heck is it it's an official verification of something as true or authentic so you might get uh legal documents and things that have attestation attached to them this is the same kind of meaning they need to know that your website is who you say you are and where you say you are so that's kind of the key to that um Apple has device check to do its attestation that's a provider that they have Android has play integrity and web of course which we'll be talking about tonight is recaptcha so how does it work one your app interacts with the provider of your choice those providers that we just showed uh to obtain an attestation for the app or device's authenticity add a station is set to the app check server which verifies the validity of attestation using parameters registered with the app we're going to walk through all of that so don't freak out if this isn't making sense at all this token might retain some information about the attestation material verified the app check client SDK caches the token in your app and it's ready to be sent along with any requests made to protected services so these are the services that are protected by app check real-time database cloud firestore cloud storage and callable Cloud functions so there are a lot of other Cloud functions that you can use out on Firebase these are the ones that are being called from the client directly up to it so it's different than just hitting a cloud endpoint out there it has no way to associate that associate that token so all of that I love pictures and this is like how I will always remember this uh if you're colorblind I apologize so I'll try to say like top and bottom but on the top is a green line This is the happy path a valid request as you can see it's coming into our back end application and it hits app check app check is is solid and it checks that and it passes that through to any services that might be underneath including in this diagram because this is what we'll be showing off is firestore now a bad a bad request or a malicious request on the bottom comes through and hits app check and it stops right there it doesn't even get if you're used to Firebase and and firestore rules or real-time database rules or any of those it doesn't even get to those rules rule checks it immediately says Nope your token's not good or your domain you're coming from is not good whatever that attestation might be and it kicks you back up so that's kind of how that app check Works um I don't think I included in here but I believe at at this time it's a million requests are free for your attestation check or your app check so I think it's a million a month so the piece that we're talking about tonight from the website of things you may have seen recaptcha before uh we're going to be talking about recapture version 3 tonight this thing on the left I'm sure you've all used at some point or another where you have to click the the box to say I'm not a robot and when it doesn't believe or if it right off the bat doesn't believe you it throws up a picture and you got to do the I can't find street lights for the life of me this is really bad and finally you can get it um so I'm like version two which is is this um this is an example which requires some user interaction version three does not require user interaction so version three allows you to verify if an interaction is legitimate without any user interaction it's pure JavaScript API returning a score giving you the ability to take action in the context of your site so for instance requiring additional factors of authentication sending a post to moderation or throttling Bots and that's a really big key the bot one is probably the the biggest thing that app check prevents uh going through this so we're going to write a demo application in Firebase somewhat from scratch and then kind of deploy it out and see how that works so I'll do a new window in vs code and we'll pop open the terminal so I'm just going to make a new directory called web dev gr-2 because I tried this example earlier just to make sure it would work um see me into it and the first thing that we're going to do we're just going to set up a very simple sveld site not spell kit I chose to kind of go that direction just to make a few things easier um so we'll do PM PM reads uh so we're going to call this webdov gr-2 and we're gonna pick svelt's for now so hopefully everyone can see this okay if not let me know and I can bump up the uh the font out here um so I'm going to go ahead and open what am I going to do I'm going to go ahead and open this so we have a basic um basic setup for a spell application uh for Veet application that is using this Felts so in here we have a source folder and the main content in here if you've never used this before it's got a app.s felt um the load that actually comes from this is index.html once this all gets built out we'll have a dist folder at the end of it that we can then deploy to hosting good so the first thing that we want to do here is set up Firebase as well actually let me let me show you the application just so everyone believed me that we have one I'm gonna go ahead and do a get init as well just so that we have our changes as we're going along and I'll just do init in case we see something and now that we have this I'll do pmpm run Dev so this is the the current site that we have very simple uh heat plus felt sights out here you can click this count button uh what what this is representing is just another component so we have a component out here in our library called counter um we'll end up changing this around a little bit as we keep going so we can include firestore into that that counter piece of issue so now we're just going to do Firebase uh so this requires the the first one really didn't require anything but npm or pmpm in our case uh this second one we're gonna do a Firebase inits just to set up a Firebase project as well uh let me move this out a little more so the two things that we're gonna look looked at is firestore and hosting into this project and we'll create a new project so let's just call it web above okay I won't I won't touch it this time I promise [Laughter] so technically it what it does is Firebase sits on top of uh Google cloud and Google Cloud projects is the core of everything on Google Cloud so it's actually creating that cloud project which I'd have to go delete and mess with um and then Firebase gets added to that project efforts and I don't know why they haven't fixed this for the many years I've been doing this um but if you add firestore to your project like this um it still is not initiating it correctly uh so when you come out here to firestore let's move some of this stuff around sorry we'll go ahead and create our database in web dev gr3 we're going to create this in production mode and just add one single document um to match our collection around um so we'll jump back over if you see errors like that I'm sorry I don't know what's going on um you'll notice that in our folder we actually haven't gotten any updates so we're going to do that Firebase init one more time um and we'll do firestore and hosting this time we're going to use an existing project now that we have it all set up and we'll pick web dev gr3 I wish I could show this a little better for those who are here let me do this at least hopefully you can see a little better so we're going to add Firebase uh firestore rules um those are going to be very simple rules it's just going to initialize a production database which keeps everything closed so it's not open to the the public to get into we won't use any indexes but we'll create the file anyways for our example because Veet actually puts it out to a dist folder we're going to say dist here um this probably won't matter because we're only going to use a single page and then we're not going to set up automatic builds but this is a great way if you have a project that you're you're setting up and you're regularly like pushing to it it'll trigger off GitHub automatically now um so if you use versel or an amplify or anything like that this is kind of that solution as well on the Firebase side so you'll see we have our projects and our Firebase RC file and our Firebase Json we have where we're hosting from which is that this folder and then our firestore rules it's again it's all locked down and something cool that they added it's been a few years now um is this request at time they actually shut off firestore access um I thought it was seven days but it looks like it's like 30 days from the time of creation so if you don't adjust this that database will go closed in 30 days which is awesome again they had too many things open the very beginning of all this it was kind of a mess um Okay so we've added uh Firebase uh we're going to do our first deployments out to hosting so we'll just do firebit uh sorry we'll do pmpm run build and for anyone that is looking for what that actually is doing if I come over to our package.json you'll see it's just running beat build here so at that point uh we have our disk folder all set up to go for a build and we'll do Firebase deploy um we'll just do deploy everything right now and it'll actually deploy out our firestore rules as well um in the future we'll probably just do a deploy hosting from there I know as we update things so if we take a look this final URL down here is webdevgr-3.web.f and open that up and now we are we have a public app good to go so we're all hosted and running um what we're going to do with this now is a couple steps to make app check actually work so if I jump back into our web dev gr3 we're going to then go to build an app check app check hasn't been initialized here yet so it's got a few things like how to get started and easy easy tasks like that to go through app check but I luckily am going to walk you through all of these it's going to be great um so you'll notice if I go into app check right there aren't any apps currently so we haven't set up Firebase in our actual application yet so the first thing that we're going to do is is go to Project settings and there's no apps here you'll notice there's iOS Android web unity and flutter um the unity and flutter I don't believe have app check last night checks I hope flutter is coming soon from what I hear um the website is what we're after though so web dev gr-3 or two or whatever we're on now so once this is set up we can actually copy this exact configuration there's so many different versions of this typically that um depending on how you pmpm install or like get your configuration file this will all differ but it's pretty straightforward luckily first felt um so I'm going to come back over here and before I forget I'm actually going to do pmpm install I'll do the full command Firebase our Wi-Fi is good it's fantastic now if I jump back into app.s felt for everything um starts off with we're going to just include or import our firebase.app no idea what's complaining or not yeah I'm gonna run it a few times it'll come out right so we dropped that in and then we're going to initialize our application so now that we have Firebase setup we have this this app ID and that application ID is what we can use to correspond with abject so if we finish this up we can come back into app check and now you'll actually see that there is a web application um there's two options which might be hard for you to see again let me bump that up a little bit so there's two options in in here there's recaption recaptcha Enterprise um recapture Enterprise adds a lot of nice things uh to the toolkit but for most applications if you're just looking for that that base setting for app check it really goes a long ways a lot of the the limits and things like that um go up in the Enterprise version but then you're obviously paying for a lot so at this point we can start to tie in recaptcha in Firebase uh together so the recapture site is one of the most difficult sites I've found to get to the admin section so if you look around on all of this and getting started it's a very much a sales page uh here's here's kind of what's comes with Enterprise and recapture three um some of this I've heard I haven't checked this out but the ml model tuning API is pretty sweet on the Enterprise version so if you want to learn more just uh email me and I'll dig in and find it out for but with all that said I can never find where to go in here so it's recaptcha slash admin that'll get you to the uh the admins section of this so in our recaptcha setup we're going to create a new site um we're gonna call it web dev gr3 this is where that version two or version three you can utilize um I do have a setup for version two if anyone's curious we can we can take a peek at it later um or three though we need to go back to that domain that we're hosting so if you've ever used if you've never used Firebase before you can always type in Firebase sites list and this will give you all the different sites that you have set up um the one that we are after of course is ours that's out in production already so we're going to take that into recaptcha and add that as our domain so the the only domain that this app currently will work on is webdevgr-3.web.app everything else would would be off of the app check and it will say nope this is an invalid request and block it and we'll walk through some of that and how it works so after we have that set up um it gives us our two keys our site key which is public facing and that will go in our application and then our secret key so the thing that we need right now is our secret key we'll go back into Firebase console where we have that open and just in case there was too many hops I'll back up a little bit uh so we're Firebase check apps here's our web dev gr that we have set up and then in recaptcha I'm just going to put that secret key in do not expose this out like I am in this in this tutorial that will reason to have this fixed basically um so the token setup we'll talk about uh we refer we re-verify that in our JavaScript each time so you don't have to worry about it so at this point I'm going to save and it should tell me in my apis that the cloud fire store is currently unenforced which is great news um now we're gonna include some things that I kind of have pre-built so we can start to see firestore get hit by this front-end application so instead of writing all new components uh we're just going to take the two I have over here and walk through them so this is our basic counter that we are going to replace with a new counter that actually ties into firestore So currently we are importing counter we also need counter reader so let's uh copy that you can do counter reader and that's all it takes and spell to import his felt component and then we'll bring in the component down here for both of these components it's erroring because in each one of them we are doing something with Firebase so firestore specifically so in the application here we're using firestore and we're going to set up our collection at DB uh uh that counts so it slash counts as our initial collection but we need to be able to pass this app into that component so um the way you do that in svelte is just to say export let app and you can pass that prop into spill so it's very similar to react if you've ever used that in that fashion so we're just going to do that and pass an app and again if we haven't seen where that's coming from that's after our initialization of Firebase we passed an app so now if we run our development environment again I'll just do pmpm run Dev jump out to this you'll see it has last five here I'm forgetting something ra I just realized it um we need to allow firestore access So currently in firestore nope and here we actually have it locked down for the 30 days and nothing can read it currently we have to allow a document to be added to it so I'm just going to steal this so I don't have to write it all out so I'm actually going to fully lock this except for one collection um you know I'm just going to copy this a little bit so this is essentially saying in my databases um for firestore at any document location lock it however it then goes on to say another match is counts collection you can read and write two counts at will so this is part of that app check which is nice because technically at this point anyone writing this apple reading or writing to this application has access however if you are hitting it now from an API or a location that we enforce it can't get into it now that's by no means a good check app check won't grab everything so this is still an unsecure way of doing things I just want to make sure everybody's clearing that there's there's better better ways to set this up but if you're doing something like let's say a Blog you'd want to put admin rights in another way another fashion to add documents in and then you're you're like counts in this case or a Blog you would set to read any so read true hopefully that makes sense okay now we're going to actually deploy both of these changes uh actually let me deploy firestore first so uh Firebase deploy only firestore it's got this weird Double Dash feature and now if I go back up to our firestore instance or back end um and I go into firestore database you'll see in our rules tab here that I've updated to include counts now so now I'll run this locally pmpm Dev at this point if I start to click counts you'll actually see documents being created in the back end so if I come over to do our backend data here every one of these counts is is a new um a new document in our firestore database and it's just keeping in sync Real Time with that backend please ignore the counts I couldn't think of anything more clever to get us started real quick the count will reset anytime we like refresh so it's not going to keep that number but trust that's that's what's going on um okay so we have Firebase setup we have firestore setup we're writing to it we're reading from it um we can deploy this version of it now um and it wouldn't be enforced quite yet so what we have to do is say app check we can go look at our cloud firestore you'll notice here that a hundred percent of these requests currently are unverified and that's entirely because we haven't included app check yet um so what I'm going to do is actually click this enforce button and this is what takes a while so we'll see how demo goes we might have to take a look at my pre-built one but it could take up to 15 minutes for this enforcing to start to occur so we'll actually uh we'll see how this goes we'll put them down and keep them together just like I did um so on this import what we're bringing in are two things the initialize of check um and this is with the new modular version v9 and above of Firebase um so we have to pass in the app to this app check function and then the second piece of that is that provider so if you remember that attestation that we were talking about how we have Apple and Google and web this is saying use the recapture V3 provider and we'll drop in our new ID so the ID that we're putting in here from recapture which I probably closed at some point so on our web dev gr3 um we've already taken the recaptcha keys for again don't show people these uh we've already taken the secret key into our back end and said okay this needs to match what site key you're going to pass in so again I'm copying that site key and putting it right here so that when we initialize this now um it will actually correctly do the app check run through so this front end ID if you will or site key will have to match the secret key that is in this back end here or our apps so that key right there so where do you put that secret key um now that we have everything we should start to see different results happen so I'm going to save this let's go ahead and build this and deploy this out so we have this built and then we'll do oh my gosh Firebase deploy only hosting so now we should have our new version of the web app up here so this should start to show in our back end that we have a new app check um it's not quite yet there so this this takes time so it should come in as a verified request after a while gonna uh do a hard refresh and hopefully play around with this a little bit firestore coming in let's see so we'll have to keep bouncing in there and check it out but that is essentially how that verification request comes in so this is what I'm going to bounce over to kind of the the pre-canned example to show you uh what's going on because I'm not sure how long this will end up taking but we can come back to it okay so this in in the other example that I wrote uh a couple days ago is the app check verified version now if I look in my back end for this which is this one you'll start to see that the enforced was checked and the verified request coming in is 88 percent so the the unverified invalid requests are getting failed out so anything on a different web page that doesn't have the correct domain and ID are going to get bounced out so there's two examples of that I have on here one example is this one and you'll notice the G the URL change to width and all of that is saying is this still has the API key or the the recaptcha key in it but it's on the wrong domain so this is probably the most typical version of this that you will see you'll see somebody like try to clone your code and just run it on their own site right this is preventing that now whereas any other time there's not a whole lot of good ways to prevent that uh and happening on Firebase on the front so that's the first version the second version is one with completely without a nap check which won't run at all um the difficult part with both of these versions is in development and kind of your CI CD pipelines at this point is how do you start to get around this well they've provided a pretty easy solution for that I'm going to run pmpm run Dev or our version that we wrote live and when I run that in localhost it comes in and says missing or insufficient permissions same thing that we were seeing when it was on a site that you cannot utilize that's a real bummer for devs trying to debug this thing so what we need to include which I some oh here it is is this statement above it so up above here or anywhere that makes sense but this made the most sense for me um I'm gonna say if we're in development mode go ahead and put the Firebase abject debug token just on the itself on the window when I do this we should now see sorry I'm bouncing around a lot in our console here's an app check debug token again you do not want to give this to people this is going to be a secret thing so I'm gonna take and copy this I'm going to go back into Firebase app check web dev go3 I'm going to manage my debug tokens so this is the way that you can get around this and this is why you want to keep it secret too so I'll just say Alex's token or whatever and paste that in so it says right here this token value won't be showing in copy blah blah blah we already have it um is the irony of of this one typically what you will see in cicd scenarios you'll actually use this button right here that says generate token and then you can use that in your your tool chains so that it's already out there and available as it's processing so if you want to run some sort of test Suite on this and it needs to have that access you'll pass that token in as you're running your tooling and testing before you approve a PR or whatever um does this token ever change so it's specific to the machine and the browser um there's there's more details on what that actually means I try to refresh a bunch of different ways on my machine and it kept coming up the same so I don't know if it's like mac address based or like how they figure all of it but it can change uh like if I go home to my my other Mac it's totally different than this one so you'll see that it's still providing that back out you can take it out now too so if I were to to take this out because it already knows my machine um it should already be utilizing that too I think I haven't double checked that but now we're back up and running in localhost um and protected on the front end too so actually at this point you should start to see this API call um start to go from unverified requests back up to verified requests I'm actually surprised we're getting a lot of invalid requests at this point unless someone's like trying at home and already stealing the keys I don't know um but yeah so so that's kind of all the pieces and parts of setting up app check um again the the uniqueness here being each domain uh so you want to make sure like you put the correct domain in when you're doing that just be careful when we reopen it one more time when you are providing this uh domain in here I believe it does all sub domains as well so just be careful when you add this in like you don't want to put star.web.app that's not going to be a good thing so just keep that in mind when you're when you're doing this you can add additional things so like if you don't care if anyone is using localhost you can actually put localhost in here and then you don't have to go through that token validation piece as well so just to penalize have that set up and that's the demo went well so I don't even need these slides which is great um that's really all I have about app check but uh if there's any questions about abstract or Firebase or codingcat or

Channel: CodingCatDev

Views: 4,968

Keywords:

Id: bpTw4aMxCU8

Length: 34min 16sec (2056 seconds)

Published: Fri May 12 2023