React Native Database & User Authentication

today we're building a user management application with Expo react native and specifically we're putting a couple of different uh superbase features together namely the superbase database so that's a postgress database with a restful API that we can call directly from the client site and then we're putting that together with uh superbase o our authentication Service uh and we can combine this with roow level security policies to give programmatic access access to our database directly from the client side so this is really the powerful thing of the superbase stack is that you can access your database securely directly from the client site and the client site you know being either a website or in this case your a mobile application uh and you don't need to go through a server environment we give you a secure server environment with our restful API and the role level security policies great so let's dive into this so we have um this guide here uh I'm going to link that below uh as well and then if you get stuck also you can get the full um example code on GitHub as always now first of all we're going to create a new project in superbase um going to create this here we'll just call it Expo super quick start and I'm in Singapore so I'm just going to select this region here great so while our project is um setting up let's go ahead and continue um along we'll come back to kind of setting up the database schema um in a bit but first of all let's get our um react native app with Expo uh set up we can use this handy uh create Expo app um to create our um typescript uh blank template Expo user management so let's do this over here okay great and we've already cded into our um Expo user management so let's open this in uh I like to use VSS code um so we can use our terminal uh down here and then um we can look at our app. TSX great uh and then here we can see in our package.json we have a couple uh scripts so let's just make sure our everything um is set up correctly so let's say npm run iOS okay and we're opening up on the uh iPhone simulator here make this a little bit bigger and then also let's put this maybe side by side okay great uh and then yes this is our entry point there we are okay perfect so everything is up and running correctly very good and then we will need uh a couple dependencies um like super based JS uh we need react native async storage so that's what we'll use to um store our session um our o session uh some reactnative elements and uh a URL poly fill so we can just copy that uh and then go over I'll just stop this here and we can run npx Expo install to make sure that um for libraries that have kind of a compatibility with sort of a certain um Expo SDK that we're installing the right um Library so you can see here for uh I believe it's the um react uh asnc storage native async storage uh we're installing the correct version for our SDK 49 here um and there we have it okay so we have that all uh installed and then um we can come here and we can set up our super based JS uh client so super based JS is what we're using to communicate with our database um uh our rest API that you know forwards queries to our database as well as you know our authentication server and kind of all the different pieces but so first of all we had created our project here uh and now we need to set up database schema now this is very handy uh we can go over to the SQL editor here and we have some handy templates let me zoom in there a bit um and um actually quick starts here so in our case we are using the user management starter um and you can see that we have um a profiles table and the profiles table here has an ID and that references our o. us USS ID so here we're making a connection to um you know our o service is using postgress as well and it's using the the users schema uh the O schema and then users table off. users uh and so we're referencing this here um and then we're um creating some role level security policies uh specifically here we're saying okay all profiles um are publicly viewable uh and then we're saying but for um uh insert and update uh only the own um user ID so we can say your o. uid um equals ID so we can make sure that uh they can only create entries with their own user ID and can only update entries that are um their own user ID uh and then we have um a little trigger here which is also quite handy so what we're doing is anytime that um a new user here is um created so after an insert in our off. users table where then uh just copying their ID uh and if we have kind of some uh user metadata so generally if we're using Oo we would get some user metadata and then we're copying that over um as well to our uh public profiles table uh and so there we can have some automation to automatically create kind of the user entry and um create create that connection uh with here the uh ID being our um foreign key that references each other okay perfect so we can do this uh and then here that is for um the storage we can kind of create the storage buckets already but um we're not looking at storage kind of in this um specific tutorial so uh Let's ignore that for now and now if we go back to our table so we can see we got our profiles table here uh and we got all this set up okay great so we can go back to our tutorial now if we're um running superbase locally with um the superbase CLI we can link our project and then we can pull down um this uh SQL as well so this will generate a migration um if you're interested to learn more about kind of local development you can uh do that here uh and then we will need um yeah in the API settings we can get our URL and our Anon key uh we won't need our service Ru key for this Okay so we've done this and then um we need to create our superbas JS client here so we can copy that over I'm just going to create a new file uh I'm going to create a new folder called um utils and then superbas do um TS and then in here we are going to use um our Asing storage so we need to pass um uh a storage implementation to our superbas JS client um that works on you know this specific platform so Asing storage is um something that works across iOS Android and uh web if you're using that with Expo uh and so we can use use that here kind of across the different platforms and then we need to put in our superbase URL and Anon key now you know in in kind of a real world scenario you would ideally set that up as um constants our case we'll just go to our project settings uh API and we'll just uh copy it in here now remember these are fine to um paste so the public key you can you know expose in your client application so your websites um your mobile applications what have you that's fine now your service roll key that very much you need to keep secret and only use in a secure server environment but so now we have this so we have um our superbase client set up in our um utils actually I think here we're calling it uh lip so yeah let's maybe conform with that so that makes it easier later okay great so Library superbase TS um and now we can go and use that so we're setting up um a login component so this is our off component let's copy that over um we're going to create a new file new folder components slash o. TSX and then we'll step through this so here we're getting our super base um JS instance from our library superbase so that we just set up here uh and then we're just using kind of the react um State we're using uh some alert stylesheets and Views and a button and input and yes which is using our stall uh our states here and then sign in with email uh so this is kind of the super base off where we say sign in with password we pass in the email and the password and then we have an alert and then um sign up with email um we're doing superbase off sign up so that's the method to sign up a new user email password and then if we have an error we show the error message and now in this case of the sign up so you can see this here in the documentation um as well so by default superbase auth requires email verification before a session is created um now in order to you know do this kind of email verification you will need to handle uh deep linking into your application now we have um some great documentation on that as well as a video um um you know you can find it here somewhere if you're interested in in how to do that uh but we're not going to do this today so we can actually disable this in our project email provider settings um but for now let's see kind of wire everything up and see how it works and then um we'll go from there and then here we're just kind of having our input Fields email password and the sign in and sign up buttons and add just a little uh Star sheet down here um and then we are just creating another component so this is our account page so that we will show when the user is um logged in so let's create a new file account. TSX paste that in there uh and so again just some use State use effect um our super base client from the library uh and then the session this is just the type so it makes this easier to to use this uh and then we expect you know when we're rendering the account we will pass in the session um from you know the super based client when we have it and then basically we're just checking okay um here in the use effect basically uh if the session changes we run this um use effect again and we're just checking okay do we have a session and if we have a session then um we run this sketch profile method and so here you can see how we can uh retrieve data from the database so we're saying uh superbase from profiles we select the username the website and the Avatar URL now if you're familiar with SQL this is probably quite familiar with for you we're just checking okay uh equal so we only want the row where the ID is the same as the user ID in the session uh and then we just want to return a single record so that means that the data then either is null you know if we don't have an entry for this user or we get the username the website and the Avatar URL and then we're just setting that information uh in our uh View and we have an update profile method and so in this case um you can see that we're um just taking the updates the the user ID the usern name website URL and we're just passing you know the current date uh into kind of updated at and then we can just perform uh an upsert with our updates um to the profile stable and since we're passing the ID um it will only upsert you know where uh there's already kind of that ID available um or you know if we don't have the ID already um then we will insert a new record so that is what what upsert does um and that is pretty much it we have yeah again some input Fields uh here button uh sign out button as well just using super base off sign out um okay and so that is our account page and then finally we just need to put it all together in our appt x file so we can say uh copy that we go to our um here app. TSX and just paste in um the entire thing here and then we can say again uh npm run iOS okay great so you can see now here let's create um a tester and set some password and so now if you say if I try to sign in um you know invalid we don't have a user now if I say sign up um we have the scenario where we haven't disabled the email verification yet so please check your inbox for email verification um as a reminder you can Implement deep linking um there's a link in in in the docs um and the description below and there's a video as well uh here about deep linking but for now for testing what we can do is we can go to um our off and you can see now here we have this Tesla user who's waiting for um verification and then we can go to the providers and this is the email provider here and we can toggle off the confirm email save those settings and now what we can do is um we can create a new user we'll just say tester 2 um and we say sign up and so in this case uh we don't need to verify the email and we get a session back for the user right away and now you can see here so if we go back to our all users we can see this um user doesn't need to wait for verification um tester 2 and if we go to the table editor um to our profile files you can see we have both users in here um and no information yet so let's just say the username is tester test uh and the website is just https uh example.com and now we can say update um we don't have any confirmation message but uh we locked the button so the update was actually really quick if you saw that and you can see now here we have an updated at timestamp we have our username um and we have the website here um yes so the update is working as expected so now let's do another thing let's do a list of all the users if you remember earlier um we uh created the policy so the read policy we can see that here um we have active policies so we have a public profiles are viewable by everyone so let's um add kind of a list of all the users down here um and so this is in our account page um we'll just want maybe um yeah vertically spaced um let's just create a new uh view down here and then let's see if we can find find uh I remember there was like a Shopify react native um I think was it flash list something like that uh yes so um this is a pretty cool project kind of flash list um usage here so we can uh npx install Expo installed this so maybe let's open a new window say npx Expo install uh Shopify flash list and while this is installing um maybe we can look at this here um so we're importing uh our flash list at the top and now we can um yeah maybe let's just do this kind of see that the list is rendering okay we get our data and then just uh flash list let's put that here into our view uh and then we still need the text from uh react native let's get text and now if we save this uh we can see we need to to um provide a size for our flash list view so the view that holds this so um we can add another style object in here so let's just say height uh 200 for now and so now you can see we have a first item and a second item okay and so now we can go ahead and we can uh maybe fetch the um users so let's do a new uh method async function get all users and then we can call await superbase Dot from uh from our profiles uh you can see here same kind of syntax profiles uh we want to select uh maybe let's just select um the ID from everyone um yeah so we're not setting any filter because we want all the records and then what we can do is we'll get the data here um so the data is either an array of an object with IDs or null um and so what we can do now is maybe say here users and then set users and so we'll have um that as an empty array and it will be uh an object with ID of type string and an array of that here um and then what we can do so we'll remove this data uh we don't need anymore that was our mock data uh and then what we can do is uh here so we're saying set users to data and now data could be null so in that case if it's null let's um just set it to an empty array uh then there might be an error so we could do you know if there's an error we can do a console. log maybe of um the error message okay um yeah oh basically only if there is an error then we'll do then we don't need that optional chaining here anymore uh okay great now we need to hook this up so pretty much the same here if we have a session then we want to get all the users and then we're setting um the users here and then here rather than data we're putting in the users and then we're rendering the item and the item doesn't have so that's a great thing about typescript we now I know uh the users is an object item. ID give that safe and so now what you can see is um we're getting our two users here so if we go back into our um table editor you saw we had um these two users here they are um we could also do well if we fetch the name let's stick with the IDS for now now um let's sign out let's create another user Tester 3 okay sign up and so now um what you can see is we have one two three users here um and as a reminder so this is the RLS policy here so we're saying okay all public profiles are viewable by everyone which also means that anyone who has um your add-on key can make a select query to get all the public profiles so you want to be careful with kind of policies like this um really really only do this if you have um data that you know can be publicly exposed otherwise you want kind of you know a different policy uh so for example you could do a policy authenticated um then you know they would need to be locked in uh as well so you can see here there's rules um so Anon you know basically anyone with the Anon key can retrieve that data with authenticated only someone who is actually you know logged in but basically anyone who's logged into your service can retrieve the data um and then here we can restrict this further with um some checks well um discard the changes here so we'll update our policy here um and we'll add this check off. uid uh we can say everyone authenticated you know that kind of goes hand in hand uh we can review this so we can see this is the change that will be made we can save the policy and so now if we go back and if we um render our app we can now see that we're only getting our own user ID so this is the one um ed1 PA so tester three if we're now checking [Music] um tester three should be uh maybe we go to off we see tester three and then we can copy um the ID and let's just say yes Ed uh one PA so now only um they can see their own data and we've restricted all the other data so um so this is how we're using the role level security policies to lock down our app um and that's pretty much it this is kind of sort of the quick start how you can get started now there's a bonus for using superbas storage with profile photos you know you can you can have a look at that but um yeah we're really excited that you're building with Expo and react native and let us know what uh else what other topics you'd like to learn about and see you next [Music] time

Channel: Supabase

Views: 8,021

Keywords:

Id: AE7dKIKMJy4

Length: 27min 38sec (1658 seconds)

Published: Tue Oct 31 2023