Flutter Node MongoDB Login Registration | Flutter Authentication | Flutter Node Express Tutorial

[Music] [Applause] [Music] [Applause] [Music] how to sign in with backend uh you will get this error messages over here click on sign up change the screen if something goes wrong is this is not my email and this is kind of my password something else so you will get enter valid email and with the proper sign up you will get sign in screen then you will get this dashboard hello and welcome back to another exciting episode i'm your host mahesh kari and you're watching me on youtube live today we are going to create kind of our login authentication with the flutter and node mongodb as a backend so let's deep dive into it so you have to have these things available inside your system flutter sdk android studio if you are on windows xcode if you are on mac uh node.js of course i am using node.js as a backend on docker we are going to use docker for mongodb for installation of mongodb you can use amp lab or order it may be so it's all up to you after that postman for testing restful applications and the mongodb compass if you want to you can download this thing and vs code of course i'm going to use visual studio for as editor you can use android studio as well so let's deep dive into it so open your terminal and check for node if you haven't got it already you can grab this from here on node.js.org current version is 14 i guess and stable version is 12 okay here so you can grab this from here after that you have to have docker available so check for docker hyphen f1 version and you will get your current docker version if you haven't got it already so you can grab this from here dockerhub docker.com or you can search for docker for mac docker for windows like this and i have postman available inside my system if you control okay uh you can install docker from here it's 12 o'clock sorry it's it's new version of catalina okay from here [Music] and from docker hub you can install your current docker version from here i guess yeah from here after that um close this up okay here we go and now the next thing is we have to have flutter sdk available i know you already have it guys but even though you can grab this from here for mac os linux chrome os windows associate so open your visual studio code okay and inside view uh i have few extensions available inside my system uh that is flutter flutter and awesome snippets awesome floor tests you can use it if you want to so let's get started inside view command platter simply search for flutter new project let a new project hit enter name it whatever it may be front end front end is better i guess and on desktop i'm going to use i'm going to create new folder on desktop or name it um full stack or auth will be better and in here i am going to create this thing okay now i have to use i have to create another window for my back-end stuff so okay it will take some time now in here you just need to change your directory to desktop and inside auth so i'm going to create my new folder mkdir back end [Music] backhand and open code inside that will be better i guess okay let's open it okay so this is my flutter thing is running here and this is my back-end stuff i'm going to create here so inside terminal or npm init hyphen y okay i got my package.json available here now create new file index.js uh i'm going to install few plugins sorry extensions npm install express [Music] of mongoose okay then body parcel and the last one is i guess so i don't know let's save this thing and in here i'm going to run this thing okay it will take some time it's fine if you haven't got on node 1 already so you can grab this like sudo and pm install as g node 1 uh so you don't need to restart server each time so it's all up to you if you are on windows you don't need to fire sudo okay just run as administrator that's it so after that i already have it nordmon hyphen hyphen version let's see okay i have it not much so i got my all extensions all packages available now let's start so cons [Music] space equal to require express cons type equal to require sorry express consport let's define port to 8080 and process dot env dot port you can guess i generally use semicolon you can use it if you want to then app.listen your port if something goes wrong you can check it out here if you want to console.log simple running on port running on port that's it i guess now in here i just need to create few folders our models routes and that's it i guess in here i'll create a new file user.route.js and in here user.model.js [Music] that's it i guess okay uh so [Music] cost is equal to require mongoose and i have to create schema so const [Music] schema equal to mongoose dot schema and the next thing is i have to create a new schema so in here you can define like your order it may be like i'm just going to use my email as a string and password as a string [Music] we are creating back-end stuff before proceeding so const new schema equal to and in here as usual model dot exports record to mongoose.model and just need to define the name of model whatever it may be and your new schema here that's it i guess that's it and in here i just need to grab my express again so express equal to require express i just need to grab my router over here so i can export it now simply express dot router and here just need to route use router dot gate for testing if everything goes perfect then request response and call back simple console log order it may be running hello watch for now for testing hello world that's it and just you simply need to export this thing just uh route that's it so after that inside here in legs you just need to grab your course and just need to import this thing and use this thing app.use your course and the body parser cost your body passer to require body parser where is that body parser and again app.use your body password dot url encoded and where is that url included and extended will be true okay perfect and the next thing is i'm using json so app.use um bodyparcel.json that's it and we need to create two post methods but before that i have to install my mongodb so make sure you already have docker available start this thing uh you will get this little icon over here if you are on windows you will get here on bottom right corner so after that you just need to talk a full hit enter okay my docker image is available now you can run this thing but before that this thing okay docker run hyphen have a name i have to create container so i can run it or name whatever name you want to give it like my baby will be better for now and in detachment mode i'll publish this thing to 270177 is default port for mongodb and the next thing is colon latest that's it i guess um you can hit enter i guess yeah so now you can search for docker ps if you get you will get this thing so docker is running now so that's it we don't need to check this thing okay after that just simply grab your mongos here in main index file and [Music] in here you just need to use mongoose.connect method to and pass the url mongodb colon slash localhost colon270177 slash name it your db name my db is better i guess for now so you can use anything here there's your database name okay so let's see save it and fire this command node bomb or node space index and you will get this suggestion over here you just need to copy this thing and paste it over here you have to and you will get this another [Music] user topology true that's it you can you can use semicolon as well if you want to in cs5 pattern okay that's it for now now we can proceed to create post methods i'm going to use uh going to create post method for both of them for registration and for login as well so router.post and in here slash sign in will be better signing again request response i generally like to work with typescript but for now it's fine our request dot body dot email will get email and password so we just need to need to create user sorry so we'll create a new user okay so const user and here the user pass your email colon your email and your password you can encrypt password if you want to body dot password so and in here user dot save if then we'll just log this thing that we got our user if you get error then you can check this over here if something goes wrong and you can pass this in error and rds.json your error order it may be else or you can grab this over here so this is the standard process yo whatever it may be how user so that's it for now but before that we have to check this thing uh that user is available or not so this is process of sign up okay so uh while registration you have to check this email is available or not so uh we'll see so the post method and for both of them is almost same for login and registration so for signing i'll just use sign in i just need to import this user here const user equal to required user dot slash model slash so that's it so we can visit over here and the next thing is in signing you just need to find that user dot find one will be better uh if you get this email request dot body dot email then and with password as with well request dot body dot password and in here you will get error we can use async awaiter so it's all up to you but uh this will be better for now uh you will get error or user if we get error then again pass error device error otherwise else here you just need to [Music] need to proceed for okay you can you can cut this thing i don't need to use this this thing as well okay now in here you can return the user okay that's it for now and while sign in method and just you have to copy this thing and paste it over here okay so we will find that email is available or not if you get this email so then you can grab this inside here i guess okay if the email is available okay then you have to pass the message over here that email is not available like this message will be mail is not available right you just don't need to write this thing and in here if you get error if you get er okay in here if user is equal to equal to null if user equal to equal to null then only you can proceed this thing otherwise you have to this code is available on github as well okay don't worry about this so i hope you understand guys means we'll check error if you got error the past error else otherwise we will check that if user is equal to equal to null if user is not available inside your database then you can create a new user with that email id file registration if you you don't get a null thing so it means there is something with the same email id so you can pass this that email is not available that's it for now so uh let's get started you just need to grab this thing inside here so app.use your path and require this thing so route here and that's it i guess you'll get error no i'm not getting it it means it's working i guess so this is my flutter default thing this is running on this emulator okay this is running so i'm not going to use this just cut this thing for now and inside here postman i'm going to use localhost colonytt slash signing and in headers context type will be sorry content type will be chase application json and in body you can password it like my email will be um gmail.com for now and my password will be my password my shout out to three which is not my official password first and in here same sorry okay let's try this you'll get this error okay it's completely fine on sign up is not available sign up sign up let's see why this is not our sign up as a genuine sign up okay we are working on post method so you just need to use post method you will get this okay now try this again i got my because email is already available there so if i change this to sign in then i have to get my user back with id okay it means it's working so let's get started with flutter thing so my back ends api is ready to use and in here i'm going to import my material thing material. void main and in here i just need to run my app and my material app material app and before proceeding you just need to remove this banner so after that simply inside home i can grab my login page login is not available yet so i have to create a new login screen over here dot and the next thing is it will better if i use sign in sign up sign in and another thing is sign up sign up dot dot and the next thing is we need a dashboard dot dot that's it i guess in main i'll use sign in will be great and in here we will again use the same thing import my material and will create a stateful widget a stateful is something that is changeable stateless is static so in signing i just need to create a new scaffold over here so a scaffold that provides a white page white blank and in here just need to use a text for now like hello world or sign that's it so text is small and you can use this yellow one over here to containerize to use padding or center or whatever it may be it's all up to you how you use it but for now i'll use this thing and i know i'm why i'm getting this error but it's fine we will find this thing [Music] while we are getting this error okay cannot find this okay let's see now what happened okay in main i have to import this library and sign in method [Music] and sign in okay written written written i have to use what's happening okay okay let's see okay signing it's working now the next thing we have to install few things inside here like we are going to use google fonts uh okay where dependencies here fonts and the version is i guess 1.1.0 uh http contains 0.19.2 i guess nineteen point two zero one twelve point two and the next thing is so my flat svg i guess oh version will be zero point ninety point zero i guess let's see i'm not pretty sure you can check this thing okay close this up and uh you need to do something again i'm going to use image folder for using a switch so you just don't comment this thing and in here that's it now create images folder of images over here that's it and i need to create top dot switch yo here so you can grab this from here search for gate waves dot io and gateways g ticket sorry not gt dot i okay got it now you can get this thing from here like this it's not cool but like this and grab this from here just you need to copy this thing and paste it over here where is that my top dot svg i can minimize this thing my backend stuff to see this again and again okay that's it for now and after that i'm getting error okay now i can proceed okay in here remove this container completely and just create a stack like this in stack we'll get a children over here and we'll use position text will be my svg i contains my images slash top dot svg and you can define width over here like 400 and your your height if you want to will be 150 is better i guess and in here you can define a position like top 0 will be better i guess let's see how looks like refresh this thing i'm getting error because of this i guess what happened [Music] perfect yeah perfect okay i'm not getting my top dot svg so let's see what the mistake i have made top dot svg okay here we go inside images suj okay it means i made some mistake over here [Music] okay got it i don't know why it's fine now in here again i need to use a container i guess which will be better container which will alignment alignment dot center will be better for now and in here i'll use a column so we can use a multiple things in column so cross axis alignment will be cross axis alignment dot center and the main axis alignment will be top will be start okay and the next thing is we have lots of children's in here so we just go to use a text like sign up or sign it okay you can use google fonts here like this just need to use this thing style and your google fonts dot pacifico is my personal favorite where i'll use my font rate will be bolt and the next thing is font size will be 50 i guess that's it for now and color of us just need to define color over here of color is blue you can use anything color it's all up to you so this is my signing but we need to use a size box so of height will be 200 for now i guess will be better and let's see how it looks like not better 150 is better so yeah i got it now you can use text form fields over here like this text form field contains uh hint first of all right where i'm not getting hint i need a decoration input field decoration okay wait input decoration sorry input decoration contains some border radius border will be outline border outline input border contains contains so [Music] i don't know why i'm getting this error okay outline you put border and the next thing is order radius will be my border radius not circular for now i'll use a 16 will be better i guess oh 15 order it may be let's see how it looks like okay quite better and i need to define a color i guess [Music] okay border side i'll get a border set over here border side in border side i can't define my color which will be my colors dot believe will be perfect okay that's it i guess okay that's it but uh we have to take care of border because there are four types of border um if you get error focused and the normal border so first of all we need a padding so in here padding of 16 will be better again and let's see okay this is better and again you need a size box of at least 30 over here so use 30 for spacing between these two things 25 i guess is better and now we need to use enable border here and grab this thing for four times so one two three and four the next thing is sorry okay [Music] this is perfect is now there are four types of border as i said you name focus border the next thing is error border and focus error border like this now save this thing and make sure that you have these four borders are there so if you get a it will be in red or the next thing is you have to use i don't know why i'm not getting hint hint text okay and text will be simple email for now okay enter your email will be better enter email and the next thing is i need to wrap this thing inside form my column okay so wrap this in container and name it form it should be better and i need if i'm using form then i have to use my final form key which will be type of global key contains some form state i guess like this yeah and you just need to use this thing over here inside phone so it will it use for validation okay so now you can use your user over here so you just need to create a new user in here like user dot dot so let's create a new class [Music] class user contains a string string name sorry email i'm not going to use some user name string password and why i'm getting this error i don't know dot co it's two string we'll see like this okay we have to use same column and in here this dot email and this dot password so yeah this is perfect this is my email okay same column over here now you can use this anywhere like in sign in i need to import this thing to use this thing so user user for first time it will empty so like this and with using my yellow but i can import my user so yeah this is perfectly ready to use now in here when you use when you use my text file you just need to use um what was that controller text edit controller and and in here text will be your user dot email and grab this for password as well so this is perfect for now the next thing is on change you just need to save this thing and this dot user will be your value [Music] value like this and pass value here here's your semicolon [Music] value is a type of string and this dot user this is user dot email which is perfectly fine now the next thing is i guess controller huh if you get error then what then you have to use a validator and in here you will get a value of course and if something goes wrong then you have to check this thing if value is empty then what then you have written something like enter something right but otherwise you just need to you can use a validation email validation as well you can grab this from here like search for email validation in flutter that's it you will get this very first link i guess over here uh this one second link on stack overflow and there is a rejects format like this so you can grab this thing from here copy this thing that's it so if this is empty we'll pass message otherwise if we if this is value okay and in here if we don't find this value this is this is pattern of email okay so if value is equal to this then you can return nothing because everything is fine right but otherwise you can simply return into valid email so this is perfectly fine i guess okay so email validation is done from my site okay the next thing is now i have to grab this for password as well so copy this thing from padding to the end of padding and grab this for password but we don't need this regex you can use this rejection password as well but i'm not going to use this thing for now because we are running out of time so enter something or otherwise otherwise return null so you got idea right now enter your [Music] password here and the next thing is we have to use a flat button so again padding as usual and padding off page inside dot all 16.0 and contains child of black button for now but flat button is inside my container so i can define my height and width over here like this height will be my height will be 50 40 50 will be better and my width will be 400 as usual i guess and in here i have to define my child is my flat button so you can on press you can perform your validation like like your form key we have a form key dot current state dot validate okay so if validate then fine but otherwise otherwise otherwise if validate then we have to perform actions over here like print okay for now if if everything goes wrong everything goes wrong you will get error and everything is right then you will get this okay here else simple not okay else range not okay okay for now i have to define my child text show here inside my button like sign in oh and you can define color as well like text style text [Music] text style contains a color which will be my blue color which is fine and the background color of my flat button is i got it this is my color stored blue and the text will be white this thing will be white so let's see how it looks like okay we are not getting that rounded borders so for that i just need to define my shape i guess which will be rounded rectangular border i guess okay this one and in here you can define border radius of border radius circular will be my 16.0 again lots of time i use 16.4 for everything means if you click this you'll get error but i'm not getting the red borders for now so you you have to use right over here on error error border and focus letter border which will be red and otherwise in here again this is right so let's see how it looks like like this this is better but if we enter something then you will get this enter valid email option okay uh message level the next thing is sorry i'm pretty nervous because i'm not used to create this kind of um crash course this is my very first time on flutter actually so i'm extremely sorry for that so if you like my video please consider to subscribe of course after that we can proceed with http also let's see if we have http available inside here okay where is that my http okay i have my http available now you can grab http here you just need to import this thing http as http so now we can use this thing in here so we have to create a future same method over here it should be type of async right and we use async here like injuries we use here somewhere so okay future and in here i'll use my http future await http dot post and http colon slash slash local host colon 8080 slash sign up signing okay in here you can define headers which will be type of string string and pass your message here which will be context type context type is my uh applications dot json and you have to define a care set gas set like this i guess gas set like this i don't know let's use this thing this thing is better utf-8 okay and the next thing you have to define a body thing over here whatever you want to pass again define this string string and your email which will be user dot email and your password which will be user dot password and you have to wrap this thing in single quotation this one and this one so this is perfect i'm pretty not sure about this thing that's it but let's see so for now you can use wear over here for capturing response and what is that i'm getting this thing okay [Music] same colon i guess yeah got my semicolon now you can print this thing over here like this arias dot body actually so you get so let's try this thing how it works in debug console if we click here first of all we need to write my email properly so gmail.com and why i'm getting this deepak at one two three it's name of my father okay i got this response okay means it's working so first sign in i used this okay the process i have to use that text there so already have account or not have account like this so if you already have account then do this otherwise do this so in here just need to use a rope i guess contains lots of children's and in here in here i'll use my text as usual contains not have account or not have account then what then style text style contains a color which will be black we don't need to define this thing black and font will be pulled font where it will be pulled and we have to use padding so wrap this inside padding so from where is that from left from left we'll use 65 from top 20 0 0 let's see how it looks like yeah perfect and the next thing in is grab this okay i just need to wrap this here [Music] before that row okay so this is shared off and this is simple text like this yeah perfectly fine now copy this thing here again and this time i'll use my color blue which will be clickable so you can trap this in sign up okay and you can grab this in container me sorry ink ein was something like i'm not sure let's see i'll get inkwell was equal so equal that helps you to make text clickable so i can use on on tab over here so on tab i'll use navigator navigator.push method sorry [Music] push context not pretty sure what i knew material page route and in here again i have to write this in context and name of page you wanna route on so if you don't have account then we'll use sign up here that we don't have right now new symbol up here now so yeah this is perfect i guess it's one o'clock oh my god it's one o'clock yep one two three one two three perfect now we need to what is that okay now this is perfect why getting this error okay now no it's fine sorry extremely sorry for that so uh you can copy this thing and just simply paste it over here and sign up but this time you have to make few changes over here like sign up [Music] sign up in here sign up i'm not going to use change all occurrences because there are lots of stuff i have to take care of so sign up simple this is also a sign up okay so in here i have to use sign up again my heading and after that this is perfect this is same as usual enter something your password and in here i don't need to use this okay not okay instead of that i have to call this save method i guess yeah okay and in here you just need to use sign up again sign up again and the last thing is already have account already have account then we'll use sign in here okay so now we can import from here import this library so yeah this is perfectly fine you sign in over here yeah we are ready to use now in here sign in i just need to use save method over here over here that's it i guess now let's see how it works so if i click here on sign up i'm getting error rights [Music] okay okay i got it i need to import signing over here on sign up just import this thing save this thing okay if i click on sign up i'll get sign up page where my car is my email id gmail.com and my password is mahesh at one two three sign up okay i got this id yep but if i get this id i have to navigate to sign in page okay so that let's see how we can do this so grab this thing navigator.push okay and inside save method that is my same method this thing just need to route the page on sign up now uh dashboard i have to create dashboard here rd dashboard i don't have a dashboard right now so i have to create this thing over here it's almost done dot dot what happened okay sorry it was there dashboard so again import material dot dot and in here stateful widget will be dashboard and in here use scaffold contains a child of sorry contains a body contains text text dashboard you can use style as well like text style text style will be background of textile i don't know i don't need a bike now i need a font okay we can use google fonts as well google fonts dot passive echo [Music] contains font weight okay dot bolt and the next thing is font size will be 50 as usual and the next thing is color which is color start blue again and you can wrap this in center if you want to and now we have to import this dashboard here okay i'm not getting suggestion d a shpoi rd dashboard [Music] i have to import this manually okay let's see [Music] dashboard okay sorry it was spelling mistake i guess so now in here while sign up i just need to navigate this thing too signing okay so yeah we are great too okay okay if once again oh this time we'll use mina mina at gmail.com and we'll use mina9123 sign up okay we got it yeah we done it so thank you very much all of you guys for being with me supporting me all the time if you like my video make sure to consider to subscribe and let me know inside comment box what you want from my site whatever it may be springboard.net cover whatever it may be blazerweb assembly there are lots of cool stuff i used to work on i don't have language barrier if you are working on spring anything just let me know laravel class django i'll make it for you guys i promise just inside comment box please let me know what you want from my side so hit that thumbs up thank you so much bye bye see you in next video [Music] you

Channel: Mahesh Kariya

Views: 11,573

Keywords: flutter, flutter node, flutter node mongodb, flutter node js, flutter login registration, flutter authentication, flutter node js login, flutter node js mongodb, flutter tutorial, flutter fullstack, flutter node login and registration, flutter node express mongodb, login and registration using flutter and node js, android apps in node, cross platform apps

Id: 423ChmDeFso

Length: 65min 4sec (3904 seconds)

Published: Tue Oct 27 2020