How to add Firebase Authentication to your Qt Application!

hi i'm monty the software engineer and in this video we'll be continuing our cute with firebase journey by going over authentication with firebase using just the rest api with firebase authentication you can add the ability to have your users sign up and sign in to user accounts and then start making authenticated calls to your firebase backend if you haven't already watched the previous video on using firebase real-time databases i do recommend you go back and watch as we'll be leveraging the database that we set up in that video first let's go into our firebase real-time database and disable public read write access as we only want to provide this for authenticated users so i'll go into my real-time database and then in my rules so in the firebase documentation there's already a set of rules for an example on how to only allow read write access to authenticated users so i'll take this here copy it and paste it into my real-time database rules and then i'll publish it it says rules publish so let's go to our code from the previous video where we did a get request and if we run this we should see a permission denied message and yep right here we can see error permission denied so let's go ahead and just create a new project again i'll just use a cute console application as i won't be adding any visuals to this and then i'll call this firebase authentication example all right let's start out by adding network to our project file as we'll be using network access manager we'll run qmake and then let's add a new file project and let's add a new c plus class and then i'll call this auth handler and i'll have it in here cue object all right so let's go ahead and take a look at the firebase auth rest api documentation so the first thing we'll need for this firebase auth rest api is an api key and the way we can get that is by adding a new application to our firebase project so here i'll add app and then i'll just call it a web app and i will say my cute app registered the app and now with my qt app we can see that our api key is right here let's go back to the firebase authrest api and we'll look up how to sign up a user just with the email and password and here we can see sign up with email and password so here we can see sign up with email and password uh the method is going to be post and then the url is this and then our api key is here we can see the required information in the payload we need the email and password as well as this return secure token and it says this secure token should always be true we can see an example of how to do it via curl so let's go ahead and add this to our project first in our auth handler let's make a private member which will be a q string called m api key and then let's create a center for it void set api key and it will take a q string api key let's add that to our cpp and let's set the initial state of it m api key is just going to be a blank key string here we'll set it m api key equals api key and let's also add our include for q network access manager as well as q network reply let's create pointers for our q network access manager as well as our q network reply q network access manager m network access manager and then q network reply m network reply and if you remember from our last video we want to create a slot for the network reply when there's information ready to be read so we'll do public slots void network reply ready read let's go to our constructor and we'll say m network access manager equals new q network access manager give this as the parent and even though cute will destroy network access manager whenever the instance of auth handlers destroyed let's just go ahead and add a destructor for good practice we'll add that to our c plus and then we'll say m network access manager dot delete later and then let's go ahead and add the implementation for our network reply ready read let's include cube debug and for now let's just debug out m network reply dot read all all right so let's add a function in our auth handler we'll call it void sign user up and it'll take a email address as well as a password and let's add a function that will perform the post form post and this will take a url as well as a payload and the payload is going to be a q json document cons q json document and this will be the payload so let's go ahead and add these functions to rc plus plus first we'll add the perform post and then we'll add our assign user up so if we go back to the api documentation we can see here this is the endpoint so we're just going to copy this and then here we'll make a cue string and we'll say sign up endpoint equals the text that we copied and then let's change the api key plus m api key and then let's make the required payload of the email password and return secure token so first we'll add our q variant map then here let's create the q variant map q variant map and we'll call this variant payload and then let's see what keys we need just email password so say variant payload email equals the email address that we passed into this function and the variant payload password is going to equal the password that we passed in as well and then we need the return secure token which should always be true so variant payload return secure token and we'll set that equal to true now let's create a q json document and we'll call this our json payload which will equal q json document from variant and we'll pass it the variant payload and then let's perform the post with our endpoint and our payload so perform post signup endpoint and json payload and now let's add the code in for the post we'll need to add a q network request here and then back here we'll say q network request network request and we'll call this new request and we'll pass in the url here it says parentheses were disambiguated so let's just apply the fix there we go then we need to set the content header of the new request set content head set header cue network request content type header and this will be application json and then we'll set our m network reply equal to our m network access manager post and for the network request we'll say new request and then we'll also add in our json payload payload.json and now let's add in our connection for when m network reply has come back with ready read information so connect m network reply the signal is going to be ready read connect it to this and the auth handler slot is network reply ready read so when m network reply comes back with information from the post it will go here network reply ready read let's also add in our m network reply dot delete later all right so let's go back to our main.cpp and we will include our auth handler let's create an instance of it off handler and we'll just name it off handler let's set the api key set api key and we'll go back to our firebase console we'll copy this api key here and let's pass it in this and then let's add auth handler.sign user up we'll give it a email address test at email.com and then we'll give it a password password123 exclamation point now before we run that let's go to our firebase console let's go to authentication we'll hit get started and here we can set up the different types of authentication we'll allow our app to use so we just want email and password so let's enable it save and now email password is enabled let's go to our users and we can see here we have no users yet so when we run this it should add our new test email user so let's run it and here we can see we got back an id token as well as a bunch of other information like the emails test email our refresh token when the token expires and let's go back to our firebase console let's refresh this and now we can see that we have our new user test email.com their user id so that worked now let's see what happens if we try to sign up the user again using the same email address so let's first clear this we'll stop the application clear again and now let's run it let me make this a little bigger so here you can see that we get an error back the email already exists so that works well we can also go into our firebase console and here we can see we can reset password disable accounts delete accounts so let's go ahead and delete this account again and then in our cute project let's run it so you can see the message bigger and here we can see that the sign user up call was successful we got our id token our refresh token and won the token expires so now let's go to our off handler and add let's close this and we'll add a function to sign a user in and it'll take the same email address and password here so i'll copy and paste that and then let's add this to our c plus plus and then let's go ahead and look at the api documentation sign in with email and password so it's going to be a post this is the endpoint here and then the payload is going to be the same as what we had for our sign up user so email password and then return secure token so let's go ahead and add that since it's very similar to sign user up i'll just go ahead and copy this paste it and then we'll just update the endpoint copy this and let's rename this to sign in endpoint let's change the end point good and then we also need the perform post so let's paste that and then this is going to be the sign-in endpoint now and since we've already implemented perform posts we should be able to just use this sign user and function now so let's go to our main cpp instead of sign user up we'll say sign user in and now let's clear our application output and run this so there we go we can see that the user has been signed in successfully so how can we use this to make authenticated calls to our real-time database well if we go to the firebase database rest api documentation we can see here there's a real-time database user auth it goes over two methods that you can authenticate one with google oauth 2 or firebase id tokens we'll go with method 2 since we have firebase id tokens and here you can see the endpoint scheme is the same as in our last video with the real-time database uh only now you add this tag with the auth and id token so let's first extract that id token from our message payload i'm going to add a function called parse response and we'll take a cue byte array array it'll be response let's add this into our c plus plus and now when we get uh data back from our network reply let's actually set q byte over a response equals m network reply read all and then we will call parse response and we'll pass it our response now let's take a look at our application output if we look at the json here we can see that there's no type of error in here so let's see what happens if we do get an error let's just change this to the wrong password and we'll run it and we didn't see any output because i removed the q debug here so let's go ahead and add that back in debug response all right rerun it all right good now we can see that we have an error here invalid password and the reason i wanted to do that was so that we can kind of do some uh error catching here in our parse response so let's first make a q json document call json document which will equal q json document from json and our json is the response first we're going to need to add q json object let's go back down so let's catch whenever we get an error and we'll say if json document dot object contains error let's have it debug out cue debug error occurred and then we'll just print out what the response was oh it looks like i spelled response wrong so let's refactor this response good otherwise we go back to our successful response there's a kind here so let's trigger off of that else if json document.object contains kind and we can see our id token is here so we'll have a q string id token equals our json document dot object and then we'll get the value of id token to string and now let's say q debug obtained user id token and let's print out the id token now let's clear the application output and run it again so run here we can see that we have our initial print out from our network reply ready read let me just remove this and then we can also see that an error occurred which is here and what the response was so let's go ahead and clear this again and we'll go back to our main.cpp we'll put the correct password in and run it and here we can see obtained user id token and this is the token so let's go to auth handler let's first close this we will add let's add a private q string called m id token we can go back to our parse response remove the q debug and we'll set our m id token equal to id token let's add a signal here user signed in and this way we can connect any other class that we want to the author and the user signed in signal and this will notify that object that authentic has successfully signed a user in so then let's emit user signed in all right so let's create a slot within auth handler just so we can catch this um without creating another class if you were to implement this in an actual application you probably do want to put this in different class but here let's just say now we'll want to perform authenticated database call let's go ahead and add this to our c plus plus then here let's create a key string we'll call it the endpoint and then we'll go to our firebase console let's go to the real-time database here's the database we set up in the last video let's grab this url set the endpoint equal to the url and then let's just grab our pets.json here pets.json and then we'll also add in that auth tag here we can see it's question mark auth equals id token so question mark auth equals and then we'll add in our m id token and then let's say our m network reply is going to equal our m network access manager dot get put in a new q network request here network request a q url of our endpoint it's supposed to be capital p and then let's add the connection for our m network reply we'll just copy this so when the get request returns with some information uh hopefully we'll get back our pets json so it will go to our network reply ready read which will go to a parse response here and then we'll just say else queue debug the response was and then we'll add the response all right so if this works properly we'll call off handler sign user in so when sign user is called it'll perform a post which is here we set our network reply equal to the q network reply of the post and when we get back information it'll parse the response let's add in a queue debug here so that we can see what's happening let's just say cue debug user signed in successfully and then this will emit the user signed in signal which we catch here in the auth handler to perform an authenticated database call actually i don't think we added that connection so let's go ahead and add that here in our constructor we'll say connect this and we'll catch the signal user signed in we'll call the slot perform authenticated database call all right so whenever uh auth handler emits the signal that the user has been successfully signed in it will perform an authenticated database call which we can see we add in a tag for our id token that we obtained through signing in so let's go ahead and run that see what happens there we go we can see our user signed in successfully and the response was our pets json which contains all of our pets mercy monty and our elephant dumbo the type of food they eat and the type of animal they are now let's see what happens if we used an incorrect password let's clear the output here and then run it again and now you can see an error has occurred invalid password and now one more time let's just sign a new user up and we'll call this user two at user.com and then their password will just be that let's clear the output here and we'll run it and we can see that the user signed in successfully this should actually be user signed up but we don't catch the difference between user sign in or user sign up but we can see that we got the data from the database correctly we go back to our firebase console go to authentication we can now see that we have these users let's go ahead and delete user two and then we'll change this to user sign in let's run the example again and then we can see here we have an error occurred and the error was email not found so we can see that the user tried in to sign in with an email account that doesn't work or was deleted and we get the correct error

Channel: MontyTheSoftwareEngineer

Views: 1,269

Keywords: qt, qml, firebase, authentication, realtime, database, rest, api, idtoken, authtoken

Id: eqPUqhgVu-k

Length: 25min 7sec (1507 seconds)

Published: Sat Mar 20 2021