Mastering Authentication in React Native (Expo Router) with Node.js and MongoDB!

hello guys in this video we are going to build a mobile application and the application is called authentication app we are going to use react native with Expo nerus for backhand mongod DB for database react query for managing server States and Redux for managing Global state in our application before we get into code let let's look at the final project demo we have the home screen with video background and text on the video and we have these two links log in and register if I click on the log in it has taken me to the login screen and I can go ahead and then log in as soon as I log in it has taken me to my profile page and in here we have what is called bottom tab navigation and if I click on the profile this is my profile and I can look out and for settings we have some static data here for the account notification privacy all these ones are not doing anything here they are just static text so if I look out as you can see I have been redirected meaning that that profile component or screen is being protected let's see what we are going to cover in this project we will learn about fil based routing using Expo router stock navigation Redux integration for managing Global State react query for managing server State bottom tabs navigation protecting screens login in register log out profile and we are going to use en croc or local tanel to expose our backing API so that our react native application can talk to our server let's see the flow for these two stacks and that is Redux and react query in case you want to learn about Redux and react query then you can check my full C on UD me so let's see the component let's take that this is our react native application and this is react query that is T stock and our nous application and lastly we have Redux over here let's see the process involved when a user locks in or look out or register in the first place the user will make a request from our mobile application the request will be sent to tanack and that is react query then react query will make the request to to our back end after we got the data then we can decide either we should save the data into Redux store or not and the purpose for Redux here is that it is going to manage Global state so you look inside your application which data that you want to be Global in this case the authentication status so let's say that the request was fetching of users in this case we are not going to save the data into Redux store but instead we are going to use tack for it but let's say we are managing Global State therefore the data will be saved into Redux let's look at the pages or the screens that we are going to build we're going to have the home screen and in here we have two buttons log in and register when a user click on the log in it is going to open the login screen likewise the register and in here when a user register it is going to display the bottom tab navigation and when a user click on the profile we're going to see this screen likewise this screen so this is what we are going to design for these screens to be able to understand and appreciate react native unless you are familiar with main stock in that way you find using react native period easily so in case you want to learn more about men stock then you can check my main food stock course for the backand API I have already prepared them for you and this is part of our main project course where we build this one likewise in our main food stock course with this one being said let's get into code we are going to focus on the front end and that is our rea native application we are going to use Expo for generating our react native application so if you go to expo. Dev click on the read the documentation and we are going to use this command so copy that and then back to my vs code open the terminal and then paste that and for this one it is going to generate our application with builtin file based routing and we don't want that we want to start from scratch therefore we are going to give it a command as D Dash template in here we can decide what to use so I'm going to hit enter all right and select blank and enter and let's provide the name for this project I'm going to use off app and enter it is going to generate our react native project for us all right it is done so let me see it in into the off app and we are going to use this command to start our application and we are going to use this command as npx Expo start for this one I'm going to have the options to start our application either to use iOS simulator or Android for me I'm going to use Android so here I'm going to select my virtual device and then select this one in case you want to know how to install these simulators let's visit the official documentation and click on setting up your environment it says that where would you like to develop either by using Android iOS Android emulator or the simulator if you want Android click on that you're going to give the options to follow which are these options on Mark you need to follow these steps and in case you want to use the iOS simulator click on that and going to have the steps to install all right at this point I assume that you have your simulator and to use the Android press a for Android and this is our new react native application using Expo we are going to configure it to use Expo router in case you are new to Expo router let's read more under it to make our life easier I'm going to search for Expo router in Google and click on the first search result and here is the introduction to Expo router in short Expo router is a way for implementing navigation in react native application this means that by default react native using Expo has a builtin navigation and this one uses file based routing or navigation this is similar when using next chairs so in case you are familiar with net chairs then understanding Expo router is going to be much easier an expo router was built on top of react native navigation Library for the current version of Expo it doesn't have the built-in file based navigation unless we use a different Library called react native navigation but with this one it is going to use the concept of file based and then react native navigation Library so let's look at the steps we're going to have these steps the quick start this one as soon as you initiate this command without providing the dash dash temp temp plate it is going to configure the file base routing or Expo router for us but since we are beginning we are going to start in the manual way so click on the manual installation and in here since we are using SDK 50 and above we are going to install this package so copy that and then back to the terminal and let me open a new instance and CD in into the that and then paste that the next step is that we are going to specify the main entry point so copy this one and we are going to locate the package. Jon file which is this one and in here we are going to replace this one with the export router configuration as that let's look at the the next step we are going to pass the scheme inside the app. Json file so let's locate the app. Json file which is this one and you can place it anywhere you want and make sure to bring comma here and then provide the name of your project or the scheme I'm going to use off app and that is it with this one we have successfully integrated or install Expo router so let me clear the terminal and then here let me rebuild my project all right and it says that welcome to Expo now that you are done installing or configuring Expo router let's see how to use it Expo router uses what is called file based routing which is the same when using n CHS n CHS also uses file based routing this simply means that it is going to use the file names and folders as a path and in case you familiar with react native navigation Library this Expo router was built on top of that all right so this means that with the previous version of react native we didn't have a built-in navigation called Expo router but with the current version we have it and this going to make our life easier when implementing navigation so let's see how to use it in our application if I click on this button it is going to initiate this command and that is creating the app folder in Insight going to have the index.js but let's start from scratch so in the project here we are going to add a special folder called app the name must be app this is how we used to implement file based routing and in here any file that we going to place in here is going to be a path if I say index.js this is also a special file name this is going to be the homepage so let's create the component or the screen by using this snipet I have this one because of the extension I will show you so let me rename this one as home if you want to have the same snip it then search for react and that is es7 react Redux and react native snippit Library by this author all right so now that we have the home screen now let's visit the application and we have the home over here now let's say I want to have a different screen or a page called about us or about this means that when a user visit the base URL slab it is going to display the component or the screen that we are going to create as this for the name of the component it can be anything if I save it let's look at it we have the home screen let's say I want to navigate to the about us from the home screen I'm going to provide a link and to be able to navigate we have two options one is to use use router from Expo router which is this or link component from Expo router as that don't worry we are going to use this one extensively as we proceed in this project so in here I'm going to provide the link and then I will say go to about and then provide H and the path is going to be for slab that's the name of the file as about with this one save it and let's see if I click on the about as you can see we have the about screen over there don't worry we are going to implement some styling to make it more beautiful at the moment understand how to use five based routing and if I add a folder called post and inside I can add what is called list of post as that and let me scold the page as post list all right with this one the path is going to be for slash poost for slash list so in the homepage here I'm going to have one link as go to post and the path here is going to be for Slash the folder name and then the file name so it's going to be post for slash list and if I get back to the application if I click on the go to post as you can see I'm on the post screen and if I provide Index this means that this is a homepage for the Post here as CHS and I'm going to scaold the screen and I will say post home here or just home screen or index now if I get back to the home screen here and provide for/ poost and I will say go to post home and let's see click on that and this is what we have as you can see how easy when implementing navigation using Expo router but this is not enough we are going to build our application and that is by having the home screen which is this one so you're going to have a well structured folder structure for our application before we get into that let's move step byep step I'm going to remove everything from here all right and I forgot to show you that in case we want to ignore a folder not to be regarded as routing we're going to place it in a special sent tax as this so for this one if you visit for SL poost it will not be regarded as a path all right so let's continue to implement the navigation for navigation in mobile application you're going to have three types one is stock navigation let me show you here in the diagram which is this one this is what we call the stock navigation because we have the arrow here and some default styling at the top here meaning that the screens are going to be on top of each other and I'm going to have bottom tabs navigation and a drawer for this project we're going to use the stack and then the bottom stack navigation so to be able to add the homepage inside the app folder we're going to add a special file called underscore layout as you can see for this one and CH it follows the same format so in here we are going to specify the type of navigation that we are going to use for example either using stack bottom tab or tabs for the home screen for this project is going to be a stack navigation let's see in the diagram which is this one as you can see we have the stack navigation and these icons or the links so we're going to regard this one as stock navigation that is the first requirement and then going to have index.js and this index is going to be the homepage as you can see it doesn't have any path that matches that because don't have any component yet so if I scaold this one to use that I will say home here now if I save it let's see we have home here as before so we have to specify what type of navigation that we want to use this where you provide the underscore layout in here we are going to use stock navigation from Expo router so all what we need to do is to export this one so here I'm going to name it as export default and then stack navigation component with this one let's see and this is what we have so in here we can customize the behavior of our screen we can change the color for this one so to do that we are going to return as stock and then inside here we are going to configure the individual screens by using dot screen and in here we're going to specify the name of the path or the file in this case the index I'm going to pass in the options and we will say that header shown is equal to false this means that we don't want to show the header here as you saw if I say that true let's see and we have it as index and we can even change the name for this one and let me add one more I will say title I can overwrite the name for this one to home and we have it as that if I say welcome going to have it as welcome all right so for this one you can customize it the way you want it but for the homepage going to have something like this in here we're going to use the video API from Expo and add some styling to it so let's do that we are going to design the homepage we will need one more component from the react native if as touchable opacity this is going to help us to add some cool effect for example when you click on the button we're going to see that indeed it has been touched all right so for this one we are not going to focus on the CSS I'll provide the CSS for you so let's look at the structure I'm going to have the view as our wrapper and then for the view you're going to have a CSS class so in here I'm going to provide the CSS for the homepage definitely I'll provide you with the final source code so replace with this one all right so these are the CSS for the homepage we have the container the video the overlay let's begin with the container by providing style equal to that and then provide styles. container and then after that going to have the video player we're going to use Expo AV for displaying videos so let's search for Expo AV which is this one and going to install that by copying this back to the terminal and then let me open a new instance and then paste that and install all right it is done so let me save this one and reload the application all right so in here let's bring in the video from the Expo a and we will need resize mode I start so let's configure the video so in the comment here which is this provide the video and then safe closing as that we're going to pass in these props the one is going to be the reference therefore let's have some internal State here by saying that con video is equal to react dot use ref and pass in now then inside going to specify the video ref here and then the style the style you're going to use styles. video and then let's provide the source of the video and then in here I'm going to specify if you go to pixabay.com you can search for any video so select video here let's say you want to use this one click on that and then right click and click on copy video address back to the project and paste that all right so let's finish up with the address going to have resize mode we're going to use the resize mode the one that we got from Expo AV on that we have what is called cover and then going to have shoot Play We want to play it as soon as it loaded and then it's looping and that is it with this one let's see the mark magic well this one supposed to be an object and then inside going to specify the URL and then paste that B on my side and let me reload the app and let's see and this is what we have all right as you can see the video is playing but for this we don't want to see the header here so we can customize it in the layout here by providing header shown being set to force and there we go what has left is the text on it and then the log and then the register button so let's locate the homepage which is this one now you're going to have one for the text and then inside we going to have the following test and for the container for this going to provide a Style by using style. overlay and then for the individual ones provide a style and it's equal to style do main text and let me have one for the subtitle as coding school and then the text here is going to be subtext and lastly for the tig line as build Futures let's see what we have and this is what we have the last one is going to be the buttons rapper as View and let's provide the style as equal to buttons and then inside you're going to have two buttons but want to place it in the touchable opacity and the first one is going to be log in for the touchable I'm going to pass in the Style Style do button and for the text is going to be style do styles do button text and let me copy and paste for the registration as register and we have it as that what has left is the navigation when I click on the login I want to show the login all right so let me have the use router from supposed to be use router instead and let's have instance of that by assigning to router here equal to that so going to add some event list now on the touchable OPAC going to pass in on press when the user press on that we are going to trigger router. push and the path is going to be l in but we're going to provide it as of SL l in and then copy this one paste it paste it on the and change this one to register at the moment we don't have these paths and if I click on the log in as you can see unmatched route meaning that this path doesn't exist so we are going to have a folder under the app as off for this one you can name it whatever you want so inside going to have the log injs and then register. Js so let's cold the I start and I will say register and then let me have one for the loging in all right so now if I go to the project and if I click on the log in where we still have on March route I think I mess up with the off supposed to be th likewise this one and now let's try again if I click on the log in I have the login likewise the register we also have the register I'm going to deactivate the video being playing so let me comment that one out so that it can speed up our debugging and refreshing of our project all right so let's focus on the loging in for this one we are going to use formic and yob for implementing form handling if you have taking my other courses I often use these two libraries so I'm going to use npmi foric and I'm going to use yob for form validation and AOS for making the HTTP request and hit enter all right it is done so let me reload the application now let me close this guys and let's focus on the login in let's bring in foric as that and then import asish as y from the Y package we're going to have this schema and it's going to be as y. object. shape I'm going to pass in the email field it is required and must be email and then last one is going to be the password pass in my custom error message as email is required and then password is also required now that we have this we are going to have our form and for the CSS for the login in I'm going to provide you with that so I'm going to copy it and replace with this one so let's have the first CSS for the container are styles. container and for the text also I'm going to provide style is equal to styles. title and it's called log in and let's have the formic configuration so in here bring in the a foric and then for this one we going to pass in the initial values is equal to object specify email and password and we going to have the unsubmit Handler I start and lastly the validation schema perfect this is where we going to trigger the HTTP request in between the formic here we going to extract the property is a methods that's going to make our life easier when using foric so as an object I'm going to have what is called handle submit and then handle blur values errors and touched so here after the bracket then we are going to return the actual individual input Fields by providing the view from react native as safe closing and insert going to provide the style which is equal to style. input and then the placeholder as email and the on change is equal to handle change by passing in the email and then on blur passing in the field as email and then values. email and lastly the keyboard type we're going to use email address supposed to be keyboard type which is equal to email address now let's see what we have if I go to log in we have the input field as email and let's display error messages in case the user is not providing the email and he or she is trying to submit so in here I'm going to provide errors. email and in case it is touched we are going to display this GSX so in here I'm going to use text as that so here it says that in case we have an error on the email input and if the user has touched the email field and then we are going to display the errors. message now with this one if I go to log in as you can see I have the validation you're going to have one for the password it is going to be the same process I'm going to copy the input for this one likewise the error message here paste that the difference here is to change email to password so here as password and then the value here is equal to password and remove this going to provide secured entry as true and change this one want to password and let's see and this is what we have if I click down as you can see as you can see password is required and lastly let's have the login Button as we did before I'm going to say log in button it's going to be the touchable opacity as we did before and then inside provide a text and then we will say that remove this one from here all right and we say that log in by passing in the classes or the CSS and we have it as lock in we're going to have one for the registration it is going to be the same process the difference here is to change the input Fields so I'm going to copy this one and back to the registration paste that I'm going to rename this one to register you can use any name of your choice so here you're going to have confirm password which is equal to this and that is it must be one of the reference to the password all right so in the initial values here I'm going to pass in the password also by default it is empty string and then let me have one I'm going to copy this one and then paste it and for the last password this one I will say confirm password and here as confirm password as that where you see password change to confirm password we have an error I have to change this one to register and now if I go to the homepage and register I have it as that now to make sure that they are working in the unsubmit inside the formic here I'm logging the values so I'm going to provide let me change this one to register the title here which this one to register let's get into the login and then the button here change to register so in the login in I'm going to provide [Music] @gmail.com the password 1 2 3 4 5 and I still see email and password is required well I made a mistake this is supposed to be unchange text this one so let me change this one to unchange text and for the registration change that likewise this and likewise that last step is that we are going to bind the handle submit on detachable opacity we're going to pass in on press and pass in the handle submit from foric which is this one the same thing for the registration pass in on press and then the handle submit with this one let's see the magic when I click on log in and then provide [Music] @gmail.com and the password something like this and log in let's see the console or The Terminal and we have email and password as that remember we are logging the values in the unsubmit it now it is working what has left is we are going to implement the bottom tab navigation all right so let's get into it for this one to be able to implement the bottom tab navigation we're going to provide a special folder as that and pass in as tabs it must be as it is otherwise it will not work and then inside I'm going to provide in the underscore layout this is the entry point for the bottom tab or the navigations this where we're going to configure the navigation either to show the header or to change the name so in here we're going to use what is called tabs from export router and then going to have the main file to run when a user visit the bottom Tabs are start so in here I Say tap home as and you can name it whatever you want so when a user visit the bottom tabs is going to display this one all right so let's configure the bottom tabs we're going to export as root and just return the tabs so how can we navigate into that and for this when a user log in successfully we are going to redirect the user to the bottom tabs navigation at this point we are ignoring the main Logic for authentication so let's get into the log in and we're going to redirect in the unsubmit here at the moment we are just going to mimic remember we have the we don't have the router here that is the Expo router as use router as that and let's have instance of router here here which is equal to that and then in the onsubmit here paste that and here we going to use router. push and here we're going to push the user to the bottom tabs and the path is going to be as bracket and then pass in the tabs and that is the name of the folder which is this one now with this one if I click on look in let me provide some default values for the loging in to avoid typing anytime I want to log in so for the initial values I will say @gmail.com and then the password I start all right so when I click on let me get back home log in log in as you can see I am on the bottom TP navigation and this is the homepage so for this one we can customize it by changing the icon so let's configure the bottom tab which is this one to do that you're going to pass in the tabs as that and inside going to have the configuration for the individual button tabs the first one is the index in this case we only have one file which is this one so we can customize this one over here as that for this one let me say true here for the header shown and this is what we have that is the index so let me hide it by using false perfect and I want to change the index to something different therefore comma here and title I will say home and this is what we have I want to change this one to use an icon to do that we are going to EXP import or import from font aome and we have the icons from Vector icons as soon as we generate our application using Expo we're going to use what is called Tap bar icon as T Bar icon which is this it is going to be a function as that and inside we going to D structure to get the color and we are going to return the GSX I start we are going to return the font awesome and for the name for the icon going to use home now let's see and we have it here as home if you want to know more how the icons are been used let's search for Expo icons which is Vector icons so in here you can search for any icon let's say I want to search for a car all right so if I click on that this one is from Ant design and all what we need is to copy the component by passing in the size and then the color all right so here the color I'm going to use the one that we got from the top bar icon and then for the size I'm going to use 28 all right let's see and this is what we have I want to have two more screens so in the top bar here here I'm going to have one called profile as soon as I do that it's going to be added to the TBR navigation well let me have the page or the screen as profile and now let's see log in and we have it here as profile so for the profile we can also customize it in the main entry point paste it change the name here to profile and I want to maintain it as profile I want to use upper case as profile and for the name for the icon I'm going to use user here and we have it here as profile and lastly is going to be settings so here settings and then let's customize it C Cy and paste change the name here to settings and then change this one to uppercase settings and then use C icon and log in there we go for the profile this what we have settings there what we have so for the settings you can use any component of your choice so I'm going to provide you with the component for the settings all right so I'm going to replace with this one all right just some static text and by using icon from the vector icons let's see and this is what we have and for the homepage also we are using some static text so I'm going to copy that one and then definitely I'll provide the homepage for you and replace with this in here we we are using what is called linear gradient from Expo so make sure to install this one let me get back to the Google and search for Expo gradient and then let's look at the installation copy that open the terminal and then install that this going to give us some linear gradient on our text let me reload the application all right and there we go for this one you can use any text of your choice perfect so let's focus on the main logic now that we are done with the UI with the navigations let's focus on the main logic by integrating the backand into our project for the backand API I have already prepared them for you and we build this API under our main F star course and and our main stock Project based course so if you want to learn how to build this API from scratch then you can check my C on that all right so here I'm going to provide you with the final source code also for the back end all what you need to do is to CD in by initiating npmi to install all the dependencies and the next step is that make sure to use your own mongodb connection string for this one I'm using my local connection string perfect so let's look at the Endo if you get into the route we have this endpoint for the registration and then the login in and profile for this project we're going to use the registration and loging in if you look at the model in here we have the email and password for the login in and then the controller for the registration this is for registration and this is for the loging in perfect let's look at the port in the app the port is called 8,000 which is this one so to run this project use node d-w and then the name of the main entry point it is called app and DB has been connected now we are going to communicate to our backend using our react native application but here is a problem when using Local Host our mobile application cannot communicate using Local Host therefore we need to find a way to expose our backend API the first option is we have to deploy this one to the internet and use the right apis or we can use en croc or local tunnel to expose the API to have rare endpoint as see if we have deployed this project and using local tunnel is much easier so if you search for local tunnel let's see the process involved we can install it globally and by using local tannel the port of our server and that is it for this one I'm not going to install it locally so let's visit the GitHub repository we have a command by using npx this one will not install the package globally so let me get back to my back end make sure that the server is running locally and open a new instance and paste that and make sure to use the same port as your server in this case we have it as 8,000 which is correct now if I hit enter let's see so this is my URL for my back end so here I'm going to test it in my tender client if you don't have it make sure to install tender client if you go to extensions search for tender client or you can use Postman for testing which is this all right I have it therefore I'm going to run by having a request by passing in the endpoint the base endpoint here is is from the local tunnel and the endpoint is API users SL login as I have shown you in the route here as that so now if I hit send let's see as you can see it has been communicated to my server that is why I got the response from the server likewise the registration also I'm going to have the response from that perfect now we have exposed the back end and now these are the end point so in case it shut down make sure to run and change the name of the path to point to the server now it's time for us to integrate T star into it so let's search for Tan stock or react query and in case you want to learn more about T stock I have a CA on that so click on that and then make sure to select the current version by using the version five by the time of recording this video and this is what I use anytime I build main stock project all right so click on the docs and then click on the installation and then copy one of the snippet here back to the project which is this one and let me open a new instance paste that and then enter so the purpose for tstock is that it is going to make our life easier to manage server state by handling error loading success pending and even cing and background functions and so much more all right so now we have installed the package next step is that we have to configure it so in here I'm going to have a folder called services I'm using this syntax simply because I don't want to use this one as file based routing so inside we're going to have some configurations the first one is called query client.js and we are going to import query client from tstock and here is going to be as con new query client and then export the query client so the next step is that that we have to drop this one in the main entry point for application if you look at the main entry point which is underscore layout as you can see over here this is the main entry point that uses the stock navigation and start all right so now we are going to wrap this one inside our stock Navigator so bring in the query client from the services as start and we will we need query client Provider from T stock and going to wrap it as query client provider and then place this one inside and for the provider I'm going to provide in the client by passing in the query client and that is it we are done configuring it how easy it is let's rerun the project to make sure that everything is working fine all right it is working the next step is that we are going to make the HTTP request for logging in and we are going to use Tack and for tack the first requirement is that the function for the request must return a promise so I'm going to have the function to make the HTTP request so in the services here I'm going to have a folder called AP I'm going to have a file called api.js and let's bring in AOS and here is going to be create a function to return a promise and it's going to be as one for the login in it is going to be as con log in user is equal to and I have the auto complete for this one we have to destructure it as that and then pass in as that and the end point we're going to use the backand API which is this one is for registration copy that and then replace with that change this one to log in and for this one we going to ignore the try and catch block because time stock is going to handle the error and loading for us so here we are returning a promise this is because any time you return a value by using async it means that you are rning a promise I'm going to have one for registration so change as register and for this one also I'm going to pass in the email and password all right and then let export them I start e e e e e and I'm going to log in using this I think I have some duplication here where from that I think I mess up with something all right good so I'm going to log in and let's see the console and and we have all the properties from the server and that is the response we have status code 404 this means that something went wrong and that is the end point doesn't exist don't worry we're going to fix that and then we have is error which means it's true it's idle it's false it's po it's pending it's success and then we have these functions and then the error also well let's fix the for issue this means that our backend API has been shut down and that is a local tunnel let me restart and this is one caveat When developing locally when we deploy it we will not see this shutting down so let me locate the API this one let me change this one to that select all and then well this one supposed to be register that is the end point now let me reload the application log in and log in let me check and we have the result from the server as a success is equal to true and then let's look at other properties a spending is false and then we have the data from the server and that is a login user how cool it is so in here I can display some loading or error so on the form for the button we are going to use what is called activity indicator from react native which is that we going to show some loading in case we're going to have an error remember we are logging the mutation here so on the logging in here this button we are going to make a condition so cut this one from here and going to use mutation on that we have what is called is pending meaning that it is loading in case we have one we're going to use the activity indicator which is this otherwise show this let me pass in a color to WR as # 3 FS all right with this one let me try again l in and we have the loading let's also display success and error or redirecting so remember on the mutation here we have a property called a success so here I will say display messages all right and it's going to be as in case we have is error I'm using optional chaining to avoid using end operator so in case we have one then we are going to display this error message and that is invalid credentials but we are going to use the error from the server and from the style we're going to use the one that we have already specified as Styles dot error text and then for the error we can access it on the mutation do error do response dot data do message all right so let's Trigger or I'm going to provide this invalid login details and let's see and we have invalid login credentials I'm going to have one for success and that is in case it is Success then we are going to say log in success and then I'm going to change this one to success text and let's see let me look in and we have log in success I think my CSS is not correct for this all right so let me change the color for the CSS and that is a sucx text I'm not sure we have the success text here so let me add that one here as success text and going to use color and the margin bottom of 16 perfect now after logging in we are going to redirect the user to the bottom tabs navigation don't worry as soon as we Implement Redux we are going to do that the next step is the registration so for the registration is going to be the same process for the loging in so to make our life easier I'm going to copy the mutation logic here remove this and then copy this one back to the registration which is this paste that and then let's import mutation and this one is register user perfect and let me copy the one in the unsubmit that is a mutation copy everything and back to the registration for the unsubmit which is this paste that I think I mess up with the importation So It Begins here copy this one and then calling the mutation comment also and then in here paste that perfect all right everything Remains the Same because here we are using the registration and change this one to register and for the error message also I going to copy this one and then back to the registration paste that here I will say register or registration is successful and then for the loading also we will need the same logic for the touchable so in between here copy that and back to the registration and then remove this text and then paste that let's import the indicator that's activity indicator let me see in case I have it already here we have it so no problem and change this one to register where we have duplication of the mutation the one that we just copied so I'm going to remove this one and this one from here likewise this one and then remove this one and remove this one also and this is the implementation with this one let's try out register with the previous account we have user already exist but if I register using EMA and register we have have registration success let me also add some styling to that and that is a success text uh success text and then provide it as that and let's see and this is what we have now we are done with the T stock what has left is we are going to integrate Redux into it because we want to manage Global state in our application so let's just let's do that back to Chrome I'm going to search for Redux 2 Kit and for this one also in case you want to learn more about react Redux and to be more specific Redux 2K I have a course on that so let's continue click on the get started and we are going to install the Redux 2 Kit back to the project and then let me open the installation terminal and let me clear everything and paste that and we will need react Redux as our binder and hit enter so let's have the folder structure for the Redux side of it so in the app folder I'm going to have a folder called Redux and you can name it whatever you want I'm going to have two files one is the store. CHS and then of slice or slice. chairs so let's begin with the slice the slice are the pieces or functions in your application for this one we are going to manage only one slice and that is for authentication that is why I name it as off slice you can name it whatever you want so let's look at the steps involved first step is that we are going to have a function to get a user from async storage when we are using web application we have it as local storage so I will say function therefore we have to install this package so let's get back to Google and then search for a sync storage that is let me look at the name well a sync storage and then click on this it says that this package has been removed and we can install the community packages for example this one but for this project I used this one the implementation is going to be similar so let me click on the npm and this is the snippet for installing that I have copied that and back to my project and then paste that all right it has been installed let me import it as a sync storage from then going to have the initial state for our application and then we're going to have the slices let's begin with the function to get a user from storage for this I'm going to change the name to load user from a sync storage and we are going to use try and catch the purpose for this function is that we are going to preport plate in case the user has been loged in in into the initial state so that we can see it in our store so here I will say const user info is equal to await the async storage. get item so in case we have the user then we going to pass the data from the storage and return that otherwise we are going to return now and in here we're going to return now for this so let's continue with the initial State and it goes like this initial State and then I'm going to provide user and by default it is now and that is all what I need for my initial State the rest of the data are going to be managed by tstock and that is react query let's begin with the slice we are going to use what is called create slice from Redux 2 Kit which is this and this is going to generate actions and reducers for us and reducer is a function that is going to take in the action Plus data to make changes to our store so here as a function call and then the object we're going to specify a name here and for the name I'm going to use off here and the name attribute here must be unique and this means that it is going to be used behind the scene by Redux to kit and from there we're going to have our initial State and then the reduces for our application once again the purpose for Redux 2 Kit here in this particular project is that we are not going to involve him or her to make the HTTP request but instead we are using T stock for it so for this one as soon as we got the data from tack or the server we are going to dispatch the action so in here you're going to have these actions one action is log in user action and for this one you can name it whatever you want and assign to a callback function I start and in the Callback we have access to State and then the action the action can be logging in registration and loging out and this state holds the values in our store so here we are going to change the data by saying that state. user in here we are updating the user in the store and we have what is called the payload the payload here represents the response from the server so for logging in the payload will be the data after we log in so in here we are updating the user and that is it for the loging in action so after logging in we are going to save the user into the storage by using a sync storage do set item by passing in the identifier and here we are stringifying the data then after logging in we going to have one for log out user action or let me say log out action and for this we're going to empty the user data from the store bring comma here and here we are assigning now to the data in the store by removing the user from the storage and lastly we going to have one called set user you can name it as set let user action and the purpose for this action is that we are going to call this one as soon as our application Got Loaded perfect so last step is that we are going to generate the actions and going to be as con we are exporting and here it goes like this we are accessing the login user the log out here supposed to be L out so let me rename this one to look out all right right so in here we are accessing the login in log out and set user from the out slice. actions which means that we have to assign to what is called off slice as start and the next step is we are going to generate the reducer and it's going to be as cost and then I'm going to export and here I'm exporting the reducer last step is we're going to have a function to load the user as load user which is equal to con load user and it goes like this in the function I'm going to pass in the dispatch and call the function up here to load the user by awaiting it in case we have one we going to call dispatch by passing in the user info now we have configured our slice the last step is going to be the store so here I'm going to use configure store from Redux 2K and then let's bring in the off reducer the one we exported from here and the function goes like this export store going to pass in the reducer and then assign a variable call off here and then assign to reducer so last step is that let's try out by dispatching the action so now we going to dispatch it in the login in and that is after we got the data from the server I think for this one also we have some duplications so let me remove this one also from here as that this one will go away all right good so this is where we have the login user therefore we can dispatch the action here so let's import the login in action and you will need a hook called use dispatch for dispatching the action and we have the auto input so you're going to have instance of the dispatch as that let me say dis patch and it goes like this perfect so in the mutate async here I will see this patch action and it goes like this patch by passing in the logging in action and in the payload perfect so now Moment of Truth let me reload the application to make sure that everything is working fine all right so log in well we have this error simply means that couldn't find react Redux context so it means that we are not wrapping the application with Redux at the moment we have configured the time stock at the global level L we are going to do the same thing for Redux so in the Redux here I'm going to have one file called app wrapper where we can directly configure it the same way we did for the tack but for this one we are going to dispatch the action to check in case a user is logged in so if you call or dispatch an action here by using use dispatch we going to have an error meaning that that by the time this component got mounted we didn't have the react Redux being wrapped with the application I was doing that and I fa some couple of backs that is why I'm going to have a separate file called app wrapper and it goes like this const we are going to return the stock navigation so let me import stock from Expo router and we will need load user action or the function from the slice and then we will need use dispatch for dispatching the action all right so we are going to return the stock and remove this one all right for this we have done it before so I'm going to provide in the options and then header shown is false and then the title here I will say supposed to be inside here as title and is going to be home here the same way we did it at the root level which is this one we are extracting this one from here and pass it or use it inside the app wrapper perfect right so now I'm going to call use this patch here assign to this patch which is equal to that and let's have use effect and then I'm going to pass in the dispatch by saying load user and then the dependencies as dispatch and that is it for the app raer so last step is that at the main entry point for our navigation which is this one we are going to bring in the app wrapper I think I have to export it from here and as export default app wrapper as that so at the layout here I'm going to remove this one by passing in the app rapper which is that so now I'm going to wrap the application with Redux by using Provider from react Redux as you can see the error it says that it couldn't find react Redux so this is the time that we are using the react Redux by using the provider all right so this one takes in one prop called store so let's import store from our configuration file which is this one now in the provider provide store by passing in the store with this one we can dispatch the action log in and log in and log in success so to confirm that indeed the user has been logged in and the action has been dispatched and then save the user into the storage we are going to extract the user from the store in case we are using a web we have what is called Redux st2 extension but for this one we can do it but let's avoid that and by using console login so to be able to get data from the store you're going to use what is called use selector and then let me log the user from the store and I will say store data here and let me log the state all right as that now Moment of Truth let me open the terminal and as you can see store data and the user has been saved in our store this means that the user is being logged in as soon as a user logs in we are going to redirect to the bottom tab navigation therefore let's bring this one back and going to call this one after dispatching perfect so let me try again and for some reasons I'm not redirecting so let me see where we have that I think we are not using the use router here so here as use router from Expo and then we are going to have instance of the router which is equal to that now it will work let me try again and I have been redirected so last part is a profile we are going to fetch or pull the data from the storage and display it here and this where we're going to call the action for logging out so let's continue with the profile remember we are in the tab here and this is the component so here we're going to get the user from the storage as we did before so if I come here and then copy this one back to the profile we are accessing the user from the store so instead of console login I'm going to return by saying that state DOT of do user at this point you may be asking how I came up with this one so we have two ways one is you can lock the entire State here and going to see the structure or you can trace it in your application so first of all we have the store Redux here and store the first property here is called off that is why we are saying that state. off and then in the action itself that is a slice that is the initial State instead we have as User it's going to be the store that is off do user to be able to get the user perfect right all right so we are going to pull the user from the store I'm going to assign as cost and and I will say user is equal to that and here to make our life easier I'm going to provide you with some default styling so in case we have a user then display the user. email and this is a button for logging out all right so let me provide the CSS also replace with this one and now let's see the profile let me look in thing the ser Ser is not running yeah of course so let me update the endpoint copy this one and back here let's locate the API and then replace with this and now it will work log in and if I go to profile I have you selector is not defined so let me import that log in and now it worked I think we have one more touchable opacity don't worry it just importation log in again profile and handle log out which is this so let's have the handle log out here so in the handle log out we are going to dispatch the action for logging out so let's bring in use dispatch and let's have instance of the dispatch and then in here or let me bring in the logout action and this is where you're going to look out by dispatching the action as that perfect so let me try again success profile look out and no user logged in this means that the login out is working all right so at this point I can say that we are done with the authentication flow but we lack something and that is protecting some screens at the moment I have been locked out but I can still access the profile likewise is the bottom tab navigation so we have to avoid it by protecting some of the tabs or the screens in case you're familiar with react by using react router dor the logic is going to be the same I'm going to have a component and then inside I'm going to have one called protected route and we are going to change the way we are displaying the screens so let's have the component as and this function is going to take in what is called children the children are going to be the individual screens or pages that we are returning so before returning the children and that is the individual screens we are going to make a condition to check in case the user is being logged in so here we're going to check the user from the store so here is going to be as a use selector to make our life easier we're going to copy the one that we did from the it is inside the tabs and the profile this one we will need this one because we are pulling the user from the store so required these guys we don't need this part here we are just checking the user from the store so here we are going to check in case the user is not logged in then we are going to redirect the user to the login page by using use effect and then I start for the array you're going to pass in the user perfect so in here in case we don't have the user then we are going to redirect by using use router for navigation or navigating the user as con router is equal to that I'm going to use router. push and the path is off do LED in and we can also display some loading in case we have one therefore let's keep track about loading in our store all right right so for the initial State I would say is loading by default it is false so as soon as the user logs in or logging in you're going to say it's loading is set to force and set user loading is also false so by default it is true in case we have the user is going to be false so in here we can destructure the is loading also therefore let's remove this one from here all right so let's bring in the activity indicator in case we have loading after that or after the redirecting I'm going to check in case we have loading and for the size I'm going to use large all right and the color as that you can change the color and here in in case we don't have the user we're going to return now otherwise return the children let me export it here as that so any screen that we want to protect we are going to wrap with this protected component so let me locate the layout and that is the tabs one which is this I'm going to protect all so here I will say Protect Tex route and I'm going to wrap it with the entire tab Navigator I start and let's see let me get back to the login in and then profile if I look out as you can see I have been redirected and I cannot go to the bottom tab because I have been locked out perfect so in case you want to protect individual pages so here you're going to wrap it using the protect route here or the component as we did before wrap it with the this high order component and as that paste that and in case we want to protect the homepage also we can do that the choice is up to you so let me bring back the video on the homepage which is this now we are done with the project let me uncomment and we have the project I start now let's look at the flow one more time log in loading and in indeed I have been logged in all right guys so here ends this project in case you found this video useful don't forget to subscribe comment and share catch you up in my next project

Channel: masynctech coding school

Views: 2,308

Keywords: javascript scope, javascript, scope in javascript, local scope, learn to code, lexical scope, javascript scope tutorial, javascript scope chain, web development, javascript scope explained, javascript global scope, what is scope in javascript, function scope, javascript tutorial, scope, js, what is scope, scope chain, javascript local scope, global scope

Id: tsvZFNgoXy0

Length: 93min 9sec (5589 seconds)

Published: Mon Jun 03 2024