Build a Secure Realtime Chat App in React Native [6] 🔴

all right guys that was a bit embarrassing so after some time i already forgot how to set my live streaming setup and i messed around with some cables couldn't manage to do it but yeah finally we are live hello everyone i really missed you uh these weeks but today we are back we are live with a new build uh yeah let me know in the chat if everything is okay if you can hear me and um yeah today we have an interesting topic we have we will continue with signal clone and specifically today we're going to focus on the end-to-end encryption aspect of a signal application when we started signal clone that was in my head that was the main idea of this application but it should be secure and specifically end-to-end security encryption in order for messages not to be able to be uh read even by the application provider or by internet providers um yeah this is the difference between signal and other chat applications so we have managed to build five videos with different features in this application like messages photo and audio messages text messages uh smile smiles and emojis and a lot of other features but yeah today is the time to take this bill to the next level and implement the security with end-to-end encryption so shortly uh let me figure out with my devices here all right um yeah so in this video we're gonna talk about first of all what is end-to-end encryption uh then we're gonna speak about how does it work from a high-level perspective and finally we're gonna implement end-to-end encryption in our signal clone and we're gonna do the public and private key generation then saving these keys where they are intended to be saved for example not exposing the private key and so on also we're gonna implement the encryption and decryption of messages that are sent and the messages that are received on the user profile or device all right so um yeah if you're new on this channel hi my name is vadim and i'm i'm glad to see you here and i'm thankful that you joined today's live stream i'm a full stack developer for over seven years and nowadays i'm decided to share my knowledge and my experience that i have with you guys here on youtube so if you enjoy what i'm doing here with no jazz development please smash the like button and subscribe to the channel and yeah i'll be very grateful for that also you can follow me on social medias on twitter and instagram at not just dev i post there a little bit more often so some behind the scenes you can find there all right so uh without further ado let's roll the intro and then we're gonna get started [Applause] [Music] and we are back so um all right so let first of all let me greet everyone who has joined our chat here so i'm using the same mouse for two pieces and it's pretty tough to switch from one to another so hi everyone where are you joining us from today hello steve siva surya hello guys i didn't think you will continue with video 6. i also didn't plan to continue with video 6 because uh yeah these weeks i went uh back to my home country and it was three weeks and now i came back and i decided to start with a new build which i can't wait to start but i thought that it's very important to implement this end-to-end encryption and it's also something new for me and very interesting how to how to do this stuff in react native and that's why i decided to take one more day and implement this uh this important feature in our application okay so push notifications here guys um a lot of people are asking about push notifications however this uh feature is a bit more advanced and i'm thinking to dedicate a separate video to it and um yeah i didn't plan the date when uh i will work on it because i'm pretty busy with working on the queries but i'm definitely gonna do a separate video on push notifications um so yeah please share all previous videos you can find all the previous videos by the way in the link in the description below all right okay okay okay so guys let's um let's speak about um encryption and before getting into the specifics of end-to-end encryption i want to talk a little bit from a high level perspective about um encryption in general so so uh there are two types of encryption symmetric encryption and asymmetric encryption when it comes to symmetric encryption the key that you use to encrypt data and the key that you use to decrypt data is the same key so here in this diagram you see that you have a plain text you use a secret key to encrypt the data and after that on the other end use the same secret key to decrypt the data this is fine for some scenarios and some use cases uh however this in our chatting messaging this that does not solve a lot of problems for us because this secret key as you can see is used on both ends encrypting and decrypting and you would have to share it and if anyone else will discover the secret key they will be able to decrypt your messages so this has also some drawbacks on the other hand the asymmetric encryption uses two separate keys to encrypt and to decrypt the message so to encrypt the message we are using a public key a public key can be shared anywhere on the internet it is meant to be public however to decrypt the text that was encrypted you need the private key where here it's called the secret key and the secret key is the key that you should not share it should be kept privately on someone's device so um yeah what else i can say here about this yeah the the most important parts here is that the public key can be shared using the public key we encrypt data the private key should not be shared anywhere should be kept private and with a private key we decrypt the data so two separate keys are involved here and you might have encounter visa symmetric type of encryption if you are using github or git lab so there you most probably have set an ssh key where you generated uh a key pair a public and a private key on your computer then you took the public key and gave it to github now every time you make a connection your data is encrypted with a public key and then decrypted on your end with a private key and only you can decrypt this data so that's why yeah this way uh it improves security um because only the person who owns the private key or who knows the private key can decrypt it okay um all right so this is about symmetric and asymmetric encryption um so as you can see here uh uni we need two keys so let's have a look a little bit about the process of generating these keys and how and where we can save it so here i'm speaking in the context of our application of our messaging application so for example the use case is the next one so a user enters the application he creates an account after he like in the process of creating an account the use the mobile application the phone will generate a key pair a key pair consists of a private key here on the top and a public key here on the bottom now what should we do with these keys so first of all as i said private key should not be shared anywhere so we should keep oh my god what's going on here so we should keep our private keys private and secure on the device storage so we take this private key and we save it to the device storage um yeah on the user's device we do not share it anywhere with the back-end with a database and so on it should be kept privately all right the next one is the public key this public key can and should be shared with other users that you want to exchange information with so the public key we save to database in our case that's going to be aws amplify and we save it there together with a user account okay if you have any questions on this slide let me know and i'm gonna try to explain but yeah it's pretty straightforward we generate two keys the private key we save to the device storage the public key we save it in database so that our users can query and can get our public key okay so um sending a message during when you send a message you'll want to encrypt this message so imagine that the user a sends a message to user b so user a will type on his keyboard the message in a plain text message like in plain english or any other language now uh in order to encrypt that message we need to know the public key of the receiver so if user a sends a message to user b then we need to know the public key of user b because we want only user b to be able to decrypt this message and because in the previous step we have saved every user's public key in the database from the user a sides we can query the public key of a user b the user that we are chatting with we get it from our database in aws amplify and then using this public key of user b we encrypt the message we encrypt this message and we get an encrypted message this encrypted message is already not in plain text it's not english it's encoded encrypted and this message can be saved in our database and now even we as administrator or aws or anyone who is looking at the data in the database they will not make any sense of the data because everything there we keep encrypted okay this is one step of a process this is one part of a process of sending a message and encrypting now on valver side here from user a we send the message to user b now let's see how user b will receive a message and how he will decrypt it so on the user b side he will query all his messages from aws amplify then aws amplify will return him a list of encrypted messages or let's say one encrypted message now how we will decrypt it first of all we need to read the private key of our user which we saved on the user device so to read the private key we are reading the key from the user's device which is kept safely there now having the encrypted message and the private key of a user we can decrypt the message and only we can decree the message because only we know of a private key anyone else having this encrypted message will not be able to decrypt it now this process will decrypt it we have a decrypted message in plain english so it's back to uh normal text then this message can be displayed on the screen so yeah this is from a high level the whole process of generating uh private and public key payers then encrypting the messages that you intend to send and decrypting them one note here that i want to say is because each message is intended for one user because we encrypt with that users public key the use case when there are a lot of people in the group but i'm gonna explain a bit later for example if there are five users in a group you should say the same message five times in the database basically you take the plain text message and encrypt it with each user's public key and save it separately because you want only that specific user to be able to decrypt it other ways would be to somehow generate a public private key for a specific group but in that case you would have to share the private key among group users and sharing private keys is not good in terms of security so that's why we will have to think how to uh design our database in order to meet this requirement that every every message should be saved multiple times encrypted for every user in a group in a group yeah basically that's what i wanted to say uh bro how long is this video so uh yeah we just started i just covered a little bit of theory about encryption decryption symmetric isometric encryption and now uh we're gonna get our hands dirty and try to implement these features in react native in our signal clone so get ready get yourself some coffee i didn't have time to get myself some coffee because i've been preparing this live stream from seven in the morning and um yeah let's hope it's gonna go well so yeah i wanted to say that this is the first time when i actually implement encryption so it's going to be a fun process let's see how it goes by the end all right let me first of all check some comments so we are going to implement encryption alone yes i want to focus this video only on encryption but we are going to have a lot of details here like to implement a very basic encryption something that i that i was playing around and testing that's gonna be not that hard but to design and change our database structure to encrypt the crypt and save everything that's going to be a bit more difficult but we're going to do it so uh okay unfortunately it's night time in india will be unable to follow for life we'll watch it again when it gets free yeah the video is going to be available on the channel so you can watch it afterwards uh what's the time there it's free here all right guys so uh we have a lot of things to do today so let's get started first of all i would like to switch my mouse to this pc and to run our application to see where are we with it so here i have our application from the previous video so if you haven't followed that i recommend following the previous video or you can clone the part 5 repository and move to the part 5 branch and that branch will contain the code that we are using today so um yeah here on the left we have our application and it contains a list of groups um why it has one second guys come command settings accessibility where is it general i want to change fro to light mode because the application doesn't show good display come on where is it privacy passwords no no no no no oh come on yeah i cannot do it or is it hmm device okay never mind so where is the application go back to the application yeah the issue is with the header uh in a dark mode it displays um you cannot see the title of a page but it's there so as well with creating new new groups here um but what we are going to focus today is let's open some chat rooms yeah this is a chat room and um here we can send messages hello and we can see that it has been delivered it has not been read uh yet all right so um now our our next step is to take this message and to encrypt it and save it encrypt it in our database because um yeah like why do do we need to do that uh it's because it is to provide like privacy because with this approach uh let me try to show what you can do so let me open aws console let's sign in and here let's open aws amplify page and this signal clone so from here i'm gonna press edit backend to open the admin ui so in the admin ui here uh we as the admin administrator of the application we are able to see all the where is it no chatrooms but let's say messages we are able to see all the messages and see what users are chatting about an application that respects the privacy of the users should make sure that these messages are encrypted and va is very the application provider they should not be able to see what the users are talking about this is um sensitive data and yeah that's why we need to encrypt it all right so uh to do that uh we are gonna use a couple of libraries so if i let me uh open the first one that we will need it's called uh tweet knuckle and here it is or even it's for gs gs yeah this is a library um which has been ported to javascript it's based on this tweet and acl i'm not sure if i pronounce the name correctly but as far as i research this is a very well-known cryptographic library and specifically this library also had an audit so you can be sure that [Music] it works securely and does what it say so uh using this tweet knuckle library uh or tweet and a ci i don't know can someone confirm me how is how it is called using this library we can first of all generate a first of all uh generate public and private keys then using this public and private keys we are also able to um where is it to encrypt and decrypt information okay cannot find it here in the documentation but we are gonna get there so yeah this is the one so using this secret box we can uh encrypt a message using the public key decrypt it using our private key and do all these use cases that i have shown you previously so let's start by uh installing this library uh second so yeah come on where is it yeah npm install tweet knuckle let's go in our project and let's open our terminal let's open a new terminal here and let's let's install the library using npm install tweet knuckle so while it is installing let's wait a couple of seconds and from um where is it yeah here from uh the examples examples where is it examples let's try to do uh to generate a key pair so let's open this wiki with examples and let's uh start with generating a simple random bytes like a random array of bytes so i'm going to copy this random bytes and this import this is what we will need so in our application let's open our app.esx or yeah let let's do our work here in upds and after that we're gonna see where it's better to move it so at the top here let's let's import uh what do we have to import secret box and random bytes secret box random bytes from twit knuckle and let's just console.log the random some random bytes the cryptography depends a lot on random numbers so for example mf.random is not a perfect function from cryptography that's why it's very specific like which library is behind the random generator so let's just console log here random bytes okay uh if i save it secret box uh we see an error no p r and g um okay so this error uh i spent a lot of time understanding what's the issue about but basically what it means is there is no uh native library that will handle the random generation of numbers so in this case in our expo environment we there is no default one so in browsers there are default ones and because this uh twitter tweet knuckle works with js it works in browsers and in browsers it can detect this pr and g automatically but in our case it's a different environment it's expo it's on mobiles so we need a way to uh manually set this prng that will help us generate a random uh array of bytes basically random numbers uh to do that to generate random numbers in expo there is a library called expo expo random yes expo random and with expo random we can use functions like get random bytes and sending the byte count how many random bytes it should generate so we can use this one to provide random values to our cryptography cryptography library so let's first of all install expo random and after it will be installed let's go back to our documentation of twit knuckle and see here somewhere a way to set p r and g okay i'm gonna so uh here you can see if a platform you're targeting doesn't implement secure random number generator but you somehow have a cryptographically strong uh source of entropy uh which is not math.random um then we can implement this pr and g uh manually ourself so this cryptographically strong source of entropy for it we are going to use expo dot random expo random um so let's copy this function and let's define it here in our application so before doing random bytes we need to do um i'm going to import set prng from twitknuckle and remove it from here so set p r and g a function that receives two parameters and uh inside the function body we should copy n random bytes in the x x is an array of bytes n is a number so we need to if n is 10 we need to copy 10 random bytes into x okay so um how we're going to do that we are going to use our expo dot random and specifically get random bytes so let's import get ran them random bytes from oh my god where am i from expo expo random run like this get random bytes okay so first of all let's generate a list of bytes like an array of bytes so cost random bytes equal to get random bytes the function that we just imported and here it expects the number of bytes so the number of bytes is this and that we will receive like this random and now we should copy the first n bytes from this array to the x array so simply let's do a for loop from zero until n because we need to copy n byte i plus plus uh x of i is equal to the random bytes dot i and that's it that's everything that we have to do now uh our console log random bytes should have if everything works should have output some random bytes let's have a look at our page here let's clear everything and let's try to reload let's select the iphone from the left panel and here there are some issues with two children but that's not related to our stuff i saw there an array here an array with random bytes and this means that the library that we are going to use next is working properly on our system in our application using expo.random as a random generator by the way guys if you um because we have worked on this signal clone like we started more than a month ago your api key might have expired so here is a side note if your api key expired um because it expired for me and i had some issues with the key and i think even now no now i don't have it so uh to fix that issue if your key is expired go to amplify here backend api parameters.json and here if i can remember what was the name of that parameter um amplify api genius rate api key where is it i am making gener no it's not here it's the first link and you need to add the api key expiration epoch to zero so here api key xp ration epoch you add it to -1 now you in from the terminal you do amplify push what this will do this will delete your uh api key because it is set to expired and when you're going back here after you did the push you delete this line and you do push again and this will generate a new key and everything will be working again so this is a little bit of sidetrack if you're having these issues but now let's continue with our with our library okay okay all right uh so let's have a look at our yeah secret box an example using symmetrical crypto a single key for encryption and decryption no that's not what we need we do not need symmetrical crypto we need asymmetric so you can scroll down a bit in the examples and here is the example for asymmetrical encryption okay all right so uh first of all let's add a folder called not here let's do it in the root called utils and let's add file called crypto dot js and we're going to keep all the function methods for our crypto here the first function that we will need to move here is from the up.tsx is the set pr and g so let's copy this function from the set prng and let's move it to the crypto so um let's do it as this let's delete them we will transform it into an arrow function using the arrow here and we're gonna do export const p r and g equal to this one okay in our update s6 let's do import p r n g from utils crypto so set prng to pr ng back random bytes can find vermont get random bytes yeah because get random bytes should be copied from here and imported here save and now now it works back as we expected okay so the next the next step the next step is to do the encryption or no no no before encryption we need to manage the key pairs we need to manage them keys for our user what will be the steps to do that so i'm thinking that first of all let's try to copy this example in our application and make sure that everything is working um from this example and to make sure that yeah like we we have this encrypt and decrypt functions and then we're gonna think how to put it together with our backend so let's copy our encrypt and decrypt functions from here encrypt and decrypt let's copy them and let's put them in our crypto.js okay starting from from they in encrypt what do we have here so basically we are not using typescript here so we can delete the types for our variables so i'm going to delete it from here delete any and delete the type of a key if i save we are in the same line secret or shared key json that we want to encrypt and the key okay be kind behind the scenes um it takes the keys it uh decodes our i mean it encodes our message from string to uh to be of type um unsigned in and then that message from bytes it encrypts it using the the secret key okay so there are a couple of things going on around here we can go into more details about vm a bit later but now let's try to see if it will run and the same with a decrypt so here let's delete the types of our parameters because we are not using typescript at the moment and yeah now uh where do we get these new nons uh we're getting it from where yeah it's a function yeah we will need the two function new nodes and generate key pair which is going to be here on the top all right generate key player box key pair okay i think we will not need this one yeah this one the question mark from the key it says that also can be used only in typescript so yeah new nouns we have it here the code utf um very important decode utf and base64 from twitnakal utl and this is a separate library this is a separate library that we can install and it provides some utility functions that are not specifically related to cryptography but they are more about encoding into uh byte array uh decoding from base 64 encoding to base64 and so on so uh as you can see here in this notice uh instead of this package the creator recommends using the stability packages uh which are intending from for the same functionality so i try to use the util function this library and it gives you an error because uh again there are some missing dependencies on in the environment of exponent react native however stable lib and stably base 64 they are working fine in our environment so let's grab them and let's install them so let's just grab the name of them and let's do npm install stable leave this one and stay believe stable lib base 64. we need these two one is uh to convert from and to utf-8 and one is from n2 base 64. so let's start importing this from stable lib utf and one we will have from stably base64 so here we have a function decode utf so for the utf we can destructure the code and let's rename it because we're going to have a same decode here so let's rename it to decode utf-8 make sure to name it the same because it is used in the code as the code utf-8 and also in code as in encode utf-8 the same for the base64 so let's take the decode from there as the code base64 and in code as in code base64 let's save and now we have the decode and we also have decoding code the code and in code below all right so let's now uh take the rest of them where is it random of the example here is the example right and after the decrypt function we have here a demonstration of encrypting and decrypting so let's take this object and let's go to our app.tsx so i'm going to remove this random bytes but i'm going to do uh okay object hello generatekeypayer we're going to generate key pair let's go into the crypto and do const j const export now export cost export const gen rate key pair is going to be where is it box generate key pair if i'm not mistaking that's how it is done here generate key pair box key pair okay it's key pair key pair no key pair like this so let's import the generate keypair from there and what what else um we will need box from twit knuckle here uh encrypt from crypto and decrypt from crypt from our crypto the the functions that we just uh created in our crypto here encrypt and decrypt okay so we even have an object a json object it has a key hello and the value world when uh we generate we simulate i mean yeah we generate a key pair for user a and a keypair for user b okay so uh i'm gonna move it a bit around you know but no let let's do it like this now let's think that user a wants to send the message to the user b what the user a will do this is not from here let's do it like this so what the user a will do it will create a shared key based on the user b public key that he will query from the database which can be public and the player the user a his secret key then with this shared key he can encrypt the the object that it wants to send it encrypted there on the other side user b will create a shared key using the sender public key and his secret key and then he will decrypt it using this shared key and when we cancel log we should see that the object that encrypted uh the object and decrypt it should be the same so let's have a look um okay and it find is not we have an error and a fine is not an object evaluating expo random box keypair keypair here expo box keypair random key pair let me check the documentation for generating the key pair knuckle box keeper generate a new random key pair for box and returns it as an object set p r and g let's try to reload the application come on reload hello guys everyone who is just joining uh we today uh shortly we are implementing uh asynchronous end-to-end encryption in a chat application so right now generate key pair it's somewhere here generate export generate box uh i think i know why we need to do this set p r and g probably here on the top so set prng is going to come from experiandum and it crashed completely but we will be able to try again try again what's going on let's try to did it stop yeah i think it stopped it crashed so i'm gonna restart the server here [Music] let's just restart it in hopefully the issue will go away and let's run on simulator so set prng is not a function um where oh in crypto let's do it directly here a set pr it's not from expert random of course it's from where is it and box as well is not from here what the i was thinking about import box and this from tweet knuckle you can find very sad p r and g app.jsx okay yeah we need to remove set prng from here this one and now can find variable random bytes random bytes random bites what it's in crypto in new nuns cryptogens random but yeah yeah yeah wait a second i think if i missed something a random bite yeah not randomized but get random bytes unexpected type object string as this so this is happening and i know for why uh this is for decoding and encoding the message from string to uh the utf like the u unsigned integer array so the only thing that we have to do is to replace from decode utf-8 to in code because it has been messed up in this libraries so in code here utf and in code utf as you can see here it expects a string and that's what what we are giving jason stringify and it will return a new int 8 array that's what we expect and where we are using it again here in code utf in code utf we expect a string but we are giving a array of bytes so that's why we need to replace with decode utf save and now it should work let's have a look in our here let's scroll for some logs or let's do it again reload reload i saw it somewhere i saw something so the initial message was object hello world this is the encrypted message which looks quite random and the decrypted message is hello world and as you can see as you saw here we encrypted the message with the public key of user b but we decrypted it with a private key of user b so we simulated encrypting and decrypting on two sides all right so this with this being said we know that we can encrypt and decrypt and generate keys for uh in our application uh now the our goal is to integrate these functions of encryption and decryption in our messaging part and also generating the key whenever the user signs up saving it there and then using it properly okay so before that i really really need a coffee so one minute and i'm gonna be back and we are gonna continue implementing uh our encryption for specifically for our messages uh you know what no i'm gonna go and make myself a coffee whenever i will wait for our api to update all right chill chill so let's first of all then think about what data changes we will need in order to accomplish this so if we look at our where is it keynote here i'm going to go through some of the diagrams here and look for the parts where i'm referencing aws amplify so here we need to save a public key of a user to database for that reason our user the data structure for our user should contain a new field called public key okay uh then when you have a message the message should also do something all right all right all right okay so let's go in our admin ui so if you don't know how to do that open your aws console from here go to aws amplify and let's open signal clone edit backend and in the admin ui here we're going to do some changes to our data structure let's go to our data here okay one second yeah now you should see it better let's go in our data here in the left side corner and first of all edit the user table add a field here public key the public key we will keep it as a string yeah let's keep it as a string and actually it should be required because if a user does not have a public key nobody can send messages to him but yeah let's keep it as not required in this case because we already have some user in our application and not all of them have the public key so let's uh this is one thing public key for the user now um the next change as i said now that we encrypt each message for specific users we say that this message should be read only by the specific user b then our message should be adjusted to point to the user to which it is intended so that we know that okay this is the message for me i should try to decrypt it and if it's not a method for me i don't have to decrypt it and i don't have to display it in replication so we will in a group of five people we will have to save five messages with the same uh with the same content but encrypted with different keys for five different users so i'm gonna add a new what relationship and uh one message to one user one message to many users no it's one message to one user right so if i save did it add [Music] what did i do there no um user id is relation source okay other relationship user one message a relationship name is for user for which user this message is intended for user messages okay let's uh let's try it like this for a user i hope it it will contain this for user will be able to save it um yeah let's try let's try to go on top and do save and deploy and this will deploy our new changes please make videos using javascript that's what i'm doing i'm using javascript so until we wait for our backhand to deploy which is gonna take one to two minutes i'm gonna go ahead and grab myself some coffee but you don't live anywhere we are gonna continue with our end-to-end encryption all right so it's still deployment in progress uh can you please tell me that uh how can i add radio features in spotify up as i'm making my major project for my undergraduate um i don't know like you should find some radio apis um i don't know how it works specifically with radio like i don't know you can integrate it with some apis but that's not radio events some spotify api worm um the sound cloud api i guess they have a public api and you can integrate it with that and i think for an undergraduate project that's going to be very good [Music] okay come on come on come on yeah it's almost done uh did you show how to implement number of unread messages and if so in which uh video uh no we didn't implement that feature we implemented the other interesting features uh i'm gonna give you some ideas of how you can implement it so in our data message status sent delivered red so you're gonna do a query with a very specific filter a filter um that will filter the messages to be part of that chatroom that you are looking for for example which has a status of unread and that that query that has a status of sent and that query will show you it should be sent or delivered everything except red that query will return you all the messages that have not been read yet and you can pop that bubble the issue there is going to be that it's going to take into consideration as well your messages that you are sending so you can filter as well based on the user id to to be different than your id so you'll have a couple of conditions there one with the chatroom should be the chatroom that you are looking for the user id should be different than yours and the status should be different than red and that will return the necessary ones ah okay so deployment successful uh click the next for the next step so let's grab the amplify pool command and let's go back in our project and let's run amplify pull this will bring all the changes for our data structure in the database we'll bring them here locally in our project i need coffee will the chatting functionality actually work uh the chatting functionality works at the moment as well so everything that you saw here um i can open it my device and this where is it i don't i cannot open it now on my device but yeah this chatting everything works as expected and it's also real time also displays the status of a message if it's sent delivered or red and so on so right now our yeah successful generated models okay successfully generated models um and now what should we do amplify let me see something hmm use your eye okay so um the first step will be to uh in our user table where is it we need to save the public key for the user and to save a private key in um on our device storage so where will we do it uh so we think how it works right now is that our logging logic like sign up logic is handled by the automatic authenticator uh from it which is coming from amplify so we cannot actually hook in the um let's say the moment when the user signs up creates his account uh because it's handled here by the authenticator [Music] valve indicator will create the user in our authentication service which is [Music] cognito and then uh we in the second video i think of our tutorial we have implemented that where is it amplifybackend function vet lambda function that will save our user whenever a new user is signed up it will save it in our dynamodb basically in our database the thing is that here as well we cannot add the private key because this function is executed in the cloud the whole point of generating the public and private key is to happen on your device so that your private key will not travel through the internet it's going to be it's going to stay there privately so uh it cannot happen here then where should it happen that's the interesting part let me think where we can add it should be on just a simple button that will uh set or update the private key um yeah let's let's do it that way because when we will add that button we will be able to update and generate a new key if you think that your key has been compromised so having that button is not that bad like preferably it should happen automatically and because of some of the reasons that i told you right now of how things is are happening at the moment it's going to be more difficult to implement uh generating the key automatically like without any user input on the other hand let's you know what let's define a screen for for some settings so i'm gonna do what new screen new file settings dot esx and recognition functional export settings here are our settings what i'm going to bring to the settings i'm going to bring this ugly log out button that we needed only to test how log out works and where is it even placed it's in the screen chat room no home screen somewhere here should be this log out yeah let's grab it from here and bring it to the settings screen we will need to import pressable and we'll add another button like update key pair on press logout which is coming from logout is coming from where come on log out okay it's here settings and data store clear and authentication as well okay perfect so now we need to add some a way to um navigate to the settings to our settings so in our navigation uh chatroom header should add it there i can add it there um for for a moment you know what i'm gonna do i'm gonna delete this color scheme and now uh yeah because vetto's messing with my color scheme or i can do it where is it color scheme no i'm just gonna let's do it like light perfect uh okay so in the chatroom header in the chatroom header i want to add one more no not in the chatroom header in the index home header here home header i'm gonna add another pressable i'm gonna copy it from here no no i'm gonna yeah and i'm gonna put it instead of a camera because we don't need that camera um the name will be i don't know settings do you have something like this yes it has settings and on press it's gonna go to the settings screen but because we don't yet have a setting screen let's define it here so stack dot screen and name settings and component equal settings and that's it and i'm gonna bring it here no say not settings from here we need to import import settings screen from screens settings let's replace the name here and if i press on the navigation navigate settings right settings yes now it works it goes to a new page with the settings okay perfect so invest settings up the tsx no settings [Music] let's add another pressable very bad styles there why is it red i don't know why okay so the text for this pressable the first one will be update key pair so whenever we press an update key pair let's add the function update key pair sync okay so uh what should happen first of all generate private uh and public key then save private key to async storage and save public key to user model in data store these are the steps that we need to take okay to generate private public key we already saw that in our app.esx we implemented implemented it and here is pair a and pair b so let's take one of here go to our settings page generate public key um i'm gonna do structure right away and generate public key is gonna come from crypto utils here well it's not here it's from one above utils crypto generate key so it will return a key pair and the key pair where is it come on it should have a private and a secret right here public key so let's away destructor them public key and secret key okay generate key pair save private key to async storage uh our secret key is of type yeah uh assign the integer array so basically an array of bytes and whenever we save it to a sync storage let's see if we already have expo async storage let's install async storage and this is going to be the library that will help us save some data on the device storage that's what we need for our private key so let's do expo installation storage but before that let's just do console log public key and secret key and now let's have a look at the logs let's go to the settings page and press on the update key pair okay yep because okay that happened because our the function was not assigned to the onpress event for them this button so let's update it here and let's login once again yeah it's here so let's go here update keypair and that should have yeah here is one of the keys which is the first one is public and the second one is private both of them are array of bytes okay so uh was that installed i'm gonna go ahead and do a git git commit just because i'm afraid not to mess up something and not having a point of going back encryption work in progress okay so uh let's where is the documentation here of the sync storage import testing storage is yeah is set item and get item okay all right so save private key to asking storage first of all let's define um a string that will represent the key not to hardcode it always so public key public key so const no not const await async storage dot set item the key that we want to the name of a variable that we want to write basically don't confuse the key here with our private key or secret key because this is just a name of a variable how we want to write and how we want to receive it back and the value is going to be our secret key here dot 2 string ok seeing stories that item public key secret key to string you know i'm thinking if these things are better to happen in our crypto file because we have it there settings okay never mind uh save private key to using storage and then the next one is save public key to the user model in our data store okay first of all we need to get the user from our data store so um user data equal let's first of all receive the user that is authenticated so auf dot current authenticated user then based on the id of the authenticated user we're gonna get the database user is equal a weight datastore dot query we are gonna query the user model we don't have it let's try to import it uh import from source models and there we have user as user model let's do it like this so where are we user model with the id of user data dot attributes attributes dot sub this is by d of a user taking from the authentication so let's do console.log db user first of all to see if we find correctly the user so right now it should whenever i press on this button it should search and find the user wealth indicated user so nothing happens nothing happens why nothing happens settings await set item console log secret key was saved console.log db user let's try to reload because it doesn't seem to have been oh no yeah i see here user everything is fine actually it just takes some time right yeah secretly saved user and here it is uh so yeah the user is here public key is still null but we can fix that and we can say um a weight data store dot update or how is the update function update no save and we're gonna save a copy in what screen did we have updating components chatroom item copy no it's not here let me find in folder copy off i remember it's copy of yeah so data store save the message model copy off the message itself updated okay got it so we want to update the user model and which user model the db user and here oh no no user model dot copy of the database user and uh updated user will contain private key public i mean is equal to public key dot to string so i'm going to type user and define is not assignable oh we need to check if we didn't find the database user we return but before returning we want to alert dot alert um user not found i don't know so let's do update key pair and in advance let's do alert dot alert success updated the key pair how to write successfully like this okay update key player successfully updated the key pair okay so let's see what it saved in our where is it uh amplify admin ui let's go to the content uh you're saying that the code is not visible yeah now i zoomed in a bit oh come on so uh four way users let's see if yes look our this user which is me has a new public key in form of a string of bytes okay good and whenever i do update key pair let me remember the last 88 is the last one update key pair okay let's reload um it was 88 now it's 105. so that basically means that we can rotate our keys uh something to keep in mind is that whenever we will update the key you will not be able to um you will not be able to decode past messages because we are overriding your private key here where is it you're passing storage not public key but private key just some naming convention but yeah let's not confuse anyone so in our storage we are saving the private key not public key okay save private key to a sync storage all right so the first the first step is uh is done the next step is gonna be uh sending the messages so what's happening here reload so whenever i send a message to some user i should first of all encrypt it with his public key and then send it okay let's think how we're gonna do that that is going to happen in our message input component message input oh it's a long component i would say okay let's see what we have here it has images it has message to reply look the only thing that we're going to do is we are going to encrypt the text message let's start with the text message so our text message should be a state variable with message yeah it's this one okay so when we press on the send button which is the last one where so on press let's see what onpress function is doing on press checks if the image it sends the image sound let's focus on only the send message function let's encrypt only this one when it's a text or message and not when there is an image or something like that just to simplify our code so send message is the function that i saw it here send message okay away the data store content message yeah um this message should be encrypted this message should be encrypted okay so [Music] let's think okay i'm thinking what's gonna be the best uh the best way to do it uh so first of all let's write down some steps that we need to take get the public key of the other user uh in case it's only one now actually it's um get all the users of this of this chat room then for each user encrypt the content um with his public key and save it as a new message okay okay for each user enter the content with his public key and save it as a new message all right that makes sense um so first step is get uh all the users of this chatroom so const uh users equal await uh datastore dot query we're gonna query um chat okay chatroom users have we done anything like this we need to query chat from users but we yeah we need chat room user which was imported from models and we need to filter chatroom user only the one chatroom user dot chatroom id is equal to chatroom id so this is getting all the users let's do console.log users users and i'm gonna comment out everything else or i'm gonna do a return here because i i want to skip execution down below to just to test it out if i do return my vs code automatically deletes it so i'm gonna comment it out okay let's open our page here and let's try to send here so what do we have we have two chatroom users one is should be me and one should be elon musk user vadim this is me and it has a public key and the other one is elma's but he doesn't have a public key yet so how we are gonna do it uh you know what probably the best way will be to simulate the um communication between me on the phone and me on on that one just to hope that both of us can have this public and private key and we will simulate it let's try to see if it will run on my phone oh it's downloading very slow let me try to switch things around here a reload reload come on so um one more thing that from this list we only need the users we don't need them anything else so from at least from that list i'm gonna do also map chatroom user to chatroom user get only the user from there without anything else and now if i do like this if i send i see an array of two users first one and second one and the thing is that we also should save a message for ourself we need to encrypt it with our public key so that the logic of decryption will work on our side as well so enough chat room of two people every message should be duplicated once encrypted with one user's private public key and once with our public key and let's opening project come on try again try again back home no go back this one okay this one is loading a bit faster now for each user encrypt the content with his public key and save it as a new message uh okay so what will happen for each users that means a mapping so for each let's say for each user we want to what [Music] send message to user this function is going to send to all the users but this one will send to a specific user so it will receive a user here and it will i will copy some of the things from here send message send message to user user all right not uh so for each user we are gonna send message to user to user uh but because this is an async function we will need to wait the execution of sending a message to all users so for that i'm gonna map through this and this will return an array of promises which we can do await promise dot all and we're gonna await the execution of sending the message to all users update last message and reset fields i'm gonna think about this in a moment how we're gonna update them so the good thing is that now uh the application runs on my device so i can log in from another account here come on where is let me login there okay i am here reload and it's a chat with support so might be this one last seen online a month ago and you'll see that come on come on work i have an error null is not an object evaluating user image uri that's in the chat room item components chatroom item at 57 user is possible null so i'm gonna do it like this and now null is not an object evaluating user name as well here i don't know okay now it works and support not just dev is it this one hello oh um [Music] message input here send message to user so let me uncomment this one because i want to see the the messages the messages appearing there so um this is the user that is sending the message so we it's not changing so we can take it out of there here and wait current authenticated user um and i'm gonna send it here send message to user this one from user id no the from user id is going to be there but here is user address dot sub so besides the user here i'm gonna receive from user id which i'm gonna put it as a user id here and the message what else does the message have message okay here user id and it has a for user why doesn't have a full user id now if i'm thinking that it would have been easier if we just set a for user id instead of for user yeah because this relationship is only for filtering so we don't actually need to show for who is this message we just need to know the idea of that user so i'm gonna have to update our data here and in for the message i'm gonna remove this relationship for user and i'm just going to simply add a for user id for user id yes it's a string it's an id actually so let's now save and deploy and again it's going to take a couple of time to to do that hello fulbright hello vitor um yeah and now he's deploying so we're gonna have to wait a bit but the idea is that now uh from user but this is for user so for user id we're gonna do user dot id specifying for which user is this but let's comment it out right now because it will not work new message what else new message do we need to do anything with it let's reset the fields update last message update last message yeah let's uh call this update last message here actually we don't need to call it for all of them only for one of them last message will also be interesting to be honest okay so we might actually break this functionality of the last message because it also depends on the key of encryption and decryption so let's comment it out until that and let's try to do hello hello i cannot send anything hola and define is not an object evaluating user attributes sub user and three attributes with one t no user o is okay of user of user dot attributes dot sub okay now yeah it sends two times uh at the moment it displays two times as well but later on we're going to implement the logic to see if the message is for us when displayed otherwise do not try to display it uh okay so if i send some messages from why they're not appearing here um we're not being saved oh maybe because our backend is in deployment so let's try not to break it and wait a couple of seconds but until then let's think about the next our next steps so we have here the user the user has a public key now we need to encrypt using that user's public key if we look in our in our where abdo tsx uh to encrypt we need to build this shared key between the user's public key and our secret key so let's copy so shared shared key is going to be a key that we compose out of the public key of a user that we want to send the message to and our secret key our secret key our secret key our secret key we can simply not to re to fetch it all uh constantly we can save it in our state so const or let's just uh get it here so const our secret key is a weight a sink storage dot get item and we're gonna get item with the same key that we saved it so here private key i can do here export cost private key in order to make sure that we are using the same string from screens settings and from there i'm gonna import private key this is just a string that we are using to access the key in our storage so if our secret key is null then we do alert alert dot alert you haven't set your key pair yet that that can happen when you open the application you do not go to the settings you just go right away to send a message in that case you don't have any secret key so the alert will say you haven't set your key pair yet the message go to settings and generate a new key pair and the buttons will be no the buttons will be title come on title open settings and i can do on press here i can automatically redirect him to navigation dot no i need an access to this navigation so import use navigation const navigation equal use navigation and when we press open settings navigation navigate settings title string is not the center alert button object name or how is it called or text or oh come on [Music] text yes text and that's it that's it that's it yeah so in the case of my phone here um and what else and we should uh stop the execution because we don't want to send a message if you don't have a private key so here if i write something you haven't said to your key pair yet go to settings and generate a new key pair open settings navigation settings here open settings why it's happening oh it's for two users open settings but why private key no not private key just private key like this get item and now it's the same but why if i do update key pair it should set the key pair there and now whenever i do get private key yeah now it works and if i reload it should still work like it's written on our device storage so it should work across different sessions all right so now if you send something yeah it works we do not see that one can find variable box okay yeah that's from the next step our secret key user public key shared key okay let's import box from in import oh my god so many imports okay box from tweet knuckle so box our secret key okay argument of type string is not a symbol to parameter of type u int array okay so um the thing is that we read the private key as a string so if i do console log uh private key private our secret key you'll see that it's just as a string so we need to somehow transform it i'm gonna name it string here and we need to parse it and transform it to our secret key from a string so i'm going to take the string uh how to transform it let's first of all look at the structure of this key okay where is it come on and our back end has finished deployment so let's have a look at the structure of a key where is it can find variable our secret key and let's comment it out for a moment and here we place our secret key string okay and now if i do send here is a private key and it's a simple string representation of that array of bytes so first of all let's think how we can transform from this string to back to a string of bytes maybe there are better ways but the way i would do it is i would first split uh the string based on the comma and this way we get an array of simple in strings then we transform each individual number to an integer and from there we transform it to them an array of um [Music] array of unsigned integer so let's do that right now so const our secret key is equal to first of all our secret key string dot split we want to split it based on the comma then let's map through each number each string actually and transform it to an end parsing str okay now our secret key should look like an array of here it's an array of numbers but we need an array of unit numbers so wait a second um what is the method to transform this to let's try to search it javascript you int 8 array so there is this method from creates a new array from an array-like or iterable object okay so we can put everything here in this function so we create a an array of unsigned integer based on the our string so if i send it again our private key is of type that we need and now if i send our secret key here to the share key it doesn't give me any errors because it's of the expected type uh what i want to do is to extract this to a separate function in our crypto library because we're going to use it more so where is the utils crypto export construct to you and eight array equal string and it returns that one string so let's import it here in our message input string to array and we will send there and we import it from where do we have here utils utils no we don't one more import import from oh come on uh your tails no your tails no utils yes crypto okay now it should work back as it was working before send if i look there i should see the array no i handle promise rejections rejection string is not a function string to you is undefined what is undefined string this one crypto export coins to this one what all right i've already lost shared uh pri our secret string to yeah why are not working reload hey the sun thank you very much for your support hi alexandra yeah i ate i'm alone at home oh no come on what's going on here run why it's not running what happened there let's check the server let me stop the server uh because i'll i'll have to do something we i'm gonna close a couple of things here and let's do the amplify pool because we updated but we did not pull the changes so i'm gonna do here amplify pull with my app id but they copied from amplify admin ui and let's wait a couple of minutes updated now i can uncomment for user id this one because our message contains already for use already and let's run again the project npm start uh marco the short answer marco asked about uber clone auto complete feature and if you need to uh turn on the billing on your account so the short answer yes in order for vow to complete from google to work you need to enable enable billing if you don't enable billing you don't get any errors you just don't receive any suggestions so it's a pretty nasty error which is hard to debug but if you know that you have to enable billing there okay so back here we are this one and here let's try to send something and if i open here yeah we save a key type error type error okay so shared key shared key are you creating this shared key i don't know console log shared key is shared key and const encrypted message is going to be await encrypt is it a wait encrypt let's open the or updsx so encrypted is just encrypt share day and the object encrypt uh shared a is the shared key and the object let's just send the message the thing is that we implemented this to work with um with jason's i don't know i can do it like this like an object with a message the message yeah and the content will not be the message but will be the encrypted message let's also console log to see what's going on there uh encrypted message all right let's see here what's going on send so user user public key has but this user does not have a public key support i haven't sent my public key yet here so that's why it cannot send them private key okay private key yeah uh i know what i know why we need one more check for the user public key the same way as we did here for our secret so we can do if user dot public key come on public key if user public key then we're gonna do the same alert the user haven't set his um key payer yet go to settings and generate a new key payer um in this case we cannot do anything because ask just yeah and till the user generates the key pair you cannot securely send him messages so right now if i'm gonna try to send here something the user haven't set his keeper yet until the user generates the keyboard you cannot securely send your messages okay let's now from our side of the screen on my phone here i'm gonna reload and i'm gonna generate a key pair here go to expo home i need to enable tunnel and after i generate the key pair here then both users have their key pairs and they can safely communicate between each other so let's see where is it um okay oh come on loading loading loading and now on my phone i'm gonna go to the settings similar to what we have done here settings and i'm gonna press on update key pair but first it should load are you for hire now at the moment i am focused full time on youtube and on the project that i have so my app has loaded here update keypair successfully updated keypair now from here let's reload in any case and go to our support.notjustdev and try to send him a message what do we have we have a list of users both of them both of them have a public key here is our private key which is perfect uh the private key again our private key and handle promise rejection type error unexpected type object string use this but where so what we see here a private key but shared key okay so again the public key here in our case is uh of type string so i'm gonna have to do the same there string two yeah like this and let's do the same right away here okay okay shared key let's try right now because in database our public keys are of type string but we need okay i see it so it's saved two messages and both of them are encrypted encrypt encrypted message shared key that's perfect one message is intended for us to see and another message is intended for our users for example uh here uh if i show you like this i still see two messages come on focus and yeah first of all let's let's filter the messages that we display only to be the messages that contain for user id our user id basically to display only messages intended for us not for everyone else and when we will implement that uh the past messages will go away because we do not have a for user id but our new messages are going to be displayed so where is that happening that is happening somewhere in screens chat room screen and here fetch messages away data store query message model message model where message chat from id equal to chatroom id and and for user id is equal equal to my my id but my id i can get it with i can do it like this uh of user equal await authentication dot current let's import first of all authentication current authenticated user and const my id equal of at three buttes dot sub now we fetch messages only that has there for user id equal to already so in this case as you can see the message starts with eq it's encrypted we're gonna decrypt it later but i want just to show you that um if i don't have this one if i don't have this part to filter based on who is it for i see both of them one of them ends with u equal valve one ends with four equal so if i remove here i see only four equal but on my phone i save our message which is with come on doesn't want to focus but his vowel message so now we display correctly the message who is it intended for the only thing is to decrypt it the only thing is to decrypt it uh give me one second and i'm gonna come back and we'll continue with decrypting the message all right i'm back so um what i was saying decrypting the message let's go in our abdot essex and see how it happens this is the ultimate ultimate stuff bro thank you thank you very much so to decrypt the message now we create this shared key but we created based on the sender public key and our secret key okay um where we will do it let's do it in our components message component index no message here so what's happening here props [Music] it has some icon text message content yeah here message content message content okay this is the stuff that we need to decrypt the message content uh where is it coming from our message is in state and we get it if message no okay okay use effect where is the user oh my god there is so many things happening here message user id it gets the user the sender yeah we will need the sender because we will need his public key uh oh and the message itself is coming from a prop set message prop message i'm thinking to message yeah uh const i'm gonna add a new decrypt decrypted content set decrypted content is going to be use state string or i can do initially empty string okay so i'm going to register a use effect that is going to do the decryption everything here is with use effects so i'm going to register use effect so whenever our message changes the message is the message object itself like that contains the sender everyone else so whenever the message if messages null we will stop this is just to ensure that we're not doing anything here um or even if message dot content is null we're not gonna do anything here then here we're gonna do decrypt message dot content and after that uh set decrypted message decrypted content to to the decrypted message now i'm gonna just say decrypted just to see that it works and here instead of message content uh i'm gonna do decrypted content decrypted content yeah so uh going back to our support here we see the text is decrypted i mean it's hard code it decrypted but um but it's there so now we should think about how we should decrypt it decrypt the message so from up.tsx i'm gonna grab some something from here shared b decrypt uh message okay so uh box we can import it come on import doesn't want to import it but we are gonna do it ourself import a box from tweet and a knuckle uh pair a public key this is the public key of the user so it's going to be user dot public key where user here and i'm we are displaying the user the owner of the message this user is um let's also make sure that we have it uh okay and we also have to as you remember in our chatroom screen no uh where message input here to string to to to convert from a string to you in array so let's try to import it from crypto and player b i mean here is the secret key but we know only one secret key like our secret key so we will decrypt with our secret key because the message was encrypted with someone else's public key i mean our public key and now the same as we did here with our secret key message let's move this logic in crypto i want to do it there because yeah export it's very technical and you always have to copy paste it so it's better to put it into an abstract method like get my secret key and it's gonna do i think storage get item private key that we will get [Music] my secret key and let's move the private key from here to crypto settings let's copy this from here to crypto and yeah get my secret key and the same thing we will do in the message uh const my key equal get my secret key it's a synchronous so let's do um put this into a function const decrypt message a sync function that will contain now this is outside it will contain everything that we have here let's call the decrypt content and get my secret key let's import it from crypto my key my key but we can actually do the string to end right away there in the crypto not to have to do it here so let's add here const key string equal a weight let's add one more closing bracket here and return return key string but with that function string to you in conjunction require an initialization value where is that message so what's going on there it's not returned null is just return oh a lot of things uh to do my key and define is not assigned to parameter my key so if my key also return don't do anything okay decrypt so shared key is this one decrypted is import the decrypt function function from crypto using the shared key and the encrypted message which is message.content we are decrypting it and i'm gonna add it here so i think storage get item that's in crypto i think we didn't import i think storage import i think storage save reload crypto unexpected a weight unexpected weight unexpected weight because this should be a sink no no no no no this one sorry a sink reload all right loading now but i can check it here unable to find more reload dismiss reload do something so run ios simulator bye so something is happening but the message is not displayed [Music] let's go in the message input here encrypted message not in the message input you moved to mac again from windows uh no during live streams i'm working on two machines like the my windows machine is for streaming everything and my mock machine is for coding so i split these two things set decrypted let's try to console log shared key and console log decrypted decrypt and decrypt okay let's see what's going on there so if i go to this group so what do we have here object hello object hello world this is coming from our app.js okay uh now let's remove everything and let's open our support here it's it's it's nothing is happening there you know um why decrypt oh i messed up the name of a function decrypt message you can find variable decrypt dismiss reload okay come on let's go we're almost there does companies use export bare rack native it really depends on the on the project not even on the company because one company can use for one specific project expo and for one project react native cli so in general like if your product does not depend on a lot of native dependencies like i don't know before there were a lot of libraries that depending on native but expo with time added support for them so for example right now even uh payments with stripe are integrated in uh expo so a lot of limitations that have been there a couple of years ago are not anymore but still like for some application but need that native libraries in that situation it's better to go with bay react nato if you're not sure you can start with expo and at any point you can eject um and hope that everything will work okay during the ejecting process i was trying today to eject the project and i had some issues i want to talk with the team at expo to see what's going on there so what's happening what's happening baby come on um use effect console log maybe it stops here oh i didn't add user as a dependency to this user effect so initially the user was not there the public key is not there it was ending here but when the user updated it did not trigger the use effect to re-render so right now we have some errors can find variable our secret key string where is that can't find our secret key string that's in here no crypto oh if key string then you do that yeah okay all right okay objects are not valid as react native child found object within kim all right that means that that everything is seems to be good here decrypted object message hello so decrypted dot message save hello you see and both both of application display hello here you see hello let's do it like this how are you i'm interested if it will work what's going on there okay send possible unhandled string split is not a function in string split string split is undefined string to where is it coming from message input string dot split split no it should be crypto string string str i don't think it's string dot split or i know message input i don't need here i think storage i don't need here what else start and that's it our secret key string and here i do not need yeah here i do not need to convert it if our secrets if it's then we will return okay okay now let's try to send one more hey again and handle content space is not a function in content split is undefined user public key where wait a second here as well yeah oh my god and it's not a string it's our secret key okay okay okay it works it works uh and from here how are you send how are you boom it's done it's done guys and i'm not sure if you realize like the whole concept of this because it looks like it was working beforehand but yeah you can see here on the phone as well the messages are decrypted come on how are you and hello and hey and you might think okay and it was the same before but now we are as the application developers and as the application admins if i go to the content right now if i go here to the content and check for the messages uh the one that has four user like these messages for example this one this is the content you don't don't know what is written there and there is no way you as a developer and anyone else to decrypt this message without knowing the private key but the private key is kept only on the user device it never leaves the device unless i don't know the device itself is hacked and in that moment you can regenerate and create a new private key so yeah even even knowing the users for even knowing the users public key that we save in database with this public key you cannot decrypt any messages with a public key we only encrypt it and we use a private key that we never share to decrypt the messages and and these messages are separate and individual for each user the message hey how are you here is not the same as hey how are you here there are different messages in our database encrypted with different keys and when you decrypt it you'll get the same content basically so yeah that was everything that i was veto's plan for today um like yeah like this build is to be honest mind-blowing how in depth we want with um with this build we like especially with this end-to-end encryption we implemented this asynchronous encryption um it's something that you cannot find probably anywhere on youtube so if you enjoyed this video guys smash the subscribe button and also um let me know if you would like to see this feature if you'd like me to create a smaller a shorter video that will explain implementing vcenter and encryption because what i'm thinking right now is that this concept is very powerful like and it's there is not enough uh resources on the internet that will teach you how to implement vcenter and encryption so i'm thinking that at the moment this content on the channel is buried uh under the sixth video of a signal clone so not everyone will be able to follow all six videos to get to this point so i'm thinking maybe to create uh vcenter and encryption in a small video of one hour or one and a half hour where we will implement it in a very simple basic application that will focus only on this entw and encryption are you going for number seven yeah like if you have any questions right now guys let's spend some time answering questions and then we can get started with our weekend um are you uh okay james uh in 20 minutes i've got two automatic emails from your courses no reply email that's weird can you please uh send me more details because i'm not sure if i understand it correctly but if it's a problem with with a course platform please let me know send me an email at vadim not at no just.dev and yeah because this is very important i'm going to try to fix it are you going for that number seven for the same reason as i said before like two long uh the bills that take too long like seven videos eight videos and so on we're not very effective because most of the people already dropped out of implementing this build so i reserve this very long very in-depth tutorial for the course for the premium users that are joining my course that i'm working right now and there i know that people have paid money and they are dedicated to learn and to go through all of these features but um and yeah like there i'm going very in-depth but yeah like this signal i'm impressed of how many features we implemented as a homework for you guys uh try to not only encrypt messages but also encrypt images let me think if that's much more complicated than this it might be interesting how you will transform a image to a buffer of bytes and if you do that when you call the same encryption and decryption methods that we used today all right implementing reactions to messages would be really cool [Music] i'm gonna think about how to integrate this feature in other smaller projects or videos okay not all regarding a road map for react native developers yeah you can check a lot of project tutorials on my channel i recommend everyone to start with the tesla clone because that's a very easy clone and under two hours you build a tesla clone and after that once you get your hands dirty with rack native then you can get into this more advanced tutorials that we have here congrats thank you very much i really appreciate it okay a good question in case the device is hacked the attacker can read all the previous messages uh short answer yes in case the device is hacked the hacker will be able to get the private key and with that private key he can decrypt all the messages that that user received but only those messages he cannot decrypt the messages that the user sent he cannot decree the messages from another chatroom he can decrypt only the messages that was received by that user so yeah vol [Music] the only vulnerability for this asynchronous encryption is if your device is physically hacked like i mean if they get access to the private key and that can happen if your device is hacked and they get the private key but in that case they also need to know the password for the application to be able to log into your account so you can implement more steps of authentication like mfa to protect your application with mfa like multi-factor authentication and in that case again it's going to be they should get both your password your mfa security and also your private key that lives on your device and another vulnerability is let me show you where it exists just know that it exists most of application should not worry about this big application like whatsapp and signal they probably uh have something in place for this so um where i can draw something so let me let me let me let me open that how is it called so the only vulnerability is this link like this link save public key to database because you are sending this through that network there might be a man in the middle like a hacker how do you draw a hacker like this with a hat sorry for my drawing skills that can intercept your connections especially if you are not using a secure connection like https or if you're using http then they can intercept your connection and do like get your private key your pub i mean your public wait a second i'm talking but i don't know what i'm talking about this is the public key wait no no no i confused with something else even if they get the public key they do not know a private key and they cannot decrypt their messages let me remember i think there was a vulnerability like this with men in the middle but yeah no no no this this is uh not the case in this asynchronous situation so the only way to hack it is to get access to this private key which never leaves your device is not sent from the network is not saved in the database it's only you who have it on your device okay and i just realized that i was not sharing the screen what is drawing here is this private key being the only vulnerability which is saved on your device all right okay so uh welcome to the ninja development community hello okay guys so uh if you don't have any other questions uh i'm gonna have to go uh i still have to work a lot for the course and also the weekend is coming and yeah still have to do some work so thank you very much for being with me until the end it has been the sixth video of a signal clone and in this video we have implemented end-to-end encryption where is it [Music] end-to-end encryption uh with asymmetric key pairs with a public key and a private key and um yeah it does it does something i'm pretty happy with the build that we we are finishing with and now i can sleep tightly without thinking that i promised encryption but i didn't deliver now it's here i delivered it so what else guys yeah let me know down in the comment what other builds and whatever tutorials you would like me to to do next and until then keep grinding keep coding and i'll see you next week we are preparing some new videos which are not going to be only live streams so make sure to turn on the notification bell not to miss them out one of them is authentication so building custom screens with react native and aws amplify um is coming so stay tuned and let's roll biotro and as always guys take care stay hydrated and write clean code and now i

Channel: notJust․dev

Views: 5,759

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: fMkxOuJToDQ

Length: 188min 22sec (11302 seconds)

Published: Fri Oct 15 2021