Building a Telegram Clone with React Native, Expo, Stream and Supabase

what's up noj developers welcome back to the channel today I have prepared a huge project for you today we're going to build a full-fledge chatting and video calling application in R native and Expo the application similar to telegram WhatsApp or any other messaging application that has features to chat with different users and to do audio and video calls so actually in fact this is two applications in one uh we're going to first focus on the chatting functionalities and we're going to uh allow users to chat between each other and all of the features that you'd expect in a chatting application we're going to have such as replies reactions uh links uh sending photos videos gifts um seeing when the user was last online so everything that you expect from a chat application we are going to have by the end of this tutorial then the exciting part comes next which is also in this video we're going to implement video and audio calls between the users so everything is going to happen in the same application they will be able to make calls between each other they will be able to make group calls uh and a lot more so yeah that's that's huge that's huge and uh thinking that that we're going to be able to do everything in one video is mind-blowing and you know why that's possible that's possible because that tool that we're going to use for this we're going to use stream chat which has a lot of the the whole infrastructure for chatting video and audio calls and a lot of pre-build components that we can also adjust and we will also uh see how to work with that and yeah this is going to be at the core of our application uh for the text app as I said on the front end we're going to have react native Expo and Expo router uh because the tutorial is going to be quite huge quite in depth uh you will benefit from some experience with some of the tools like that you see here because we're going to move a little bit faster than usual just to manage to do everything in time but anyway I'm going to explain step by step everything that I'm doing so I'm pretty sure even if you are a beginner you're going to be able to have a fully functional chatting and video calling application by the end also on the textt on the back end uh my keyboard is not working on the back end we're going to use stream chat to provide the chatting video and audio calling and we're going to use superbase as our custom uh database we're not going to use a lot of features from superbase because uh I just want to simulate the possibility to have your custom backend and connect your users with stream users we're going to talk about that a bit later this video is brought to you by stream so thank you very much stream for sponsoring this video and uh if you don't know about stream you're going to very soon find out about them and see how easy it is to build this kind of application using Stream So if we're ready let's get started let's roll the [Applause] [Music] intro and and before we actually get started here I have a short demo we have application running on Android on the left on my physical device in the middle and on an iOS emulator here so if we go to the chat uh screen we will see a list of chats that we have so if I'm going to go here uh which is the chat with this physical device and I'm going to say hello hello we're going to see right away a new notification uh a new message coming here if I open up we see a message there I can answer from my device like this I can also send gifs like this I can send uh links and a lot more I can react to messages uh I can start threads as you can see I can reply to messages and a lot more uh the same thing works with Android as well so if I'm going to send here to the Android a message it's going to pop up right away here my Android is a bit laggy but everything works as I tested it and for the video calls let's see how that would happen for example if I go from the emulator to this user and say Hey I want to give it a call we can go ahead and press here and we see the incoming call which here on my device you can see that this is the system uh interface for incoming calls so it's not in up it's actually using the system called interface I can accept it and then we can join a call so from here I'm going to have to mute come on from here as well yeah from here as well hello hello from there I can then uh drop a call and these notifications are working also when the application is not running so if I send a message we're going to receive a notification yeah here is the notification if I send it again it should appear at the top here it is it will open the application and also if we call while the application is in background it's going to pop up this screen perfect so that was a quick demo uh I think it's time to actually get started I'm going to probably close some of his stuff Android maybe we're going to need it later and let's go go ahead and start building this ourself it's going to be a lot of fun so let's go ahead and open a terminal to get started by initializing a new project so going to open a terminal here let's make it bigger so that you can see as well let's go to my project I'm going to go here and when you are in that project let's go ahead and initialize a new Expo project using npx Create Expo up then at latest to take the latest version of create Expo application and let's do go ahead and call it telegram because we are building a telegram clone this will initialize our empty project from there we're going to go ahead and set up exper router for our navigation and then start working with stream chat and while this is initializing I saw that there are new people in our chat hello everyone hello everyone who is new and who is uh all subscribers here if you're new my name is vadm and on this channel uh my mission is to help you build impactful mobile applications so if you're on that Journey if you're interested in new technologies if you're interested in Rec native make sure to hit subscribe uh because we do a lot of fun Project based tutorials that can help you learn learn and become a better developer so thank you very much and let me check the live chat today we see a lot of people how are you doing guys let me put it here so I can see you I can look in your eyes I have a a teleprompter so I can see right there love a part about incoming calling UI first tutorial on YouTube yes I saw a lot of people interested in that and I really hope we we have time to get to that because that is going to be the last part of a tutorial when integrating notifications so your name is what I didn't get you my name is Vadim that's I don't know probably hard to pronounce name for a lot of international people uh but yeah so here we have our application running let's go ahead and open it up where like this let's go ahead and open it up in Visual Studio code so I'm going to use code and then the name of our application and that will automatically open the application here okay let's do it like this um usually the first step I do in a new project is I switch it right away to typescript uh and again we might not use every like we might not have to type everything in our application but just by having typescript enabl and typing some of the stuff that are important is already better than not having it at all so to enable typescript I'm going to go ahead and rename up. GS to up. TSX then when I open a terminal in wait come on where is it Visual Studio code here when I open a terminal and Run npm start to start the Expo development server Expo will see that uh I have typescript installed and it will ask us if I want to I have a typescript file and it will ask if we want to set up typescript it will go ahead and actually configure typescript Here and Now run the application with typescript enabled uh to run this application I'm going to run it on this uh iOS emulator by pressing I iOS simulator you can also do it on Android uh or you can use the XOX go Application available both on Android and iOS and scan this QR code to run it directly on your device by then of this video we're going to actually have to build the native side of our application we're going to use pre-build and generate the native side uh but yeah that's uh a normal uh use case nowadays because whenever we have to work with custom native code we simply can create these development builds which are not very complicated so if you're scared of them don't don't be I'm going to show you how to do it um uh do you use native iOS or Android uh I don't code natively for IOS and Android I use react native but if you're asking in the context of react native if I use native IOS and Android then yes so having our application here we see it running we see open upgs to start working on your application if we open it up this is the entry point in our application not going to stop too much here uh as I said I expect you to have a little bit of uh familiarity with rack native uh so simply ab. TSX is the first file in our application at the moment so let me go ahead and I will keep track of all the changes in a git so I'm going to add everything and I'm going to say git commit set up setup Expo and later you're going to have access to the source code as well um the next step is actually to go ahead and set up Expo router um we're going to use Expo router for the navigation in our application we're going to have multiple screens uh so for that reason we're going to use Expo router which is a file based navigation system built on top of react navigation so uh let's go ahead open the router introduction and let's go to the installation here uh I'm going to stop from time to time and answer some questions uh but as you can see like I'm pushing through because we I really want to manage to show you also like the notifications which takes a bit of time so let's go into the export outer under V installation we're going to skip a quick start and go directly to manual installation we already have an expo project so let's go to the step two to install dependencies I'm going to copy this install command I'm going to go back to my project open the terminal and in a new terminal by pressing plus let's go ahead and install the exper router dependencies I'm going to go back to see already the third step which is to update the entry point in our application and to do that we're going to change the main uh field in the package.json so I'm going to go into package.json here and find the main and let's update it to exper router SL entry this is how we tell react native that exp router should be the entry point of our application and vanex router takes it from there we need to also provide the scheme in our up. Json so I can go in ab. Json this is where we configure information about our project and the scheme is used for deep linking and exper router is uh handling uh let's do my telegram export outer is handling deep links uh automatically so that's why we need to specify the scheme here so that exp outer can use it for the Deep links now we're not going to have it available for web at the moment uh the B config is already fixed for us so yeah I think the next step is going to be to go ahead and run our project again so open the terminal go back where it is running we need to stop it and we need to start it but this time with dash dash space-- clear in order to clear the Metro cache um now it's working I think I can go ahead and press I again to open it on iOS and for some reason it's still opening that one but if I reload the application it should load the new bundle because I didn't close the application that's why and we see the welcome screen for from Expo we see this screen because we haven't set up any Expo uh any screens in our applic ation the way exper outter is working is it's a file-based navigation system so it will look in the app directory and check what files you have there and based on that files it will automatically create screens so instead of uh what we have to do is first of all let's create our source folder calling it s come on new folder SRC and inside the source folder let's create a new one called up folder and right away I'm going to create another folder in the source in order for you to see them better because if there is only one folder like it shows in the same line but now you can see that we have a source folder and then the app folder the name app and source is important so keep them like this because exp router is looking in this app folder and checks what screens do you have V so if we create v a file index . TSX that's going to be our home screen or our slash route we can go ahead and actually copy everything that we have in up. TSX move it to our newly created index screen and now we don't even need the up. TSX anymore so we can delete it because that was from previous configuration when we didn't have exper router now I can go ahead and reload my application and hopefully exper router will pick up this file as our home screen so that's what we should see here we can also rename it from up to home screen and we see it here hello world perfect uh Shi yeah hello world is here and I just changed the how's it called the theme because it was dark theme of on the device now it looks good okay so now we have our uh Expo router folder um what I'm going to do here is I'm going to prepare the uh the different screens and folders that we're going to need in our application because our application is also going to have authentication so user will be able to create accounts and sign in we're going to have a separate folder for our authentication screens and we're going to call it off inside brackets we put it inside brackets because we don't want off to be part of a URL we want for example to go to the SL login which is going to be another screen there we're going to add it a bit later so because we are going to have off screens and then the rest of the screens which means that the rest of the screens the user should be able to go there only if he's authenticated that's why I'm going to create another folder here which is going to represent all the screens that the user should be able to go to only when he is authenticated so for the name you can think about like authenticated or something like that but I'm going to re use the same word up to say that there is all our up screens our application is going to be very dependent on uh being authenticated so we're not going to have a lot of public screens that's why most of the stuff is going to be inside this app folder which requires the user to be authenticated uh we are going to also have a layout file in the root directory layout is how export router is sharing code between multiple screens so here if I do export default export default function root layout and I'm going to return for example null we going to see that nothing is rendered on the screen and that's because as I said layout is the uh export router first mounts the layout and only then mounts the screens so inside these layout so the layout is the code that is being shared among all the other screens inside the directory so this layout is our root layout and that's where we're going to set define global providers such as authenticator provider or theme provider and so on Pro providers but in order to see something on the screen we need to actually render something we can render probably a slot uh which is a component imported from react native that simply renders the screen that we want to render if we want to render for maybe a stack that will already put all of the screens in a stack so we're going to see a header as well so I'm not sure yet like what we're going to have here but we can come back and change because it's not that complicated so I'm going to leave stack for now okay moving on uh let's focus on the application screens our application uh this app folder that has like parentheses um or should I call it home uh yeah okay I'm I'm going to leave it like this so this app directory is for authenticated users so as I said most of the screens will be there uh one of the thing that we're going to have there is I want to have a bottom tab navigation where the user can navigate from chat profile and so on so for that reason in the app directory I'm going to create a new folder called tbs in this tabs folder uh and again in order to have to V code to display them properly I'm also going to create the layout of our app folder this is already not the root layout this is export default function um let's actually call it let's actually call it home home or user or something like that because whenever I'm going to refer to the directory like it's going to be confusing so now I'm going to refer to the home as as the screens that the where your users should be authenticated so here we're going to have a home layout and this layout is going to be shared or wrapped only on the screens inside the home layout so that's where we're going to do later a bit of um guarding like navigation if user is not authenticated but for now we can go ahead and render a stack okay now in our tabs we're going to have first of all the index or the main tuab when we're going to go there let's create here a function export default function Main tuab screen I'm not sure like what we're going to have here most probably the least of charts but for now let's simply return and render a text saying main tab this text we can import from react native import text from rack native and if I'm going to at this moment we have to somehow navigate to this home screen I can Implement some buttons here but what I'm actually going to do I'm going to go in the index from the up directory and here instead of rendering something I'm going to render a redirect to make sure that whenever we go to the home screen we are right away redirected to our tabs which is the main screen for the moment so the redirect is a component import it from export router so I want to redirect to the slash uh home slash TBS and that's it slome and then slabs this is the names of our directories so if I do that slash tabs and reload we see unmatched route y in the index export default function home TBS index home slabs home what if I do just home it's still unmatched I have some issues probably so let me try to stop the server and reload it again how is everyone doing so far are you guys uh following along or do you plan to do it uh later so there is something going on here uh why in the layout home the home layout export default function if I'm going to have an index here just for testing purposes home tubs but I said let's try just home so going to home works but going to slash TBS doesn't slash tabs index main TB screen oh it should be tab SL index slab tab SL index like this right now come on well most probably our tabs the problem is that our tabs doesn't have a layout yet so layout TSX here is where we're going to make these screens we're going to set them up in a tab Navigator so let's export default function uh tabs Navigator and to put them in a tab Navigator we simply return a tabs from here here which is a component imported from export router again it doesn't work come on okay now it works if I just navigate to tubs the index had some issues so now what we see is that we have a main TB and if I'm going to go into the tubs and create a number or duplicate the index and rename the second copy to profile and change the text here to profile we're going to right away have two tabs at the bottom index and profile and just because we have too many headers at the top they're coming from uh if I go to the tabs the tab will have the header which is profile or index here if I'm going to go one layer up into the home layout out here we are rendering a stack maybe we can render a slot and in that case it's not going to render a header and the same think with a root layout if rendering a slot is not going to render the header I'm not sure later we might come back to a stack if we're going to have multiple screens in for example our home we definitely will have multiple screens here but for now rendering a slot is okay for us so here we have our tabs with the index which is going to be our main tabs or the chats and the profile uh if I go into the tabs layout here is where we can also adjust a little bit the configuration for example if I'm going to move to a opening and closing uh tag and then Target tabs. screen so we still have tabs then tabs do screen and if I Target using the name the name of the file for example index I would be able to adjust all the options that you can adjust in react navigation for example I can set the title to chats and it updates at the top and it updates at the bottom I think we should also be able to do icon right tab bar icon which is a function that should render the top bar icon what I can do is I can go ahead and do Expo Vector icons open the Expo Vector icons and from here let's find some like chat where maybe we're going to have the first one is home from maybe font awesome let's try font awesome let's import it at the top of our tabs Navigator and render the font aome icon with a home here this tab bar icon will also give us the size and the color so we don't have to hardcode them but take them from the configuration color so now they will have a proper color and proper size the same thing we can do for the the other tuab which is the profile we're going to Target the profile file we're going to title it with capital profile and this one let's find the profile user fontos 5 do we have here a user user alt or just user so if I do user for the name it's going to be our user maybe user- alt yes okay now we have proper uh things here I don't like the the home screen but that's not the most important the g chat from F5 message okay never mind I'm going to leave it like that excessively waiting for authentication we're going to get there but first uh we are very close to finishing up setting up our structure like the screens that we're going to have of course later we're going to add more screens but for now we uh for now I think we are ready so what do we have let's recap we have our app directory which is the Expo router application where we keep our screens so the first screen is the home screen the index. TSX at the moment it does nothing and probably it's still going to do nothing even later it's going to only handle like redirection so we are redirecting to home tubs as this is the main screen in the we have the off folder which later we're going to add the login screen and then we have a home folder where we're going to keep all the screens that require the user to be authenticated uh in the home here we have uh the tabs and later we're going to also have like other screens outside the tabs that's why I didn't make the home folder at tab Navigator but I rather have a separate tabs here because I might want to have screens outside the bottom tab Navigator so that's why at this moment it might look a little bit over complicated with a lot of nesting but as our application is going to grow and trust me our application is going to grow um our setup is going to serve us very well and it's going to allow us to easily manage everything at their at their level and lastly we have our tabs which in the layout we set it as a tab Navigator and that put them in a tabs here at the bottom and we have two screens the index where we probably will display the chats and also the profile where later we're going to display the profile screen so with that being said uh we are actually done with this Expo setups uh Expo router setup so let me do G add git commit minus M set up Expo router perfect everyone good so far oh we have passed the 100 concurrent viewers that's amazing so I imagine there is a lot of new people here so if you're new uh and if you are just joining in this tutorial what we are doing is we are building a chat and a video calling application all in once so we're going to have like uh chatting with all the features that you'd expect a chat application to have and also video and audio calling and that's going to be very exciting project uh very complete like very huge I've been working the last more than one week to uh to to prepare for this so I'm pretty sure you're going to love it so if you enjoy so far make sure to subscribe to the channel because from our analytics we know that more than 99% of you watching are not subscribe which is a bit sad but anyway let's go ahead and continue so we get to the part where we start integrating stream uh stream chat so as I said stream chat we can go to getstream.io this is a service that allows us to easily integrate chat uh chatting in our application and more recently they also uh added the video and audio calling feature which is a GameChanger like truly uh it's it makes it super easy to build application like this which in the past requires so much resources you cannot even imagine how hard it is to build a video and audio calling application yourself uh handling all the web RTC and so on like it's crazy so a lot of popular um applications are using it just because of a simpl and actually uh we have a incubator program and I recommend stream chat to a lot of our Founders that want to integrate chatting in their application when chatting is not their main feature because that will save you a lot of time uh so let's go ahead and uh create an account uh creating an account is free and they also have a maker account so if you're going to search stream maker account the maker account is a free account for new projects and for small startups and it's completely free but has some requirements to have less than five people in the team uh and less than 100,000 in annual revenue so if that you if you have less than 100K in annual revenue stream chat is going to be free uh so let's go ahead and create an account as I said that's free you can do that and when going to our project to our dashboard let's go ahead and press create application let's give it a name I'm going to give it telegram let's choose a server closer to you or to your end users and for environment I'm going to keep it development for now let's press create application and up with this name already exist let's call it not just Telegram yes that one worked all right so here we have here we have our application we're going to come back later to this uh dashboard so keep it open and I'm going to tell you when we need it but now let's go ahead and open van stream uh stream documentation yeah just by going to stream let's go to product chat and messaging we're going to start with chat and messaging and let's go to the developer documentation chat messaging and here are a lot of documentation for a lot of uh technologies that you might use as you can see it supports almost everything what we are interested in is react react native so for the front end let's find react native and let's go to the UI component here you can read more about them here the architecture the dependencies but I'm going to go right away into the installation let me zoom in a bit so that you can see as well so what do we need um for Expo actually yeah we are using Expo so let's follow this guide that for environment setup okay let's continue um first step is to add stream chat Expo dependency to replication so make sure to choose expo here not react native CLI and we're going to go ahead and copy the command come back to our project and let's install stream chat Expo I'm going to go back and I'm going to install the rest of the dependencies that um it needs so let's copy the next command come back to our project and after the first stream chat T is installed we can install the rest of the dependencies there are quite a lot of dependencies but think about all the features that stream chat provides um they are powered by a lot of these dependencies for example you need Expo media library to be able to share and access the device gallery to share photos you need the net info to know about the information about uh Network you need Expo file system again to perform like save and delete files you need image Pier manipulator to to compress images when uploading uh romate it to also compress them and a lot of others so yeah that's why we have um some of these dependencies but in a large application you most probably are already using some of these libraries anyway there are also some optional dependencies that I'm not going to install but by installing them you're just going to just by installing them you're going to go get right away some new features and added benefits for example installing Expo EV will allow you to play videos audio playbacks and also to send audio messages by installing Expo sharing we're going to be able to uh to share with our application have clipboard to copy paste and so on R native quick sqlite will enable offline support So if you are not pressed by time I recommend going through uh the installation guide of all of the dependencies and make sure to check additional steps for example you open you open this one and you check the additional steps that you need to take if there are any okay so here are some of the important additional steps we need to take for the dependencies that we already installed such as re native reanimated we have to add the re native reanimated plugin to our bable config so find the bable config file in your project we don't have any plugins yet so I'm going to add plugins here and I'm going to add rect native reanimated plugin if you have plugin make sure this one is the last last one in the list uh then the gesture Handler should uh we should render or wrap our application with a gesture Handler root view we're going to do that in the root layout so let's open source application and layout and that's where as I said we define global providers so let's import uh just gure Handler root View and wrap our slot in the gesture Handler root View and make sure that the slot is inside this root View and to make it render on the full screen I'm going to add a flex one here okay now that works uh what else please also follow the steps mention in the links below image Cropper let's see if there we have any okay hopefully we don't need to to do that but if something is not working make sure to follow all of these additional steps I'm going to skip through some of them now we should be able to run our application and everything should be working fine so let's go ahead and maybe stop the application and run it again which I don't think we actually need but anyway let's do that let's press I and here we have our application is running perfect so now that was the installation let's go to the UI components overview and this is going to be a very quick way to get started with stream chat just to see its functionalities after that we're going to replace and make all of this more stable or more scalable so let's go into the UI components overview or maybe I'm going to do a git ad now G commit install stream chat SDK so that if something goes wrong we can go back and yeah overview let's go ahead first things first we need to create a chat client let's do that inside our home layout I'm not going to do it in the root layout just because in the root layout I'm not yet sure if the user is authenticated or not that's why we have home layout home and the home layout where I know for sure that the user here is going to be already authenticated so open Home layout and here we're going to set up and configure stream chat First Steps uh first step is to import stream chat from stream chat let's import it here at the top then we're going to have to create a client using stream chat. getet instance and here we need to specify the API key the API key we're going to take it from the dashboard and it's going to be in the overview key here you have it up access key let's copy it and let's add it here this is a public key so it's safe to share it and include it in your um in your source code or in the client side application for secret keys we're going to talk later uh where we need them now let's go back to the documentation and we see that we need to connect a user so connecting a user is how we create the connection between the user and stream chat it's going to create a new user if it doesn't exist or it's going to connect with an existing one where are we going to do that let's do that in a use effect when this component mounts so use effect let's define this connect function which is going to be an a sync function and let's call connect right away so connecting to stream chat is going to be done in the following way client connect user we give here the ID name and an image or other information about the user and then we need to also give here a user token right away we see an error we see that the user token uh there is something wrong with the user token that's because at this moment we we don't yet have a user token this user um for now as we are still in development what we can do is we can go ahead and go into the stream chat under the overview of chat messaging if I go to our authentication we're going to be able to disable off checks and this will allow us to use development tokens tokens that are generated without having a backend because later we're going to generate this token on our back end to make it secure for now we're going to do how is it called development tokens I'm going to go in the overview let me go into the documentation to find that development token under re native client in client and users token and Authentication we see that we can developer tokens here here client. Dev token so it's going to be client dodev token and here we need to provide the same ID as our user ID that's how stream chat understands that hey this this user that claims that he is uh gym is actually that user because we know that there was a token signed by the server so with the same data so just like that if I reload everything should be working fine and whenever we connect things we should also disconnect it but we're going to cover it a bit later let's go to back to the overview we're going to cover client disconnect a bit later for now we just want to see something on the screen for now we need to create our first channel and a channel is where conversations are happening it can be 101 it can be multiple users so what I'm going to do is I'm going to create a new channel uh right after connecting the user so after connecting the user in also in this connect method I'm going to create a channel of type message me in with a tip with the ID the park and the name the park now to actually create that channel we're going to do channel. create or actually channel. watch which will create and watch that channel so if I reload now nothing happens but if we go to the stream chat dashboard under chat messaging and under Explorer we now be able to see a user this is the admin and the second one is the user that we connected with and a channel called the park so now we know that we actually connected correctly with a user and created and join this channel also correct correct once the channel is actually created we can comment out this code because we don't want to create it over and over again once we know that it's here later we're going to automatically be able to fetch it and also in this video we're going to create see how we can create channel with specific users what's next next let's go into the overview and we see that yeah we get into configuring our UI our user is connected our Channel our basic channel is created where we can exchange messages it's time to render something on the screen the first component that we need to render is this overlay provider so we're going to render them here and as I said the first one should be the overlay provider overlay Provider from stream chat Expo like this and inside where we're going to have a slot overlay provider comes from stream chat Expo and it's uh using it's it's used for all the overlays in our application for example message reaction is an overlay or full screen images is an overlay so that's why the overlay provider should be render as close to the root for uh of our application as possible then we need to render the chat client so the chat client is another component imported from stream chat Expo and it's the provider that gives us gives the rest of the components access to our client and our client is this one client what you don't like V unexpected oh I don't have yeah so chat imported also from stream chat Expo is uh providing the client now reload everything is working fine so that's it from that let's say Global configuration this should be configured globally and then the rest of the things are depending on the screen that we are on for example if I go to the tabs Index this is our main Tab and that's where I want to display the list of channels to render a list of channels is as simple as rendering channel list like this which is important from stream chat Expo and just like that we have a the channel called the park that we created previously and that we have here on in the Explorer just by rendering a component channel list like this perfect that's as easy as it can get uh now when we press on this channel we can Define what should happen by having here on channel uh on on select on channel what let's see channel list on select so we can have here on select which will give us the channel and we can store for example in a state so const State Channel set channel equal use State and nothing and let's when we select a channel from here when we press on it let's set it in state set channel channel now we can check here if there is a channel then we want to render something else we want to render actually the channel component Channel channel should be imported from stream chat Expo it needs to know what channel are we rendering but again this is nothing in terms of UI because if now I'm going to go ahead and press on the channel uh nothing happens why if Channel return Channel const con so log channel it's not setting it up there if I press no it's not why on select set channel channel list maybe it's not on select channel list uh channel list on select yeah I know that this should be typed as a channel but I don't have time to type it properly I will import the channel type from stream chat and call it Channel type and if I press on it something is wrong oh okay now it works probably I should have just reloaded it because we don't even need the the type for now don't worry we're going to change the way it works so now if I press yeah it renders this channel because we selected it but this is just a data provider like it's not anything that renders on the UI on the UI there are other components such as message list message list also imported from stream chat so if I go to the here we're not going to see any messages but if I render V input message input we should see at the bottom the message input and I can say hello if I send and it's going to appear here in the message list and I can do more and so one I can reload the application and as you can see yeah in the list we have a list it shows the name it shows what was the last message when it was I go there and it moves into this channel display but but the thing is that I want a separate page for the channel itself I don't want it to be on the same page as the channel list moreover I don't even want the channel when we are typing a message to be part of a bottom tab Navigator I want it to be outside so what I'm going to do uh I'm going to to go into the home and inside the home I'm going to create a folder called channel channel this channel let's start by having it index. TSX and it will do export default function Channel screen return I don't know a text Channel this text should be imported from R native so let's go ahead and import it text from R native uh by the way if I forgot to mention something and I'm not sure why I didn't get that error if you have some issues after installing the stream dependencies something related to SVG try to do after everything try to run npm install Das Dash Legacy perer deps that's because uh there is two dependencies on the SVG R native SVG and we Legacy perer deps they are conflicting so yeah if that's a good note if you're having issues with some uh dependencies now back to our Channel screen so having the channel screen from the tabs index from the channel list when we select a channel I'm going to get the channel itself I will want to redirect to that screen by using router from exper router and doing router. push I'm going to push to the slash Channel which is going to navigate me to well shouldn't be here you should reload if I do that we are redirected to the channel screen the channel it's self let's create an index a layout file because I want to put different screens from the channel in a stack so export default function Channel stack is going to return a stack now when we navigate to that channel come on now we navigate to that channel we have the header Channel perfect but we need to send an ID to that channel right to be able to fetch it and render it on the screen to send the ID we're going to use a dynamic puff parameter so in the index on the index. TSX from Channel folder I'm going to rename it to actually contain here an ID but I'm going to call it CID this is a bit different because this is complete ID uh and I'm going to show you what that means and but first let me go ahead and go back to tabs index in the channel list and say that when navigating to that channel I want to add or to append at the end the channel ID so it's going to be slash channel do not ID but C ID CID stands for complete ID uh and on this main tabs where we have channel list we no longer need this one what I'm going to do is I'm going to I'm going to take them later from here but the CID if we look in the channels the channel has an ID the park and it has the C ID which is composed out of the type message and then double dots and the ID and the when fetching channels it's better to use C ID both of them would work but CAD will be uh more much more performant so back on our Channel CID we need to get access to that CID so let's do CID equal use local search parameters we are going to Fetch and when store the channel in a state variable set channel use State uh here we can actually type it properly so I'm going to import channel as Channel type from stream chat stream chat should be stream chat without Expo yeah so I'm GNA type our state using this channel type or null because initially it's going to be null now here I'm going to say if Channel if Channel come on is null I'm going to display an activity indicator which will show a spinner otherwise what I want to render here is what I was rendering in our channel list the Channel with a message list and the input so I'm going to copy this one from here to our Channel detail screen we need to import this UI components and back from the index screen we no longer need to do this the index screen is only responsible for rendering a list of channels that's it now if I'm going to press on it we're going to go to the channel list and we're going to see the activity indicator where the activity indicator is there because we in the CID we didn't fetch the channel yet to fetch the channel we're going to use the client and we're going to send some requests there so from the documentation go to the react but not to the UI components but directly to the client here we're going to see channels and we see how we can uh query channels we can query channels by using the chat query Channel and we can send some filters there so as I said we first need the client where do we get the client from well the stream chat client we can get it in a similar way as we got it in the home layout using stream chat get instance and then the uh API that's going not going to be a a problem because this get instance is a singlet ton which means that it's not going to initialize initialize a new client it's going to give access to the same one but I think it's going to be weird to always call this message to always call this one so we can also take it from um from a data provider called using a hook called use chat context so taking from the chat context we we can take the client now having this client and having this ID we can fetch the channel using this ID so let's fetch it in a use effect in a use effect and we need to fetch it whenever the CID changes whenever the ID of a channel changes we need to fetch it so fetch Channel equal to an sync function that we call call it right away and to fetch it I don't know response equal await we're going to use client do fetch or query channels and here we need to specify the filter the filter is an object where we can specify we can filter by ID we can filter by the members but I want to filter it directly by the CID and I want to say to filter with a equal uh like CID is equal to my CID so that's why it should be CID double. C and because they have the same name I can use it right away here and to get rid of this typescript error we can type the local search parameters saying that CID is a string now let's check console log response so if I see actually something is there I'm not sure what's there but I believe that this is an array of channels like if I check it's an array so most probably my item is the item at position zero so I'm going to set a channel with a response at position zero or it can also be channels at position zero so now if I'm going to press on this one it loads and it correctly loads the Channel with that ID and from here I'm not sure why I cannot go back but we're going to figure that out in a second so we can send things here it sends to the channel perfect and I think I can go back just by doing that no no but the good thing is that now we have a list of channels and we also have a channel itself to be able to go back I need a stack navigator that has both tabs and the channel and best tech Navigator is this layout this layout that has both Channel and tubs which will allow me to move back from the channel to the tubs it's rendering a slot but I want to render a stack so now it has this back button back button and what I can do is I think I'm going to say hey on the tubs don't render the header so using stack. screen name for the tubs using options I'm going to say header shown is false to hide it come on false now we don't have a header there but we still have a header here but on this end I want to hide the header from the channel layout which is a stack uh for now I can go ahead and do H stack let's go ahead and do stack. screen with a name the name should be the name of a file so CID the screen with a name c should not have a header because it already has it from the from the previous Tech Navigator so options header shown false and I expect to hide this yes and it keeps the previous one perfect now it looks much better Channel nice nice okay chel I don't even oh like on the channel itself I think we don't even need the layout you know because the channel is not going to have a lot of but we can keep it maybe later if we're going to have anything more it can be ready but at this moment Channel doesn't have sub folders let's say okay okay so that was the basic setup of stream chat how easy was that it took us a little bit of time just because we set everything up in different components but in fact everything that we did was we created a we created the stream chat client using our API key then we connected our user to stream chat and we uh rendered the provider and the chat to wrap around our whole application then on one screen we used the channel list component which is the built-in component from stream chat and on another screen we fetched the channel and we rendered it together with a message list and together with the message input maybe you can even do here I don't know like on the message input a safe area view so that it doesn't render below uh but the safe area view with edges only on the bottom so now the chat the message input renders correctly perfect with that we already have a basic chatting application but it's not perfect yet we need to make a lot of things Dynamic so it will work with multiple users as well so let me go ahead and [Music] do git ad git commit set up stream chat UI just like that let me check quickly uh Shivan please do not spam uh I will get back and look at the messages and yeah just to answer your question we're going to if we have time by the way because we need to finish it we are 1 hour in we still have three hours if we have time we're going to cover the callip hello from Kenya hello uhm hello from Russia hello this class will be saved on YouTube yes we're going to save this one on YouTube is stream chat for free uh stream chat has a free plan and has a maker account which will give you uh free access to it as long as you have less than 100K Revenue 100,000 USD Revenue per year bright great is saying my love for R native is because of you thank you very much okay so uh hello from Morocco hello hello I've been once to Morocco I've been to Casablanca okay so quite intense so far I hope you are following along and we are continuing the first step that I want to do uh to improve a little bit our setup let me just check here in the overview message list message input and we didn't cover the Fred you can check out how to render a Fred is it's as easy as rendering uh a Channel or a message so on the channel screen you can have uh in the message list on Fret selected save it in a state and then render a Fred component I'm not going to do that now because we have uh we have to move but that's everything from the overview let's go ahead and um as I said clean up a little bit and make this setup more scalable at the moment it's using a lot of hardcoded data and what I want to do first is from the home layout where we do the connection to stream chat I want to extract it into a separate provider so what I'm going to do is I'm going to create an Source a folder called providers and the first provider is going to be chat provider. TSX this component is going to be responsible for connecting the user and rendering these two things the overlay and the chat so let's export default function chat provider and return something on the screen because this chat provider is going to be used and is going to render the chat and overlay we need our screens to be inside that render inside that chat provider that's why we're going to receive a prop a special prop called children we can type this one with uh helper props with children imported from react and we can start simply by rendering Children Here children now if I take this chat provider and go back to the layout inside home layout and if I will render it here as chat provider and wrap it around our stack then this tack is going to be sent to the chat provider through the children and will be rendered here because if we don't render with children we're not going to see anything so that's why we have children here now that we have this set up we're going to move from the layout the logic of connecting so let's copy the whole use effect here and let's move it to the chat provider make sure to import everything necessary like the use effect we need client which we got using the stream chat get instance to the chat provider here uh stream chat should be imported I'm going to copy all the Imports and delete the ones that I don't need here such as slot and stack I don't need it here now that we did the connection let's make sure to render the overlay provider and the chat so I'm going to copy these two I'm actually going to cut them from here because we no longer need them in our layout they will be handled in the chat provider so going to the chat provider I'm going to wrap these two around the children and in a moment it will all make sense just like this so we have a overlay provider we have a chat using the client and then and only then we have a children so now everything works as it was working before but it's not handled in a layout which actually can be even cleaner it's handled in a separate file chat provider props with children should be from there okay uh next step to improve here is going to be to use environment variables for the API key so now Expo is supporting environment variables and for the environment variables that we need to have access in our client code they must be prefixed with Expo undoru and then the name can be stream API stream API key which is equal to this value I don't think we need even this ones now we can access it in the chat provider instead of hardcoding it here we can access it as process.env Dot and then the name export public stream API key now I don't think it's going to be available there or it is but if if it's not make sure to restart the server and then your environment variables will be picked up by Expo reload okay so everything is good another thing that I want to do is I want to prevent our application from being rendered as long as the user has not connected yet for that in this function I'm going to have a state variable is ready set is ready use State false initially it's going to be false and we're going to make it through only after a wait client connect user so only after this we're going to do set is ready to True only when the user is connected now in order to prevent the application from being rendered as long as the user is not connected yet we can check here if it's not ready then return an activity indicator from react native otherwise return the chat with the rest of the things okay that's one thing so now we're going to see a loading indicator for a bit which is at the top you can also adjust it by styling it properly to have it in the middle of a screen not going to waste time on that but with a view with flex one and Aline item Center wrapped around activity indicator you're going to see it in the center um what I want to also do is I want as you can see we sometimes see this warnings consecutive calls to connect user is detected this should never happen because whenever we call connect user we are opening a uh web we are opening a connection with a server so whenever opening a connection with a server we need to make sure to clean it up when we unmount or when the application closes or reloads for that reason in the use effect that we have here which at the moment I made a huge mistake as you can see my use effect does not have dependencies and you know what that means that means that whenever this re uh reeners it will reconnect so that's why whenever we are changing the screen we see this error what in fact should happen is we should have dependency an empty dependency list to connect here only when the component component mounts but even in that case we need to make sure that from this use effect we return a function and this function when you return a function from use effect this is called the cleanup function which should be used to clear the connections what we can do here is we can call client. disconnect user and then we can set is ready to false so so now whenever we we UNM the component we make sure to disconnect the user everything works nicely perfect perfect perfect perfect so with this approach it's much better first of all we don't render the application if it's not ready yet then we disconnect users whenever we unmount our chat provider and yeah that's good let's go ahead and Commit This one get add get commit minus M uh stream chat provider perfect okay so the next step the next step is going to be to uh properly authenticate and connect users because right now we are hardcoding here the ID the name and the image of the user which means that this application is only going to be able to use as gym and as the same user in order to allow you different users to use the application usually you have your own backend and strip chat is made in a way to be able to easily integrate with any backend that you already have and that's done by sending by being able to send the ID here and also by being able to authenticate the users from your server with a custom token at the moment we use Dev tokens in a moment we're going to generate on the server so that it securely connected with our server so in order like in a lot of cases you would integrate chatting in your application where you have other features so you would have a database You' have already the authentication there so the only thing that you need to do is use the same ID of a user from your system and you send it here to the stream chat and this way having the same IDE both in your system and on stream chat you're going to connect them together so whenever the user authenticates with his account he's connected to the same account on stream chat so for that we actually first of all need to have a way to sign up and a authentication in our application to do that we're going to use super base super base uh is a backend as a service tool that allows us to easily build backends uh on top of sress in the cloud so sign up uh we we have the free tier and what I'm going to do is I'm going to create a new project here let's choose the organization let's call it uh how's it called telegram telegram let's choose a database password I'm going to generate one and make sure to copy it we're going to need it in a moment let me add it somewhere should be here hopefully I'm not going to lose it but yeah and just like that let's press create new project and super base we start initializing our project by default superbase project uh is is uh is providing us with a pogress uh database and and automatically set it has the table set up for authentication that means that we can integrate authentication right away so while the project is setting up let's go ahead and open superbase docs uh I'm going to go into the docs and we're getting started in there I'm going to find the Expo where is it Expo R native I'm going to follow this tutorial because it show how to set everything up and also how to have like a profile to be able to update the profile picture and so on so let's go ahead and follow it step by step the first step was to create a new project we already did that then we need to set that database schema with database schema we have a starter so after our project is initialized let's go to the SQL editor because right now if I go to tables we do not have any tables yet anyway we still have a off schema with all the authentication enabled but we as users cannot change anything there it's used only for authentication for our public schema where we can do changes like updating profile pictures and so on we are using the public schema if we go to the SQL editor and choose the Quick Start s here are some templates for some database schemas to get started one very helpful one is the user management starter if we open it up what this one is going to do is as you can see it's going to first create a table profiles that will connect the profile information with the authenticated user it will have username Avatar and so on then it will also create a function that automatically creates profiles when a user signs up you don't have to understand all of this like we are just going to run it and that's it I just want to give you a short intro it will also set up the storage for our avatars and that's it that's everything that it will do so let's do run selected oh no uh avatars why table editor storage database SQL editor let's try again maybe I did a mistake quick starts uh user management starter and then run okay it worked I think I did a mistake yeah I changed something here anyway now if we go to the table editor and Republic we see profiles which uh is the table where we're going to keep profile information such as full name username Avatar and so on and we also have in the storage a table called avatars perfect let's go into the documentation and see what do we have to do um The Next Step it says I'm going to come back to this to the local database now let's scroll down until we see install additional dependencies let's go ahead and copy this command in our project open the terminal and let's paste the npx XO install this will install some super base dependencies which will allow us to interact with superbase now we need to initialize the superbase client so for that we're going to create a new folder in our source directory called lib inside the lib we're going to create a file called superbase dots and in superbase TS we're going to create the superbase client using the following code for the super base URL let's also use environment variables uh superbase URL let's call them like this process. EnV Dot and instead of your react native we're going to call it Expo public because remember public environment variables that should be available in your your client side code should be prefixed with Expo public so now we have two variables Expo public uray and Expo public superbase Anonymous key these are two uh variables that we're going to set in our environment this one and come on and this one these are two variables that are public and we can get them if we go to the dashboard uh on super base project settings and under the API con configuration API first we see the project URL let's copy it and this is our first field superbase public URL now for the unknown key if we scroll down we see project API keys this is the unknown the public key which we're going to provide here so just like V environment variable set up we have them here and we are creating a super based client that we're going to be able to use in the next step to authenticate query the database and so on let's go back to the documentation and we will set up a login component our login component is going to be an actual screen inside application inside the off directory that's why we created it there so let's call it login. TSX and let's paste everything that they suggest here I'm going to walk you through but we don't have the time to build it ourself so this file we need to adjust the way we import the uh superbase library because we need to do to go two times in the upper directory and only then go into the lib now this off screen let's see what's going on there now this off screen let me actually uh redirect V so that we can see properly um and I I can explain like what's going on there so from the index instead of redirecting to the home tabs I'm going to redirect to off slash login if I reload we should be redirected here so if we look at this screen what do we have here we have two states email and password for the two fields that we have here uh then on from the rendering side we have an input for our email we have an input for our password and two buttons sign in and sign up these two functions are implemented above so for the signup what it is doing it's using the superbase client superbase do off. signup and using the email and password that the users put here it's creating a new account for the sign in it's doing the same but it's calling sign in with password uh by default superbase will um make we'll have the users will have to confirm their email address but as we are in development we can disable that by going to our superbase authentication providers and under email let's deselect confirm email here and then press save just like that we're going to be able to sign up without confirming our emails so let's see how that would happen if I go here and say ADM at not just dodev and a simple password press sign up nothing seems to happen but if I go under our authentication users we see a new user being created also if I go into the table editor for that user a profile information a profile raw was added here where later we can adjust and change any data perfect what I like about superbase is that everything is in the same database both authentication data uh and your data like everything is here you can go into the off you can go into the users and you're going to see this information here the authentication the roll the email encrypted and so on perfect uh and if I press again sign up it's going to say please check your inbox for email verification because there would be an error like where is this error okay okay but why are we not redirected anywhere well that's what we're going to do now in order to redirect I don't want to manually redirect when we press sign in or sign up I'll Implement a much more um uh robust system of navigation by guarding routes what that means is I'm going to in the home layout I'm going to check hey if you're not authenticated rir to the authentication screen which means that you should not be able to see any screens here the same on the authentication I'm going to define a layout here layout. TSX and here I'm going to do export default function uh off layout I'm going to check if you're not uh if you are authenticated you should not be here you should be on the home screens but for now I'm going to Simply return the slot or the stack maybe uh in order to power this uh information we're going to have we are going to need easy access to information about user for that reason let's go ahead in the providers create a another uh context provider called off provider. TSX this off provider is going to be export default function of Provider as other providers we're going to wrap it around different components so for that reason we're going to receive children props with children and we need to Ren return or render them here by wrapping them inside some context providers which we're going to do in a second uh the context provider that we're going to use is a pro context provider that we have to create ourself we can create it using let's call it off provider of context better name is going to be created using Create context from react now in order to render this of context we're going to render it as of context. provider and that's how we're going to send values to all the children components now what information should this context provider have information about the user and the session whether it's authenticated or not if I go back to the user management here there will be the next is the account page which we're going to come back a bit later but next there should be uh in this app. TSX which we're going to do in our context provider we show how we can get information about the session and how to subscribe to session updates that's exactly what we need so let's copy this use effect together with a use state in our of Provider so let's import use state from react let's import session from session from uh where is it imported from import session from super base okay uh use effect from react super base from our library from our client that we created there and yeah in a use effect when this off provider mounts we are fetching the session and we are setting it in state and also we are subscribing to um to updates for example if a user will uh sign out will log out or log in this session will automatically be updated now we can export this session from the context provider like this but we can also export here the user directly using user is going to be session dot or question mark. user because the session can also be null and this is going to be our user if you want to have like proper typings we should provide here the type for our of context which will contain a session of type session or null if the user is not authenticated and it will also export a user of type user so let's do user or null now we're going to type this create context using a generic and we're going to say hey you should be of type of context and just because we have this type we need to provide null values here as default and just like that we are exporting these values correctly the last step when I'm defining a context provider is I also like to export a custom hook that will give me access to this context so that's going to be like a shortcut and I'm doing that using export const the custom Hook is named starting with use so I'm going to call it use off and the custom Hook is a function that when executed we'll call use context with a value of our of context this way this use off is a shortcut to use context off context now because we are exporting it from here we can import it in the two layout out that we have in this one we're going to do const user equal use off in our off layout we're going to check the user and we're going to say hey if there is a user authenticated if there is a user then you don't you should not be on the off screens you should be redirected to to maybe simply if I redirect to the slash which is a yeah we can redirect to home this is the HRA equal uh and it's not going there I'm not sure why if user then redir so if now I do a sign in not redirected let's do a console log user to see what's going on here the console log user says that it's null in the off provider user session. user what's our session console log oh you know what we never render the off provider the off provider should be rendered in the actual root layout here so we're going to do off provider I'm going to wrap it around the slot that's why we didn't have access to it now we are automatically redirected here now on the profile screen if I'm going to go ahead and profile but I'm going to add it a bit later the thing is that the same thing as we're doing here in the layout of our off screens by checking if the user is defined redir to home screen the same thing should happen in our home layout what but here we're going to also import a user from our provider and we're going to check if there is no user you should not be here you should go to the off screen so now we're going to check it in the next step when we implement the profile screen to be able to sign out in the profile screen I'm going to also implement it based on the example shared by super base there is this chapter account page so let's copy the account page under the tabs profile close ours let's let's let's let's paste everything here so replace what we have with this one I'm going to call this profile screen profile screen well Library uh folder is somewhere else I think it's two times three times up and then super base uh so now if I go to profile it still render this one because it's cash it's one F right profile so if I go to profile it will crash uh you know why it might crash because it expects the session to come through a property but it's never going to come for property because we are using it in a export router however we can take that session using the same use of hook that we implemented previously use of Hook from our custom providers we exported the session from there so we can import it and that's it okay and now if I'm going to go here let's see what's going on if I go to profile everything is working fine what I want to test first is the sign out button and if I do sign out we see something we see that from our home layout when we do redirect to off it doesn't want maybe I need to redirect from off slash login now we are opening application we're on the login screen I can log in sign in we redirected here I can go to profile sign out and we are back to the login screen without the ability even to go back so if I refresh I'm still signed out so just like that we have a proper authentication system with proper guarding of authenticated screens and the screens that the user should be authenticated now let's quickly have a look of what's Happening Here in the profile screen in the profile screen we have some Fields what I'm thinking is you see in our profile table table editor in the profile we have yes we have a username but we also have a full name and I'm actually more interested in the full name than the username or maybe we can leave a full name but also add username name yeah I think we're going to Simply add username to all of this list because let's let's just double check if it works to update it so if I do VM as the username and press update if I look in our database for the username it updated to Vadim so this code Works to update our profile but as I said I want to also update uh the full name so let's whenever we see username let's do the same for um how's it called full name right full name so full name set full name then in the get profile we when we select when we fetch the profile let's make sure to also select the full underscore name that's the column name Now using this data we're going to update our full name from State using data do full name then in the update profile we're going to receive username website Avatar and also full uncore name full uncore name should be string now in the update let's add here full name full underscore name make sure it's underscore and it's going to update the profile there now moving on WE simply need an input probably I would even put it above a username so this view I'm going to copy and put it above and call it full name the value is going to be full name and it's going to set full name with updated text let's try it out so it's V SV update if I go here I expect the full name to be updated it's not yet uh yeah it's not updated yet why oh yeah I I know here on press we call update profile but we don't didn't specify the full name using the value from our state so now if I'm going to do right s update I go back I will see it here as full name in the database perfect so that's our authentication get add get commit minus M super base off authentication perfect how are you guys doing so far are you following along is this running on the new architecture no this one no Amy saying this is really cool to finally get a chance to see a live video of you in real time you're doing legendary job thank you very much really appreciate it do you stream on Twitch uh no but are you interested in are you watching twitch let's check here with a poll I'm interested I'm uh am is saying I'm watching this video while I build my first APK for the Google Play console which is ironic because I learned to re native with your videos oh that's so nice uh good luck with u uh publishing your application um back to our project there is one more thing that uh I think is going to make a lot of difference if we implement the possibility to upload a profile picture because that will change a lot of experience on stream chat if we have avatars so also in the super bay is getting started there will be bonus profile photos we have already configured the storage and the Avatar's folder the only thing that we need to do is install the Expo image picker so let's copy this one and install it in our project uh after learning JavaScript how to get into a wave native uh you can watch any of our tutorials that's going to help you that's exactly what we do on this channel so the next step is going to be to create the upload widget which should be in components called Avatar let's go ahead and create this file first in our components let's call a file called Avatar SX in this Avatar I'm going to copy paste the code provided by super base and what this one is doing is it's rendering the Avatar URL or it's rendering a button to upload an avatar I'm going to show you in a moment how it does the uploading but last step is we need to render this uh this widget inside the body of our profile screen so let's go into the home tabs profile and at the top before even the email in this container let's render a view with the Avatar imported not from stream chat Expo but from our components with this URL and whenever we finish the upload we will update profile but here we updated it and we need to also set the the full name equal to full name so if now I go to profile to profile page we don't have any uh Avatar is yet but we can press upload it will open up the image picker I can select an image from here I can choose it it's going to upload the image and it's going to automatically save it on my profile and it should render here perfect and now if I'm going to go to my super base uh storage in the avatars we're going to see this newly created file uh what you can do maybe style it here to do what is the background color here if I do background color red okay I think I can do align items Center and it will put it on the center and also as you can see this page is not scrollable I'll switch the root container to a scroll view imported from react native and make sure that the last closing component is also a scroll View and now if I go here we're going to be able to scroll to get to the sign out button okay perfect so profile page is done together with avatars you can look at this component Avatar to see how it does the the image upload it's using the image picker the Expo image picker to select an image and then based on that image it will take the URI it will create an array buffer and then it will um it will it will use superbase do storage will specify the fold uh the bucket where we want to upload it and we'll upload the file on this puff us using the array buffet that we created read from the image from the image that we picked and that's it then we'll call the on upload and it will save the URL on the database layer on the database layer in the profile if we go Avatar URL has only the file name okay perfect um let me go ahead and add do get ad get commit minus M uh profile picture profile picture profile picture and why did we do that well we did that in order to have different accounts and we need that in order to authenticate also users on stream chat so they all have a different account a different image Avatar and so on in the chat provider where we do client. connect we are using hardcoded data but now we already have access to the user using the use of hook that we defining in our of Provider if I do a concept log here for the user it should always be defined because the chat provider is rendered yeah it's provided so for ID what we can do is use user. ID for the name we can use at this moment we cannot use the we don't have access we don't have easy access to the full name because the full name is not on the user inside our off provider but yeah this session user this is the authentication user so that authentication user is stored in the off users so it's coming from the authentication Service it has email and a lot of information about password recovery and so on but the name is on the public profile page which has the same ID but we need to query it so what I suggest us doing is in the of Provider not only to keep track of a session but also to keep track of the uh profile set profile use state and let's let's fetch the profile in another use effect use effect we're going to fetch the profile only when the user changes only when session question mark. user changes we're going to check if session do question mark. user is is not defined then and that means that the user is not yet authenticated so we cannot query the profile the his profile that's why we're going to return otherwise let's define the function fetch profile which is going to be an async function and let's call it right away fetch profile how do we fetch the user profile knowing his ID because session user. ID is going to be the same as profile ID well we can go to the table profiles and there is this button called API docs in the API docs it easily shows you with ability to copy paste how we can get um how we can get and filter profiles so come on uh to filter filter filter this one insert okay so it's going to be everything starting with select and then a filter applied later let's start with this not with this so we are going to use super base client from profiles table we're going to select all the uh columns and we're going to all we are only interested in the profile that has the ID equal to our session. user. and then we can even do single here to return one the first item one single item and here is going to be data I'm not going to even rename it and what we can do with that data is we can set it in state set profile profile not profile but data let's try to do a console log profile to make sure that we are fetching it correctly and I see the Avatar URL full name VM so that means that yeah we we are doing it correctly I'm going to go ahead and add to my context one more variable called profile and at this moment it's going to be of type any but in a second we're going to see how we can properly type it come on SO profile any or null can you do that so the profile is going to be null and here we're going to for the value we need to make sure to export it as profile file now from the chat Provider from the off not only we can take the user but also the profile and actually I'm going to only use a profile because user ID is the same value as profile ID because that's how they are connected and it's going to be the same value as uh profile.id the same value as the stream chat ID for the name we can say profile dot uh full name if I'm not mistaken and for the image we're going to cover it later but for the dev token as I said this value should be exactly as this one we're still using Dev tokens in The Next Step we're going to generate them on the server uh and one more thing in this use effect now the use effect depends on the profile and depends on profile being there so I'm going to check at the top hey if there is no profile then return I don't want anything and in the off provider let me think about one use case what if we log out and we do set session the session changes I think when we if session is different than user I think it's smart to reset profile to null because if you fetch the profile and then log out I want to reset it so I think it's going to happen here anyway back to chat provider what's happening here let's reload something is not correct there an error occur while getting settings both secret and client not set wasn't called what uh in the connect let's do console log profile. id profile. id was this one profile. full name if profile is not there return h both secret and user tokens are not set I wasn't called or client disconnect was [Music] called or client disconnect was called I might know why this is happening because profile initially is undefined then it becomes active so to prevent this kind of error uh I'm going to go [Music] in in the off provider let me double check if I use the providers correctly in the application layout I use the off provider this one should render profile and so on then in home layout chat provider then in the chat provider right there but I need to disconnect only if client is connected how to see if it's connected or not State no maybe only if client is ready when disconnected because I think like it's trying to disconnect when it shouldn't so if I reload now consecutive calls to connect users is ideally why consecutive calls it shouldn't go there profile is really profile like let let's try console log use effect and then and profile I just want to see how often it's being called reload use effect it has value but first one use effect null use effect something then when I can why I can let me maybe reload it only when profile do ID changes reload use effect no and then the thir time is not going to be called because the ID doesn't change even though we are doing some changes there but the ID is the same so we don't need to reconnect and that's good that uh we connected our user if we look at the stream chat now under the users we see that we have a newly created user if we copy this ID we're going to see that it's exactly the ID of our user here here in the profiles and also our user in the our authentication system user ID so perfect um yeah that was it the profile ID here when connecting the client uh awesome so uh I'm going to go ahead and do a git ad because this is the connect user to uh super base user to stream chat user uh now I'm going to show you this problem uh the query Channel failed and it says that it failed to query a channel because we are not a member of that channel well that's because in the previously created Channel the park that was created by a different user we are not a member of that channel so we cannot render it that's happening because we um on our chats list in the home TBS index in the channel list we didn't provide any filters one filter that we can provide here is going to be hey um I want I want members I want me to be a member of that channel to get the my user id well let me check yeah uh the filter is an object where we can use different fields for example members and the way we filter it looks very similar to how we filter in mongodb for example using the equal sign we can check if members is equal to something but that's an array so we're going to use the in where we're going to check if one of ID that we have here is part of a member in the channel is that we're filtering so here we need to provide our ID where do we get it from because on stream and in super base and in the authentication the ID of a user is the same we can use the data from use off hook from user here and send it to the filter and just like that we are filtering correctly we don't have any errors yet uh anymore because uh we are filtering only for the channels where we are a member of at the moment we do not have any channels yet but we're going to fix that in a second uh we're going to fix that uh in a second because I also want to in the chat provider when we connect to the user I want the image I want to connect also the image of it user not this hardcoded one to get the image of uh of our avatar from Storage in the storage we have avatars we have a image first of all we need the storage the bucket to make it public so let's go to the storage under the avatars let's edit the bucket and make it public in order to be able to share these URLs with stream chat now if I take this get URL we're going to be able to access the image through this URL perfect how do we do it dynamically well let's check super base docs for the storage I'm going to go to the storage uh serving serving assets you can access them using this URL project ID super base object public bucket asset name so you can just use this URL replace this field or you can also use super base client and get a public URL like this I think this is a more like a more correct one because if this URL something changes there it's going to also change in the API so I'm going to copy it from there I'm going to use super base from superbase client from our library from the bucket called avatars because that's our bucket name in our here avatars we want to take the public URL based on we need the the name of a file the name of a file is under profile so it's going to be profile do Avatar profile dot how is it called table editor profiles it's Avatar URL Avatar URL and this one is going to return a object so I can access data and that's it and just like that we should also have the proper image set to to stream chat when I connect it does this connection it updates the information and now if I'm going to go to stream chat under this user the image well the image is an object so the data has public URL field um to make it as a string I'm going to do data Dot Public URL like this so now if I'm going to reload and go back to stream the image if I will refresh should be just a URL yes and if I copy to make sure that it's the correct one yes indeed it is so now stream chat whenever displaying the user is going to use the Avatar that is coming from super base so that was also connecting the image from super base to stream chat get commit - M connect super base user Avatar user Avatar to stream chat perfect um and because right now we do not have any chats how would we start a chat what I want to do is this will very much depend dep on how you want to implement this feature because you might have an application like a dating application and create chats only when two users are matching you might create an application like a e-commerce application and only be able to chat with when you are interested in a in a in an item uh for Simplicity reasons in my application we're going to be able to init initiate a chat with any users that is signed in something like I don't know Facebook or something like that you have users you don't even have to be friends with them you can initiate a uh a chat with them for that reason I need a screen where I want to display a list of users in the application and from that screen I want to be able to initiate chats with them that uh screen I don't want to be part of a bottom screen here [Music] uh so for that reason under the home not in the tabs but under home I'm going to create a new file called users. TSX here let's do export default function uh users screen this screen is going to first have a list of users set users use State and initial is going to be empt array and it will return a flat list from react native that will render this users render item let's simply render that they are name in a text item do full I think underscore name from the database so this text also from react native come on first let's go ahead and navigate here what I want to do is I want to add a plus sign and the header here so from the chat screens you can navigate directly to these users so from the tabs index I want to render an icon in the header to render an icon in the header we can do that on this screen by rendering the stack from exporter do screen stack do screen and through options I can do header right and here if we render something it's going to be rendered in the header I'm going to go into Vector Vex Vector icons and find the plus sign or maybe users yeah something like that is nice let's render it here and make sure to also import font awesome and just like that we have the fonts sm5 I conveyor we can display it a little bit smaller with gray and let's give it some style as well with margin horizontal horizontal 10 15 15 okay that's good so now in the header we have this icon which I want to redirect us to our home/ users to make this redirection I can use the link component from exper router and I will wrap it around our font awesome with the HRA of Slash I know home slash users and to make sure that we take the styles from here I'm going to do as child now if I press on this icon we are redirected to the users screen and I can go back to the tabs okay now that we are on the user screen and we are rendering a flat list how do we fetch a list of users well we do that that we are going to actually fetch a list of profiles not users so we're going to go into the profiles into the API docs and here we see how we can read rows as simple as calling super base from profiles and select all the columns we're going to call it in a use effect when this component mounts so let's not forget the dependency list fetch Prof fetch users is an async function that will be called right away fetch users and inside fetch users we're going to copy this command to rrws profiles super base let's make sure to import super base from our lib and this profiles we're going to set it in state as users set users profiles and just like that we have a one profile there I think it would be smart to filter to fetch all the profiles except ours so another thing that I'm going to do is I'm going to take the user using the use of hook as you see like we use a lot like this use of hook so that's why it's helpful to have the shortcut and now I'm going to after select I'm going to do uh not equal and I'm going to provide I want the ID not to be equal to my user do ID this way I'm fetching everyone except me exclude me at this moment we don't see anything here but if I'm going to go into the profile and do sign out and if I'm going to create a new account for example test a sign up not now use client disconnect before trying to connect why was that issue there chat provider made again a mistake here yeah because I think I didn't disconnected the user there profile ID changed so let's reload now if I'm going to go I'm with another account and I can even upload a different picture say that I am test my full name is test update uh it's going to be synchronized only when we connect again so I'm going to reload to connect with stream again and synchronize the name but we see here the user adim the other user from our application that's cool and what we can do I think is going to be to render it better so in the components I'm going to create a new file user list item. TSX and here let's for the user list item save it we are going to receive a user and we are going to render his user under do full name let's render this user list item in our user screen in the flat list instead of a text I'm going to render users list item like this let's import components user list item and let's send send V user our item user list item so now if I go here I still see that but we can style it a bit better here using a ping I don't know ping 10 a background color white maybe even 15 the text font weight bald maybe five 600 okay that's good and if there will be more users I'll will need a some gap between that so on the flat list I'm going to do a Content container style Gap five it's not going to be visible now but as we will add more users it's going to be visible there so now what I can do is whenever I press on this user I want to start uh chat with him so maybe we need like um an icon or something like that let me check how others are doing uh for example if I do this there are profile pictures and that's it nothing more so yeah you could also render Avatar of a user here but I'm not going to do that for now I just want uh to go ahead and do get OD G commit minus M let's do uh list of users having this list of users when I press on one of them I want to start a chat with him are you using Expo go so far we are using Expo go so let's go ahead and do a pressible and we need a pressable to be able to render on press events for example Con on press do something so when we press on a user we want to start a chat with him how do we do that we can do that using the chat client that we can take from the use chat context and from there we can take the client from there we can take the client uh uh and using the client we can go ahead and say const Channel equal client. create create channel create channel type what let me check let's go to the stream chat documentation not under the UI components but under the client so creating a channel works as client. Channel okay without even create so client. Channel and here we first thing is the channel type the channel type uh represents some predefined configuration and permission for that channel type by default there um uh if we look under the documentation under the channel channel types where is it let's see type where is it Channel type Channel types overview oh here the second one uh so there are five built-in Channel types there is live stream this has defaults in case you want to build a chat like the YouTube or the twitch where even guest users can type you can do that here there is messages that's uh more similar to Whatsapp or Facebook messaging there is team which is very similar to how slack is working Commerce that's for let's say eCommerce application and G that would be the default for a games but there is not like these Channel types these are not completely different things all of them are the same channel behind the scenes the type is only a combination of um permission and default settings if you go to your project under Channel types you're going to see these four Channel types if you open messaging you see what default configuration they have they have typing events but if you look at the uh live streaming live streaming are not going to have typing events because imagine if 1,000 people will write at the same time so you see these are just configurations that's what channel types actually are so in our case because we are building a messaging application we're going to do messaging uh Channel CL messaging the second one is going to be the channel ID there are actually two ways to create channels there is a way to create a channel using the channel ID and this one uh let's say it's similar to a group or a channel where you want to later invite multiple other people but you can also create a channel using a list of members for example if you want to create a a a channel between two users it's better to use this method because it will also ensure that there is not already a Channel created between these two users so for one-on-one conversations it's better to not specify an ID but use a list of members under the members here so that's what we're going to do here instead of providing an ID I'm going to provide here a list of members where the first one I want to be myself so very egoistic right so let's take the user using the use of hook but because we already have a user this one is going to be me I'm going to rename it to me so in the list of members I'm going to put myself me do ID and also the user that I want to chat with do ID and and this is just creating the configuration of a channel in order to actually create it what we're going to do is we're going to do await Channel channel. create this will create the channel we need to make it a Sy however if we want to subscribe to this channel updates we should better call watch which will create And subscribe to updates and once this is done I'd like to go to the channel details we have already a page for the channel details under home Channel and the ID so using here router I can do router dot push or better even replace in order not to be able to get back on that screen but to get back on the home screen uh to the slash I'm going to avoid home or maybe even just put it here home then Channel then we need the channel ID and the channel ID is going to be right ID of a channel that we created here channel.id so with that I think it's supposed to work if I go here I press on this user I'm starting a Channel with that user is it working I don't know doesn't really seem to work where let's go into the into the Explorer to see channels messaging with members I think it should work messaging config it has members here and it has two members and why can't don't you work here oh because I need c ID not ID you see my bad now if I go back to the home screen that's happening because I navigated using replace and not push if I go back here we see that we have a a chat with this uh user and I can say hello and that user will receive this message and if I go again here and press again on this user it's not going to create a new one it's going to Simply find that channel that has this combination of users and it doesn't matter the order of IDs it's going to find them in both combinations so if there is already a Channel with both members it's going to return that one so you don't have to worry about duplicating it perfect perfect perfect perfect what's this possible handle stop player yeah because we are not using xav so that's not a problem but that is our user list item then if you're going to go ahead and create another profile for example sign out and let's reload the application just to make sure that everything is going to work correctly test two or test [e-mail] test sign up and then if we're going to go to the profile and say that my name is test one and let's upload another Avatar update H yeah if I update if I go here we see two users I can start a conversation with a first one hey by and I can also start the conversation with a second one with test hello test send nice and I'll will have both of them here I can send reactions I can Peck I can edit delete Fred and a lot more I can even send pictures if I do allow I'm going to be able to send a picture here just like that how easy and how complex our application is at the same time like how many features we have out of a box like it's impressive so that was our get add G commit minus M uh start a Channel with a user perfect okay so guys look I have a dilemma right now I'm looking at the clock uh we have around one more hour in this tutorial um we have one more hour and most probably I'm not going to manage to do it today with a video so I'm thinking either to rush it through and do the video today or to properly do it slower and do the episode two in which we're going to do the the video and this way we're going to even be able to accomplish more features because we still have to uh authenticate the user from our server side because at the moment if we look into the providers of Provider chat provider we are using Dev tokens it works but it's good for development in production we shouldn't ship with this one so I want to show you how to do that on the server then I want to show you the video calls then I want to show you how you can create a chat room for a video call such as like you have zoom and then you have a chat and also how you can create a video call for a channel and Van notifications so I think I didn't realize the the scope of a project so most probably we're going to have to do part part two what do you say guys or do it fast today but I'm not sure if we will be able to to do it video calling plus notification in part two or only video calling today no notification let's see you decide guys I we do we finish today with proper uh authentication and then do part two dedicated to video calling and notifications or we do the video calling now but we skip over things I'm pretty sure what you're going to say uh while you're voting I'm going to grab another coffee and then we continue all right guys see you very [Music] soon e e e e e so 100% of people said part two the video calling a notification so that's good that means that we're going to have another part and uh sorry for the Mis promise that you're going to have everything by the end of the video but I hope you're going to enjoy that it's full and complete and we cover way more things because I really want this tutorial to be helpful whenever you need to integrate stream chat in your application I recommend it to a lot of developers and it's going to be easy to uh Point them to this tutorial so that we see the full set up which is scalable and not like with damy data and so on uh so let me check some comments and we continue because today we still have a lot of things to do we still have to do a lot of stuff uh so let me bring some question in I'm going to spend five minutes for the question until I drink my coffee so that we can then continue I have a question don't know if you where let me do it like this so that you can see it as well uh don't know if you cover it in other videos uh expose template project import View and text from a theme directory is there benefit extending it or better use react native lip so the view and text from that theme directory is extending the default view and text from react native library with the benefit of changing the back the colors based on the theme so it will support dark and light theme out of a box but these are only for the view and the text if you want the whole application to support it you would have to implement like our comp components as well so whenever you're setting manually like background color white for example for a scroll view you're going to better addit yourself to the theme and have like the same checks to do either background color white or black depending on the theme of the user so it's kind of the same it's using the same component it only adds this small benefit of checking like should it be white or black and that's it oh I almost spilled my coffee that would be have been bad coming after the Twitter clone series V are a top know tutor tutor thank you very much I appreciate it are you using Expo go yes so far we are using Expo go but in the next tutorial uh when integrating the video we're going to uh build a development client I'm uh I'm taking some pills for for my annea and my they are because of that my le are very dry so sorry for the group not push notifications oh that's uh interesting maybe we're going to cover it in the next video but I cannot promise you that what have I missed W you missed a lot but the good thing is that the tutorial is going to be published on the channel so so far we have set up this chatting application which you can sign in create an account then talk with our users uh guys do you want to also join the conversation let's go ahead and if you have Expo go go ahead and scan this QR code and I think you're going to be able to join no I think I need to run it with tunnel let me me check if I do npm start tunnel will it work so now if you open Expo go on your p on your device and scan this QR code you're going to be able to join the same application so go ahead create an account and then send send me a message I'm interested to see like more messages here let's go if if you're watching this live that would be nice this is only going to be available while we are live like after I reset it like you're not going to be able to see it but with a live viewers I think it's going to be nice so I'm going to leave it here and see who is the first one to send a message get your Expo go running why super base not Firebase uh I've never been a fan Firebase uh but superbase is really great it's um it's open source it's built on top of POG grass uh and it offers a lot of uh nice features so highly recommend checking it out uh should I build Rec native Ops in typescript or should I stick with regular JavaScript my answer here is uh if you are just starting and if re re native is still new to you and gives you challenges stick to JavaScript but as soon as you feel comfortable with uh with rect Native and with JavaScript uh at that point switch to typescript because if you can typescript is always going to be better it's going to help you make less mistakes where depending on like what variables is expected like in your function properties parameters and so on but I understand like if you're just getting started typescript might be feel intimidating so go ahead feel comfortable with rack native and JavaScript and only van switch to typescript are we implementing disappearing feature too disappearing feature so I didn't think about that I like messages that to disappear um what exact issues are you facing in responsiveness do we have any user yes we have new users created guys set a okay we have a first message and we see that the user is typing I'll say hello oh it's preate preate let's do here preate so who else has joined okay set why is the title of this uh Channel like this that's because when you created the channel I think you didn't have a username set and you only set it later yeah they are displaying there yeah I know I know this is coming because yeah like we synchronize the profile ID and profile name when we do the connection but in the profile screen it's going to be updated when later you're going to you're going to rejoin later and it's going to do connect it's going to connect to a client again uh to fix this issue like in the profile where is it the tabs profile when we call update profile I think here we can also update the stream chat user and the documentation for that would be oh we have a lot of channels and members hopefully I'm not going to get out of uh fre free deer yeah but documentation for that would be under users manage users nice here is a picture it also has picture view as you can see it also shows like if a user is online or not so Let's uh let's go on and what I have to do okay let me check get status everything is clean for can we have a chat room or a group chat yes we can definitely have that by either creating a chat room with with an ID and when inviting users there uh which would be more suitable for a group chat because if we create it with a members list here uh Channel channels creating the think is that if you create a channel with members you cannot add members later for this channel so so if you want a group chat this is good like for 101 or for small groups where you want them to be unique if you want to be able to invite users you're going to create it like this and then uh add members to that channel by calling updating channel members by calling channel. add members if we have time we're going to cover it today but the first step uh that they want to cover is going to be in the provider in the chat provider as I am saying we are still using development client uh development tokens let's go ahead in the Stream chat here under C client and users uh token and authentication so this the token is how stream chat makes sure that the user that is connecting to stream chat is exactly the user that it's uh claiming to be so here is where your backend can prove that uh a backend will serve as a token provider and at the high level the token provider like your backend should be able to receive information about a user from the front end should validate that the user is the right user he's not banned he's exactly who he says it it is and then uh provide a user ID corresponding to that user to the to the client's token creation method so basically it should generate a token and return the token to the front end generating token on a server site is super simple because we we use the same stream chat uh dependency for example from nodejs the same stream chat uh but in that on the back end we can use the API secret and the API secret is what will sign that token to make sure that uh it only can be signed by your back end never do that on the front end Secrets should never be included on the front end and yeah that's the whole idea the idea is to generate the secret on the back end using stream chat SDK using this your secret key to do that we need to run some code on the back end our backend we are using super base to run code in our back end superv have Edge functions Edge functions is the functions that you can run and you can uh build and run and host host them in the cloud and execute by sending like a request to a URL so these are exactly like the backend functions that you need and we are going to go ahead and create one of these Edge functions that will be responsible for generating uh tokens for users to be able to authenticate with stream chat so let's go into the documentation of edge functions and where yeah the functions that can allow you to integrate with with third party like stripe uh and so on we are using Deno which is similar to no GS with some differences so let's go ahead and go into the getting started of edge functions the first step is going to be to initialize super base locally let's go into them if you don't have CLI installed go into the CLI docs and uh I'm going to show you what you have to install here under getting started for local CLI uh we are not going to install it globally I'd rather use npx super base to always invoke it and use the latest version of super base so we don't have to install it globally um because we with npx we don't have to keep track of updating it then we need to set up our system to be able to run super based locally because that will help us run the super Bas and functions locally and easier test them before submitting to production this is in a way optional but it's going to be very helpful for you to test and make sure that your function is working as you expected to do so for that you would need to install Docker desktop Docker desktop it's available on both windows Linux and uh ma OS as you can see here and then that's it then we can do super Bas init and then Super Bas start I'm going to go back to the edge functions documentation and I'm going to start with the init let's go in our project and start initializing the super base project here in our re native application again the commands that you see with super base we are going going to execute using npx super base so let's start with npx super base in it it will ask us to generate the settings for Deno let's say yes this will help us write our function this generated a super base function here let's see what would be the next steps creating an edge function before I do that I think I want to connect yeah before I do that let me check something else let me go to the CLI because I want to connect my local um database with a remote project that I already have so in we're getting started do we say something about uh super base okay CLI configuration local [Music] development we need to link it and I know the the the command I just want to show you where to find it here super base link and then project ref and your project reference for example NP uh and npx super base link D- project ref and then the reference of your project let's go into the super base I'm going to go under the project settings and here we have a project reference let's copy it and let's paste it here next step it will ask us for the database password so that's where you need the database password that you store before I'm going to do it like this connecting super base all good uh it configured it and now we what we can do is we can pull that database from remote locally so that when we run it locally it's going to have a same database database tructure at least to do that we're going to do super base pool I think no oh super base DB pool let's do npx super base DB pool so it will look at the schema from the remote database and it will try to recreate it locally in a Docker container so that's why you need Docker desktop to be running is it running for me let's press yes here and we see that it finished and the off story schema are excluded okay so Source where is it super base it has this migration that has all the configuration that we need like you don't need to care about that but it's there uh now what you can do is you can start super based locally using npx super base uh start this will start your stack locally but we see that I'm already running another project and it's telling me that I can stop it using this command so npx and then Super Bas stop project ID prep stream that is for preparing now I can do again npx super Bas start okay okay okay okay hey Dev Kumar Sharma thank you for joining and just like that our super base now runs locally here are a lot of of uh configuration you can also access the studio by following this URL so now it will be the same conf the same Studio but it's running locally so that's also another power of superbase because it's open source you can run it anywhere locally on AWS on any kind of service you don't have to run it on super base.com that's really powerful at the moment we don't um to connect to this local super base you'd have to change in the environment uh the super base URL to to to to to this one API URL and the unknown key to this one but I don't want to do that at the moment I did this local configuration because I want to set up our functions our Edge functions let me do G status and do git add git commit minus M um local super base clear and now I want to go ahead and set up uh the functions so back into the edge functions documentation getting started what I want to do is first uh do super base functions new and then the name of the function let's do that using npx super base functions functions new and then let's call it stream Dash token the function responsible for generating stream tokens this is a function that will run in our back end it's not a front end function now what this has done is in the super base it created this functions folder with a stream token folder and here an index this this is the code for our hello world function let's go ahead and see how we can uh run it uh it already has some code here like hello and the name that we send so let's test it together how to run this Edge functions locally first you need to do super base start we already have done that and the second one is do NP superbase functions serve this is a way to get access to super base functions serve this is going to serve a function and also we're going to see all the logs here now we see that we can invoke the function by sending a request to to this URL functions V1 and then the function name in the documentation it shows like uh the Cur request how we can in this function so let's take this Coral request and you're going to I'm going to put it somewhere here in the code actually it's already here in the in this code so stream token and also it has automatically this token which if you didn't have you want you you would have to do npx superbase status and this npm superbase status would tell you what is the a non key that you need to use when invoking your local function in my case I'm going to copy this SC command which was generated for you as well so just copy it from your terminal and in a new terminal let's send this command what we see is that we see back the message with hello functions because that's the data that we send we send the data name functions in the other one where we wrote uh super base function serve we see a logs of that function and we see a information hello from functions which is the console log from here so just like that we are executing and testing local functions The Next Step would be to uh to use stream chat to generate a token let's see in the documentation under the client itself for react why are we looking at the react dos is that correct should be react native client under but it's it's the same almost almost the same sorry so under that tokens and authentication there is generating token and here we can choose no GS this code explains how to generate it on the back end but also you can go into the documentation directly under not the front end but under the back end and check no just here so as I said our Edge functions is using Deno it's not using nodejs but Deno is quite compatible with nodejs with some small exceptions the way it Imports modules for example so here in the nodejs we see how we can generate user tokens first of all we need to import stream chat let's import stream chat in Deno here at the top so we import stream chat like this but the thing is that we are using Doo so with Deno as I said the import is a bit differently we can look here at the example and where is it uh in the guides there is managing dependencies you can read more about that but the simplest way is to just add npm in front of your uh name in front of a name at npm stream chat and that will work out of a box uh you can also use yes Sam which is going to be not sure if I used that here no I actually use npm yeah so npm stream chat now we can do what the stream chat SDK is saying we can generate a server client and the documentation automatically prepopulates with my tokens I'm going to do that in the denos Ser function uh let's do it somewhere here I'm going to create the client and then we can generate a token for some kind of user with ID John now this token we need to send it in the response so in the response I'm going to send here an object with token that has this value I don't need any more of a data I don't need any more of a name I don't even think I need I will need request a bit later but now what's happening is I just want to install stream chat I want to generate a client using both the public key and the server the secret key and then using Create token uh I'm creating the token and I'm sending it back as a response let's open back the terminal and when we did function serve this command superbase will watch the function and will update every time we uh do some changes so that means that now we can simply go here and send the request again and back we should receive a token if everything works and actually everything worked the first time it took a little bit longer because it needed some time to download stream chat SDK but now if I do it again it's instant see boom instant again instant so now we have a server side generated token but that's not it um what do we want to do first there is a couple of things that are hardcoded here which I don't like which are the keys which I'd prefer to have as Secrets not as environment variables and never in the code especially this one this is a secret and also the idea of a user is hardcoded how can we get the idea of a user that is doing this request let's have a look let's go back to to the edge function documentation of super base and here there is a guide for integrating with super base off with integrating with super base off we are taking the authorization header and then we are creating a superbase client with the environment variable like superbase URL and the anonymous key and using that header fetching the user and then we are just fetching the user with that data so let's first create a superbase client in our Edge function we import create client from the superbase GS we first take the authorization header and then we create the superbase client in the doo. serve I'm going to do it at the top here here like this authorization header is this header where header authorization this is the authorization header that we are sending when invoking the function and we can only invoke the function as a signed in user now we take that authentic off off header and we are sending it to the configuration of create client this way we are sending it with the same user as a user doing request now we are using some environment variables that are prepopulated this one we don't have to provide they are automatically there such as superbase URL and a on key now having this superbase client we can go ahead in the next step and fetch the user the user that is doing the request so this is the code and I'm going to do it after a super based client token um token this is token this is off token off token and I'm going to use it here to get the user so I'm just simply removing the word barer I don't know how to pronounce it and only keeping the the token itself and then using superbase client of get user I'm getting the user with for that token and then that's the user there might be situation where the user is null so if there is no user in that case let's uh return something like this I'm going to return a new response maybe I'm going to say error um user not found otherwise go ahead and generate the token but in this case not for some kind of John but for user. ID now if I'm going to go ahead and invoke this function you're going to see something you're going to see that error user not found why because we are using the authentication token for anony for an anonymous user we are in V CLI we're not signed in as any user if however we take the authentication token of a specific user in that case is going to work properly and we're going to test it a bit later but most like 99% of cases it's going to work now the last step is going to be this um environment variables these keys that I want to set as environment variables let's go ahead in the documentation and here is managing environment variables we can load them using Deno and my secret and the way we provide them is going to be the following first let's create in the superbase folder a file called env. loal so in the superbase folder let's create a file called env. Lo which will be the environment variables that we want to use locally here we need two key two Keys stream chat how is it called how did we call it stream chat stream API key and stream secret stream in the end local stream API key equal to something and stream API secret equal now let's move the values from here to the environment l local and from [Music] here to environment local and when getting the instance we're going to use Dano Dov dog and the name is going to be stream API key and this one stream API Secret theno env. getet stream API secret hopefully that is going to work oh it should be strings sorry here string and here string but this one why it says stream May [Music] key yeah hope it's going to work to test it I'm going to comment out this check to not stop if a user is not there and here I'm going to do user question mark ID or John but this is for temporary remember to come back and delete it we're going to do that in a second uh or John now to test it out we need to stop the where we ran function serve and call it again but this time provide EnV file and then superbase the location of the our EnV local EnV local now we're going to run these functions using the environment file that we set here and if it correctly was set we're going to have access to this and it's going to create correctly the token let's try to send this request again and we have a token that means that it correctly to got the environment variables if you're not sure you can console log it here and you're going to see them now I want to go back and remove this one because this was temporary to check if we have access to environment variables because if there is no user I want to stop here because there is no point to generate some if we don't know for whom we're generating uh and speaking about environment variables um this is superbase serve using environment variables now production Secrets uh with this command we are basically copying the environment local in EnV so let's do that and you're going to see that by running this command it copy pasted the env. loal into the EnV uh make sure to never commit these files to your uh Source reports to your git and to do that I'm going to open this git ignore and we have a EnV but I think I want to also add env. local EnV local just to make sure that we never commit these two files to git now now the next step is going to be to run super base secret which is going to look at the environment file and will create secret values in super base and this Secrets will be added automatically as environment variables when deploying the function or after deploying the function they will be there so if I copy this command and add npx in front of it npx super Bas secret set and using the file that we just created here we see that they have been set and now we can look at super base super base Secrets uh list if you run this command you should see the secrets that your uh that your project has you can also check them for your superbase dashboard if you go go to project uh where is it Edge functions maybe not Edge functions maybe project settings they they should be here as well we're going to see them later probably after deploying The Edge functions um so let's see let's see but if we run superbase secret list and they are there everything is good okay so now that we have a secret we have environment variables uh we are properly doing everything locally we tested it locally now it's time to go ahead and deploy our function to production to our superbase uh application running on superb.com in the quick start there is deployed to production make sure you are logged in make sure that your project is linked we already have done that and now it's time to do functions deploy as simple as that npx super base functions deploy now it will take the local function and we'll deploy it to super base we see deployed function stream token on this project if we go to this project under Edge functions we see the edge function here and also a button manage Secrets which contains our stream API key stream secret and the rest that are default from super base so this is the URL that the function can be invoked what we can do is we can copy it and go back to that terminal where we were testing using coral commands our function this one and I think we can remove a URL and replace it with replace it with the public URL and if I do that we see invalid J JWT because we are using a different of token we are using an authorization token for local but and trying to access a different database a remote one so we would also have to update the the barer token using the Unown key from your superbase dashboard but I'm not going to do that I'm going to assume that it works and I'm going to go ahead and uh invoke this function directly from JavaScript so invoking remote functions from JavaScript is as simple as doing a we super base functions invoke and the name of a function where do we need that we need that in a utility function so let's call create a folder utils and the utility will be called token provider provider. TSX let's export a function export const token provider which is going to be an async function that will uh do the following it will get data from calling the super base do functions the function name is stream Das token make sure to call it correctly and I need functions dot invoke stream. token and then let's do return data. token and also maybe do console log data now where do we need to call this function we need to call that function in the chat provider we're going to need it for this token so here before connect let's do like this Con token equal a weight token provider and then console log token token let's see if it works uh I'm going to open the this one I'm going to reload and it should fetch the function if everything works look I think I'm going to stop the tunnel because that takes a little bit more time to load and we're running out of time actually major is asking did you collab with Cataline uh do you mean Catal run if yes then yes we have a video together with him uh it's in the demember series somewhere in day four five or six we have implemented the Tinder swipes with him we have done some animations with Catalin super nice guy and we have token we have a token and I assume that it's the correct one we can go back to the edge functions you can press on this Edge function and you can see some metrics you can see invocations you can see that it was invoked now and it has status code 200 if it gives errors here is the place to see that and most importantly in the logs you can go into the logs and see what it was logging because we have that hello from functions it's logging that here so what I can do is I can use this token instead of a development token or I can even send here the token provider like this because connect user expects either a string or a a synchronous function that will return the token so now if I do that and then go to the stream chat and even in the overview for authentication I enable all off checks back or I disable disable off checks uh that will mean that my application will no longer work with development tokens and if I reload the application and I'm back connecting to it it means that everything is successful I see that I see that I can go to to for example the first one probably is V Savin uh hello V and I will also check if signing in from other account also works I'm going to do sign out maybe I'm going to reload and I'm going to sign in with my first V not justd uh sign in I'm back here I have a message from V Channel hello Vadim hello test hello test and it works because if it wouldn't work like if you go to token provider and say return token Provider Plus ABC just to have an an error what you're going to see is the following you're going to see possible andh handle promise rejection failed to authorize so everything was too smooth for me to believe but you can see that if we don't provide it it doesn't work if everything is correct it works here wonderfully and I have a lot of messages from you today's rocking with day let's go perfect so that was our super b um backend token generation using super base so let's do get OD get commit minus M uh super base Edge function for server side stream token generation a very long commit message but that's a long concept to understand and now our application is actually ready for production it's no longer using Dev tokens it's using and it's authorizing users based with based on our own backend that we bu and we integrated with stream uh let's see what messages we have here cool so guys uh did you enjoy this one did you learn something new today let's see we have a very uh not a lot of time left so but I'm very happy with uh how stable we made this application even though uh like it's going to allow you to integrate in in your application and I hope you're going to do it like without a lot of troubles uh hello hello prevas priv hello so yeah perfect something else that I wanted here let's see what's up with this promise cannot H stop player of undefined stop player of undefined that's coming because we do not have some additional packages installed for example let's maybe we have uh some time to install some some of the optional packages if we go to the stream chat uh docs react native UI components and then in the installation let's install this optional dependencies especially Expo AV let's open Expo AV documentation and let's run npx Expo install Expo AV I'm going to open it up here let's install it this will allow us to send videos as well and Playback videos uh let's see if it enables it by default automatically or do we need to do something for example if I go into one of these test one attach not sure if I have a video V but I can try to drag and drop something really quick momento where is it YouTube content for example this one if I add it here it uh I did it hellow hellow let's go back and let's try to send a video here it's sending let's see if it's going to work it's quite a large video so that's why it takes a bit of time it has 70 megabytes okay so while we are waiting for it to be uploaded let's go back to the documentation and install install vories for example Expo sharing this for attachment sharing support we would be able to share files with our appli applications to install it we're going to do npx Expo install sharing and here the video is sent if I send it will it open uh it opens like this but why it doesn't play it maybe because it's too large you know let's do Expos ring then the Expo haptics this is to provide um heptic feedback like for example When selecting a photo or something like that it can vibrate the phone uh do we need any configuration maybe not for clipboard this is for copying for clayboard okay export document picker to be able to send documents like PDFs and so on so let's install it as well uh and Rec native quick SQL light this is uh for running it uh to for offline support but I'm not sure if it works in yeah most probably it will not work in as it will need to to De to to build a development client as you can see like after four hours like I'm already mumbling so I'm not going to install this one for now uh I highly encourage you to check documentation in the documentation you're going to find a lot of useful information a lot of things that you can do a lot of all of these components that you see on the screen like the channel list you can adjust you can adjust and change everything about them I like that they provide a lot of defaults which are really powerful but at the same time you can adjust everything like Channel preview message the way you preview the message you can the channel preview muted state or preview title what title do you want un red count um now on the channel itself or on the message list you can adjust like how you want the message list to to look like in Vera here is the component but here are the cookbook custom attachments here are information how you can build these things custom attachment list custom message actions you can mute you can do that uh you can do custom auto complete suggestion custom message UI if you want all of that you can do here and for advanced guys you can even do audio messages support and we already have Expo V Channel audio recording enable let's see if it will work out of a book if I go to the home Channel CID or under the layout where we no under a CID where we have Channel and if I do audio recording enable and if I go here I have audio recording hello hello hello possible UNH handle uh probably we need to handle the hold to start recording to start recording of undefined is Expo V yeah I need exp in the plugins not sure why not but uh we can we can think about that in the next one all right guys so that is our chat application super powerful out of a box and fully customizable for you to take it to the next level to integrate it in different kind of application and to build chatting experience with every feature that you might expect we didn't manage to do the video calls now in this in this tutorial but we're going to do that in the part two so make sure to subscribe to the channel uh press on that notification Bell not to miss that video out we're going to do that next week so we're going to continue the tutorial and add on top of everything that we did today the video calling features you're going to be able to call 101 maybe we're going to cover also group calling and we're going to integrate notifications notifications are going to help us both for uh to handle the notification for messages for chat messages that you receive but more interesting is going to be the um notifications that you receive for calls because we can use the system UI to display a call directly on the screen on iOS on Android as well so that's going to be powerful and yeah if you enjoy please make sure to subscribe thank you very much stream chat for sponsoring this video and for making such a great solution for developers and I'm going to see you next week for the second part bye-bye guys have a nice weekend ahead

Channel: notJust․dev

Views: 27,124

Keywords: vadim savin, not just development, notjust.dev, live coding, react tutorial, react native tutorial, react native for beginners, React Native, step-by-step tutorial, telegram clone, expo tutorial, stream chat, chat app development, react native chat app, audio call react native, video call react native, messaging app tutorial, messaging app react native, react native stream tutorial, stream video sdk, call application react native, react native telegram

Id: a_EdG30oGQI

Length: 237min 39sec (14259 seconds)

Published: Sat May 04 2024