Flutter - Authentication with MongoDB, Nodejs and Express

chuckles welcome back to another video and this video is going to be everyone flood-prone indication guys now I have been saying my past few videos that I've been working on projects and that's why I haven't been able to make videos for you guys lately right so a few of you guys have been asking me what's the difference between working on a real project and what's today and working on a basic tutorial video now let me get a few things out here guys when first of all whenever real businesses or big organizations want you want an application or want to run their businesses through your mobile applicable application and they approach you they won't usually prefer firebase firebase is good for MVP guys firebase is good for something that you want to create really quickly and then showcase it out to the users but scaling up you know it'll it will become really expensive in a really short span of time also if you don't configure your rules perfectly then you'll be leaking data all over the internet so big business in short big business won't prefer firebase they usually ask you to use some other database so this is one database that I have used previously and I wanted to show you guys how to create I mean how to do authentication from your flood trap into this particular database this is MongoDB okay this is one of the most popular databases now in the world and is being used by a lot of as you can see here it's being used by a lot of big names as well so I thought I'll show you guys how to set up this particular database and how to like store users had new users or just authenticate a new user whenever he tries to login using his mobile application the mobile application will be using flutter to create it and the server will be an express server and the entire mode app will be running on Heroku and for database we'll be using this moga database this will be hosted on the cloud as well now as you can see here they themselves give us the cloud okay it's a bit they have a free tire and the paid tire as well so let me just sign in if you don't have a account just you know like sign up for the free tire now I already have an account so I'll just sign in alright guys now I logged into MongoDB Atlas this is the cloud brochure the thing is you won't be seeing a screen exactly like this if you are a new user you will be just asked to create a project I already created a project called Raja and inside this project I have a No first you will be asked to create an organization and then inside that you will be asked to create a project which is the test project that I have here and inside that project you will be asked to create a new cluster ok now I already have a cluster but if you haven't created one just you will see a screen like this just choose the AWS or whatever provider you want and then that is a choose one of the areas that has a free tire ok choose one of the regions that has a free tire and then this young 30 is not free okay the free one is young 0 I think mm0 sandbox this is the 3 1 3 4 over ok but this is only one per free user so I have already created a cluster 1 cluster so this is just one per project if you are using the if you are on the free thethis cluster you can just create only one per project and just click on create cluster that's it once you have created the cluster I mean this gate back here once you have created the cluster you need to give create a user for database access so just get into database access and then just click click on add new database user and then enter a user that's it you don't need to do anything here just yet to create a new user and then click on add user I already have a user here that I have created just now so I will be making use of obviously I'll be making use of this user you can also define custom roles for database users in case you have staff in your company and you want to give them some privileges as well no that's ok get back to clusters and then once you have done all that you will be you would need to create a DB as well I have created one called test DB and you will be seeing all this ok now there are options here as well charts is nothing these are simply realm as rhythm is an entirely new section realm is like how do I say they have built a lot of cool features on top of the existing database guys okay I'll make separate videos on drill remember right now the reason why I'm not showing is it doesn't support flutter I think it just supports native iOS Android and react native I think let me check it see I always enjoyed and react native okay so but I think the support will soon be available and once it's available I will show it but realm is really cool guys if you want you can try it on one of you can try it it's like really cool they have built a lot of cool new features on top of MongoDB in which you can make the interaction is made much more simpler you just try it out case just try it out right now let's proceed on with the scope of this video the scope of this video is to show how to authenticate a user or how to add a user to MongoDB from your flutter application right let's just move a stick to that and move on with that now now that you have created a DB you can just if you if you have done everything so far then if you just click on collections you'll be able to see that particular database and if you have any data stored on the database it will be displayed as well now I have I might have a couple of user stored on the database already as you can see here we have a couple of users stored on the database now let's go ahead and okay this is all that you need to configure in the Atlas more would he be Atlas before proceeding with this video let me point out that this video is entirely going to be based on this particular video that I made four years ago for at that time I was using ionic for building mobile applications guys that time I was building a REST API authentication system and this video will be exactly similar to this particular video okay that was back in 2016 so yeah let's proceed guys first even if you don't have any now if you don't know anything about JavaScript and you just know a little bit of letter that's totally fine by the end of this video you will know it okay now the first thing you need to do is install something called node.js if you have node.js or if you have worked already with no jstand that's fine for those who haven't who don't have that kindly install gorgeous okay it there are separate the instructions for Linux Mac and Windows I have installed for it next since this machine is an open-toe machine I have installed for it next and the next thing you need is just create just to open up a terminal okay I have installed the current version the next thing you need to do is just create a directory and then just type NPM in it okay it will give you some options like this just hit enter question one point you authentication system for entry point I'll just kill server dot yes okay I usually go along with index jo-jo sometimes I just say change it to several days it's coming to this fine git repositories which is fine what that I can just give my name nice and still just giving me T and then just give code this will open up this project in vs code if you are using some other code editor de ID then that's fine as well you can simply use that most of the modern IDs will definitely support nor J's application so there's no problem in that you will see that you just have a package of JSON file that's it now I'll be installing few dependencies you can go ahead and install that as well so I'll just give an PMI first I'll install Express and then for logging stuff I'll just use something called more than this is an excellent logger and then course for cross-origin resource sharing and then I'll use something called passport this is your JWT strategy to create a JWT strategy and use something called body parts Parsa and i'll also install something called ott and Mongoose Connect mongooses the it's like a thing that you can use to create schemas on your no sequel database that is the database okay and then if I just hit enter it will save all those okay now that this is 10 will just missed out a couple of dependencies will install those as well big group this is for encrypting the password before storing it so I am p.m. I be grouped and Express a install already right I expressly installed JW t this is the JSON web token thing while this is getting installed let me just code and create a file called server this will be the entry point right so I'll just go and create this get back to package dot JSON and I will increase the font size so that you guys can okay this seems better right okay now you have insult all these dependencies let's just modify the script a little bit so that we can have oh we didn't know Manas like this will automatically reload this will this is a NPM package that will automatically reload the application whenever there is a change guys okay that's this node moon and now that we have all these let's just go ahead and first we will save this getting to server or Jas and start coding all right now I created some static variables here this I'll be making use of now I haven't created this config DBA trait so we'll just go ahead and create something for confit and then say they say to create a new file called DB dot jealous now let me just get back into sourdough jsn first I will just connect BB and Sadie PJs I need to write some code for this right so I lose and Mongoose equals the queer this is simply like an import statement guys okay Mongoose and then constant baby baby country wait baby config we don't have baby yes in say DB config we'll just do exports equals this is secret variable that will be we will be using for our JSON web token strategy I'll just give your secret you can use anything here and database we need this database URL so this database URL you need to know where we could get it right just get back into here okay and there is something called connect right click on this you will see three things just click on the middle one connect your application you see this database URL right just copy this and then paste it here just ensure that you change your password here okay okay now get back here Const connect the B this is a function that we were trying to call so this okay there are two ways you can simply write it as function the regular JavaScript or you can use the new thing acing [Music] I think try constant connection equals [Music] just give it a score equals away Mongoose dot connect and we need the world rip DB config dot database if this is connected then I'll just is a function and inside they say it is asking some options now we phone's disconnected console dot log MongoDB connected fine I know this once this is connected this will simply print this message after that we can this cache the error and then console dot long process not exit this is nothing but to say this over to stop here a one means error okay with an error that's it okay and now we just need to know you will not expose equals connect DB fine now wherever this DB J's file is imported we can simply make use of this connect DB since we are exporting this from this particular file so here I have pulled a pull to separate so I am using connect EB which means that as soon as the server is started it will automatically try to connect DB connect the database now that the system just create an app using Express Express and then you can just simply use the logger know process dot environment dot node environment equals drop liquids app not use more than then we Express you configure later we'll just try starting this and see whether this runs fine constant or equals or tape thousand three thousand you can simply run when it's running locally but if we host it on so on to some hosting service then you can do that right so that's why I use process dot environment thanks Avis okay now simply let's just try to start this and see what happens this let's just do NPM start first [Music] all right now you can see that so we're running in production mode since you have this server running so server is running on production mode it on port 3000 okay now let's just try running that device world devil has the logger rate market so it will automatically log every even that's happening on the server now it's running on development more on port 3000 right so yeah guys now we have a express over that's running all we need to do is write write the code that we want on the backend to be executed and this code is specific to saving some data on to the database as well as trying to access that particular data that's it okay so let's stop this for long and then start writing whatever we want on this particular server so in order to do that we are just going to be creating a couple of routes so that that can hit those routes okay so Const Express equals like Const actions this methods is the one that we'll be having all our actions okay and constable first we don't need to say list use that later over equals Express dot this is the crucial one that he'll perform the routing for us so first I'll just create a simple route so that I can give you guys an example of what they're doing here so I just create a backslash and then this will simply take win and request and response and we'll have function to handle that particular route so response starts and I'll just say [Music] fine now we have a very very simple route let's just export this exports fine now what we can do is get back into Sergius and then we are going to be making use of that particular route right so for that we need to first get that route Const routes equals square roots index so J's and then let's just make use of everything after to use course don't use body parts this we'll be using later on body buzzer we'll be using later on you are I'll tell you guys what exactly we are using that for have to use body parts at our JSON I have not use fine let's say this this this body parts are stuff I'll tell you guys later why we are using that okay for now we just need these boots and then once is the sale just start this over this will start it now all we need to do is get low get to a browser and then just type HTTP localhost 3,000 they're seeing this hello world right this is nothing but our server that is running here as our that is raining here you get requests there was a get request made and which is nothing but the one that's pointing here so what the database was not showing up properly right that's because I gave the password wrongly in the configuration URL base now I just fixed that let's see if it shows correctly no because as soon as this connect DB is called it should automatically try to make a connection to that database and say that the database has been connected as well right so let's see whether that happens now yeah you can see this right MongoDB connected rather cluster this is from the database as soon as it's connected it showing MongoDB connected and it's just showing many clustered name right so yeah this wasn't being shown before because here in my DB config dot JS I gave the password wrongly it's the connection URL that I showed a key of the password wrongly now that I fixed it it's automatically getting connected and being shown so we have established a connection with T on go database as well sorry guys sorry about that now let's go ahead and we have seen this endpoint being hit right now let's get back into routes and try to write more routes for this so if I just try to route or dot just copy say this the change should be picked automatically and it just restarted I know if I just hit dashboard it's just showing dashboard right so I rotor is working fine no issues here let's just go ahead and try to first wheel this code and try to add a user okay and then we will try to authenticate him that would be better with it so let's just get into indexed or Jas and now this is going to be C es su and now let's just try to add a new user so this description would be and the endpoint would be I'll be writing the function separately okay I'll just here here is where I use this particular file I'll just create a new directory name that has methods inside which I'll create a new file called actions or Jess and inside this user we require we need to define a user schema right before we actually try to create yeah we need to create a user schema so for that what I will do is I once again create a new directory name it as model and then inside that I'll just go ahead and create a new file called user dot J's yes and here I will create a schema where mongoose equals square which we require this schema and b b equals and that users sorry equals type I'm just defining what needs to be a particular user case it's a model right it's just a model that's it and then sorry pass for a Drake we're fine so both of these statements are no mandatory both of these fields are no mandatory before saving the user we will just encrypt that password okay so in order to do that we need to write a pre-hook so uses schema schema dot 3 and in say this is just whenever the user is trying to say when you use it I'm just going to trigger a function function next where user equals this if it's tot his modified modified the field that we're looking for is password password this dot is me if the user is created new then what we need to Luis bcrypt not jinx our and just euston function never sound sister channel that has been created used to hash the error return error at our next off error since we need to notify the server that's running if not be true dot sorry big trip thought hash user dot password your password salt okay the thing that's happening here is I'm simply checking if it's new if the save is happening for a new one or if it's just the password is being modified and then if that's the gist and I'm simply encrypting that password here list it's just tea I'm creating a salt and then using that particular salt value to hash that enter password using this big group module and then once that password is encrypted and simply say using that I mean selling that onto the database that's it that's nothing fancy in this case it's just a pre hookahs nothing but the hoop that is written to do some operation on that particular field before it's getting saved on to database that's it before it's getting zero into this particular schema that's it now what we'll do is we will write one more function use your schema dot method start this one we no need to write it even now we can write it later I can write it later we'll just two more double dot exports exports Mongoose dot model user user schema find save this and then get back to action star chase require models use JWT equals the WT simple where config equals require config DB config find nowhere functions write the functions first function that we need to do now is add the system function that we are going to write this is for adding the user a new function request response if not requested body dot name request of body dot password then simply send response dot JSON success God's message okay so if one of these two fields is missing just send the response saying success falls enter all fields and if not else where new user equals user we are simply making use of the schema base user name body dot name password user dot C function error if error response dot J's home once again success all let me say a say elds response not json success to message success fine and now we have a function that will let us save a new user to the database all we need to do is make module dot exports and then so that we can use this function somewhere nor do L don't exports equals functions save this get back to in routes here I add user simply do action start now you understand what's happening here right I'm simply using this particular function here whenever the user hits the add user root on the URL then I'll simply walk this add new function which will just pick the a name and password of the users request and then try to save it onto the database that's it okay it's very simple guys before saving it will simply just encrypt the password and then save it that's it okay now we can obviously try and see if this is working fine as well before moving further it's already started so before trying it simply from your machine you need something a tool like this called postman okay postman is nothing but a tool that will help you hit your REST API endpoints and see if those are working fine okay now as usual HTTP so HTTP localhost keep thousand if I hit this it should show hello world or something right okay the status is okay and it is showing hello world now since this is fine I'll just select it test post and then here I will use Q and user photos read user and in the body simply select x-axis form URL encoded why because we are using that body password or URL encoded and not only that we are also [Music] that's it so I will just give it here and here I'll just give name test user and test one two three if everything goes fine this should get saved on to our database now guys so I'm just hitting on send this is a post request success falls enter all fields the reason is okay this is where it's getting blocked this is because my coding mistake I just failed to give not symbol here I make such careless mistakes and then sit for us trying to debug two issues case this is common with every other program that's why I guess hit like on this video and drop a comment if you make this mistake often as well anyway yeah let's just say this see if the server is restarted yeah it is restarted now let's just at least we know that the URL post URL is working let's just try to send this request again okay successfully same know if you get in to send just click on collections you should be able to see your user we have a users collection and not only that we have this test you these are some users that I created previously guys ignore this this is the user that we just created right name test user and password as you can see is the salted hash - ocean not the version that you save the version that you saved was test one two three but the version that got saved on to fire store I mean not finals this is the MongoDB rate this is a salted hash - ocean this is because our hope that we wrote here in action she wrote an auto action Sween and then the model file we wrote a hook rate whenever it was saving we need to encrypt that entire thing and then say with this call triggered and it the salted and hashed version of that password got saved right so now you can use your flutter app to call this particular endpoint and then you can't call this particular endpoint since it's running on your local machine but you get the idea right this is how an endpoint can be created for saving that particular user now let's create one more endpoint for authenticating this particular user if if I need to authenticate against this particular user let's see how to do that so for that first I will just get into indexed or J s end create a new route rotor dot post authenticate and we will create one more method in action store chase now the thing here is before authenticating you need to compare passwords right when the user enters the password you need to compare it against the one stored in the database if the stored one is the salted hashed version and how are you going to compare it with written regular text so first for that we will write another method in model dot a user DOJ's that method will be to compare two passwords so right here after this cell just called and write one known user schema dot methods lot and compare as function password this will be a callback function bcrypt dot compare password match and if it's an error we just return the callback with an error if not call back right now we have a function that will compare the password that's being sent to us so we can just go into action starts yes and write a function that will authenticate the user for us so just give a comma here and then authenticate once again it will just write a similar function request response and then say this usually about find I request our body name throw error if not then if not user at this if the user is not found then response response not status this is how you send error codes okay so far we were just sending there some messages right so if you just give it as status then you can send an error code from directly from your packet so I'll just send error code 403 dot send message authentication and then who is it not suggesting that use about compare password request or body body dog password password function we if it's if the password and username are a match username we are finding it from here guys user not find one we'll just see if there is a name with this particular name and then give it that document to us so if the document is not found I am simply retaining a message called authentication failed user not phone okay so if if it is a match then I'm simply using the compare password method that I just wrote know you remember write this password method that I just wrote and then what I'm doing is this user schema will hold all the methods case this user schema dot methods I can write any number of functions that are associated with this particular schema and if you remember I am using this this entire model is based on this schema so if I'm using this it if I'm using this then the user returned would be a user document right so if I just do user dot compare password then I it means that I can use any method used on this particular schema written on this particular schema I hope you guys understand right this user is nothing but the ones that the one the model that was written here the model is nothing but the model that was created based on the schema this uses schema so this user schema if I write a method on that call compare password then automatically it will be mapped onto this switch so if I use this and return a document I can use whatever method I have already written on that particular schema right so I am using user dot combat password here I hope you guys understood this and if the password is a match what we need to do is we need to send the JWT token authenticate we need to send him a token using which he can send authenticated requests back to us if it's not a match we just need to send an error that's it so what I'll do is I'll just create the token token equals JW d dot M code in code use conflict dot secret the secret is nothing but the one that we created in the Debbie config secret your secret something like that we saved it right that's so that's the one secret response to our JSON once again success too and token token fine so we are sending the token back to the user you get it right if if the user is authenticated if this password matches success okay if it's not success then what we need to do is else return you can respond store JSON JSON status status will send another error message for node 3 not same false message fine now we have a function that will authenticate the user for us cool right now if we send a request with the one user that we just created we should be able to wait authenticate say this now if we send the request hitting this URL along with user parameters then we should be able to get a token if it's successful see if the thing has autumn idea it has automatically restarted now let's get into postman and here instead of I had user if you just hit authenticate hit on send it should automatically return success true and then it should return the token let's see what happens okay we didn't get painting let's see we're even calm okay made a mistake looks like I made a mistake this big group of guys I made another I poo I make such silly mistakes I add as I said before I keep debugging for us after making such silly mistakes yeah now let's see where that is cosine let's hit Send hola it was successfully authenticated and not only that it returned the token right this is the token the Authenticator token that it will be using to make requests the user will be making to using to make requests as an authenticated user right usually in bigger applications whenever you sign up for those applications the developer portal they will give you a sandbox environment and they will be telling you to use I mean they will be telling you to get authenticated to that and they will give you a token a test token a developer token test token on the production token and all that right this is how they do it guys you can just create a back-end and then you can hand over this token to the user and you think this token the user can make authenticated requests that's it now what if we gave a wrong password or the negation Phil Krom password and not only that we also hit T four more three four more threes Tierra that we sent rate that's what that was done if we give a wrong if the password is right but the username is wrong it shouldn't be able to find this user nor it authentication field use an art form so our system is working perfectly hey okay now that we have this let's code and try to use a mobile application to create a mobile app or before that shall we just write one more function I'll just show you I mean it would be better if I just showed you how to use that particular authentication token to send the request right that would be an even better thing right you guys would even get a better idea if I'll show you how to use that particular authentication token that skating return and then send the request authenticated request and then how to handle that request on our server say we need to handle that request a we need to split the token and handle that request so I'll show you how to do that as well before moving on so in order to do that we need to use passport and create a strategy to handle that okay so the first thing I do is inside the config folder I'll create another file this file I will name it as Passport dot J's this is a strategy guys I'll talk about this later it's like and like I said if the user sends an authenticated requests along with the token we need to get that token extract that token and handle that right so we are going to be doing that so I'll just create JWT strategy equals required as a strategy fine and then we extract the JWT equals require require pass for ice pour JWT don't extract variability fine where user equals require this is our user model that we had so model models what was the file user yeah use it and we will also use the config require I guess that here it's okay yeah okay now module dot exports equals function function as where options equals just a tank option start secret or key holds config dot secret options dot JWT from request first equals extract JWT dot from earth header it scheme JWT fine now we have this token that was sent along with e request the next thing we need to do is just use a strategy passport or use new JWT strategy options JWT and the scope elbow fight and then say this user dot find once again cool okay this is simply to extract that particular JSON web token and then figure out if there is a user based on that okay for now assume that this is to process that token guys that's it okay I can't explain it in a simpler way assume that this is to process that authenticated I mean the JSON web token that's arriving with the request and see if the user is really a user okay now that this is done if the token is we have a strategy to causes that particular token let's just get into action store jas and then write a function that will maybe tell the name till the name of that particular user okay so for that what I'll do is after this authenticate function I will do get info function request or a question and inside this if there is a optimization and the split will be based on a space zero the error we're token requested at the restore authorization code split once again this time I'll just use one because this will be the token after the bearer there will be a space and there will be a token that's how you usually send the request rate then after that what we'll do is we're encoded so I can decode the token the decoded token equals JWT dot in one big dot secret right and this one store JSON it's Jason once again success Wallace message fine save this now get back into several J's up first get here and then it sad now we need to make sure that we say this is using passport requests for dot initialize require we can simply use our strategy that we used on free pass say this all right this has been restarted let's just get into here and then do a get request oh we need a token great ya know you can see that it's just sending hello test user which was the name of the user in case you remember you can have it clearly test user right so yeah guys this is exactly know we have our back end that's perfect right so a lot of things here we saw how exactly we could add new users to MongoDB we saw how to authenticate those added users we also saw how to send an authenticated request using a token now what we'll do is this is all running on the local server right on my local machine that I'm using here now to use a flutter application and send request to this particular application that we have here what we should do is we should host it onto some hosting platform write something like AWS or the one that we will use today here is called Heroku hiroko I'm using it mainly because it offers a generous free tire and you can create up to five free applications okay so first if you haven't already signed up just sign up for Heroku it let me open that up here I have already signed then signed up so if you are signing up as a new user you would obviously need to install the hero quickly there's something called Heroku plea okay and you need to install that on your machine now you have already installed that it's pretty much easy guys it's just as if they just give you a set of instructions that's it and then once you did that do that just click on create new app app name you can give anything flat or thin okay and then just create app okay now first you need to these are the first unit as I said you need to install the hero quickly if you haven't already just download and install this using this particular link here there will be separate versions for Windows Linux and Mac pick which is suitable for you and install it and then the next thing you need to do is follow the instructions here before doing all this we need to create something called a proc file case so I'll just do that this prop file is nothing but the one that will say Heroku what to run as soon as the app is loaded so inside the proc file I'll just queue okay save this you also would need to it would be better if you added a get ignore file as well and then simply and all the node modules for that the entire folder is signal modes say this fine closest again close to says well now simply follow the instructions given here first you need to Heroku login ok a lot of them no I just mean I'm already inside my project gig in it I just need to add this okay this is at it I don't keep okay resistant I shoulda probably added this directory to get ignored as well Heroku master okay once this is completely done we'll be given a web URL using which you can simply make the authenticated request to that particular URL now all you need to do is copy this link address like as you can see here guys I have I am not running the localhost if I just hit enter it will probably throw an error so I'll just see you can say hello all right so what are the routes that we have here without using any of those you had one more right - good see you can treat - food as well so now we have our app running on this particular URL endpoint so we can make requests to this endpoint in order to see how our app is performing so to get logs for this just run Heroku dog's tail till you will show you the latest logs that's it see now if you just send the request see it's just showing the logs right so yeah guys now we have hosted our back-end application that we wrote using node Express and on to something called Heroku and a database is stored on Atlas MongoDB Atlas so all we need to do is to create a flatter application that will make calls to this particular endpoint so that we can test whether we can use our authentication system that we created entirely from scratch without using firebase or anything so yeah let's go ahead and do that before that I will get some water guys just give me in five minutes all right guys know you as you can see here I have a blank floater application that's it now in order to make this to call our URLs that we just create a REST API endpoints that we just created I am going to be doing some modifications the first create a couple of folders called screens and one more thing what was that services okay and not only that I will be making use of package called do plugin called you you don't need to use this you can simply use the HTTP that comes with flutter by default I am just using this since I use this before and they found it easier but this is not necessary okay and I'll also use something called a flutter cause to show some nice toast messages and start both of this and inside the screens and create a file called login screen and here I'll go ahead and write the code let me just do a simple screen guys nothing fancy in this I just have a couple of text fields and a button maybe that's it okay you're an assembly to return calf or you you all right this is where we write thee service that law indicate our user case right no we have we simply have a login screen that has two text fields name and password and a button that says authenticate upon tapping this button we need to do something that will make the call for us right that's exactly what we are going to be doing here plus watch this this is where we would need this one date Hey no greater deal see this okay now I'm simply making a request to that particular authenticate URL and passing this name and password as data and for options I am just using the you are forming a encoded content type a form your encoder genetic and here I just need to call this particular function so notice that function name login you you fine if it is success then it will show authenticated that's it guys let's just run or before we didn't we can run this we need to ensure that this is being called instead of this homepage operating fine let's just run this on the mobile device and see if we are able to authenticate a user successfully guys all right guys now as you can see here on our mobile device we have the name and password field and an authentication authenticate button right let's just try authenticating with the user that we already have test user and just queue the password and then if I just tap on authenticate now it should connect with the URL and then do the authentication for us and if it's successful it should show Authenticator or some other message something like that right it will show authenticated that's it let's just try tapping on authenticate see it showed right it just showed an authenticated message right if you can see here did I you stop that your hand stop say post authenticate this is the request that we just made if we make a error maybe test you so okay this user is not that needy berate if they just tap on authenticate now watch what happens it will just throw up an error the debugger catches it but see authentication edit you just saw the toe straight authentication error user not phone us and we will do it again just watch the device user not for authentication field using on phone if it is some other wait if it's the wrong password or the deviation failed wrong password so our system that we how do they have running on Heroku works fine as well as you can see here it makes the requests or Authenticator equals all the requests that we made to smoke right so this is working fine now let's go ahead and try to do that Kate info the requests about the the information about the authenticated user we have our will adjust to the add new user and then go for getting four okay you say this get into it so we start out and then start writing code you would obviously need to surround this as well with the try-catch statement says like edit here but you can try that on your own right for now I'll just give the bad bones version here instead of log in jest right now I will just give a new mean if I just tap on add user it should successfully add that user rate let's just tap and see what happens successfully save you get a message saying successfully saved rate so if you get into the logs add user has been called and not only that if you get into the ddb you should be able to see that new user that got added as well and just click on refresh see as you can see here the phone user and the password be hashed salted version of the password is also added here so we are now able to create as users from you are now able to sign up users from the phone as well now you might want to save a picture here on the DBS well rate for this user now I for picture saving pictures and show exactly how to do that in the next video okay now we will just see the one more end point that we just created what was getting for getting for it we'll just go ahead and see how to write some code for that as well and then wrap up this video so just get to log in screen you touken adding an authorization token using do is a little bit different guys using using the default HTTP that comes with flutter it's pretty much easy but with do you'll need to do something like this do dot and I think it's something like this option start headers and then you need to specify that explicitly the authorization authorization equals V error and return a week once again this is a get request ID okay okay so for this four button to work we need to be authenticated first right and once you are authenticated the token will be saved onto this token variable which will then be used for our authenticated request to send our authenticated requests right so first I'll just authenticate if I just tap on authenticate from button it shows authenticated right now I have been authenticated and I have a token stored as well now I can use that particular token and it should show me hello plus my name right so let's just tap on get info hello phone user right so I just authenticated using phone user and it's showing hello phone user right now if I authenticate using my previous what was that I had a previous thing best use it authenticated using this particular user now if I tap on getting four hello test user right so we are able to perform authenticated requests on this particular endpoint the application that we just created so in this particular video we just saw how to create a complete application guy's a complete authentication system from scratch this was not using firebase we just have our own database we just have wrote our own back-end we wrote our own REST API endpoints using Express and not only that we hosted that particular back-end that we wrote on something called Heroku and from there Heroku was able to connect to cloud the database on the cloud and not only that we used Mongoose to define a particular user schema and we were able to save that on to that particular user schema and not only that we are also able to authenticate the users from flutter mobile application and we were also we also saw how to send authenticated requests from the mobile application to that particular system that we have running at the back home back and running SD backing right so yeah this is how you write an entire system from scratch guys now obviously as we get into deeper levels the stuff becomes more and more complicated but if you want to watch that as well kindly let me know it will be really like really boring guys but for those who are interested in system design then it will be really interesting as we get deeper and deeper you can build out the entire systems using I mean entire systems are being built all around the world using such methodologies guys notice one of the most popular servers that is currently being used and not only that MongoDB is also being widely used around the planet so yeah guys if you want to watch more stuff related to this particular way of development kindly you know I'll show you guys how to do this that is writing flutter applications without firebase writing our own server writing our own back-end and then writing our own mobile applications based on that particular packet this is how real businesses will want you to write applications case they won't ask you to just use firebase or anything this is how real applications are built real applications require a lot of you know patience hard work effort and coffee and you'll also you to go through a lot of headache and all that anyway if you found this video helpful kindly share it with someone or help them to and kindly hit the like button if you like this video kind ET like button it will help me a lot and kindly subscribe to my channel guys subscribe to my channel it's free just subscribe and hit on the bill icon so that you can see all my you can receive a notification each and every time I upload a new video in the future we will start going into applicant deeper into application real world application development guys rather than just doing you a challenges or just doing basic beginner videos will dive deeper into you way I mean dive deeper into application development both using firebase and without using firebase so yeah guys I'll be making a lot of videos in the future till the end of this year kinda subscribe to my channel hit the bell notifications icon so that you can follow these videos as well and kindly leave a comment if you get stuck somewhere in between this view this is a long video right can you leave a comment so that I can help you guys out and I would HIGHLY appreciate it if you could follow along with this video and try this out so that you can understand my future videos for my upcoming videos in a better way as well right so yeah guys see the like button and I'll talk to you guys in my next video bye

Channel: Raja Yogan

Views: 39,870

Keywords:

Id: 2D_76lkyF1c

Length: 91min 20sec (5480 seconds)

Published: Thu Jul 02 2020