Build a Secure Realtime Chat App in React Native [2] (tutorial for beginners) 🔴

all right hello everyone what's up now just developers how is it going today so uh in this video we are gonna continue uh the previous clone that we started and here i am speaking about signal clone we are gonna work on the back end today because the front end is already done uh so if you're just if you're new on this channel uh to this video uh wait a minute minute i'm gonna explain everything that we have done in the previous video and what we can do uh today so uh the idea is to continue the signal clone and uh and implement the backend using aws amplify and admin ui so uh yeah here we go more specifically today we're going to speak about the admin ui and how to integrate aws amplify using admin ui how to create the backend using a visual interface and how to set up everything there starting from authentication database storage layer and much more then after that we are gonna implement authentication in our application so that only uh authenticated users will be able to access our signal clone because that actually makes sense uh without an account you cannot send messages you cannot read messages so we're going to take care of that today and we're going to implement all the authentication steps starting from creating an account signing in confirming on your account with a code on your email also forget password flow and um yeah other flows that are important for uh for the authentication system and stay uh yeah you'll you'll see how easy this is gonna be it's gonna take us probably like five minutes to set up all the authentication flows which will which always blows my mind then we're gonna work on our data layer we're gonna start by modeling our database um everything that we need to keep in our database to power uh yeah to power our signal clone um that's also going to be interesting because we are going to implement uh the real-time messaging and that's also something uh that you're gonna learn today and uh the last thing is uh implementing data store in our react native application vet will take care for querying all the data from our database from the previous step it will also take care behind the scenes without us even knowing it will take care about on-device caching and this will allow your application to work even if you are not connected to an internet and because of that it also has some data synchronization from their own device data and data in the cloud so for example if you send a message when you don't have internet the message will be stored locally on your device and once you gain internet it's going to be sent to the cloud and saved in our database um yeah this is the plan for today uh very excited we're gonna introduce some new features like automatic uh connection between the authentication layer and the data layer that's going to be an interesting part that we where we will use some aws lambda functions to to manage all this logic so i'm pretty excited about today's build uh how are you feeling guys are you excited so if you are new on this channel thank you very much for watching hi my name is vadim and here on this channel we are learning full stack mobile development uh by building the projects by building the applications that you probably use every day such as whatsapp uh what else instagram twitter spotify and other 16 applications you can find on the channel so um yes if you get value out of this val this video don't forget to subscribe to the channel turn on the notification bell not to miss any future videos and here we have some coffee thank you alexandra [Music] all right guys so this video is brought to you by badun bhaivan nodjaz development academy which is um yeah which is our new course that i'm working on at this moment uh yeah i'm putting all my experience and all my knowledge that i gain throughout the years working at startups working at amazon and all this experience is bundled and put together into a full stack mobile development course where you will [Applause] the course will be focused mainly on one big project and that big project is a social media app based on the instagram so it's gonna be an instagram clone where we will be able to get in-depth to implement a lot of features that we do not have the possibility to to implement during these free youtube videos just because on youtube we are kind of pressed by time so that's why i decided to to put all these features uh extra features and quite advanced features like i don't know pagination in-app notification how to publish and deploy the application on market let's say following system which is a quite complicated system to implement yourself i remember me struggling and researching what is the best following system when i first implemented it at my startup so we're going to cover everything in this course and much more so um yeah you are gonna where is it you're gonna master the tech stack of the future which is rack native and aws amplify for mobile development and yeah this uh rack native is used in a lot of application in production radio applications so there is a lot of demand for mobile developments uh knowing react native you can uh get the course during the next two days at academy.notjust.dev and the doors will be closing on 23rd august where yeah at the moment two more days and at the moment this is the pre-sale period so the course is not ready yet you uh the first modules will be released in september so you will be the first ones to receive these models if you join now during the pre-sale period and also you get a bonus 50 discount um when buying it during this pre-sale period so hopefully [Music] i will see you soon during our first meetings with the batch zero for the full tech mobile developer all right guys so uh back to our video back to our uh tutorial which is signal uh if you want to follow along you will need a couple of things so first of all you will need the asset bundle which contains the dummy data images icons with this pdf presentation uh and some code snippets that we will use and you can get the bundle at assets.notjust.dev signal another thing that you will need is an aws account and amplify cli setup which you can get following this url all right so uh for those who didn't follow part one uh yeah this is part two of our signal uh series and in part one we have implemented the ui uh you can find this video here under this url or on the channel uh however if you didn't follow the previous video and want to focus only on the back end that's also possible and i'm gonna show you i'm gonna start from scratch by cloning the repository i'm gonna show you where um yeah here is the link for our ui branch repository where we will keep the code from the first video so let's go ahead and clone the um yeah clone this repository code yeah let's go here and while i'm gonna run the [Music] to show you a demo we can have a talk there so first of all let's yeah let's copy the url and go open a terminal 16. this is the 16th clone so here let's do a git clone let's paste the signal clone uh oh my god no no no i did something wrong here it dot git and i'm gonna rename it because i already have that folder signal clone backend all right so let's open uh go inside the signal clone back end clone back end and let's open it in our code editor in my case that's vs code yes trust it and here let's first of all install all the dependencies install all right guys so while this is installing let's have a look at the people who are joining us live hello guys how are you today how is the friday uh nevada is saying hey bro nice work keep it up thank you very much uh get private uh get private is the repository private no it should be public yeah the git repository is public you can find the link in the description you can find the link in the pdf presentation that you can that you should download [Music] the bug coder so let me check if uh yup it seems that my packages have been installed and i have a lot of packages with vulnerabilities but who have has time for that all right so now let's run npm start to start our development server and here you'll see the the expo page opened in your browser from where we can run our application either on an android device or emulator on ios simulator or even in browser so um yeah you can go ahead and run it on android device or emulator i'm gonna run it on ios simulator and also if you have expert go application on your mobile phone you can just scan this qr code and you can run the application without even connecting the phone uh to your computer with the cable so it's gonna work over the air welcome kimbawa how is it going yeah i know you are from kampala uganda i think we have visited your place previous in the previous live stream right hello is you from india bangalore hello uh yeah let's wait until our application is building uh hello james from africa how are you today will you do videos using react like a website um most probably we will do but i don't have it planned in the very near future so might be in a couple of months we'll see still have some plans for um mobile applications and i gotta work a lot on the course that i'm building because it's it contains a little the course contains like crazy amount of information like it's gonna have like probably more than like 30 to 40 that's what i expect uh of content but as usually uh what i expect uh the end result is double so it's probably gonna be like 60 to 80 more likely hours of content in that uh in the course hello momo thank you very much for the donation uh that's so nice of you you are amazing no you are amazing thank you thank you very much so here we have our application uh build so as you see the first screen uh we have a home screen which will display a list of chat rooms of people who are you are are already chatting right so here you can press on a person and you will see all the messages so one uh yeah what else do we have here i think that's that's the main parts that we implemented here so the interesting stuff is today to make everything that you see here working uh right let's put it here and so yeah we can actually get started audio off mike muted mike muted uh [Music] one two three one two three hello hello hello can you hear me guys yes voice is now there it was muted oh weird weirdo i would say yeah but basically uh you solve the demo that i was showing here and yeah the next steps is to get started and roll the intro [Applause] [Music] all right so the first step is to get started and create our amplify project so to do that let's open the aws console so i'm gonna go here aws.amazon.com and let's sign in from here let's search amplify amplify and um yeah from this menu or you might see another welcome screen if that's your first application you'll press like a new application from there we can create an app back end that's what we need and our app name will be a signal clone let's confirm deployment and we will wait a couple of seconds until amplify sets everything up in the cloud okay so guys it's like network glitch yeah most probably it was a network glitch from my end okay look i have an a microphone arm i can do like this [Music] and hopefully the sound is better or is it too much i think that it's too much like this is better okay how to conduct you direct um find me on social medias you can find the links in the description linkedin instagram or join the discord channel we can talk there all right can you make a tutorial on discord clone um yeah i think this core clone is already in our list some other people have suggested it so when we're gonna start the next project we are gonna have a a poll and you'll gonna be able to vote and we have democracy right right here i'm doing whatever you guys want most of the time sometimes uh i have a better feeling like what's best in terms of technologies and stuff all right so uh meanwhile our amplify project have finished building i'm gonna zoom in a bit and if you scroll down a bit you'll see here open admin ui so let's do that right now and here you'll see the admin ui dashboard of your backend here is where you'll manage everything that is related to the backend and also you will manage the data itself so for example uh the first tab is content on this tab here you will be managed you'll be able to manage the actual content uh in your application for example you'll be able to see all the users you'll be able to change some user data you will be able if you're building i don't know some kind of a blog application from here you you will be able to [Applause] create the blog post to write them here to edit them here and so on and not only you but also any other user you can add advent here you using the user management tab so the advantage of admin ui is you can collaborate on projects with people that don't have an aws account so usually i don't know like support people or yeah customer support or content people who are responsible for the content they're not technical and you wouldn't expect them to have an aws aws account so they will go to some database there you would not expect that you will just invite them here and as you can see even the domain is different so it's separate from aws in this regard yeah this is the advantages of admin ui and another advantage is that you can uh create and set up the things here so if we go back to our presentation our first step is to set up authentication to do that let's open uh the authentication tab here and let's start from scratch uh here we will configure some some stuff um you can add different login mechanism like login with your phone number and you're going to receive like um a password like a temporary password one time uh you can also log in with facebook google amazon sign in with apple and so on for the purpose of this tutorial we're gonna stick to only email um in the course in the full stack mobile developer course uh we are also gonna do uh other authentication methods like with social providers and also with a phone number because there we have a little bit more time multi authentication we don't need it at the moment so let's configure yeah i only want to uh open the password protection settings and uncheck these uh rules because um yeah they are too much uh for the purpose of this demo that the password should contain everything so i'm gonna keep it simple like this and press deploy basically everything is by default except the password settings so right now in your top corner here you should see the deployment status in progress so let's wait around two three minutes until it deploys and then we can move to the next step or not to waste time we can actually move to the next step and start with data modeling let me have a look some comments and then we are going to continue with data modeling all right so a lot of comments a lot of comments [Music] any react.js clone projects soon i see a lot of people once react jazz we might do something but not in the near future don't take my word for it um your stream is stacking why is it the case is dropbox eating my resources now i have a dual pc stream like it shouldn't come on dropbox close what else i don't know can we create custom authenticating authentication screens in aws yes definitely we can create custom authentication screens and we're going to get there but in our tutorials here on youtube we are using the default screens that amplify provides and they're very very good like they are doing their job and you can use them for some mvps like many mobile viable products for for some prototypes for some uni projects for some portfolio projects however in most of application you will need custom authentication flows with custom design so that's also possible but um yeah that's also covered in the full stack mobile developer course which you can find in the description below we had um we implemented the custom authentication screens but they were a minimal version so basically uh login with google and we did that in that 12-hour livestream called vcrypto on the channel if you look we did it there all right so as i said the next step is data modeling let's create yeah let's model our database in order to have to yeah in order to create it so i'm gonna open the project i'm gonna zoom in a bit and i want to open uh a file that we used as a dummy data so you can find it in assets dummy data and for example let's say users so here is what information we had about a user right so that's actually what we will need uh in our database so id name image uri status let's go here let's go to our data and add a model the model name will be user it has a default id that you cannot change of course so let's add a field we need a name name it's going to be a string and here on the right we can say that the name is required let's add one more field image uri it's going to be a string because it's going to be a url to an image but it's not required what else status yeah let's do status and there's going to be a string also not required yeah i think for the users that's everything that we need let's open the chat rooms this was an array of chatrooms basically what you see here on the left on my emulator it's a room uh that contains uh different users and it can contain one zero one two three four or infinite number of users we did that in order to support in future the creation of groups so um yeah that's why users is an array of two users who is part of that group it also it also has a reference to a message and it keeps it as last message and we do that in order to be able to display here on this screen right away what was the last message there and it also has like the number of new messages uh which are displayed as a dot here as an indicator so what do we need there we need definitely new messages this is an integer so first of all let's create the model chat room we need new messages this is going to be a integer and it's not required because if it's not supplied we can infer that it's zero and also it's going to have as i said besides new messages okay it's gonna have a last message that's in order to model the last message we need the message um we need the message model so let's open chats here in our dummy data uh and have a look at how what data should a message have so basically here i highlighted one message it has id content created ad and user okay let's go ahead and add the message model so it definitely has content because that's the message that you're actually sending it's going to be a string and it's going to be required uh regarding created that this is a field that amplify will automatically create for us so we don't have to specify additionally created that because it's taken care by for us the same thing for updated these are fields that are automatically managed by amplify and created at as you can imagine will contain a date at which the model was created and updated that at which it was updated logically i think so so as i said we don't need to model and create that it's automatically and regarding the user this is a relationship with our user model so for that reason user message yeah we have to create a relationship between message and user i'm not going to create it into the message and i'm going to show you why because and i'm going to create it in the user let's add a relationship with a model message and here we have a couple of relationship model uh there is one user to one message so that means that a user can have can send only one message now i think we want a user to be able to send multiple messages so one user too many messages that's correct so one user can send many messages but uh why it's not many user user-to-many messages is because one message is owned by one user one message cannot be sent by two users at the same time so let's save that and by adding this relationship here one two and two words messages if i scroll up i see that it automatically added here a user id and the type is a relationship source so by having a user id in our message we will be able to get the reference to the actual user and get his name his i don't know avatar and so on so yeah that was the one to many relationship between users and messages now uh what other relationship will we have we will have a chatroom with message relationship and a chatroom will have an id to the last message so chatroom last message let's add the relationship here towards message so one chatroom can have only one last message so in this case is a one to one i mean one chatroom can have multiple messages we're gonna do that in a moment but here i'm speaking about the last messages so last last message let's save and now the relationship that will hold all the messages in the chat room so the chat room will have a relationship with a message but this time it's gonna be one chatroom too many messages because a chatroom will contain a lot of messages like zero one two three a thousand a million so this is the relationship that we will use for the actual messages so we covered one-to-one relationship for the last message because one chatroom can have only one last message we cover one-to-many relationship between chatroom and messages because one chatroom can have multiple messages but messages belong only to one chatroom this is the difference yeah this is why it's one too many not many too many all right the next relationship it's a bit more uh compliment it is a third one basically so um now we need to add the relationship between chatroom uh and user the relationship between chatroom and user let's think a user can be part of multiple chat rooms so basically if i look here from a ui perspective i'm part of one two three four five seven like chat rooms right so that's uh like on the user side we have a many on the chatroom side the chatroom side can the chatroom model can also have multiple users because the chatroom for example this one contains me and elon musk so here we have many on one side and many to our side that's why we have many too many relationship from a chat room to users [Music] so chatroom can contain multiple user and a user can be part of multiple chat rooms relationship name chatroom users perfect let's save and this automatically added a chatrooms relationship here which is as well many too many do i want it to be i think i will do it with capital or no i'll leave it like this it's okay so let's think if we have everything that we will need so chatroom has all the relationship last message message start from users id name image your eyes tattoos anything else id content user id okay i think i think that's it so if we'll need anything else we are gonna uh we're gonna have to update it which takes some time and i don't want to do that but let's save and deploy uh deploy and right now we have a new deployment in progress hopefully the first one has finished in my case it did if not like wait until the first one deploys and then start the second one now we're just gonna have to wait until this deployment is finished and then we will get our hands there to weave the code everything is just getting started so surab thank you very much for your kind donation how are you doing um what was the message message retracted let me know what was your question all right where is it aws is much better looks okay thanks uh so for everyone who is just joining i see a lot of people are coming by let me give you a short introduction so today we are working on the signal clone and this is the second video in our series where in the first part we have created the signal ui which you can see somewhere here which contains like a list of users where you um which with whom you have messaged messages and if you press on one you will see them message the screens with messages and you'll be able to send them message and uh they will receive it in real time so yeah that's um that's our ui and in today's video we are working on the back and the on the back end to implement everything to um yeah to work with a backend to save that into database to protect everything with authentication flow uh and we're gonna do that using amplify and admin ui uh we which is admin ui is a user interface uh tool to create manage uh and yeah to create and manage backends for your application so in these videos we are gonna set up authentication so only register user will be able to send messages uh we're gonna implement the creation of account saving it in the cognito and also in the database and all the flows that we will need there after that we will model the data layer and when we have a data layer we will use datastore to query all the data to query all the messages to save them in database and also very important part is to implement the real-time messaging features so that every time you'll receive a message your application will automatically render it on the screen without you having to i don't know restart your application for example so that's that's the plan for today we are at the setup authentication and data modeling and right now we are waiting for the changes yeah we are happening here i saw nader debit tweeted about your course really excited to join yes rob we are very thankful to nader he was one of the supporters from the beginning from the get-go so he always retweeted my content even when we didn't know each other now we are in good contact and i love what he is doing he was for people who don't don't know about nader debit he was working at aws as um in development relationships and also here a couple of years ago he was doing a lot of content in terms of react native and also he has a very nice react native book which i highly recommend and yeah he he gave a testimonial about the course that meant a lot to me i was here hello is it possible to query many too many with graphql for example yes we are gonna do that today we are gonna query many too many um yeah we have a relationship here many to many and i'm going to show you how to query uh the data about it we are going to use data store for our for querying it so i see that our deployment status is success and amplify suggest us to pull the latest changes in our source code for that you will have to just copy this amplify pool which already includes the id of your project yeah this is the next step in our in our case here if you don't have amplify here is the command that you can use to install it so yeah with one command you will have amplify cli on your machine so after that let's copy the amplify pool let's go to our project let's open our terminal and i'm going to open a new terminal because on this one our development server is running for expo so here i can paste the amplify pool enter and amplify will automatically open a page to sign up to know that it's you so just press yes and after successfully logged in you can close that window coming back to our terminal amplify will ask us a couple of question for example which is the default editor in my case is visual studio code choose the type of application is javascript and react native source directory we can leave it source as default and everything else by default so the last question is do you plan on modifying this backend i will say yes because we will do some changes locally and then we will have to push the changes uh to amplify admin ui just because amplify admin ui is very new and it doesn't have you cannot manage completely everything from here for example if you go to the storage here you'll not be able to to do anything it's just a placeholder and it shows you how you can um add storage layer and so on so some features from authentication that we will need in a moment you cannot configure them from here yet so yes we have it here successfully pull the backend environment staging from the cloud all right so everything was pulled from the cloud and by pulling that changes from the cloud we um yeah amplify created an amplify folder and here it it contains all the configuration it needs for all the services that it has behind the scenes and in the back end we also can access the specifically api and authentication at this moment you don't have to know anything most of this stuff is managed by amplify and only in some cases you have to work with files from here and i'm going to show you in a moment another part that amplify generated is the source directory and here very important aws exports this is a file that contains um yeah like the project id and the ids of all the services that your project is using uh including like region uh what user pool id and so on so by this id for example user pool id is this one you can actually go into your aws account search cognito for example manage user pools [Music] and you can search it here um it is that it doesn't show us everything but something like this should throw it come on if i open a random one and then just edit the the url here with idea that i copied you don't have to do this i'm just going to show you how you can user pull id should be this one come on [Music] all right cannot search because signal clone should be something all right why am i showing you this because this is not the important part so with this aws exports we will need this in order to configure amplify in our project to to know with which services it will work so make sure where it is generated we will need it in a moment and also it has the models and this is the database models that we are going to use uh in our you we with data store to save query edit and so on so if you look at the here so for example we have a message with id content user id chat room id created that updated that and all the fields that we have for a message we're going to use them later when we will query and work with data store at the moment our next step our next step is to configure amplify so here is a code snippet and i'm gonna do it in a moment to configure it we are gonna open up.esx from the root folder of our project and here let's do uh import first of all amplify um plify from aws amplify and now i realize that we forgot to install them all the libraries that we have for example aws amplifier we need this library to do that i'm gonna go to amplify docs uh so prerequisites and here if you scroll no set up full stack project react native and we will need to copy this npm install these are the amplify libraries that you will need so let's copy it from here and let's paste it in our terminal to install um adobe's amplify amplifier react native this is for specific components for react native net info for it to be able to see if it is connected to the internet or not and the async storage these are four libraries that it needs so until it installs what is vanilla javascript something that we should know before starting learning frameworks and libraries like react read native and so on all right so my libraries has been installed and right now i don't see an error here so we imported amplify from aws amplify we will import the aws export.js from the source directory because this is the config so the config from this directory source aws exports this is the config check out if it the aws exports file was generated in the root folder because that's also the case for some people and they had issues accessing it then you will import it like this if it's in the root folder in my case i specified to generate it in the source so i need to import it from the source after importing vm2 i can do amplify dot configure and then pass in this object that's everything that we will need to configure amplify so let's just check if everything is still working i'll probably have to restart the development server so let's start run on ios again to see if it has the newly installed libraries now i think it doesn't want to to do that so i'm gonna find the terminal with my development server here i'm gonna press ctrl c to stop the server and start it again and running it again on our ios simulator uh anish is asking i'm new to development should i start up development in react native and someone suggested to learn react just first i would um disagree with that fact i don't think react.js is a prerequisite to learn react native in fact uh when i started learning i started with react native and that was the first yeah i started with frag native before react jazz i learned react native and after that i had a project with react jazz and i learned react jazz so there is no dependencies and if you are interested only in mobile development start with react native if you're interested in web development starts with rack jazz uh and once you know one react native warrior js it's going to be very easy for you to switch to valver one so that's the thing before getting into react native and react.js i highly recommend uh to strengthen your javascript fundamentals here i think this is a prerequisite because we are using a lot of javascript especially es6 um features from javascript to simplify a lot of stuff so we are writing this a lot for example pro props destructuring if you don't know the syntax you it's going to be weird for you to see all these syntax for the structuring for prop spreading uh lambda functions and so on so start with that and then go into react native reactions depending what you want to build so we have back our application running and as you can see it still runs as expected if we don't have any issues that's perfectly that's what we want so all right all right what's the next step the next step is to configure our authentication module so you can set the timer it's 56. to configure vamp authentication in our application in also in our app.tsx uh i'm gonna import authentication from aws react native so first of all we import no we do we do not import authentication we import with authenticator this is a higher order component [Music] but basically in simple terms this is just a function that you can wrap your components with so in our case we will have to wrap our application component in inside with authenticator to do that uh i'm not going to export it in the same line first of all i'm going to declare it with function up and here i'm going to export default for example up so we need to wrap our application with authenticator with authenticator and our application save refreshing and element type is invalid expected a string did i change something here run ios do i have a typo and boom we have our authentication set up the full authentication flows with create an account signing in uh forget password and so on and now it's 57 it was one minute and two lines of code so uh by default we get this uh yeah default screens provided by amplify which we can adjust the styles of them slightly for example colors the roundness of buttons and so on um so this as i said previously are perfectly fine for some prototypes for some projects in the beginning stage however in other applications if you have a specific design you can adjust them and create your custom authentication screens we're not going to cover that today because it's going to take us a lot of time i'm covering that in our full stack develop mobile developer course that you can find in the link below so let's actually create us an account so i'm gonna create it here for the user name um you have to provide the email so in these terms like the ui is not the best just because that was the setting we chose how we want to uh users to authenticate i didn't want them to have usernames i wanted them to have emails that's why set a password and here is actually mail if you implement the custom screens you don't need like two emails filled you can have only one that's perfectly fine and some random number for the phone number and let's sign up now i should receive on my email the confirmation code so let me just go quickly and yeah i received it instantly [Music] yeah you can see it here if my camera wants to focus so let's add our email as the username to confirm our account and now let's confirm it with two seven eight seven seven nine confirm and everything went well and now let's log in so let's login sign in boom perfect so um here we have it our application after signing in after creating an account only then we can access our application and now if i will uh reload i will not see the login screen again because amplify is smart enough to cache the authentication tokens and to uh to take care of everything of all the tokens of all the this complicated stuff behind the scenes for us so [Music] with this we have our authentication screens alright so one more thing uh i want to show you because this is a very common use case to sign out and for some people it was a bit confusing i just want you to show how you can sign out a user so you you're gonna probably have a button and i'm not gonna focus on the styles of a button only on them only with the yeah functionality of a button so where should i put the button i will put it somewhere in the signal in the home screen so store screens should i put in there or just here and if i put it here hello logout save let's import the text uh where is the text where is the text where what rack native has anyone seen react native okay import text from react native save perfect and yeah it's there all right now let's let's move it somewhere i don't want it in our home screen let's move it in our i don't want it in the up.sx i will move it probably in the home screen just for you to know so here inside this view i will have the text log out it's again there [Music] navigate home screen so let's let me yeah let me just put it inside the pressable because repressible is the component that will allow us to [Music] handle the user clicks so pressable inside repressible this thing guys i'm gonna write some inline styles just to see it on the screen background color red height 50 [Music] margin 10. yeah just you don't have to do this you'll probably have your own styles that's why i'm just rushing in to show you the functionality and align items center [Music] justify justify content center very ugly a lot of styles just to show this one but that's how we go no all right so we have this one the log out button so let's add the on press here and onepress will be logout function that we can implement right now inside our tab one screen so let's do const logout equal to the function so what should happen if this log out we should actually log out the user from the application to do that uh here on top i'm gonna import the authentication module from aws amplify and this authentication module contains a simple function called sign out sign out let's save let's try to press on the sign out here boom we are back on the home screen and if i reload i don't see that the application we are on the home screen so here i can write back my email and the password sign in log out sign in okay all right [Music] so that's how you log out and the same way we are logging out and we are creating our custom buttons the same way you can create like custom authentication screens with inputs for the username for the password with buttons and then you can use the off dot for example sign in and here you will need to pass in a username or sign in options username and password for example username like username input input and so on and then the password and amplify will sign you in this is [Music] not very hard if you um have a bit of experience with it for the sign out is pretty simple we don't have to pass in anything we just call the sign out and that's it all right okay so i think i'm gonna comment out this button from here just not to see it always on the screen because it's ugly uh you can design a better one you can design a settings screen and put the sign out there so i think we are done with authentication so we can say get add git commit um amplify and authentication [Music] okay okay all right so the next step um yeah i'm gonna explain you in a moment what's going to be the next step kimbawa is saying yes i have also started with racknative and now writing good code since i have a good background of javascript html and css i also kindly disagree with yeah cool amazon is so good amazon amazon clone you mean yeah that was a nice project thank you tayo thai saying great work keep energy up love your streams thank you very much i will it's just getting started i climbed yesterday the third highest volcano in the world and now i i was today i was a bit destroyed my legs are hurting i'm walking like an old man everything hurts my lips are very dry because of a wind on the top it was almost freezing so and we did it uh during the night so we started at 12 in the night we reached the top at seven in the morning basically seven hours of climbing mountains the mountain and then we had to go back with a cable car but because of a very high wind it was not working so we had to take them to to climb down on foot the mountains and it took us an hour six hours to climb it down because everyone was already dead like our legs were not moving so it was a tough experience but i'm very happy that we did it so that's why today i don't have a lot of energy like i'm a little bit calmer so just preserving energy but i lost yesterday okay guys so the next step is the interesting part all right let me start with explaining you the problem and then um why we will need that solution so we signed up uh behind the authentication module in amplify stays um aws cognito service which we can access it if we go to our authentication here will we be able to access it from here uh we cannot access it from here directly however if we go to our aws console let's sign in and let's open again aws amplify [Music] and here let's open our project that we just created signal clone so if we scroll down a bit you we will see what categories have we added so basically we have added authentication and we also have added api by doing the data modeling that we did previously we'll cover that a bit later now let's walk around focus on the authentication so if i open it here i will see the links to the cognito service that i am speaking about so let's open it in a new tab uh so yeah this is the idea that i was searching for uh previously and i couldn't find uh i couldn't find it but basically yeah this is the user pool id so this cognito service will keep track of all our users of their tokens of their identities permissions and so on we'll also you can also manage groups with them and much more so here we see that we have a username um we an email which is confirmed we confirm our email um yeah that's basically what aws cogniton knows about the user and that powers the authentication on the other hand our user if you see here on the right on our our user should also have like images uh the user should also have like a name and a lot of more stuff so for that reason we also need this user to be in our database not only in authentication authentication is nice it lets us sign in but to be able to display the data about the user for example for our users to see a list of all the users then we need to keep this data in the database so if i go back to the console and if i go to the api tab i see here the tables that we set up using the data modeling so basically there is a message table chatroom user and chat room and also user table this is what i was looking for so let's view it and behind our yeah amplify uses amazon dynamodb as the database and dynamodb scales very well for millions of requests and it scales it automatically so if you if you open this page and you didn't see any tables make sure that the region here on the top is the same as here so here is ireland here is ireland if it's different you will not see the table so yeah this is the table if i look at the items i don't see any items there is no users in the database basically we have our user in the cognito user pool which is responsible for authentication but in our data layer where we will be able to store the image you arrive all the information about the user we don't have it so how can we save the user once the user registers in our application how we can save it into database for that amplify authentication module in amplify can trigger some actions and these actions are for example user confirm confirmation so after user confirms his email we can do something there is also pre-sign up so you can do some checks before the user signups there are a lot of triggers i'm going to show you a list of them shortly and behind these triggers are lambda functions this lambda functions are simple functions that are running in the cloud in aws and the cool part about vm is that we don't have to worry about servers we just write our code as a function we provide it to aws and then it takes care for ourselves to run it to manage it to scale it if we suddenly have a million user signing up it's going to scale the lambda function to run in parallel so to handle all the requests so these are removing parts in the next step that we are going to implement so as i said we have authentication module that can trigger some functions depending on some events one of these events is the confirm user confirmation event so when user confirms we can create a lambda that will save this data the user's data in our dynamodb and with dynamodb later we can display a list for example of users we can add users to the chat rooms we can talk chat with users and so on so hopefully the problem and the solution is clear so let's start implementing it all right i'm gonna open our terminal and we will need to do some modification to amplify so let's do amplify off update you can see it there amplified auf update here yeah what do you want to do i want to there is no option to just uh set this event and for that reason i'm gonna say that okay let's walk through the authentication configuration select authentication authorization service um i'm gonna keep it uh by default this one most of the things here will i will leave them as they are um so i know if you think i don't know unauthenticated uh logins no third party authentication no user pull groups no admin queries no multiple mfa no email base user registration for god password let's leave it default specify everything by default don't overwrite the default password policy no default just press enter until yeah we hear enter as well authentication flow no so yeah in the previous step select no uh and here the question is we we got where we want it to to get do you want to configure lambda triggers for cognito yes we want to configure them press yes which triggers do you want to enable for cognito yeah and make sure to press space to select and yeah enter to continue so let's go create of challenge custom message this is the custom custom message custom email message in order not to have that boring here is your code message if you want to adjust it our challenge no post authentication no post confirmation this is what we want we want to trigger this lambda function after the user is confirmed and because this post confirmation is going to happen only once so don't press enter here because that was one of my mistakes before press space to select it yeah as you can see it's green there and then let's press enter what functionality do you want to use for the post confirmation i want to create my own module also press space here to select it then enter do you want to edit your custom function now yes i think we will edit it right now do you want to edit your custom press enter to continue okay here press enter to continue all right so here is our lambda function it's basically a very simple function uh and by the way if employee amplified didn't open the file automatically you can find this file by going to amplify folder from here to backend end their function then signal clone post confirmation source and custom this is this is a function the file that we can um yeah insert code here to be executed by our lambda trigger okay so what do we want to do here we want to save the user to dynamodb save a new user to dynamo dynamo db dynamodb dina yeah a dynamodb is aws dynamodb paid the question uh it was diamond db has a free tier yes it is a paid service however it has a free tier so for [Music] if we go to their pricing page you will see that you have how much where is the fridge here for on demand here and if i search for it here three tier uh 25 gigabyte of data storage 2.5 million stream read requests from dynamodb stream and one gigabyte of data transfer out so i think that's more than enough um for a lot of use cases even a little bit more than like some test projects uh you will i don't know like an application with around 20 000 users will not be more than one gigabyte of data storage like on average like let's say so it's a lot it's a lot but make sure to yeah to take to to read the pricing models and to understand what's being priced and what's free and how you can adjust them okay so um so here yeah as i said we need to save a new user to dynamodb this event we will not have anything here this event will contain some data that cognito will send us um [Music] you can find more information about what what data exactly it will contain if we go to amplify docs let's see where is this just to know what information you have and if you are registering other triggers where to know what event you will receive so let's go to lambda triggers this is for storage uh cognito yeah advanced workflows lambda triggers for cognito here is how you can set them i'm wondering if they show the event itself they don't show it here we probably show it in the in their official documentation on the aws okay let me see [Music] on momento all right so here we have it oh it's so slow okay so um yeah the event will contain for us let's say here event will contain the event that is coming from dynamodb trigger will contain where [Music] will contain the user attributes and event will contain a request the request will contain the user attributes and the user attributes there contains the sub it contains e-mail uh what else it contains basically let me show you what it will contain so in the application if i do of dot current authenticated user then console log you will see what information it will contain let's go to iphone device here this is everything that it will contain [Music] this data so as you saw it has the user attributes attributes email email verified phone number phone number and sub this sub is the unique identifier of a user in amazon cognito so if i copied from here uh user pools users yeah this is the username here the user id of a user incognito so based on this id where is it where is it yeah based on this sub id because we know it's unique and it's not it's never going to change incognito we can create this relationship between a database user and a cognitou user by having the same id where we will set it to id here it's the sub that's why we will uh in our custom.js we will need event request user attributes.sub to set it as the id for the dynamodb entry okay um so for the dynamodb we will need to write directly there so for that reason we need a reference to our dynamodb to get it we will first import the aws module from aws sdk bws sdk comes automatically in the lambda function if you need some extra packages in lambda function you will need to add them here to the dependencies but aws as the case comes by default and our dynamo db client will be a new aws dot di namo db yes this is our dynamodb client and we will be able to use it to write to dynamodb for more information about uh dynamodb api you can check with the dynamodb documentation here i'm gonna show you how to insert one item in there in dynamodb but there can be yeah to know how to read and stuff like that you can check the documentation so because we need this event request user attribute sub let's check first of all if we don't have we don't have it uh we i'm gonna just copy a request let's add the question mark because request can be null and in that case we just don't want it to fail we can handle it here sub so if there is no things like that we can do a console log to have it no sub provided and just return okay we just return otherwise let's go down here here we will have to create the item and save it to the database so first of all const user item is going to be an object what data it will have we know that it will have an id we know that it will have uh what a image uri but there are some properties that uh our model should have in order to [Music] um to satisfy amplify uh behind the scenes for example what i'm speaking about if i go to amplify admin uh let's go to the content content and let's just create not chatroom i want a user let's create a user and his name is gonna be um test i'll not set any image alright not i'm not gonna set any status i'm not gonna set anything just a name test so just by providing one field test if i save it to the user you would expect that in dynamodb we we have only one field test but that's not actually the case if i go to dynamodb items i'm still here if i refresh i see one item created that we just created and if i open it here we see that the object has a lot of extra things that uh but it needs to make it work behind the scenes such as type name last changed add the version of the object created that updated ad id name and so on so let's um let's have a look at what we will need so first of all is id and name id name underscore underscore type name that's what we need underscore underscore type name and the type name we can hard code user because it's just specify which type is this object user let's change that with only one underscore make sure to not make mistakes here because it's going to take a little bit of time to understand what why that is happening and also to update it let's change that i'm just setting the keys i'm going to provide the values in a moment version for the version i can set one because it's the first version we are just creating it created at it's gonna be a date id name we have and the last one updated that okay so uh for the where to start last changed at last changed at is a number and this number represents the it's a timestamp like the amount of seconds from update in the past so to get the timestamp like this i'm gonna first of all create a variable called now which is a new date creating a new date will set it to the today's date and the timestamp const time stamp we can create from a date calling the get time this will return our time starting from 90 60 70 something like that so this time step we can set it to last changed at okay we said the version is one created that should be a string and this string is the um how is it called the eso string it's in the format is so date so there is a standard for displaying dates so in our case this is the eso so for that reason i can say it's now dot to eso string okay the same thing we can do for updated that when you create an object where created at an updated ad is going to be the same and when you update it you're going to change your update to that so they are they're going to be different later on if you update them so we have only two fields id and name for the id as i said we need to connect our database user with our cognito user so for the id i'm going to set it to the event.request.user attributes.sub to the unique id of a user from cognito for the name [Music] i'm gonna i we we don't have like the name automatically from cognito unless you set it up to have but for that you need custom authentication screens so in that case you will also have you'll also have be possible to do i know name in our case we don't have it if you look in our console log here there is no name and i'm gonna set just by mail as the name and later on we will give a possibility to the user to update his name so i think we have everything type name last changed add version id [Music] created that updated ad name yep uh all right so the interesting part about dynamodb is but it's not that simple it's not that simple to save it so if i go to dynamo db [Music] nodejs docs let's have a look and i'm going to show you why this is not enough so put item is operation to create here it is put item operation that will add an item to dynamodb so let's go for javascript create a new item or replace and so on we put items need the parameters however the parameters here is this item for example album title is not just a string but it's an object and that object contains a key s and s stands for string and the actual value same thing for artist art is a string and the value if it's a number it should be um [Music] n for a number but the value should also be string this is quite weird i understand so here is the more information about the parameters uh item is required attribute name for example album title artist or in our case type name then the object and one of these keys i have a b for boolean no this is a buffer bull for boolean bs for also buffer um and for number it can be null or string this is in ss is an array of strings so for strings we need s for numbers we need n let's do it so instead of just having a value it's going to have s [Music] here it's going to have number because we need it as a number if i look in the dynamodb for that you see it as a number and version is as well a number the rest is strings timestamp but when you save it you cannot send an integer so for that reason you will need timestamp to string okay version as well uh number version is as a string one created at createdat is a string and this is already string so it's good string this is quite an advanced use case guys so if you uh have some troubles understanding like why do we need everything like that don't get discouraged in this case just follow along just copy this stuff and probably once you'll get more into the aws ecosystem into the dynamodb you'll understand a little bit more what's happening here the id in our case is also a string i understand this even for me i think this looks complicated and unnecessary i mean unnecessarily complicated you can have as we had like type name and the value without an object with s and stuff like that yeah in this case so name is a string save yes right now it's better right now i think it's gonna work all right so um [Music] so we have to do db dot dynamodb dot put item and when we put item we will have to send here some parameters right let's declare the parameters up top const params is equal to an object if we look in the documentation here what parameters it needs it needs an item which is required so we just define that item as user item does it need anything else table name which is required okay so [Music] table name sorry had to zoom in a bit here table name uh here we need to specify the table name where we want to write so i can either hard code it here just find the table name from let's say dynamodb i can go to overview and here here is the table name like user and so on i can hard code it there but that's not very uh flexible and scalable because if you have different environments you want to be able to uh send different table names so for that reason i'm gonna send it through um enviro environment variables and i'm gonna show you how to do that so table name is gonna be process this is how you access an environment variable in node.js so you have a name let's say user table right because we need the name for the user table let's set it here and it's going to come from pros from environment variables which we will have to send in a moment so db put item parameters and this is uh to make this uh to be able to await for the response we will call the dot promise function on it so did we put item parameters.promise we have to await this promise to finish so if we have to wait we need to make our function asynchronous okay this is here save user to database all right so because there might be some issues uh it's a good practice uh to encapsulate this writing to the database into a try catch for example if we misspell some types here that's gonna throw an issue and error so catch catch error let's just console.log to be able to see it error error error and then we don't need this callback because we removed it okay yeah after that we can also i don't know console log something to be able to see if it was okay success otherwise this one so this is our function the function will receive will be triggered by cognito it will receive the information from cognito such as user attributes and user id and based on this user id we will create a simple user in our database to be able to yeah to have in our database to be able to query them and so on and here is just some it's a way to save and to work with dynamodb from our lambda function so i really hope that it's going to work from the first time and [Music] to know that i'm just gonna do amplify push amplify push will take this function from here and we'll provide it to uh to the cloud it first of all we'll see what changes did we make make to the amplifier itself so it show it uh detected that we made some changes to authentication and the changes in the authentication are the trigger the lambda trigger and we also added a function create operation for api we don't have any changes so are you sure you want to continue yes let's continue uh noza is asking will this be on your channel later yes this is gonna be on the channel i'm saving all the live streams so you can watch them later at or at your own pace so we'll wait until everything is provided to the cloud um how are you doing guys do you have any questions on this part i know that this is a little bit more uh complicated to save a user in the database this way but actually this is the most secure and most scalable way of doing this thing because in other projects we were saving the user i mean we were syncing this authentication user with a database user from our react native application so when you open the application i was checking if there is any user in database with that user if not i was saving it but that's not very secure because you expose the operation of creating database user to the public so anyone can save anyone registering an application can save some you can create some database users in this case everything happens behind the scenes with triggers so we do not expose i mean you can set um to not being able to create users in database uh from anywhere else like from the api and this is the right way to do it so that's why it's a bit more complicated but i wanted it to be this way are you going to use subscription for real-time messaging yes we will okay pinterest clone suggestion i think pinterest clone please pinterest pinterest okay that's interesting we will taking it into consideration all right so uh going back to our code all resources are updated in the cloud and what does that mean if i go to amplify not to amplify not to add many why i mean to amplify and if i refresh this page the page of our project signal clone if i go to functions i see here a function signal clone post confirmation staging so let's open this view in lambda this will open our function in the lambda page in the aws console and here we will see everything about it like code um try not to edit the code here uh because if you edit it here the next time you are gonna [Music] do push from your project is gonna be overwritten so if you need some code changes always do it from within your project from from here if you need uh configuration changes you can do them here no worries that's why let's go to our configuration configuration and here there are general but we need environment variables because you remember that we depend on the user table environment variable to know in which dyno would be table to write so let's copy this name and here besides in these default environment variables i'm gonna add a new one called user table this field is required okay so user table should be the name of our dynamodb going back here overview and table name so let me show you again how you can get here i will close this page if you go to your amplify console all application you'll see your application press on it then you see here authentication api functions let's go to our api and if you scroll down to data sources you should see the user table open view this will open our dynamodb for the user tables from where uh overview we can take the table name here table name so copy this table name it's also like the one here the one here on top so make sure to copy it correctly and go back to our lambda configuration so user table should be this user some random string and then the name of the environment all right let's save yeah now our lambda will know where to write but by default it will not have permission to do so so aws takes security very very seriously so by default nothing is allowed to do anything you need to uh to specify what each service is allowed to do so in our case let's go to yeah we are still on our lambda function page in configuration we will go to the permission tab here so permission tab what these are the permission that our resource has by default i mean not by default but it was set by amplify uh so yeah this lambda has access to create log files that's by default that's okay but other than that it doesn't have access to anything else only to write logs we actually need to give lambda access to be able to write data to dynamodb so we need to view role document no no no no no not your old document but here on the execution role role name you can press on this role name and it will open in another aws service welcome to aws everything has its own service and now we are speaking about yam identity and access management if you press on this it's going to open our [Music] role that our lambda function has so let's first of all attach a policy because we want to give our lambda some extra permissions here you can select from some default permission administrator access will give it uh ability to access anything but it's not recommended it's recommended to give x granular access only to the things and to the operation that you need so for that reason let's create a new policy by pressing on create new policy button and you can either do with a visual editor or directly here in json all right so i have a template of a policy document and you can find it by downloading the assets which i told in the beginning of the video so let me find mine live stream signal signal assets this is the downloaded thing so let's open lambda policy i'm going to open it in my open so let's just copy paste this policy let's copy paste it here so the policy will allow to this is the action so it will allow to put item and here we need to specify where like to which resource it will allow this action and here we need to insert the id of our dynamodb table so if i go back to our dynamodb table by now i think you should know where to find it from amplify this is the table name but if we scroll down a bit it should say arn amazon resource name this is basically an id and each thing in amazon has an arn so just copy this arn and let's go back to our yum management and here instead of this string [Music] insert our aran and to the dynamodb table and which which specific table so basically this policy will say that the service that is using this role will be able to put item to this table it will not be able to read it will not be able to update uh and so on so let's do next tags next review and name is going to be lambda access to signal user table it's pretty descriptive so let's create the policy create policy oh i think it created already so if i close this page and i go back to the attach permission page because we started from here to create it you have to search here the lambda how we called it access [Music] to signal [Music] weight yeah to signal user table i think this is the wrong policy the one that i used previously yeah wait a second i'm gonna do it again create policy because i already had the same policy with the same name json i'm gonna copy paste the json here i'm gonna copy the aren of our database table put it here next tags next lambda access to signal um user table two that's perfect two create policy and now it it says the policy has been created for you is probably uh from the beginning it was like this and this is not it we need to attach this policy to our um role so if i close this part go back to here or if you uh lost this attach permission page you can open it up from our lambda console here pressing on the role name going to the role name we need to attach our newly created policy by doing here attach policy and by searching lambda access to and find the name with of the policy attach policy that's it now our lambda has two policy access to signal user table and the execution policy by default it was there i can close this tab right now and on the lambda page if i refresh here oh that's a lot that's a lot and if i go to the permission and hear resource summary now i can see that there are two different services but the lambda has some permission if i select amazon dynamodb it shows to which resource and it shows what actions allow put items make sure that you have this um this here if not make sure that you create correctly and you attach the policy to the role that we are using so with that being said i think we are ready to go so the lambda code is created environment variable for the user table is created permission to write where is added now the next step is just to try to register once again so going back to our project in the home screen i'm gonna uncomment our logout button because i need to log out then i need to sign up so let me try to sign up right now and if everything was created correctly we should automatically create a user in a database as well email no just have and some random password sign up so right now the user is not yet in the database it's only in um incognito user pool if i go here if i refresh the user is here like this one newly created and the the account is not confirmed yet so for this reason if i go to database items i don't see this is the user that we created previously but that's actually good because we will create we added the trigger post confirmation so after you confirm it all right let's try to confirm it not just.dev and let me check the code i didn't receive the code i didn't receive a code but i had the same issue uh when i was preparing so in this process of updating our authentication module um our confirmation email were deactivated so let's try to enable them again for that reason let's go to the mfa and verification i'm in the user pool of our project so mfa and verification how will user be able to recover their account which attributes they want to verify we will want to verify email basically receiving [Music] email yeah i don't know why it was no verification because we actually want to verify the email so let's try to save mfa cannot be turned off if an sms role is configured what's going on here so mfa okay let's set it to optional just to get rid of this issue save changes and yeah the changes are saved i'm wondering yeah i don't think that we need to push the to pull the things here but in any case let's do amplify pull with our app id and environment environment name basically from admin ui you can get it from here so let's pull them again to make sure that we are up to date yeah no changes no changes no changes and i have a register with a different name or if you don't have another email go to the user pool users and groups and for the user that we just registered i'm going to open it disable user and delete user and now i'm gonna be able to use the same email to sign up yeah everything current staging all right let's try again let's try again same email password and some random number let's sign up and let's hope that now we received the confirmation email did we yes we did so let's paste the code here seven nine nine three six one three six one and the username is my name at not just.dev let's confirm and let's have a look at our database let's do an update here and boom we have our user saved in database if something didn't work in a moment i'm going to show you how to debug these issues uh because it's quite interesting but let's have a look at the user that we just generated and it's it's this one with a name vadim not just that because we set the email as name so type name user last change that perfect version number one created that it's today's date today time id and this is the id if we copy this id and go to user pools refresh the page to see the new new user it's confirmed this is the id so by having the same id in two places we can connect the dots and name is this one everything is perfectly fine if for some reason something didn't work out go to amplify console for your project and in the function open let's open our lambda function now let's actually go directly to cloudwatch because cloudwatch is the one responsible for the logs actually you can see here uh some logs uh info success this is the success message that i'm console logging here success but in order to see them better let's open actually the cloud watch page to go directly there so we are here we are here log groups long streams open the latest one if you have multiple tries you're going to have multiple log streams here let's open the latest one and here we can see if i open this is the start of the application it's automatically logged this is a success message um and end request if you had some issue you're gonna have you're gonna see the error here so if you have something i don't know related to saving the item to dynamodb or you're accessing some variable that doesn't exist the error will be displayed here in cloudwatch so if you have some issues um try to first of all of course google it and then if you don't find an answer comment down below or uh use our discord uh channel to try to get help all right so but in our case our user is created both in our cognito to be able to authenticate and in our database to be able to start uh some chats with him so in my home screen i want to get rid of our logout button who so we log in we are done we have uh setup authentication we have set up lambda triggers to save a user in a database and that part i get it it's a bit complicated it's some advanced stuff but that's the only thing that a bit more complicated from from today's tutorial then everything should make more sense so let's add git add git commit oh come on [Music] cognito lambda trigger okay how is it guys what's that super complicated or it was fine i hope that i put it into a easier way that it than it should be hello anbu all of this aws things is free from the beginning specifically services and what we are using today they have free tier so while you're developing variable testing with a couple of users even i think a couple of hundred users and if you don't crazy if you don't go crazy with it i don't know uploading some terabytes of data then everything is going to be free but disclaimer check the pricing page and to see how much free tier it exists and how much you are using all-time gamers it was really great thank you very much gamlash thank you very much for the donation that's really nice how are you doing today vadim please make videos for beginners on udemy i would prefer to make videos for beginners here on youtube for free and i'm going to continue doing this as much as possible besides the advanced and very in-depth course that i'm doing so my focus is gonna still be youtube to provide free content for you guys but at the same time um this is my full-time job at the moment i rejected an amazon offer that was paying very well and because i'm doing this full-time i need to sustain myself that's why i'm working right now on this advanced and very in-depth course for full stack mobile development where you will learn um like 10 times more features and things that than we are doing here on youtube and everything is going to be in one place on youtube we are covering a lot of parts but we are doing that like in different clones in order to um to keep the projects like under 10 hours uh so yeah that's why if you are ready to get to the next level uh and to implement you know custom authentication screens authentication uh with social providers i'm talking about this because we are on this topic if you want to do these things and learn them join the course right now or if you're watching this later the course the doors will be closed so you can join the wait list and get notified when the course is ready uh kamlash is saying thank you vadim for being very generous and you make easy for people understand everything awesome thank you very much that's my goal to make complex stuff a bit easier to understand uh adam can you please do a tutorial for audio video call features in react native that's something that i really really want to do so it's going to come in the next tutorials will you show how to send images that might be one of the advanced and extra features that we're going to cover next week yeah if i saw i'm gonna do it please don't spam all right let's get back so save authenticated user in database we did this step we are done let's move on the next step is to integrate data store is to fetch all the data to display all the data to save a date and database to subscribe to new updated data and so on so let's think what's going to be the next steps [Music] code let's go first of all let's drink some water guys to stay hydrated all right cheers to everyone uh so why where do we start with i just realized that we are missing one ui screen so basically this home screen is displaying chat rooms people who you are already chatting but it doesn't display people who you are not already chatting with so we need to create a screen with a list of users where you'll be able to start a chat room with so let's copy our home screen because it's going to be quite similar let's copy to and name it what users screen users list of users make sense yeah so here um i'm gonna name it users screen i don't need logout here and i can delete the authentication and the stuff that we don't need from here at the moment i'm still gonna render the chatroom screen chatroom item but i'm gonna adjust that as well now i want to uh attach this user screen to our navigation and if i go to the navigation i'm gonna go to the index and where we import our home screen i'm gonna also import our users screen users so let's add the user screen as uh 222 what what what what yeah let's copy this text screen from here and call it the name will be user users screen component users screen option um let's remove a header title we don't need the header title there we can instead of that add a title uh users i don't know and also this background title visible i can remove it as well so let's save and uh before moving on we need to implement the navigation to this screen from somewhere and in this case i want to attach [Music] this icon to redirect us to the user screen this icon this is edit or new i don't know should we do that let's try to do that so this part is our home header if you didn't watch the previous video so here we will need to get access to the navigation where we actually console log i want to render the props here because we might have a navigation from the props uh props props props okay props uh let's open our thing here remove and reload to see what properties where the component can get uh children elephant scaling no it doesn't have a navigation itself but we can do uh const navigation equal use navigation hook and this hook we can import from from from from [Music] somewhere react navigation native from here use navigation then we will need a pressable because we need to handle the on clicks on this icon and the pressable is going to come from react native here pressable [Music] and we need to put this icon in a pressable home header and the icon is this edit icon so let's put inside the pressable and on press is gonna be navigation dot navigate where to users screen save let's check if it works yeah users back home users back home users all right okay so the navigation is good the screen is displayed however here in our user screen we are not rendering chat room items uh because it's not a chat room it doesn't have a last message it doesn't have a id and so on it should contain only the image and the name but because it's so similar to this chatroom item i'm actually gonna duplicate it where is it components chatroom item let's duplicate it and rename it to user item user item user item this one as well should be renamed you user item update imports yes make sure that in the index you're importing from user item here instead of chat room item user item and here not a chat room but a [Music] user so we can delete the taking the user here because we will receive it uh navigation on press we are not going to the chat room but here we will have to when we press on a user create a chat room with him so we don't have this new message we don't have a new message we don't have that what else we don't have we don't have the created ad we delete it we only have username we don't have a content as well save uh and and and user [Music] yeah let's use this user item in our user screen so instead of chatroom item i'm gonna use user item user is yeah let's update the import statement save and i don't know probably it is crashing somewhere going here uh yeah it doesn't get it i understand because we are importing chat rooms data but we also from dummy data if we're speaking about that we have dummy data slash users users users save now yeah now is better so we see a list of users still from the dummy data but at least we have a ui for that sorry i'm gonna add um uh i'm gonna commit these things just for you to if you like to walk from users ui if you would like to work through the commits to see the changes it's going to be easier to understand where is the ui stuff and where is the logic and backend stuff because right now everything is good uh however these are from dummy data so our next step is to query the list of users because we already have two here in database in dynamodb so let's query the list of users here and display them in the flat list instead of this dummy data okay for that we're gonna need a couple of things we're gonna need a state variable to keep the list of users for that reason i'm going to import use state here and we're going to need the use effect hook because we want to query the users when the component mounts for that we need the use effect to realize this fetching when the component mounts what we will need besides this besides this we will need to import data store from um [Music] amplified data store usually i'm doing from amplify but i think like this it will uh be a bit more optimal [Music] so from aws amplified data store all right and we will also need to import from the source models um schema not schema scheme index schema no index basically we will need the user model that we will import from these models so let's import it here all right hopefully that's not covered um so let's import user model from somewhere no here source models [Music] okay so with these imports let's start uh let's start by defining the state here is where we will keep our users not user but users set users this is going to be a use state and because we are using typescript but it didn't cover a lot of typescript in this tutorial here for you state we need to specify what type should this variable be so the type of a variable will be an array of users from the model initially it's going to be an empty array so let's do like that and these users we are going to send to the flat list so we can remove that import of our dummy data if we save we should see an empty list here reload oh because i was looking at the home screen right and if i go to the users it should be an empty screen that's good because in our use effect uh we are gonna [Music] query query users and let's add uh the empty uh array as a dependencies to make sure that this use effect is going to be called only when the component mounts so let's define this function fetch users because it's going to be in a sync function that's why we need to declare it separately like this and after declaring it we can call it right away so here fetch users const fetched users will be equal to await datastore dot query what do we want to query we want to query the user model and that's it let's uh set users with fetched users fetched users and let's go to our this page nothing is happening nothing is happening data store query if i look here at the signal is anything happening hello let's reload and let's go to the users page yes we have it we have two users one yeah basically if i go to admin ui if i refresh the page here in the data tab here we should see two users because there's the user that we have test and it should behind the scenes fetch the other one come on the test one and here is this one it doesn't have any image uri for the sake of this test i don't know we can set some manual um [Music] as damn data users i don't know we can set some images here or you can implement um an image selector in application image uri save and let's go with this one image you're right save and here in our application if i reload and if i go now to our this one i see the images yeah just to look better uh will it cover one-on-one chat yes it will cover one-on-one chat um but this will happen just by adding two users to the chat room that's going to be a 101 chat basically but at the same time it will be scalable to be able to add the third user to create a group at least uh is there a way to enable page reloading react native oh uh yeah you're me you mean if it's possible to do um basically an infinite scrollable list where you first see for example the first 10 items when you scroll down it automatically fetches new items and so on and you see that it's an infinite scrollable list yes this is also possible and it's done using paginated fetching from the database because when we do here data store query user it will try to fetch all the users uh or the maximum i think 1 000 users so um yeah besides this if you want to implement pagination for the flat list you're gonna add the on and reach function and when that happens you need to query the next set of data then to merge them together so yeah it's uh it's a bit complicated and more advanced stuff and um as well i'm covering this in the full stack mobile developer course so you can check it out whoo all right so we have our users here right um yeah it was as simple as that and this function can be simplified so much i don't know if i want to simplify it i'm just gonna um copy paste it and i'm gonna show you how how much we can simplify it so basically we just set the users and with this variable so we can take this one here set users then another thing is instead of awaiting and then calling we can do something like this datasorequery.van and then we will call the set users with a result for that reason we don't need the sync function and we don't need to call westing function so basically we have only one row out of everything from there so if i refresh it should still work if i go to the new yeah here they are okay [Music] so the next step is what should happen if i press on a user here we should create a new chat room with that user so user item if i open user item [Music] from components user item user item i'm gonna [Music] close some of the stuff here yes so here we have our user item on press here we need to create a chat room with that user right right okay so what do we need for our chat room our chat room if i go here if i try to create a chat room it needs new messages amount of new messages which can be null last message as well can be null messages doesn't matter right now but it needs this chat room users basically we need to know which users are in that chat room okay dude you're not showing your screen okay uh where did they stop showing the screen so at the end of the live streams when i'm a bit tired i shouldn't uh switch the screen i should never switch the screen what did i do uh i think this one i did you didn't see how i uh refactor this use effect right yeah that's the only thing that you didn't see so this is the long use effect with defining a sync function and then awaiting and then setting the users uh however because it's so little logic with a wait we can switch to van like data story query user then set them to users that's why we will get rid of the scene function of calling it so that's how we got to this one line function and it still works as expected share dot screen okay user item so as i was saying now whenever we press on a user here in the users we need to create a chat room with him [Music] so user item here on press create a chat room all right let me try to think how to explain you better to be honest it's gonna be easier to draw it but i cannot draw [Music] okay let me try let me try to to draw it to to show like what things we need to create there so where is it where is it screen brush i didn't use screen brush in a while brush tool and freeze and whiteboard here we go so um to create a chatroom first of all uh yeah here on the right we already have saved in the database two user models here is uh vadim with his email and so on and another user model is i don't know test vet test user right test test okay by default vadim is the authenticated user uh authenticated tk i mean you you get it he is an authenticated user and the test user is the one that we see in the list so whenever we press on the test user we need to create a chatroom from what that contains the authenticated user vadim and the clicked user this is the [Music] clicked this is the click user alright so first of all we need to create a chatroom here is create a chatroom i don't know why it's so big but chat room this chatroom will contain things like uh amount of new messages like new i think i can write here messages is zero if i do t or command t okay i can write it uh so these things are uh the demand test user already set when i press on a test user first of all i need to create this chat room so this is the first step then we need to attach the users to this chat room you to this chat room how do we do that we have in the middle here our uh if i do like this we have our chat room users okay so uh for each user that we want to add to this chat room we will create a new chat room user so basically this uh chat room user i don't know one is gonna connect it's gonna point to a user and it's gonna point to a chatroom by knowing by doing this we connect a user with a chatroom now we have another chat use chatroom user that will connect the second user with this chatroom and why do we have this and not writing it directly to our user table is because it's a many-to-many relationship so if here there is another chatroom user chatroom [Applause] [Music] chat room 2. and there is this is user free then this chatroom user will can i mean can contain this is for example free can contain these two users no no no no no no back back back back this is the fourth back this is the fourth fourth so with this design um one user for example test can belong to two different chat rooms to the first one because through this connection and to the second chat room through the third connection and at the same time one chatroom can contain multiple users and it actually can contain here the fifth and by doing that by doing that here we have a group with three people one chatroom three chatroom users pointing to users okay so uh knowing this like this is the first step this is uh the second step to create a relationship with authenticated user and this is the third step to create a relationship with the clicked user all right so let's move uh let's switch off our [Music] whiteboard and implement it uh how do i open the whiteboard does anyone know okay so as i said first step is to create a chat room let's do that here creating a chat room so on press is going to be async [Music] and const new chat room equal to a await data store and we call the save function first time we call the query now we need to save what do we need to save we need to save a new chat room chat room and this chat room is a model yeah that was uh that we imported from the models and let's pass here an object and here we will specify the values of a chat room i don't know what values do we have there new messages that we can set to zero we were yeah something like this all right this is the first step creating a new chat room the next step come on how to do this okay so the next step as you saw oh my god my team come on as you saw here is to create a relationship a chatroom user that will connect the authenticated user with our newly created chat room um here user item [Music] so connect authenticated user with the chat room first of all we need to get the authenticated user to get it const authenticated user is equal to i'm gonna use the authenticated authentication module and get the current authenticated user this will return us that user attributes with dot sub that we need so i can actually console log it here to see what we have but for now i'm just gonna comment out the creation of new chat room not to create a lot of them so let's go to our simulator simulator simulator where are you i don't see it did i just close the simulator okay so here is everything about the user so as i said we need to access attributes dot sub this is the id of a user right okay authenticated user and id is dot attributes dot sub but we don't need the authenticated user we need that database user so to do that we're gonna do cons database user equal we're gonna query it using data store what we will query we will query user model if you dot query i forgot we are already familiar with this datastore.query and the model and this will query all the users but if you pass the second argument a string then it's going to query the user by id we that is equal to that string so our user id is attributes dot sub this is the database user so if i console log it here if i scroll down and if i what press on one yeah user you see that it has created that version image uri vadim and so on if i press on the test it's still the dim but why if i press on the test the gym and let's do con console log and let's do this attribute if i query with d six id d6 uh oh my god yes because i'm all right i was console logging the authenticated user and i was expected to see different one when pressing on different users basically that's that's the next step that we are going to do uh related to the clicked user now i'm working with the authenticated user which is uh this one all right so we saw that we have we have it we have access to it so as i said here it is oh show screen brush um where is it okay so the second step is to create this chatroom user we got a reference to the authenticated user now we need to save it as a chatroom user so let's do that [Music] const but here we don't need to receive a result so i'm gonna do a wait data store dot save because we want to create a new one the same stuff as we were doing for this new chat room so we save chat room user chat room user a new chatroom user sorry new chatroom user and what should this chatroom user contain it should contain a reference to the user so user is database user you okay we're gonna handle that and it should contain a reference to the chat room and the chat room that we want to assign it to is this newly created chat room bro are you printing yourself printing yes yes yes yes thanks for that so yes these are this is the first step saving that chatroom user uh that will connect the authenticated user to the newly created chat room all right the third step as you see here is connected the clicked user to our newly created chat room let's do that and it's going to be something similar to this connect clicked user with a chat room ok so [Music] uh it's not authenticated user it's something else so the clicked user is this user item on which we click right so we can take the id from here uh but you know what our user is we don't need to query because user is already coming from the database so user is this user or we can simplify it by this and chatroom is new chatroom so user item is the user that is one user in our list we are connecting it to the newly created chatroom and then and then and then we should do navigation dot navigate to them how is it called if i go to chatroom item here i do like this so navigation navigate chatroom id is new chat room dot id so we create the chat room we create the connection from the authenticated user to the chat room we create the connection from the clicked user with a chat room and only after that we are navigating to that chatroom will it work i don't know let's try uh okay how i didn't watch all your tutorials and code along you make amazing content that's awesome uh i believe that you learned a lot just by watching and but just by doing it yourself by following along why do you use amplify instead of firebase i have touched this topic a couple of times probably i should do a video amplify versus firebase but the short answer uh like part of it is personal preference but another part is uh why is in the personal preference it's because uh the power of aws which stands behind aws amplify compared to to the firebase yeah how scalable secure and cost efficient application you can build with aws so let's try let's try to create that chatroom so if i press on the test do is hear something displaying chatroom movies id let's see if we have any chat rooms yes we yes we do if i open it it has a link to vadim.dev and it has a link to test boom it was done and it has zero new messages don't look at these messages because these are coming still from dummy data so we're gonna get there we're gonna slowly get there all right so um the homework for you is two and this is uh to do red uh if there is already a a chat room between these two users then uh red direct to the existing chat room other otherwise create a new chat room with this users so right now we are always creating a new chat room when we click on it but probably you already have a chat room so in that case you will just re you'll just do this uh where navigation navigate there are a couple of ways to do that you can um query the chat rooms and the chatroom users and we filters filter based on the user ids understand if there is already a chat room containing only these two because if it has free users then it's different so yeah this is your homework if you do this that's really awesome of you and you will learn a lot by trying to to achieve this all right but on the other hand we are going to on the home screen instead of rendering the dummy data chat rooms we need to render the actual chatrooms that this user is part of okay so let's close this one this one and let's do git add git commit minus m uh create a new chat room no this is both users and new chat rooms okay i wish there was something like a react native developer expert by facebook that would go to your dm without any doubt thank you very much for that it's an interesting idea [Music] kasim is saying bro you're the best i learned a lot from your videos bless you keep making more and more tutorials on the react thank you very much thank you thank you i will i will we are just getting started guys we will have so many things on this channel soon very excited so as i said the next step is to display actual chat rooms here in the home screen so let's open home screen and um yeah the same way as we did before we will need a user use state to keep all the chatrooms we will need a use effect to do the fetching logic on the component mount we will need the data store from amplify store and we will need the [Music] import the chat room and also chat room user probably like that chatroom and chatroom user and with that imported we can keep our chat rooms in state set chat rooms this is use state and this is going to be this state is going to be of type uh chat room array so for our use effect we will call it here let's declare here the fetch chat rooms or no or yeah yeah yeah we're gonna have some more logic here so i think and let's remember to call it right away okay uh fetch room chat rooms so uh const chat rooms equal await data store dot query what to query chat room user not just from user or chat room [Music] so this is the tricky part we actually need chat rooms uh yeah we can actually do a chat room yeah like this and then set chat rooms to chat rooms save uh here we can remove the chatroom data and copy chatrooms to send it to the flatlist and if n is not an object evaluate chatroom user one [Music] let's open chatroom item and here let's do it like uh [Music] yeah i'm gonna we we have to uh check if no actually i'm gonna just set it to null i'm gonna set it to null now let's work with yeah let's not carry about this and let's go back uh comment out the flat list and work with data directly just to in the console.log because there are a couple of steps here until we get there so i don't want to get ahead let's do console.log chatrooms and have a look in our here so array chat room uh we have a chat room with this id that was created there so chatroom movies id is this one basically everything is fine everything is perfect the only thing that we have to do is to set the mistake display them and that's it uh yes and no if i will create a new chatroom here with five messages that will link only to test but not to vadim not just basically a very lonely chat room i don't have more users or i can create and link a new user user to for the image i'm gonna give him quickly an image users okay this is gonna be jeff jeff image hola um save user and yeah this is a chat room between test and jeff we as as vitimet not just dev we don't have anything to do with this chatroom so let's save it let's go back to our signal clone here clear everything and refresh our page reload we see array with two chatroom one basically with both chatrooms that we have here so with this one and with this one with zero messages and with five messages let's let's have that as a reference point so with five messages with zero messages we are part of this chat room but we are not part of this chat room so we should not render it so how to filter only the chatrooms that we are part of that's the question right hmm by querying the chat room we cannot we do not know and we cannot filter directly based on the user id because user id if you remember is not in the chat room user id is not here user id is here is in this chat room user basically this line represents the user id so we need to query all these chatroom users we need to query all of them and filter leave only the ones that has a connection with authenticated user so this one has a connection leave it this one has a connection with our user delete it this one five we don't even have any connections delete it delete it so basically we deleted everything we left only this one and by knowing the chatroom user we can actually access the chatroom itself so we will query the chat from users we will filter the chat rooms and then based on the chat from users we will take the chat room that we are part of hopefully that makes sense so as i said we query chat from users okay chat room users users so let's see what chatroom users chat room user let's see now what query do we have so basically we see uh around four or five or even more like chatroom users here like that's a lot like first no even more like one than two then three even four but each of them has the user and their id so we need to keep only the ones with our id for that we first of all need to do user data equal await authentication dot current authenticated user so uh chatroom user let's do chat room user dot filter save actually it automatically added um brackets around this await statement because we first of all need to await and then filter so chat room user which chatroom user are we interested in let's do filter from a new line we are interested in only chat room user that has a user dot id equal to our user data dot at three buttes dot sub basically the idea of a user so if i console log now so here we have what before we had one two three four one two three four yes now we have if i remove i should have only one because i'm part of only one chatroom chatroom user it's only one yes and this is the chatroom and this is the user so basically we did the first the first step we deleted everything that we are not interested in now from the things that we are interested in uh i don't know let's say you know what let's say that vadim is also part of a chatroom too here so we deleted second we deleted third and we deleted fourth now we are based on the filters we have an array of two chatroom users one and five but we're not interested in actual chat room users we are interested in chat rooms if we look at query here each chatroom user has the data of a chatroom it has of course like where id i don't know what else but it has a reference to a chat room and to the user so from everything here we are interested only in chat room so together an array that contains the chat room of object that contain a chatroom to convert it to an array of chatrooms we will have to use the map operation so we map and for each chart room user we want to keep only the chatroom itself chatroom now if we log chat rooms we will not have like all the stuff about chatroom user we are not interested that's only for querying and for filtering now i have an array of chatroom and because we are part of only one chat room here we have it if i go and start a conversation with jeff and if i go back to our home screen home screen and if i refresh i should see here two chat rooms one with test and one with jeff because we have started the chatroom with both okay okay okay now let's move on let's move on because that's not it so let's uncomment setting to state let's comment out the console log and now let's grab these chat rooms no i mean let's just uncomment the flat list save so what's the error undefined is not an object evaluating chatroom.users if you saw here the chatroom [Music] does not contain a relationship to the users here does not contain like the data about users it only contains the data about i don't know new messages updated that and so on okay that's the next that's our next challenge so here we know information about the chatroom based on the data about the chatroom we need to query the data about all the users that are part of that chatroom so [Applause] [Music] yeah to do that again we are gonna need the use state they use effect the data store data store the models [Music] which models um chat room user and user probably we'll see so const our users will be captain state so users and set users this use state it's gonna be an array of user initially empty this is going to be all users in this chat room and then we will also have a state const user set user which is going to be use state which is the type a user not an array of users and initially null a user or null and this user will be um the the display user the user for which we display the avatar and so on so for that reason we don't need this user this thing there and we can do an if statement if user is still null show that means that we don't have all the data to display it yet so return a simple loading or activity indicator activity indicator from that we import from react native we see here two activity indicators meaning there are two chat rooms but we don't have the users of that chat rooms that's why we cannot display them yet we need to first query the users and to understand which user to show on the screen oh that's a lot of things all right uh so as i said we need the use effect use effect we use effect and here is going to be empty string const fetch users i think and let's call the fetch users so uh how do we fetch users knowing the chatroom id so we basically know the chatroom let's go back to our blackboard a chat room id let's let me do ctrl z [Music] it's okay so basically we know a chat room id this is the id so by knowing this id we need to query all the users that are part of this chat room uh so how do we do that again we are using the intermediate table chatroom users to get these relationships so by knowing by d we basically know these two uh how is it called arrows these are the chatroom id so yeah we will query all chat rooms chat room users that has this id and by knowing all the chat from users we are going to map to user table so basically the same as we did before where is it home screen first of all filtering but then we were doing filtering based on chatroom and mapping to a chatroom but now we are going to filter based on the chatroom id and map to users let's implement it and hopefully it will make more sense so first of all const [Music] chatroom users is equal await data store data store dot query what we query we query chatroom users the table in the middle but we don't need all chatroom users we need to filter only the chatroom users where is it dot filter come on chat room user we need to filter only the chatroom user that has the chatroom.id equal to the chatroom to this chatroom dot id basically while filtering based on which chat room are we talking about after that we will receive a list of chatroom users but we need actually users or yeah let's say fetched users so from chatroom user we will map to chatroom user.user to a list of users so uh okay so this value we can set in the users as yeah fetched users fetch fetched users fetched users save um okay let's console log fetched users save and if i go to our console here we should see what two console logs because we have two chat rooms and for each console log an array of two users the users part of the chatroom so if i do a refresh let's see okay where is it function fetch no fetched users fetched let's do it again reload so as i said we have two console logs first one and second one the first console.log has the first yeah chat room which contains uh the user vadim and the user jeff the second chatroom contains user vadim and user test right okay okay now from this array of chatroom users we need to select the user itself so we can actually do let's say set user first users at position zero save fetched user at position zero set user sorry so the display user will be the first user in that list it says undefined is not an object chat room last message created at because initially there is no last message so we can do here a conditional rendering yeah conditional accessing this thing same thing with the content initially there is no last message save within text component do you think that what's the issue here if i delete these two will it work no it's something else what did i do new messages oh here i can do it as a boolean because here it was zero and it was rendering zero yeah this is a common react native issue and i'm glad that i found it so quickly because previously it was a nightmare to find such issue issues when you do conditional rendering like this in case it's zero it's gonna return zero and because it's not within a text react native complaints so uh now we see two chat rooms but both of them are with user 0 like display me as the user if i put here 1 it's going to work it's going to display jeff and test however we cannot know if um if it's zero or one so for that reason we will have to do set user to fetched user dot uh first i think or no find yeah find um where user find the user that has a different idea than myself basically power user user dot id is different than a [Music] user [Music] of user dot of user dot attributes dot sub so the display user will be the first user that has a different id than myself so now i need to query this off user i can do it here const of user equal await authentication layer current authenticated user boom bomb beam boom bomb and define is not a similar word to true or null uh this or no if it's undefined i'm going to transform it to null so okay so right now it displays actually jeff and test if here is not different but equal you'll see that it still works so if it's equal it's going to display myself but we actually intended different that's why it displayed correctly the our user that we are in chat room with oh my god that's a lot of information probably the head will explode so we are not done yet we still have a lot of things to do i'm looking here that we actually don't need a list of users here i don't know maybe later you will need it but now we don't we just need valver user so i'm going to comment it out just in case later later we will need we will need it war we can do that logic in the filter so if chatroom chatroom id is different than chatroom idea and chatroom user is different so yeah basically you got it okay um let's have a quick break and continue what are people saying because we are already three hours in we have things to do this oh let's drink some water so here it is done right [Music] i hope so now i'm looking and i'm thinking why new messages are not displayed because one of these chat rooms should have five new messages five [Applause] [Music] if it's more than zero that's weird um let's console.log the chat room itself i know console log chatroom and do we have chatroom messages there oh we have a lot of things here uh [Music] new messages zero new messages zero [Music] uh i think we are not part of that chatroom with yeah we are not part of a chatroom with more than five so here i'm gonna say to save and if i reload now it should work and i should go back to how how i was doing like this save reload and it should work as expected yes all right so the next step is the messaging screen the messages screen the next step messaging screen okay let's uh do git add everything git commit minus sam fetch uh chat rooms and now let's start working on the chat room screen okay so we will need to query to save in state we will need to query in a use effect we will need here import data store and we will need to what import message from models uh message and we have here components message [Music] i will rename the this method i'll rename this message as message model as message model to have a message as a component can anyone tell which film he is using in vs code right now i'm using material material darker but basically you can check the vs code video that i have on the channel recently published and where i have all the [Applause] theme phones and all the libraries that i'm using okay so let's start with messages set messages is use state this is going to be a list of messages of message model and initially it's going to be empty array okay chant from screen okay so in a use effect with an empty array as dependency we are going to declare fetch messages equal fetch messages equal equal what equal async function and here yeah let's not forget to call it fetch fetch messages so cost fetched messages equal await data store dot query message message model message model all right so in this case uh instead of using filter here we can actually use some uh we can use a predicate function basically a function that will uh be executed on the database side and will return only the messages that will pass that test basically we want to query all the messages that contains the the chat room with id that we get from this route okay so basically our const shall we try to query the chatroom itself const chart room [Music] uh wait let's try to do that data store dot query um chat room with id that we get from route dot params.id but this can be null so we can check if um raw.params.id return console worn no chatroom id provided here we can do it like this okay so let's open this and let's console.log chatroo chatroom let's see the data let's go here okay reload i think i need to where do i have these console logs oh come on console log i don't need current authenticated user to be console logged in the screens here i need in components here i don't save all right all right so let's have a look again by reloading let's go here and what do we see we see the chatroom okay basically the chat room doesn't give us any information that we need it contains only the new messages but we don't need that no actually we we will need it a bit later so uh chatroom screen yeah i'm gonna save it here const chat room is um cha set chat room use state chat room initially it's gonna be null [Music] it's chatroom or null i'm gonna copy this function outside here now actually i i prefer all my use effects to be on top so i'm gonna i'm gonna add it here uh below and it's not gonna be fetch messages but fetch chat room uh okay chat room away data storage room and then let's let's set it to state but i can do it right away here so data sorted query dot then set chat room so we set the chatroom to state okay so in no i'm gonna do some checks here as well [Music] so if chatroom is null then we can we can show the user an error i don't know but in my case i'm gonna do console error couldn't find a chat room with id with this id otherwise i'm gonna set chat room to the chat room boom perfect so in the user effect we need to call this fetch chat room so in the components mount we first of all fetch the chat room to see if it at least exist then we will define another use effect [Music] but this time the use effect will depend on this chatroom variable basically only after making sure that we have a chatroom and setting in the state we will trigger this and basically we will have to check if chatroom is still null we will return otherwise uh we will call fetch messages messages so the fetch messages will be another function here another sync function [Music] uh yeah fetching messages all right const fetched messages equal await data store dot query message model and as i was saying here we need to filter message [Music] based on the message dot chatroom id if it's equal no chatroom id here this is a function it's not a simple javascript equal operator but because this this function will be called and will be transformed to to filter on the database layer that's why we have chatroom id here we need a operator one of these equal in our case is equal to the uh chatroom chatroom dot id and i think we can move this check from here to our fetch messages save query message model i'm gonna do some refactoring like this so let's console log fetched messages save open jeff go here uh go back open it up fetch again typo fetched messages [Music] go back i'm here so this is an array of messages which is an empty array okay so let's first of all add them to our state fetched messages yeah set messages with fetched messages save and here we should see nothing right no because we are still rendering the dummy data we can remove the chatroom dummy data from here take the messages and give it to our flat list messages save now going to jeff empty nothing zero okay because we don't have any messages let's um let's try to create a message from our from amplified just in order to see that it if it works or not so let's create a message hello from amplify uh the message but why can't i attach it to a chatroom save message user id chat room id this is weird i cannot edit this chat user id directly here and chat from id so no worries let's just delete this item and do it from here we have this message input let's go in our message input and here we have send message sending a message is gonna require the import of datastore and it's going to require the import of message model from models so when sending a message we are gonna do um first of all it's gonna be a sync function we need a weight where um yeah await datastore.save what do we save a new message we've [Music] a new message should have content and the content is this content from state it should have a user id and it should also have a chatroom id okay so the user id we can take it from const user await of the current authenticated user so the id is going to be user dot at three bits dot sub as we discussed and chatroom id is something that we don't have it here uh but we have here in the chat room screen so we're gonna send it through ideas here chat room id is chat room dot id it says that object is possible null that's true because initially this is null so for that reason i'm gonna check if chatroom is still null i will return an activity indicator okay this error disappear but now it says that it's not assignable okay let's go to our message input and actually receive this uh chatroom id here that we can pass here to the chatroom id we can actually simplify this because we have the same name do they no it they don't one is capital d one not all right so with that being said if i write hello and send it if i go to here to amplify refresh did it say it or not hello and it also has the user id and chatroom id that means that if i go back and open back yeah okay okay okay this means what was the error there the error was that if we go here and define is not an object evaluating message user dot id so when we query in the chat room screens um fetch messages let's console log them back in order to see what data do we have what data are we missing so going here jeff come on jeffrey jeffrey bezos come on jeffrey you can do it so message has content but it doesn't have a user but it has a user id so from the message we will have to query the user with that id just to be able to show the the name and the that one the other one so let's quickly go in our message uh and here we will need again all the good stuff use a state use effect import data store and the model user import user so cons const const uh const constants use user set user is going to be use state of type user or null initially or null um [Music] and initially it's going to be null in a use effect let's query the yeah let's query them [Music] datastore dot query uh we are gonna query the user model based on the id message.user i d and then we are going to set it in state as user then set user set user okay i i'm gonna move from null to undefined can it be like this yes and and end and and i can also have a const is me set is me use state um boolean and initially i can set to anything else because here no in another use effect use effect that will depend on the user so i will check if user dot id okay no first of all check if me i don't know const is equal to an async function and here const authenticated user i need to compare it to the authenticated user of user equal weight authentication dot current authenticated user and i can say of [Music] set is me user dot id is equal to of user dot at three buttes dot sub but this user is possibly undefined so if user is undefined return just return so let's not forget to call this function after defining it and i don't need this is me um why did i need the user just to check if it's me or not yeah but probably later you will want to also because right now we are not displaying anything about the user but later on you will also [Music] be able to [Music] to display the the name of a person or the avatar and so on so that's why you need this user and here you can check if user then return an activity indicator just to show that it's loading okay vadim paid for this or he's making a tutorial on a free tier yeah i'm off on a free tier and i can show you how many application i have all applications uh here is all the applications they are more than 20 and i haven't paid anything for any single of them if you'll start actually using them with a lot of users with a lot of traffic only then you're gonna start paying for this where are we at so we can actually send messages good job send we don't receive them but that's okay um what can i do what can i do i think i know what can i do i will log in as another user from my phone using the expo go application so expo go and i have yeah invexpo go if i scan this qr code i will open the project expo come on come on come on okay hmm why it doesn't open let me do local no i don't think local will work no local actually works tana will definitely work so at the end i will put tunnel so everyone who is watching live stream we can have a talk there or you can destroy my application it's up to you okay so yeah i'm just waiting for the application to download on my phone and then we are going to be able to test how it works to to send different messages but before that uh our next step is in our chat room here we need to subscribe to the chat rooms oh you know what else you know what else whenever we send a message we should update our where is it our chat room to reflect that the last message is this newly created message uh right right right right so let's do that um where is it is it is in the message input right so data source save new message and let's define here const update last message this is gonna be a sync okay update last message so first of all we need to uh get the chat room using having this id or you know what i can send the whole chatroom here yeah i will send the whole chat from here not to in order not to have to query it again because in our [Music] chatroom screen where we have a message input i'll remo i'll change from chatroom id to chatroom and hear the value as well so chatroom chatroom save message input all right so when we save our newly message we need a reference to it that's why we will save it into a variable new message is equal to this one so let's call here update last message away this new message uh from here uh updating f uh something in datastore happens by doing datastore dot [Music] update or save okay i think it's save and we are using the [Music] the model the not the mo the chat room model dot basically we need to create a copy of the existing chat room because the data from data store is unmutable you cannot do because we have here chatroom we cannot do here chatroom dot last message equal to new message right we cannot do this because chatroom is coming from data store and is immutable that's why we need to create a copy of copy of chat room and the updated chat room this is going to be a function and yeah update chat room uh here do we need to return it that's the question to amplify docs do we need to return it or not react native libraries data store manipulating data update copy of updated yeah we do not return anything we just change the things that we want to change there so if i'm coming back here okay here i'll need to update what updated chat room i will do updated chatroom dot last message is equal to the new message that we created save so if i do here last message save and if i look in the amplify in the amplify for the chat room i think with these two no [Music] let's refresh uh with this one no with this one no with this one yes this is the last message so if i'm going back and refreshing here i think i should see the last message i don't uh why so it should be here no it should be involver one with jeff but it's not okay let's fix that one going to the where to the home screen right where screen home screen chat room item i think here the same way we are querying the user the same way we will have to query the data about the last the last message so last message set last message is your state message or null this is coming from our models and i'm gonna create a separate use effect for it use effect and here uh what i'm gonna do if chat room dot last i want to do a console console log chat room reload chatroom last message id [Music] yeah weird uh android message input last message is the new message word why uh it in this case it says last message is null but here it doesn't say last message because last message is the actual object but it just it just says chatroom last message id chatroom last message id i know i can query it it's not a big issue but i was expecting it to have it by default so if yeah if this is null i'm not gonna do anything because there is no chatroom last message id but however if this is true i'm gonna do datastore.org [Music] message with id with this id and dot then i'm gonna set last message [Music] yeah let's change it from null to undefined and here where is the last message everywhere where we access last message i remove the chat room in front so like this okay and yeah with jeff here we see that the last message is actually updated and if i go here no for real and come back if i reload reload the last message should be updated and it has the timestamp also updated all right so it works it was a bit uh tricky i mean you you had to query the chatroom i was expecting to have it right away but uh it's there so um where are we at we are at hmm uh i want to i want to see in the chatroom screen i'm thinking that the messages are rendered inverted like this is the last one but it should be the first one here on the bottom so let's let me check if that's okay we have here fetched messages so let's have a look uh uh all right where are people hello non hello sanil hello geek uh ujwal shoe bomb rogue how are you doing guys can we switch the water over messages yes that's what i'm trying to fix right now so let's have a look at this so message the first one here is good job but yeah we need to query the last message first so for that we are gonna work with sorting so query results can also be sorted by one of more fields uh yeah this is the option so sword is okay sort of direction okay let's sort them let's sort them fetch messages here this is a predicate uh and the last one is uh an option sword [Music] and the sword is going to be message message dot created add and sword direction dot ascending or descending [Music] descending sword direction was imported from aws amplify save yes right now i think it's uh how is how it's supposed to be jeff last mess yeah hello last message no for real um bottom send go back go to jeff yes right now it works as expected what did i wanted to do i wanted to yeah to check uh okay reload.js i don't know [Music] i wanted to connect with my phone create another user and start charting because we will need this for the next feature the next feature is going to be the real time subscription to new messages okay uh no one is asking please tell me the best course the best course you can find it in the description below so join it i'm working on it and i'm gonna work on it the next couple of months so you now you have opportunity to join with a 50 discount and in two days the doors are closed and the next time that you're going to be able to join the course it's probably going to be at the end of the year or at the beginning of the next year so make sure not to miss the opportunity [Music] great video what is your vs code theme it's material darker you can check out the video about vs code themes on my channel what's going on guys here bezos has no idea how aws amplify even works that's what's sad like firebase is easy to start uh however if you want easy scalability then aws is your uh help come on what's not working here uh lon let's try to connect try again try again okay yes the video will be available after this live stream published on the channel uh how to make search function which searches the chat from users without querying all of that user chat rooms and filtering locally by name you can have a look at that we're not going to cover it in this video of searching we are covering this as an advanced solution in the in the course to where is it searching you should look in that in the documentation it's possible to do it and also it's possible to implement searching with a last elastic search as well with amplify which is going to be quite easy to integrate and at the same time it's going to be very very very efficient like elasticsearch is used behind in most of the applications when vet provides searching functionalities it's very fast and it's very efficient to search with it 97 come on downloading javascript yes i have application here on my phone so let's sign up i'm gonna use a different email okay oh come on yeah just a moment to create this account sign up okay should receive a code yes i did two eight six five zero six two eight six five zero six all right and we are confirmed now let's login and here we are all right so if i go to the new chat room uh i see here i don't know if it's gonna focus come on focus focus for oh i see here all the users uh from the list so i'm gonna start a new chat room with vadim and i'm gonna send him hi there send now let's go here let's showing the screen let's reload all right come on and here we see a new um yeah a new chatroom so let's open it there i see the message hi there hello how are you save and on my thing if i go back to the screen no [Music] reload uh guys please do not spam let's um yeah i'm gonna see your message definitely i'm gonna see your message but at the moment i'm focused on showing how everything works on two phones the user only in contacts this is quite an advanced feature so i don't think we will cover it in the next video however with everything that you have here you have a good base to create a any charting and real-time chatting functionalities in any application even if it's not related to to contacts such as instagram or something like that so yeah uh that's a good question make a five day challenge like amazon netflix facebook to grow as a youtuber that's in my plans and that's gonna be that's gonna come soon however i'm still uh running everything my own so a lot of my times nowadays is going towards creating the this high-end in-depth course and it requires a lot of work so but yeah the next step is going to be something like that [Music] all right so we our application is back online and here we can see on my screen the message hello with gray and hello how are you with blue on the emulator here if i look here it's inverted so basically it works as expected the only thing is that whenever i send a message from my phone for example hola i don't see it right away i need to go back and come here and then i'm gonna see it so to solve this issue we need uh real time we we need to subscribe to new messages so whenever a new message will arrive we are going to display it right away in the documentation here data store this is where real time with subscription so let's have a look at this uh we will need [Music] we will need to observe only one all right let's not copy it but do it ourselves so in the chat room screen here uh let's add a new use effect fetch a room where are we use effects here use effect use effect let's add the third use effect that is going to be responsible for [Music] setting up this connection with the server and listening to new messages so use effect this is going to be a function and here is going to be when we get started all right so um so scription equal data store [Music] data store dot subscribe or observe observe what do we want to observe we want to observe new messages we want to observe new message uh message model here right and the function is gonna be let's copy the function so we subscribed and yeah let's console.log message model operation type and element let's also not to forget to unsubscribe this by returning a function subscription dot close subscription dot unsubscribe so when the component will unmount this is going to be called and it will unsubscribe [Music] so let's go here uh let's open our debugger iphone and let's try to send a new message there new message send boom we see we nee we see the newly created message in our console log so first one is the model what model was created second one is the operation type and the last one is the new model that we was created the element that was created or that was affected so here we can check if message dot model is equal to a message model and message dot op type is equal to i can write here insert because it's insert right insert yeah or i can check if it contains some kind of operation now so insert then we will append it to our messages so set messages uh exit we will uh get the existing messages for a setter if you pass there um a function existing messages then this function will be called with the variable that it already contains like with a value that it already contains so we need to not replace it but append the new message to these existing messages so set message to everything from existing messages but the new message should be first right yes message element save will it work let's check are you working send boom automatically are you working uh yes boom send automatically there like right away but without this subscription uh we are not updating anything i mean if i write here hola and send you'll not see it because we just send it however with this thing look how like instantly it is hola boom is there here and i receive all my messages here on my device come on come on come on you can do it you can do it you can do it okay perfect so that's how wait a second i don't know if you'll see but okay boom so guys that's how you implement real time messaging um what else if you have a expo go application you can you can join this url but i will paste in the oh i cannot paste it there you can scan this qr code i can leave it here let me try to somehow send you this url so basically it's here rd 8 a 4 by d make sure it's let me type it for you i have two pieces that's why i cannot copy paste it but xp so 80 i hope it is the right one i'm not sure 8 rd 8 4a okay so if you open the application if you sign up you can we can have a chat i will probably leave it for for some time open after the live stream so let's have a chat in this application uh get status messages all right and and we are done with everything that was planned for today i think this video is the most packed video with information [Music] because we didn't had any uh yeah we didn't had any issues and we just went and went and went yeah it's it's amazing how much things we implemented today so here it is uh let's see fetch user fetch of drones create chatroom send and receive messages in real time yes we did that will be covering message notification in this stream not in this stream as you can see we are already four and a half hours in i am pretty tired so um for today that's it we as a short overview we have uh created the amplify project in using the admin ui then we have set up authentication in our admin ui after which we have modeled our database also there with all the data that we need and also with all the relationship between users chat rooms chatroom users and so on hopefully i made that clear like when we need one to one relationship when we need one too many and when we need many too many after that we have started coding everything in our application we have configured the amplify in our project we have configured authentication and now only authenticated users can use the application they can create an account we can said that they forgot the password and they will receive a confirmation code and so on uh also very important part of this stream which took a bit of time but i'm very happy that i explain it to you is how you can automatically save an authenticated user from cognito to the database this is very important and in this way it's the most secure way with triggers and so on after that we integrated datastore and i think we spent the most time here actually so using datastore we will we were able to fetch all the data we were able to create the data in our database to send and receive messages to update stuff and to do this in real time give me one second because someone is trying to break into my house [Music] all right so um yeah with that being said we completed everything whoo i need to create some um animations when everything went very well because this is the day i love it i love these streams how are you guys and i just realized that i did four and a half hours without any single breaks if you think that's um good enough drop a like subscribe to the channel oh my god what else hit the ring bell not to miss any future videos my brain is like all right so what else did i wanted to tell you questions do you have any questions guys if not uh then uh this is not banned uh our signal series is gonna be uh it's gonna contain three episodes the first one was previous week it was signal ui with react native and expo today we implemented signal backend with aws amplify and next week on 27th august on friday at the same time 2 p.m gmt time we are gonna implement some advanced features so what are these advanced features i won't tell you but you can write down in the comments what would you like to see there but i can say you that it's something that we didn't do before on the channels and you don't want to miss it out so for that reason yeah subscribe and turn on the notification bell and make sure also set it in your calendar for the next friday at 2 pm gmt we are starting and before closing off everything i want to thank all the new channel members that have joined the channel membership and they that have decided to support financially the channel i i'm so thankful to all of you guys who yeah who are supporting this channel financially because as already told this is my full-time job and you are making it possible so if you also want to support the channel financially the join button to join the membership is on the channel page or under the video you can find and join support it and i'll be thankful forever why do we have two slides here and i also want to remind you that the doors to the full stack mobile developers are closing very soon i have a fly are closing very soon in uh in less than two days so you don't want to miss that out because there we will cover even more things like i think that is going to be like 10 times more content than we are doing here on youtube on youtube we are covering most important parts of any application and we are covering something that you will need in any applications like the most important features but you are also always asking me in chat to go more go even farther implement even more features if right now i'm gonna read the chat uh unit testing background notifications uh will implement notifications that's only like the last six messages uh voice note features and and many more features that are more advanced and and that are very important for mobile development however if i would go into all of them it would take ages here on youtube so that's why i decided to work on a high-end course that i will pre-record but i'll be able to cut all the poses all the build times and all of that in order to condense all this information that you are always asking in the chat to contest into into a course it will include unit testing it will include [Music] push notifications following system to for example uh to to render only the post from um from your followers uh but before getting into what it will cover uh let's speak about what we will build so it will contain multiple projects uh it will contain a couple of small projects that i'm gonna use to explain react native basics and advanced is gonna focus mostly on building the instagram clone and if i play it here yeah uh we're gonna focus on building the instagram clone with as many features as possible from real-time messaging to a notification system to uh rendering only posts uh from a user this is a following system which is very important and quite complicated to implement uh liking system uh what else like searching functionality filtering uh pagination boom this is so important in most of application to have this infinite scrollable feed that will always fetch more posts we didn't cover that in youtube because it takes a bit of time to do it but we're covering in the course so yeah guys [Music] you're going to learn and master the tech stack of the future which is rack native and aws amplify this is for mobile development and once again follow the link in the description go to academy.not just dev and join the course but disclaimer i wrote that in all the copies on the website but in order to be clear the course is not ready yet if you're buying today you're not gonna receive access to it today this is a pre-sale campaign i'm still working on the course so you if you join right now you are gonna receive uh the new modules as they become available and you're gonna be the first one to receive them because after uh 23rd august the doors are closed and only the people who join the pre-sale will uh will be part of this batch zero vet will work close together with me uh to provide feedback suggestions and anything else in order to to create this course so the first modules will be available somewhere in the beginning of september and then every two three weeks we're gonna release a new module then we're gonna have a call with everyone so you can say what was not clear what i can cover more what uh what should we do next what to prioritize the next modules and so on so uh see you there i guess don't miss this chance um yeah back to the questions i think that i covered a lot of requests uh yeah we'll cover everything that you are asking here about background notifications notification messages and so on voice notes and probably voice notes we'll see if it will be in the in the course but it may be in the next video so guys we are almost five hours in pretty tired it's friday so i wish everyone a very nice weekend a very productive one go ahead and implement the back end yourself get into the problems try to fix them write them all write the problems in the discord channel or in the comments below uh to get help from people that maybe encounter the same problems but only when like getting in these problems and then solving them you'll understand like how it how everything works how everything is connected and uh one more suggestion is not to stop here go one extra mile i gave you a couple of homeworks uh during the video but you can implement so much more here for example sending uh emojis i don't know implementing the real-time updates not only for the chat screen but also for the chat rooms um and many more sending images and so on some of these advanced features will gonna cover next week but it's a good exercise for you to see how you would implement it and how would i implement it next week so don't stop here guys uh keep grinding keep working and um yeah soon you're gonna become a full stack mobile developer uh all right here we go take care guys no no before that we have this beautiful outro that i cannot miss showing so go ahead and follow which one this video this video any of these two videos they are both amazing and i'll see you next week

Channel: notJust․dev

Views: 25,418

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native auth, javascript, react tutorial, aws amplify, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app, signal clone, build a signal clone, signal clone react native, signal clone tutorial, signal private messenger, signal app, sonny sangha

Id: T0D4GF5YryI

Length: 279min 9sec (16749 seconds)

Published: Fri Aug 20 2021