If you're having trouble with the expo initial configuration with Expo v51, run this command:
npx create-expo-app@latest ./ --template blank
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we dive into adding authentication logic to a React Native application using AppRite. The instructor guides us through creating a new project, setting up authentication, and configuring a database along with user management. The session emphasizes the importance of correctly configuring project IDs and bundle IDs for both iOS and Android platforms, and offers a step-by-step approach to creating user accounts, managing attributes, and setting up database collections.
00:00:00Â Finally, we can start adding logic to our React Native application, starting with authentication.
00:00:06Â First things first, let's create a new project.
00:00:10Â Let's name it something like JSM underscore, and then you can either put your app name or something like react native crash course.
00:00:19Â I'll use that one and I'll let you guys choose the names.
00:00:22Â I'll click next.
00:00:23Â And here you can choose a deployment region for your project.
00:00:27Â I'll choose the first one since I'm based in Europe, but you can choose something else as well based on your location.
00:00:33Â And I'm going to click create.
00:00:35Â There we go.
00:00:36Â Our React Native Crash Course project has been created.
00:00:39Â So we are greeted with this nice getting started guide.
00:00:43Â Right now, you can choose between Apple or Android.
00:00:47Â Either one is okay.
00:00:48Â But soon enough, AppRite will add another thing, such as Expo, signifying that it's cross-platform.
00:00:55Â In this case, I'll proceed with Apple.
00:00:57Â We can choose our app name.
00:00:59Â I'm going to type Aura.
00:01:00Â Under bundle ID, you can use whatever you prefer.
00:01:03Â We can follow their example and then do something like com.jsm.
00:01:08Â and then the app name.
00:01:10Â So I'm going to say com.jsm.ora.
00:01:13Â In your case, you'll most likely have to choose a different name, which is totally okay.
00:01:18Â But what's important is that whatever you choose here, copy it, write it down somewhere because we'll need to use it later on.
00:01:26Â With that said, click next and click skip optional steps.
00:01:31Â The steps are the same for Android devices as well.
00:01:34Â You can skip the optional steps and then you'll be redirected to your dashboard.
00:01:39Â Let's quickly go back to our code and go to app.json.
00:01:45Â Here, if you scroll down under iOS or under Android, whatever operating system you want to work on, You can add a new property called package.
00:01:56Â Make sure to put it within double quoted strings and type out exactly what you typed out as your bundle ID.
00:02:03Â In my case, it was com.jsm.ora and that's it.
00:02:07Â You can put it under iOS or Android, depending on what you want to do.
00:02:12Â Next, let's copy the project ID right here from the dashboard.
00:02:17Â and then create a new folder in the root of our directory called lib, as in library.
00:02:23Â And within it, create a new file called app-write.js.
00:02:29Â Within here, we can create and export a new app-write config object, which will look something like this.
00:02:39Â The first thing we can add will be the endpoint.
00:02:42Â So we can say endpoint is equal to https://cloud.apprite.io.
00:02:55Â This is their hosted version of the platform, but Apprite is completely open source and allows self-hosting as well.
00:03:03Â So in case you want to do that, you can.
00:03:06Â In this case, we'll proceed with their cloud version.
00:03:09Â The second thing we can add is the platform.
00:03:12Â And here you can type the bundle ID that you chose before.
00:03:16Â In my case, that's going to be com.jsm.ora.
00:03:20Â The next thing is the project ID, which is the one that you just copied from your dashboard.
00:03:26Â Next, let's check out Auth.
00:03:28Â Here, we can create users manually, but rather than creating users manually, we'll connect this to our application and then create it using our great sign-in
00:03:38Â and sign-up forms we created not that long ago.
00:03:42Â There are multiple options for doing authentication here.
00:03:46Â We have phone, magic URLs, anonymous, JWTs, and a lot of OAuth providers.
00:03:52Â Basically anything you can imagine.
00:03:54Â In this case, we'll simply be using email and password.
00:03:58Â Next, let's look into databases.
00:04:00Â Here we can create our own database.
00:04:03Â So let's do that by choosing a name.
00:04:05Â I'm going to do something like JSM underscore aura.
00:04:08Â And click create.
00:04:10Â It has been created and we've been given the ID of the database.
00:04:15Â So let's copy it.
00:04:16Â And back right here, we can say database ID and we can paste that ID we just copied.
00:04:23Â Next, let's create our first collection.
00:04:26Â It'll be for our users.
00:04:27Â We can call it users and click create.
00:04:32Â We also get an ID of the collection.
00:04:34Â So let's copy it and let's paste it right below.
00:04:37Â That's going to be user collection ID.
00:04:41Â And we can paste the ID right below.
00:04:43Â Next, we can go back to all collections and create a second and last collection we'll have for this application, which is going to be called videos.
00:04:52Â And we can click create.
00:04:55Â And we can copy the ID and paste it below by saying video collection ID.
00:05:02Â First, let's go back to the user's collection and add the attributes our users need.
00:05:08Â So let's create our first attribute.
00:05:11Â It'll be of a type string.
00:05:13Â The attribute key is username.
00:05:16Â Size is something like 2200, just so we have enough space.
00:05:21Â But of course you can go much smaller as usernames aren't typically that long.
00:05:25Â We can make it required and we can click create.
00:05:28Â Let's go for another one.
00:05:30Â It's going to be of a type email, which you can get right here.
00:05:34Â Its name will also be email and it will be required.
00:05:39Â Next one will be of a type URL and it'll be called avatar and it will also be required.
00:05:47Â Finally, we can have a string of a type account ID with a size of about 2200, just so we don't hit the limit and also required.
00:05:58Â And then we can head over to settings, scroll down and add a new role under permissions.
00:06:06Â We're going to add any and turn on all CRUD operations.
00:06:10Â That way all users can perform all CRUD operations.
00:06:14Â Now let's modify the attributes for our videos collection.
00:06:18Â Go to attributes and create our first attribute of a type string with the attribute key of title 2200 as the size and make it required.
00:06:31Â The second attribute will be of a type URL and its attribute key will be thumbnail.
00:06:39Â It will also be required.
00:06:42Â The third one will also be of a type string and it will be the prompt that you use to create that video.
00:06:49Â This is a special feature of our application where people can type in the prompt that they use to generate that video, as you can think of it as a social
00:06:58Â platform for sharing AI generated videos.
00:07:00Â And we're going to make this a bit longer, like 5,000 characters and make it required.
00:07:07Â Next, we need the actual video.
00:07:09Â So that will be a URL type with the attribute key of video, and it will be required.
00:07:20Â And finally, we need a very important attribute of a type relationship.
00:07:26Â So we need to create a one-way relationship with a related collection of users.
00:07:33Â The relation will be many to one, which basically means that one user or one, let's call it a creator right here under the attribute key,
00:07:44Â can create many videos.
00:07:46Â And we can also see that right here.
00:07:48Â Videos can contain one creator and then creator can belong to many videos.
00:07:54Â On deleting a document, we can set document to null and click create.
00:08:01Â Finally, we can go to settings and also enable permissions.
00:08:05Â We'll give permissions to all users and we're going to give it all CRUD operations and click update.
00:08:15Â Great.
00:08:16Â So now we have successfully created our AppRite project.
00:08:21Â Auth is set up by default.
00:08:23Â We have set up the database right here with two different collections that now have their own attributes.
00:08:30Â And finally, we can move on to creating storage.
00:08:34Â So let's create a bucket.
00:08:36Â Let's give it a bucket name of something like files and click create.
00:08:43Â As before, we can immediately copy the ID of the bucket and we can add it right here at the bottom by saying storage ID is equal to the ID that we just copied.
00:08:56Â Finally, we can go under settings, permissions, and we can make all of our users.
00:09:03Â Do anything they want by giving them all the permissions.
00:09:07Â And if you click update, you'll get a quick alert saying that the maximum file size you're trying to set is above the limit.
00:09:15Â So scrolling down, we can change this over to 50 megabytes, which is allowed within the free plan.
00:09:23Â That way you can update this first and then make it just 50 megabytes.
00:09:28Â That's good.
00:09:29Â And now we can also add a second role of all guests and give guests only read permissions and click update.
00:09:40Â So now the logged in users have full permissions and guests have only read permissions.
00:09:45Â And we have also set up our maximum file size.
00:09:48Â Now, let's also allow for specific extensions.
00:09:53Â JPEG, PNG, GIF or GIF and MP4.
00:09:59Â And click update.
00:10:01Â That's it.
00:10:02Â Our bucket permissions and settings have been updated.
00:10:06Â All the IDs and all the information that we need to hook up to our AppRite cloud are now here.
00:10:12Â And we are ready to start connecting to our AppRite client, which will allow us to create users, upload videos, make relations between them,
00:10:22Â and upload files to our storage.
00:10:25Â Exciting stuff ahead.
00:10:26Â So let's get started with setting up our AppRite within the code so we can focus on what we wanted to do not that long ago,
00:10:33Â and that is implement logic for our complete authentication.
00:10:38Â Now, AppRite provides a couple of SDK libraries for major programming languages and platforms.
00:10:45Â In this case, we'll be using a client library for React Native SDK.
00:10:50Â It's currently in beta, but I went ahead and tested it thoroughly and everything was working properly, so it's safe to use.
00:10:58Â Let's go to the GitHub page of that SDK.
00:11:01Â The link for that will be in the description.
00:11:03Â And while we're here, we can also give it a star.
00:11:06Â We can share some love for this developer creating the mobile SDK, as they don't have a lot of stars right now, as it's currently in beta.
00:11:14Â And we can scroll down to go under Installation.
00:11:18Â We can copy this command and within our terminal, we can paste it right here.
00:11:23Â This will install React Native AppRide and React Native URL polyfills, which I guess they need to make this work.
00:11:30Â After that is done, we need to initialize our SDK.
00:11:34Â So let's copy this block of code and paste it just below.
00:11:38Â We are importing the client.
00:11:40Â Let's do that all the way at the top from react native app, right?
00:11:45Â Then we initialize our react native SDK, and we set up our endpoint project and platform.
00:11:53Â This is easy to do as we have this object with all of the information.
00:11:57Â So we can remove this fake stuff right here and simply say app right config dot endpoint.
00:12:06Â Or we can even shorten it at the top and say something like config and then configure right here dot endpoint, which is our endpoint.
00:12:16Â Then we have our project ID, which is config dot project ID.
00:12:21Â And finally we have a config dot platform.
00:12:26Â It's great that we collected all that information beforehand.
00:12:29Â So now it's just easy to set our client up.
00:12:32Â Once that is done, we can make our first request.
00:12:35Â So let's copy the code for it and paste it right below.
00:12:40Â Let's indent this properly.
00:12:42Â And as you can see, we have a function that tries to register a user.
00:12:47Â We're simply calling account.create.
00:12:49Â We create a new unique ID with an example, email, password, and name.
00:12:55Â And then we call a .then function, which simply consulates the response.
00:12:59Â So now we can call this somewhere within our code.
00:13:02Â To do that, let's first turn it into a function.
00:13:06Â const create user is equal to a callback function.
00:13:12Â And we can put this code right within it.
00:13:15Â Let's just move it a bit up.
00:13:17Â There we go.
00:13:18Â We have our account create, and we can also add export right here before, so we can use this function later on.
00:13:26Â And let's not forget to import account coming from React Native AppWrite.
00:13:32Â That's right at the top because we need to initialize our account instance and then set it to the account variable right here.
00:13:40Â Then let's go to our sign up since that's the page that I currently have opened so we can test our example function call.
00:13:48Â I'm going to go to app, auth, sign up, and then we're calling this submit on click.
00:13:57Â So here we can call create user.
00:14:01Â And unfortunately it doesn't auto import it for me.
00:14:04Â So we can do that by saying import, create user.
00:14:12Â And once we call the submit, we call the create user.
00:14:21Â Let's test it.
00:14:22Â Now back within our application, let's open up the terminal and press R to reload.
00:14:30Â And I can see an error here saying that the prop ID doesn't exist.
00:14:34Â I think that's going to be right within our app, right?
00:14:38Â So let's navigate and you can see here, ID unique.
00:14:41Â We can import that ID from react native app, right?
00:14:45Â Now that we have that, let's once again, open up the terminal, click continue with email, navigate to sign up, and then click the sign in button.
00:14:55Â This should trigger the AppRite account creation.
00:14:59Â It says project with the requested ID could not be found.
00:15:02Â Please check the value of X AppRite project header to ensure the project correct ID is being used.
00:15:09Â So let's make sure that the project ID indeed is correct by going over to AppRite.
00:15:15Â And then referring to our project ID here looks good, but here set project, the ID should be uppercased.
00:15:25Â There we go.
00:15:26Â Now it's pointing to the right thing.
00:15:27Â So if we save it and click sign in one more time.
00:15:33Â You can see something that looks like a piece of data, which would make me assume that the account was indeed created successfully.
00:15:41Â So back within our dashboard, let's go to Auth, and there we go.
00:15:46Â We have Jane Doe with the me-at-example.com email, and that's the only thing we care about.
00:15:53Â That means that we have successfully created a user from within our application.
00:15:59Â For now, I think we can safely delete Jane as she wasn't a real user with the data that we typed in, and we can focus on hooking up our inputs to our form
00:16:11Â and then creating a new user, but for real this time.
00:16:15Â So back within our code, let's go back to AppWrite where we'll create all of the functions like creating a new user, signing in a user,
00:16:24Â getting the user information and more.
00:16:27Â Starting off, of course, with creating a user.
00:16:31Â So we can scroll down to where we have this create user function.
00:16:35Â And let's remove everything from here and start from scratch, just so it makes complete sense.
00:16:40Â We'll first open up a try and catch block.
00:16:44Â In the catch, we can console log the error that we got just so we know what's happening.
00:16:49Â And we can also throw a new error by saying throw new error, and then we can pass the error in.
00:16:57Â In the try, we can try to create a new account by saying const new account.
00:17:04Â is equal to await account.create.
00:17:09Â And we have to pass a couple of things to it.
00:17:11Â First, we have to pass the user ID.
00:17:14Â And you can see that right here in the docs, create user ID of type string, then email, then password, and then name.
00:17:22Â You also get more information about what exactly this endpoint does.
00:17:27Â So first, we're going to use the ID unique to pass a new ID.
00:17:32Â And then we have to get the information about our current user, which will pass through params.
00:17:39Â So the first parameter will be email, then password, and then username.
00:17:44Â So just like that, right here, we can set the email, then the password, and then the username.
00:17:52Â Since we are waiting, we also have to make our function async.
00:17:56Â Then if we don't get a new account, We'll also throw a new error like this, else if the account has been created successfully,
00:18:06Â we can try to create a new profile picture by saying const avatar URL is equal to avatars, which we need to create right here where we have the account
00:18:19Â by saying const.
00:18:21Â avatars is equal to new avatars coming from react native app, right?
00:18:27Â And to it, we pass the client.
00:18:29Â So now we can say avatars dot get initials.
00:18:33Â This is a special function, which basically, as it says, if you hover over it, gets the initials of the user's name and then uploads that to get the special URL.
00:18:43Â So you can pass the username right in.
00:18:46Â Then we can await and call another function, which we can create, which is sign in.
00:18:52Â So let's say sign in and let's create that function right below.
00:18:57Â Export async function, sign in that accepts an email and password.
00:19:05Â That's going to look something like this.
00:19:07Â Within it, we can open up a new try and catch block.
00:19:10Â In the catch, we can throw a new error and pass the error right in.
00:19:17Â But in the try, we can try to establish a new user session by saying const session is equal to await account.create email session.
00:19:32Â And this is a method given to us by AppWrite to allow the user to log into their account by providing a valid email and password combination.
00:19:42Â So let's pass in the email and password.
00:19:46Â Great.
00:19:47Â And finally, once we have the session, we can simply return it.
00:19:52Â Now we can call this sign in function right above and to it, we can pass the email and password, which will pass into the create account or create user rather.
00:20:05Â Once we sign in, we can create that new user in the database by saying const new user is equal to await.
00:20:14Â And as we have created an account instance, we have to create an instance of databases.
00:20:19Â So right at the top, we can say const databases is equal to new databases coming from React Native AppRite to which we can pass the client.
00:20:32Â And right below, we can say await databases.createDocument like this.
00:20:41Â To it, we need to pass a couple of things, the database ID, the collection ID, the document ID, and then the data.
00:20:49Â So let's do it one by one.
00:20:51Â We have the database ID stored under config.databaseID.
00:20:58Â We have the collection ID stored under config.userCollectionID.
00:21:05Â Then the ID of the document, since it's new, we don't have it already, we can create a new unique ID by saying idunique,
00:21:15Â and then we need to pass the object with all the information about the user.
00:21:20Â such as the account ID, which will be equal to new account dot dollar sign ID, email, which we get from the form, username,
00:21:30Â which we get from the form, and then avatar, which will be equal to avatar URL.
00:21:37Â That way, we create a new instance of the user in the database, and at the end, we can simply return that new user.
00:21:47Â Perfect.
00:21:48Â Now our function for creating a new user has been completed, as well as the function for signing in, and we can call it within this submit function once
00:21:58Â we click sign in.
00:22:00Â Or now that I look at it, the button should say sign up.
00:22:04Â So let's fix it and make it say sign up.
00:22:07Â But of course, since now this is a real function, we have to pass real data to it.
00:22:13Â So let's first check if we actually have that data.
00:22:17Â If no form.username or no form.email or no form.password.
00:22:29Â If either one of these is empty, then we want to issue an alert.
00:22:34Â And with React Native, it's easy to do an alert.
00:22:36Â You simply say alert, import it from React Native, and then say alert.alert of type error, or rather this is the title, and then you pass the message.
00:22:48Â Please fill in all the fields.
00:22:52Â If we do have all the fields, we can set is submitting, to be true and then we can open up a new try and catch block.
00:23:02Â In the catch, we can do an alert.alert that's going to say error and we can render the error.message.
00:23:12Â We can add a finally clause, which will set submitting or set is submitting to false because either way, if we got an error or if we succeeded,
00:23:24Â the loading is done.
00:23:26Â And then in the try, we'll say const result is equal to await create user.
00:23:33Â And since we're using await, we have to make this function async.
00:23:38Â And we have to pass three things to this user function, one by one, email, password, and username.
00:23:45Â So let's do just that.
00:23:47Â Form.email, form.password, And finally, form.username.
00:23:57Â And once we get the result, we'll later on set it to global state using context.
00:24:05Â For now, let's leave it as it is and let's simply use the router function coming from expo router and replace the route by pointing to forward slash home.
00:24:17Â So let's give it a shot and let's try to sign up.
00:24:21Â I'll start typing my username, like jsmastery.
00:24:25Â I'll do an email of contact at jsmastery.pro.
00:24:32Â And I'll choose a password, something like 123123123. There we go.
00:24:39Â We can also check it.
00:24:40Â It looks good.
00:24:42Â So let's click sign up and we got redirected back to the homepage.
00:24:47Â I won't save it yet, which means that it succeeded because we reached the end of the try block.
00:24:54Â That is great.
00:24:57Â But what happens now if I go back to profile or if I try to go back?
00:25:02Â And then again, continue with email.
00:25:05Â Once again, we are back to the login screen, which is a good thing, right?
00:25:10Â Because we haven't yet implemented the submit function of the sign in screen.
00:25:15Â So let's copy this entire submit logic that we have here, move over to sign in and replace this submit.
00:25:25Â This one will be very similar.
00:25:27Â We set a submitting, we're doing everything the same, but instead of creating a new user and getting the result, we simply want to call await sign in.
00:25:38Â And this sign in should be coming from the AppRite file.
00:25:41Â So we can say import sign in coming from dot dot slash dot dot slash lib.
00:25:48Â And then we're saying, await sign in.
00:25:52Â The sign in accepts only two params, email and password.
00:25:55Â So we don't have to pass the username as we already know who we are.
00:25:59Â And then also after we log in, we want to set it to the global state and point to home.
00:26:06Â So now let's verify whether we have successfully created our account.
00:26:11Â I'm going to type in the same email I had typed before, contact at jsmastery.pro and 123123123 and sign in.
00:26:26Â Ooh, in this case, we have an error, possible unhandled rejection coming from the fact that we don't have a username.
00:26:33Â Okay, that's my bad.
00:26:35Â I should have removed this no username because here we don't even have the username field.
00:26:41Â So if we save it, we can type in our password one more time and we can sign in.
00:26:48Â This time we get a different error saying that I forgot to import the alert coming from React Native.
00:26:56Â Let's see if we have the router.
00:26:58Â There we go.
00:26:59Â I got that just to be safe.
00:27:00Â I think I have everything right now.
00:27:02Â So if I give it a go, we indeed got redirected to our homepage, which means that we're successfully signed in.
00:27:10Â And that's great and all, but what is it good for if I just close the app, like go right here and reload?
00:27:18Â And then the next time we have to log in again and go through the onboarding screen.
00:27:23Â We don't want to do that.
00:27:24Â We have already seen what the app is about and we have already created an account.
00:27:29Â So the next thing we'll do is we will implement a global context state that will remember when our user has logged in and automatically redirect them to
00:27:40Â the homepage.
00:27:40Â First, we have to create a new folder within the root of our directory called context.
00:27:47Â And within it, we'll create a new file called global-provider.js as it will provide us with all the state that we need.
00:27:57Â So let's first import, create context, use context.
00:28:03Â as well as useState and useEffect coming from React.
00:28:09Â Then we can declare the context by saying const global context is equal to createContext and we can also export const.
00:28:23Â A new hook we'll create called useGlobalContext which is basically a callback function That simply calls the use context hook and specifies which context
00:28:35Â we want to get.
00:28:36Â In this case, it's the global context, but someone or something has to provide that context.
00:28:43Â So let's say const global provider is equal to, and typically this is just the react component that gets children as a prop and it returns a global context
00:29:00Â dot provider, like this.
00:29:04Â Within it, we have children.
00:29:05Â So we can wrap everything, but still display all the screens properly.
00:29:10Â Next, we can choose which types of values we want to provide to our provider.
00:29:15Â So we can see value is equal to an object.
00:29:18Â And here we can declare whatever we want our entire app to have access to.
00:29:24Â So, let's create some states.
00:29:26Â First, useStateSnippet will be called isLogged, in, like this.
00:29:33Â And at the start, it'll be set to false.
00:29:37Â Then, we'll also create a new useStateSnippet called user, setUser, at the start set to null.
00:29:45Â And make sure to properly capitalize this U right here.
00:29:50Â And finally, we'll create a last state called isLoading, set isLoading at the start set to true because we're first loading that user in.
00:30:01Â Then let's create a useEffect, something like this with a callback function.
00:30:08Â and it will only happen at the start.
00:30:11Â The dependency array is empty.
00:30:13Â Here, we want to call a special function which we'll create within AppWrite.
00:30:18Â So let's go to the AppWrite file and create a new function by saying either exportAsync function, or you can declare it as a regular export const,
00:30:30Â and we can call it getCurrentUser, which is equal to an async function like this.
00:30:37Â We can have a try and catch block right there.
00:30:40Â In the catch we'll simply console log the error.
00:30:45Â And in the try, we'll say const current account or currently logged in user is equal to await account.get.
00:30:56Â If there is no current account like this, we want to throw an error.
00:31:01Â And if we do have a current account, then we want to get that user from the database by saying const current user.
00:31:09Â is equal to await databases dot list documents.
00:31:16Â First things first, you want to say from which database do you want to get the documents from?
00:31:20Â So that's config dot database ID.
00:31:25Â Then from which collection that's config dot user collection ID, and then you can specify the query, meaning how you want to get it.
00:31:35Â And in AppWrite, you do that using their own query object, which you import from React Native AppWrite, and it has different methods,
00:31:43Â such as apply, bind, call.
00:31:46Â We're going to use equal.
00:31:48Â So we want to ensure that the query dot equal account ID is equal to the current account dot dollar sign ID.
00:31:59Â This way we can get the exact user that's currently logged in.
00:32:03Â Finally, if there is no current user, not current account, this time we're looking for current user.
00:32:12Â Then we once again throw an error.
00:32:15Â And finally, if everything is good, and if we have our user, we can return current user dot documents zero, because we only need one user.
00:32:26Â Let's also turn this function into an ES6 function by saying export const.
00:32:32Â That's going to be an arrow function like this.
00:32:35Â Doesn't make a difference, but it's good to stick with what you do.
00:32:39Â There we go.
00:32:40Â And now we have this getCurrentUser function, and we can import it right here within global provider by saying import getCurrentUser from dot slash or
00:32:54Â dot dot slash lib slash upright.
00:32:58Â This getCurrentUser is an async function, so we can call .then on it.
00:33:04Â First, we get a response.
00:33:07Â And if a response exists, then we want to set isLoggedIn to be true.
00:33:15Â And we want to set user to be equal to res, as in response.
00:33:20Â Else, if we don't have a response, we're going to set is logged in to false, and we're going to set the user to null.
00:33:31Â Then we can also catch it, meaning if something goes wrong.
00:33:35Â In that case, we're going to get an error and we can simply console that log the error.
00:33:41Â And finally, meaning no matter what happens, if we succeed or if we fail, we can have a callback function that sets isLoading to be equal to false because
00:33:52Â we have done doing whatever we're supposed to do.
00:33:55Â Now that this function gets the current user information, we set it to the state.
00:33:59Â Let's provide our entire application with the value of that state with information like is logged in, Set is logged in, user,
00:34:12Â set user, and is loading.
00:34:16Â And of course, for this provider to do its purpose, it has to actually wrap every single screen within our application.
00:34:23Â And the best way to wrap all the screens is just to use it within our main layout right here.
00:34:31Â So where we have the stack, we can just say global provider, wrap it properly.
00:34:38Â And that way all the screens will have access to the data within the values.
00:34:45Â Let's just properly indent it and let's import it at the top by saying import global provider coming from dot dot slash context.
00:34:59Â forward slash global provider.
00:35:02Â Now it does look like there's a problem and I think I know why.
00:35:07Â If we go back to global provider, we never exported it.
00:35:11Â It's never been used.
00:35:12Â So at the bottom, we have to say export default global provider.
00:35:19Â And now we should be good.
00:35:21Â Looks like I forgot to put an opening call right here.
00:35:25Â We're calling this as a function.
00:35:27Â So if we fix it, we're good.
00:35:29Â And what this does is if we have logged in before, it will give us access to the current user.
00:35:35Â And then we can use it within our onboarding to figure out whether we should automatically redirect the user to the homepage.
00:35:44Â So we can head to the onboarding component, which is the index of our app.
00:35:49Â And then right at the top, we can say cost is loading.
00:35:55Â and is logged in, which is equal to use global context, which of course we have to import by saying import use global context coming from dot dot slash
00:36:13Â context global provider.
00:36:14Â And now if we're not loading and if we are logged in, In that case, we can return a redirect component with an href of forward slash home.
00:36:34Â This is how that works.
00:36:36Â And you can see that worked perfectly.
00:36:39Â And if that didn't immediately work for you, no worries.
00:36:42Â We'll just do a quick fix.
00:36:44Â Make your registration submit form look like this.
00:36:47Â Feel free to pause the video and your sign in submit form look like this.
00:36:52Â After that, give it another go.
00:36:54Â This should save your user to the context.
00:36:57Â Now we cannot go back.
00:36:58Â We're tied to home.
00:37:00Â And even if we reload our application right here.
00:37:05Â You see that we automatically get redirected to the homepage if we are already logged in.
00:37:10Â Back on AppRide, if you reload your auth, you can also see that we have contact at JS Mastery Pro with the JS Mastery username right here,
00:37:19Â which means that we indeed have successfully created an account, logged into that account within our app, and also stored it within the global context
00:37:28Â so that every time that we launch our app, we are automatically logged And that is great.