Expo Router Authentication Flow Using Expo Router v2 and Expo SDK 49

foreign welcome back to the channel this is going to be a video on Expo SDK 49 the primary focus will be on react sorry on Expo router the new file based routing that you get with Expo they announced so let me get out of the way let's see they announced also with the release of sdk49 the feed well I'll talk a little bit about the integrated debugger but the real thing here is this Expo router V2 has been released um I have an existing video on an authentication flow using Expo router built with Firebase this one is just kind of an update of the exact same flow but accounting for Expo router V2 the initial original Firebase one I'm gonna have to go back and update I don't know why I just didn't update it for this video but I've been playing around with app rate and so I already had a project set up and so I just integrated an authentication flow using apprite and Echo router V2 like I said I'll also touch on the debugging with vs code which is pretty awesome it just works it makes it a lot nicer development experience and then f um let's find dot e and B and they now have supported dot EnV out of the box so you don't really need to load other tools to kind of get environment variables working which I think is pretty neat this should be a pretty short video as usual um they'll be only provided to the source code and I'm just going to kind of walk through what I've done in the source code I'm not going to sit here and type out a whole application for you but as I said you'll have access to the source code you'll have this video and I'll probably do a blog post to go along with it so let's start with the top which is Expo router V2 and they have a way for you to create one so let's go right to that so here we are with the quick start um so this is the way to actually create an application that will provide a tab interface out of the box and it will install export router V2 for you and we'll give you a basic tab application so the what I've built here uh so what I've built here is I've taken the Expo let me just log in first oh okay so here is the login so this is basically what you get with the default app you get a tab app that's a tab one tab two and then the ability to render a modal so what I've done is I went in and I added the authentication flow so you have the sign out and you have the sign in and you have the ability to create accounts so that's what I've added to the default application that you get when you do this npx Expo app at latest and you have to use this temp this tabs at 49 to get the template with the built and as you can see down here it says that you know with Expo SDK 49 you get Expo router 2. so the other thing that I wanted to show was um as I mentioned in my application I use environment variables they talk here about how you set up the environment variables the important thing is to remember to do this expo.public in the beginning and then you can just import them applications this way and if we look in my app right service you can just do process and project ID let me see if I can make this a little bigger project and sorry yes projects process and Expo public app right project ID and this will just automatically import it there's no other Imports that are needed and it's it's just pretty awesome how it works so that is that and let's see so we've discussed the environment variables we discussed installing the router and then now what we're really here for is just authentication with Expo so first let me walk through what I've done and then how you kind of add this additional code in the the important thing that you're adding in here is this auth context provider and this is what's kind of managing the access to the pages and then I've just Incorporated um operate as kind of the the um I don't want to say authentication provider but I've Incorporated apparatus of what's actually managing your authentication state okay so we are back here in the application with the as I said with the default install you do not get this auth segment you don't get this app right service either so that's all the new stuff so I'll talk about what I've done there so first of all I've created this operate service which gets me an app right client and then I export this client that I need and the account which is where you manage creating users logging in users creating new sessions and I export ID which creates unique identifiers so that's what we have inside of here um the next is you get the this auth segment that I've created I've created my sign in file I'm sorry my sign in page which there's no magic here this is all um regular react native this is the provider that we're going to get from the contacts that I create is use auth provider so clearly here I need it for the sign in to call the sign in function and sign up is pretty much the same we just capture username email and password and once again I need this auth provider to call my signup function and let's go take a look at the context so if we go into context my context is pretty much let's go back a complete copy of what is provided here in this context.auth JS you need your Expo router we create our context this is a hook that returns all the values all the properties and all the functions that you that you create they're not using typescript here I'm using typescript in my example so we might so when I walk through that it might explain it a little bit clearer but this Hook is kind of the meat of everything right here which basically determines if well it does a couple of things so whenever the user value changes so do I have a user or don't I have a user or whenever the segment changes and the segment is going to be this auth segment or this tab segment so whenever either one of those changes we will kind of run this use effects and what this does is first of all it checks to see am I trying to access a route that's inside of the auth group and then this will assign in auth group and then what this if statement does is it says if I'm not a user if I don't have a user and I'm not in the auth group then just redirect me to the sign-in page because I'm not logged in if I am logged so basically if I do have a user and I'm trying to go to the auth group send me back send me to the default route because I don't need to go to the auth group because I'm logged in and then just to kind of touch on what's Happening down here in the provider for those who aren't that familiar with it inside of this provider here we have the state of the user it's kind of weird they call this user but then they say set auth here kind of throws you off a bit you normally expect to see a set user um so that's to manage the state of the current user and then this use protected route which we'll call this function initially and we'll let you know if you need to go through the sign in page or if you need to go to the default home page and then we return in our context provider these values of sign in sign out and the current user status now I had to upgrade this once I once I integrated my my authentication Service which is apparate I'll probably update to Firebase one but it functions basically the same way so now let's go take a look at what I've done and so if we I keep sliding the wrong way so let's take a look what I've done here if so now if we go to my auth TSX I'll just touch on the new stuff that I've added here so clearly I've imported my upright service I've app imported some types because I'm using typestrip here and so what I've defined here is the interface for the response to sign in by the way you also I also use that same interface for creating an account I have a response for sign out so basically what I'm doing here is I'm passing a data object with the data that I expect to get returned from the function call and then an error object if I have an error so for sign in sign out then here's the interface for my auth context so these are all the these are the functions that you'll have access to and then a property you'll have access to so this is your sign in this is your sign up and this is your sign out I will give you access to the user object if it's assigned and then I also track whether the auth state has been initialized so basically what that is I'm checking to make sure that upright Firebase Super Bass whatever you use has done its initial check to see if it has a current user session that it could kind of reactivate and so I don't want to attempt to Route the user until I know that my auth has been initialized so that's what this Boolean check is for okay um these are this is my provider properties that I'll be passing through here's my auth context that I'm creating and you can see I set the type on it and then here's where I create the provider and um similar to what we saw last time here's where my user might set off except this time I'm actually defining the type and then here's my auth initialize and set off initialize which I just spoke about and then here's the use protective root now this is all pretty much the exact same except for this code here checking that navigation is all good so what was happening before I was running into an error where I was trying to route to a page before navigation was set up I Googled around and found there's an issue in GitHub I'll include the link in the description that talks about um how to kind of get around this and basically you set to make sure that the root navigation is set up and configured I believe I did something similar to this in the Firebase solution but I tried to just take what the documentation gave me and work off of that versus whatever I had done in V1 especially because my first pass at it I think it was during a V1 beta all right so here what we want to do is we don't want to try to do anything until we know that navigation is all set and so this use root navigation we've create we added this use effect and luckily for us you can listen for the root navigation and you can listen for the state and once you get these this event fired you I can set that my navigation is ready to true and then I kind of clean up everything and then what I'm doing down here is I'm using this is navigation ready before I attempt to redirect to a route now if we go back to the code that they provide they don't do that they're not checking to see if navigation's ready they're just checking to see if they have a user and they're checking to see if the segment's changed so by adding this additional is navigation ready check it makes sure that I'm not going to try to do anything until navigation is completely set so that's a important important change that you need to make sure that you consider and like I said I'll include the link in the in the description now the we already discussed how to retract for the segments the other thing I'm doing here is I don't want to navigate until I know my authentication is initialized and now how am I tracking that is when I start up my when I start up my provider I make this async call this app right get it get account checks to see if I have access to a user um for like I said I'll probably update my Firebase example but this was this is the equivalent of the Firebase listening for an All-State change so you make that first listen for the All-State change to see if I have a user if I have a user I set the user if I don't I set the user to null and then I know my authentication provider for lack of a better word has been initialized so that's what I'm doing here I check to see if I have a user if I have a user I set the user if I don't I set it to null but either way at this point my auth my authentication is initialized so now that my authentication is initialized right because this Val this property has changed it will run this effect again it will say my navigation is ready so we'll drop through I have a segment so we'll drop through I am my auth is initialized so I'll drop through and then now we'll determine do I need to go to the sign in page or do I need to go to the default homepage so that's what we have going on in this block and then down here we have our login functions like I said this is apprite specific um but you Super Bass Firebase whatever you want to put in here you just do your normal login remember to set the off at the end when you log out to clear it out for the login with app right you have to do a couple of things you have to create your um for the login you create your login session and then you get the user that's associated with the session you set it to your auth and then you return the data on the error clear your auth return the error the create account here with apparate also is a little bit more interesting you create the account then you log in the user with this create email session and then I probably could pass the same user object that I got from the account creation but just to be safe I get the user I basically query the account audit to get the current user again and I set that user return the information clear on error and then here my authentication provider I mean my auth context I kind of return these values like you do in the um in the uh in the code here we're returning all the values I just have my extra ones added on here I could probably refactor this a little bit because I don't know if I necessarily need auth initialized pass back but right now I'm passing it back um and then we have the children and then I have the hook here that allows me to kind of use it so one of the other things that I changed is where is my code app in my indexed now not in my index TS where is it oh yes so in my auth I have no layout in my tabs the layout is the you know these react native specific component to kind of set up the tabs based off the pages that you have inside of your tab segment and here the default layout is I did have to make some changes here in the sorry in the default layout so all of this is the basic code that you get for the default layout for the default route um there were some changes to how you have to manage this splash screen which are different from version from 48 to 49 I believe so this has changed um this has changed here how it's hiding the um the splash screen when the fonts and everything are loaded because that's what this is checking here um so here's where I had added the provider so you can see before this was just route layout let's go back so yeah the provider was there that was their provider obviously this is my provider and then how now I have the route layout and then inside of my route layout now one of the reasons I had to do this this do it this way is I can't get access to this use auth hook until I'm in a component that's wrapped by the provider so initially I was trying to do it all up here inside of this um route layout but I had to wrap the provider here and then now the providers wrapped around this route layout nav component I can utilize my use off hook and in my use off hook I check two things do I have a user and is authentication state initialized because if I just checked for a user when the app first starts the user will be no but I haven't initialized my authentication so I really shouldn't be checking for users so here I make sure that I have both auth initialized and whether or not I have a user so what happens is that if I don't have a user here I'm going to return null from this route layout but what should happen is because the way my context is set up since I don't have a user it should navigate me to where to go since I don't have a user it should navigate me to my sign up route so it doesn't matter that I am returning null here I'll never get here true so if I do if auth is initialized and I have a user it'll drop through it'll return this set of react components which is the stack for my tags and the stack for my modal which is what I want so the way to look at it is like this is the public stack that's getting returned otherwise return these Pages you return the ability to navigate to sign in or sign up so that's kind of what's going on with the code as best I could kind of explain it and then I guess I'll wrap this by just walking through the application and actually showing some of the debugger functionality that I mentioned is available now so according to the documentation now for the debugger you can debug directly in Visual Studio code which is what I use for all my development and you can just access the parameter here Expo debug Expo app on devices simulator oh expert debug app on device or simulator and I'm just going to select this and the debugger is now connected for those who aren't familiar you can tell by looking at how this thing has changed colors but also you can go over here and click on this run debug and it'll drop you in here you can see the information on the active session now did I I think I have a break point in there somewhere so let me see if I just reload this um I was hoping for a reloader to hit my breakpoint but let me drop a break point in where I am in that's not what I wanted I want to go into my my auth and you're gonna go into my auth and let's drop a break point in in this kind of use protected route okay so it refreshed and it hit my break point in here so you can see I'm now inside of here and let's begin let's step through this okay so and then now for those who aren't familiar with using this debugger over here we have access to our variables so we can see our user navigation is false we have our route navigation route navigation so we have our sorry root navigation we can see our variables and our Optics there what we really want to do is let's stop in it's where we want to stop let's let's set up breakpoint in here uh that's not good all right so when it attempt I might have done this already but let's see all right so let's try and log in so we're back in use protected route let's see if we can just get this to run all the way through and it logged me in successfully and then now let me see if I can set a break for the inside of it let me see if I can set a break point inside of my log out we're back inside of a use protective route we're in our log out it's now it's logged me out now I'm back inside my use protected route and then it's redirecting me back to my login page because I don't have a user if I let's exit out of the debugger so let's disconnect the debugger if I refresh the page it should go through the whole check all over again but then drop me back inside of so is this thing still running so I think it's um I thought I oh I still have my debug so this is an interesting thing that I've found too if you have the bugger statements inside your code this thing is going to stop even though you don't have a debugger open anywhere it will stop because it hit the debug statement so let me remove all of those debug statements so the app can run again and let's try refresh all right so and also let's just do one last thing to make sure it's saving our login State and three at mail.com foreign so it's logged in and then if I refresh it's saving our login state so like I said that was just a quick walkthrough of the code kind of explaining what I've done leveraging leveraging the code that we get by default when we build our application using this create Expo app and the template leveraging environment variables we built our authentication flow on top of the off provider that um they recommend this is inside of the Expo documentation but then we added our own special touch to it using App rate like I said I have an existing Firebase solution um there'll be a link included below I will update that project in GitHub to make sure that it's compatible with 49 actually I have two projects I have just a basic flow and then I have one where I added Firebase as the authentication Service I'll update both of those so you'll be able to go to the GitHub repo and see those or the people haven't moved to 49 I'll just move the older code to a branch labeled Expo 48. so um thank you I hope you found this enjoyable please check out some of the other react native videos that I have in on my YouTube channel and this is something else you'd like to see please make sure you drop me a line thanks and bye

Channel: Aaron Saunders

Views: 13,606

Keywords: expo router, react native, react native tutorial, expo router tutorial, expo router v2, expo file based router, expo router appwrite, appwrite react native, appwrite react tutorial, expo router tabs, react native file based router, react native file router, react native file based routing, expo sdk 49, expo file based routing, new expo router, Expo Router Authentication Flow, authentication react native expo, react native expo router, expo auth

Id: Ud_GWxu1_Xg

Length: 26min 24sec (1584 seconds)

Published: Mon Jul 10 2023