00:00:02 Okay, now that we have the UI, let's also go for the functionality.

00:00:06 Head over into our lib and then apprite.ts file.

00:00:11 Here, we'll need to create a function that creates a new user account, their session, and also stores them within the database as soon as they create an account.

00:00:20 So let's first start by creating a new AppWrite client and then exporting it so that we can use it anywhere within our code.

00:00:28 You can do it by saying export const client is equal to new client coming from React Native AppWrite.

00:00:37 Then we have to configure this client.

00:00:40 You can do that by saying client dot, and then you can call different methods on it, such as dot set endpoint.

00:00:49 And you can set the endpoint to be equal to AppRiteConfig dot endpoint.

00:00:55 You can then chain additional methods such as dot set project and make it equal to be AppRiteConfig dot project ID.

00:01:04 And finally, you can do the same thing for the platform.

00:01:07 It looks like it's complaining about a project ID not existing on the upper config, but here it is.

00:01:13 But it's saying that sometimes if these are coming from environment variables, they might be undefined.

00:01:19 So since we already know that they are actually there, I'll just add an exclamation mark at the end to let Tabscript know that we know those values exist.

00:01:27 or you can also add exclamation mark here.

00:01:30 Perfect.

00:01:31 Now, alongside setting up the AppRide client, we can also set up different AppRide functionalities, such as export const account is equal to new account

00:01:43 coming from react-native-app-write to which we have to pass the client we just created.

00:01:48 We can do the same thing for the databases by saying export cons databases is equal to new databases client.

00:01:57 And of course, don't forget to import databases coming from react-native-app-write.

00:02:03 We can do the same thing for the user avatar by saying const avatars is equal to new avatars to which you can pass the client.

00:02:13 And now we're ready to create this function that creates and registers our user.

00:02:19 We can do it by exporting a new asynchronous function.

00:02:23 So export const create user is equal to a new asynchronous function that looks like this, and it'll accept a couple of props.

00:02:35 What do we get when we're trying to create a user?

00:02:38 Well, we get the email, the password, and the name.

00:02:43 And these will be of a type, create user params.

00:02:48 Oh, it looks like I misspelled it.

00:02:50 This was supposed to be params.

00:02:52 So I'll fix it here as well.

00:02:55 Perfect.

00:02:56 Create user params.

00:02:57 Then within it, we can open up a new try and catch block.

00:03:02 In the catch, we can get an error.

00:03:05 And if there is an error, we'll simply throw it by saying throw new error, and we'll say error as string.

00:03:13 So we know what is the type of that error, in this case, abbreviated as just E.

00:03:18 But in the try, we can first create a new account on AppRide using the new unique ID, email, and password.

00:03:27 So say const new account.

00:03:30 is equal to await accountInstance.create and now we have to pass a couple of props to it.

00:03:39 First, you have to pass the user ID of that new user.

00:03:43 We could just randomize it or let our cat walk over the keyboard, but our cat won't be here for every single user, so we have to find a way to generate

00:03:51 it randomly.

00:03:52 We can do it using AppWrite's ID functionality.

00:03:55 So just say ID, import it from React Native AppWrite, and then use the unique method on it, which will always generate a new unique ID.

00:04:04 You can then pass additional things to it, such as the email, password, and the name.

00:04:10 Then if a new account for whatever reason wasn't created, we can check that and say if no new account, then simply throw a new error like this.

00:04:21 But if an account has been created, then we can try to automatically sign our user in after the account creation process by saying await sign in.

00:04:32 And this is a function that we have to create.

00:04:35 to which will pass an object containing the email and the password.

00:04:40 It's a separate function that we'll use in the create user function, as well as also using it standalone when a user just wants to sign in.

00:04:47 That's why it has to be created separately just below.

00:04:50 Expert const sign in is equal to this function that looks like this.

00:04:55 And we can also just export it for standalone use outside of this file.

00:05:00 And the type of the props here is going to be sign in params.

00:05:05 Perfect.

00:05:07 Now, after we try to sign the user in right here, after we create the new user account, all of this so far has to do with just authentication functionalities.

00:05:17 But remember that chart that I showed you before, where I drew a couple of rectangles and explained the steps?

00:05:23 Well, there I said that at one point, we also need to create a user within the database so we can more easily work with different relations.

00:05:32 So let's create a new database user by saying const new user is equal to await databases, which we are importing right here from the top.

00:05:45 And now the way that the createDocument method works is first you have to pass the database ID.

00:05:53 And where do we have access to the database ID?

00:05:56 Well, it is right here under appredconfig.

00:05:59 So just say appredconfig.databaseID.

00:06:04 The second prop will be the user collection ID, which we also have stored, apriconfig, that user collection ID.

00:06:12 Then is the ID of the new document we want to create.

00:06:16 And this one will be randomized.

00:06:18 So I'll just say ID unique.

00:06:21 Finally, the last param is an object containing all of the information or the data that we want to store.

00:06:28 So I will simply pass in the account ID.

00:06:33 which will be equal to the new account that we created above dot dollar sign ID, then the email, the name, and the avatar,

00:06:43 which will be named avatar URL.

00:06:46 And this avatar URL, we can actually create just before by saying const avatar URL is equal to avatars dot get initials URL.

00:06:57 And we can pass a name right into it.

00:07:01 What this does is it generates an avatar image using the username's initials and then stores it into the database.

00:07:09 So essentially, we are creating a new user in the database with the following email, name, account ID, and an avatar URL,

00:07:21 everything that a user needs.

00:07:23 And you can see how WebStorm very conveniently tells me what each one of these params does within the create document.

00:07:30 Sure, I could hover over it and see what it does, but being able to quickly see at a glance that the first thing is a database ID,

00:07:38 second thing is a collection ID, third thing is a document ID, and finally the data that we're trying to create, this is super convenient.

00:07:47 And I love this about WebStorm.

00:07:49 Finally, once we create this new user, we can just return it from this createUser function by saying return newUser.

00:07:57 WebStorm is also telling me that this is an inline variable and that declaring this new user is redundant.

00:08:03 So if you want to fix it, you don't even have to put it into a new variable.

00:08:07 Instead, you can just say return whatever the output of this function is, which is technically just the user.

00:08:15 Perfect.

00:08:16 So now let's actually sign our user in by creating the user session within this second function by opening up a try and catch block.

00:08:27 In the catch, we can get the error and we'll throw it by saying throw new error E as string in case something unfortunate happened.

00:08:36 Else we'll create a new session for our user using their email and password by saying const session is equal to await account.createEmailPasswordSession

00:08:51 to which we have to pass the email and the password.

00:08:54 We have everything we need.

00:08:55 And once again, WebStorm nicely fills it out.

00:08:58 It's not as useful because we are sticking to very good coding practices and naming our variables properly.

00:09:04 But imagine if we're passing some regular strings or numbers here.

00:09:09 If we did it like that, you would still be able to know that this is an email and that this is a password.

00:09:14 Thankfully with our proper coding, it's less relevant, but still good to have.

00:09:19 Just for final checking.

00:09:22 Great.

00:09:23 So now, finally, within our signup screen, remember where we were?

00:09:28 That was in signup.tsx.

00:09:31 We are ready to call this new createUser function we just created.

00:09:36 So after set is submitting to true, within the try, I will now await createUser, import it from where it needs to be imported.

00:09:46 And to it, I'll pass an email equal to form.email.

00:09:52 I'll pass a password equal to form.password and I'll also pass the name equal to form.name.

00:10:01 Now we are duplicating ourselves a bit here.

00:10:04 So what you could do is just destructure these fields from the form object by destructuring name, email, and password from the form.

00:10:15 And then you don't have to repeat yourself.

00:10:17 You can remove all of the mentions of the word form.

00:10:21 and instead just refer to their variables.

00:10:25 And since the keys and values are duplicated, it also means that you don't have to say it for the second time explicitly,

00:10:32 which allows you to have a much cleaner function that looks something like this.

00:10:37 This is not a part of React or React Native.

00:10:41 This is just good old JavaScript.

00:10:43 So if you'd like to polish your JavaScript skills on jsmastery.com, we have a terrific complete path of JavaScript course that dives deep into optimizations

00:10:53 just like this one.

00:10:54 But with that said, once we create the user, no longer do we have to do an alert.

00:10:59 Instead, we just want to bring the user back to the homepage because now they've been fully logged in.

00:11:06 So what do you say that we actually test it out?

00:11:09 I'll now pick up my phone, head over to the sign up function and create a new user.

00:11:16 I'll call myself Adrian.

00:11:18 For the email, I'll use adrian at jsmastery.com.

00:11:24 And for the password, I will use 123123 and I'll sign up.

00:11:32 It says, oh, this is not going to work.

00:11:34 The password should be at least eight characters long.

00:11:38 Okay, I got you.

00:11:40 I'll just add one more one, two, three.

00:11:42 And now if I click sign up, it's loading.

00:11:46 It says the current user is not authorized to perform the requested action.

00:11:51 Oh, okay.

00:11:52 You know why this is?

00:11:53 We have to head back over to AppRite and go under user settings.

00:11:59 This is under databases, user settings, and give this user additional permissions.

00:12:05 For now, I'll leave it as any and I'll give it create, read, update and delete permissions.

00:12:12 So we can actually call the create method on this collection.

00:12:16 If you do this and then retry clicking the button, it'll say a user with the same ID, email or phone already exists in this project.

00:12:26 Okay, that sounds good.

00:12:28 Let me actually then go back into the auth and check it out.

00:12:32 Oh, it looks like it got created the first time because the authentication succeeded, but we didn't have database permissions.

00:12:39 So that's why it failed.

00:12:40 So what I'll do is I'll remove this user from auth by scrolling all the way down and clicking delete.

00:12:49 And I'll just retry it one more time.

00:12:51 Should succeed now by clicking sign up.

00:12:54 It's loading and we got redirected.

00:12:57 And check this out, we get some native mobile functionalities.

00:13:00 It's asking me whether we want to safely store the passwords in the password app.

00:13:04 I'll click not now.

00:13:05 But with that in mind, if you now head over to AppRight Auth and reload, you'll be able to see that we have one new user here with their ID,

00:13:16 name, email, and we can add some additional options if we want to.

00:13:20 Pretty cool, right?

00:13:22 But we're not just creating this user within the auth, we're also creating this user within databases.

00:13:27 So you head over to databases, app, user collection, you can see that a new user called Adrian with the email and account ID and the avatar has been created.

00:13:39 So now if you try to visit this user's avatar, you can see JM as in JavaScript mastery.

00:13:44 Amazing.

00:13:45 It means that we have successfully created a user.

00:13:48 Similarly, we can head over to the sign in and here we can call the sign in functionalities.

00:13:55 So once again, I will destructure the email and the password from the form.

00:14:01 Also notice how the autocomplete is working very nicely with WebStorm.

00:14:06 I will remove the mentions of the form object.

00:14:10 And then right here, I will just call the AppWriteSignIn function by saying await sign in, don't forget to import it.

00:14:19 And within an object, pass in the email and the password.

00:14:23 We don't have to have the name because the name gets entered once the user signed up.

00:14:27 And I'll remove the alert.

00:14:29 So now if you test it using the same credentials that you entered before, for me, that was adrian at jsmastery.com.

00:14:37 and a password of a couple of times of one, two, three.

00:14:40 Now, if you click sign in, you'll see that it says AppRideException creation of a session is prohibited when a session is active.

00:14:49 This is because when creating a new user, we automatically called the sign in function to create a session for that user.

00:14:55 You can change any of these session related settings and even add restrictions for the password within AppRideAuth security.

00:15:04 So here you can choose the limit of the users, the session length and days, the limit, password history, how many times you can change it,

00:15:13 password dictionary, so that actually prevents the user from setting insecure passwords by comparing the user's password with the 10,000 most commonly

00:15:20 used passwords.

00:15:22 What do you think?

00:15:22 Would my one, two, three pass?

00:15:24 I don't think so.

00:15:26 But yeah, there's a lot of stuff that you can do right here, all directly implemented within AppRide.

00:15:32 And now that sign up and sign in are in place, let's write a function to get the details of the currently logged in user.

00:15:39 So we'll do it within the same file.

00:15:42 That's going to be the AppWrite.ts.

00:15:45 I'll collapse these two functions that we have created just to have a bit of a cleaner working space.

00:15:51 And just below, I'll create a new function, which I will call getCurrentUser.

00:15:59 Export const getCurrentUser.

00:16:01 Current user is equal to an asynchronous function and it's not accepting any parameters.

00:16:09 We'll get the user from the session that's currently logged in.

00:16:13 So I'll create a new try and catch block.

00:16:17 If something goes wrong, I think you know what we're going to do.

00:16:21 We'll just console log that error and maybe throw a new error, E as string.

00:16:27 But if everything is going well, we can just try to get access to the current account by saying const current account is equal to await account.get.

00:16:40 If there is no current account, we'll throw a new error.

00:16:44 But if there is an account, we'll try to fetch the current user from the database by saying await.

00:16:51 databases dot list documents.

00:16:55 The way in which you can list documents within AppRite is by first passing the ID to your database, which we have stored under AppRite config dot database ID.

00:17:06 Then you have to pass the ID of the collection you're trying to fetch the user from.

00:17:11 In this case, it is our app.redconfig.userCollectionId.

00:17:16 And finally, you have to pass the query.

00:17:18 A query can be a list of queries within an array where you can say query.equal, This query, you have to import it from React Native App,

00:17:28 right?

00:17:29 That equal account ID, we want it to be equal to the current account dot dollar sign ID.

00:17:38 Finally, if we didn't successfully fetch a new user, just throw in an error.

00:17:44 But if we have, then return the current user dot documents zero, because we only want to return one user that we fetched.

00:17:54 Perfect.

00:17:54 So now we have a function that allows us to get the current user.

00:17:58 So that allows us to get this information and redirect the user to the right screen.

00:18:03 If, for example, a user is already logged in, they should be redirected to the home screen.

00:18:08 But if they're not, they should be redirected to the sign-in page.

00:18:12 Now, instead of calling these functions separately on every single screen, like the auth layout or the cart, profile, search,

00:18:21 or tabs layout, what I'll do instead is I'll call them just once and store the result in a shared state.

00:18:29 Then, whenever we need the information about the currently logged in user, we'll retrieve it from the state.

00:18:35 This approach will help us avoid making multiple requests to AppRide, which will further improve the performance of our app.