Register & Login Form (with authentication) using C# | Cloud Firestore DB

what's up YouTube Welcome to the video so the topic is create a login and registration form using C sharp and connect it to the firestore database so let's get started so I'm going to create a new project of type Windows Form so there it is and we will use the dotnet 7.0 now first of all delete this form one and I will make two folders forms and another one classes to make it neat and clean in the forms I will create login form and a register form now we need to go to the program.cs class this is where all the dotnet application starts and we need to change this to login form so we need to Define this reference whenever we want to use one of the fonts so now let's start designing the registration form we need some text boxes and some labels and let's make the font a little bigger and change this to username and it should be drop down list and let's customize the items and let's make them flat one more thing remains is that we need to name these buttons so registration button log in button and this will be user box pass box gen box zip box so after this copy them and paste them in the login form we don't need the gender and the zip code let's make let's make this a little smaller and this will be called back to register also change the name to back to register button and this will be login button and this will be just login so first let us create the back to register function so we will hide the current form which would be the login form and then initialize the registration form and then we use a method form dot show dialog then we close the form that was previously open so first we hide the login form open the next form and then close the previous form because if we directly close the form the application will turn off so uh I will just copy this come inside the registration form now let's create the back to login function with the same code we will just change the form I should Zoom it a little bit this looks good so now let us get the configuration from the firestore so this is my database and if you are new to the firestore I insist you watch this video because it will build you a solid firestore foundation and all your Concepts about Firebase or firestore will be cleared so I have already created a firestore database so I need to go to the project settings and in the service accounts generate a new private key and open with Notepad now we need to create a new class and we can name it firestore helper and this will be a static class and a static field a static string fire config which will be equals to add and then I will copy all of this here just like that and then static string file path we also need to install the cloud firestore nuget package just type firestore and you have to download this package you can see that it is updated not so long ago so it's being updated once in a while so it's installed now I need to create another variable which would be I need to First Define the or let the visual studio Define the reference itself this is the advantage of using the visual studio 2022 so now a method so this is the safest way to define the configuration and set the environment variable without exposing the Json file otherwise the way firestore work is we need to give it a configuration file and the configuration file would probably be in the same directory as the application but anyone can see the Json file and see the private key so for security purposes we will create a file copy all the configuration and then delete the file using our c-sharp code so I am going to define the file path which would be this will get the path of the user stamp folder then combine this path with path Dot get file name without extension and inside that get random file name so this will give me a random file name and this file will be generated in the user stamp folder and I will add Dot Json in the end after the path is generated I will write the file dot write all text and and it's good so now for some additional security I will set the attribute of the file to Hidden so the file would be hidden and then I will set the environment variable so this is defined in the Firebase official documentation but it's not clear how to define a environment variable in C sharp so the documentation sucks we will give the file path and then the environment variable is only needed to use this method so firestore DB dot create and we will have to give the project ID inside this create so this initializes the database instance so we can use this to add the data or read the data or whatever we want to do so uh I I would want to make this database public and let's make it a property so after the database is created I am going to delete the file so the file will be created in the temporary folder of the user of the current user and it will be created with a random name and it would be hidden and it would be deleted after the database is created so this is the maximum security that we could provide now uh I will use this function in the program.cs before the application even starts set environment variable you can see that because I am using visual studio 2022 so my references are getting defined by themselves so this is it our environment variable is ready so now we can start writing the code to register the user now register user you can see that there is a little warning and it's because the visual studio 2022 has started showing this warning whenever it sees a a nullable data type so we have to define a question mark to verify that this data type can have a null value it's not necessary but if you want to give get rid of the warning you can do that so uh now let's create the register user register user event let's create a separate function so let's define the username so the username will be taken from the user box dot text Dot frame this will trim the text for any spaces in the start or in the end string password now uh we need to create a new class which will be called user data and this class will have properties so the username these fields won't work unless I Define some attributes which are firestore data so this class will get this attribute and these properties must be defined as file store property so now we will return new user data so the username is equals to username password so let's write the code to register a user first I need to define the DB which we will take from the firestore helper Dot database then I will Define a variable which will take the which will call this function and then a document reference is needed to define the structure and our structure will be DB collections user data will be our collections name dot document now to write this data we will use doc ref dot set async and provide the data then write message box dot show so this is the function to write the data to the database let's also create the login function so inside the login form the login function we will take the username or let's take it from here so we need the username and the password so the password shouldn't be trimmed the document reference so the document so the document reference would be the same and instead of this I will Define user data and let's get the data from the doc reference so get get snapshot async dot result and Dot convert to I will convert it to the user data type so it would it will convert the data into this class type and then we will authenticate the snapshot if the data is not null and if the password written in the text box matches matches data Dot password then we will show the success message otherwise we will show message failed and in case of data is null if username is not found we will also show that it failed so this is it but we have to take care of one thing more and that is I need to copy all of this and come inside my registration form and I will create another function which will check if user already exist and inside that I will not authenticate I will just check that if the data is not null then returned true otherwise returned false so before writing the data we will check that if check if user exists returns false then message box dot show user already exist and return the function so the function would be so the function will return I am creating the function at the wrong place it will be created here One Thing Remains is that we need to save the password in encrypted form and then decrypt it and then authentic it so for that I am using the code from this website so you need to copy these three functions so create a new class and we will name it security and inside that paste all the functions and you don't need to change any of these just use them and this class should be static as well just use these functions here security dot encrypt so we are sending the encrypted password and in inside the login we need to decrypt this password so security Dot decrypt we will decrypt the password that is coming from the database some other things remain dead are we need to use password char to and then put static over here do the same in the login form design we need this form at the center of the screen actually I don't need to put the not symbol here hello one two three register user you can see that it's telling me that it was successful we need to refresh the fire store this is a drawback of fire firestore that uh when we create a new collection it doesn't get refreshed by itself but after the collection is created if we add new documents then it gets refreshed by itself so you can see that the user is added and you can see that the password is encrypted so this is not only a base64 but it is a encrypted password so you cannot decrypt it with just the uh decoding of base64 string so let's now try to create the same username with a different password and different different zip code so register user it says that the user already exist so it's not letting me uh re-enter the user now back to login uh when I type hello one two three and uh the wrong password login failed but when I write the correct password it says login success so it's decrypting my password and then authenticating that if the password matches so this was our application this shouldn't be back to register but this should be something like sign up but you get the point so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 9,454

Keywords: firestore register and login using c#, cloud firestore database c# tutorial, firestore .net 7 tutorial video c#, firestore database .net c#, google cloud firestore c# tutorial, c# firestore tutorial, .net tutorial for firestore database

Id: BhJntml-fMg

Length: 26min 44sec (1604 seconds)

Published: Mon Apr 24 2023