Wized + AI part 2 - Adding Supabase Authentication to our AI powered Todo app

so in the last video we learned how to build a to-do app using open Ai and manipulation of arrays but in this video we're going to learn how to add super base authentication to the mix and how to convert the data that we were just storing on the front end in a variable how to merge that or how to connect that with our super base instance so this way whenever the user refreshes the page or logs out and logs back in they can access their to-do list all right with that out of the way let's get started all right so a few things changed since the last time besides adding this cool 3D divider I also added a signup page and a login page and I'm going to show you a few neat tricks that are going to help you utilize the helper text in web flow and we're going to make everything modular we are reusing the same wizd attribute on both the login page and the signup page and depending on the page that the request gets submitted on we're going to run a different request essentially so that's another cool thing that we're going to cover today as I said I added the Wiz attribute of form off and on the submit button I added a wiz attribute of submit all and I change the waiting text on this submit element so here I wrote creating your account on signup and on the login page I wrote logging in so we're going to take this text and we're going to populate this button while the request is being executed all right so the first thing we need to do is add superbase to our project so before we can do that we first have to create a super based project so I'm going to walk you through that process as well all right so I'm going to create a new project and now I have to specify the region in my case I'm going to choose Germany so that's our to-do app is gdpr compliance and I'm simply going to start the project and now I'm provided with these Keys over here and I'm going to need some of those in order to start my project so let's head over to our WIS instance here here under my app I'm going to add super base and under app I'm going to select super base now I have to provide the URL and the superbase key okay so superbase URL I'm going to copy that from here and under superbase key I have to add my API key okay I'll paste this in here and I'll hit close and now I can start configuring my first request so I'm going to head over to the login page I'm going to create a new request and I'm going to call it sorry let's start with the signup page because we need to create a user before we log in so here I'm going to create a new request I'm going to call it create user I'll choose super base here and under method I'm going to choose sign up mode is going to be email because we can sign up either through our phone number or via email all right email is what we want here and now we have to specify the email address which is this field over here so I'm going to choose here return f. form od. email okay and we're going to do the same thing for the password so return f. foro password and now we can specify a URL here this is an optional field by default the URL that's that the user is going to receive in the email is going to be this URL over here in the project so if we go here under authentication URL configuration it's set by default to Local Host now Local Host is basically your development environment it's when you're running a server locally but in our case we are running our staging server basically here on the staging domain so we're going to copy our too app link over here we're going to paste this in here and now if we wanted to we can provide redirect URLs now these URLs that we add here it going to be a list of URLs these are the only URLs that this link over here can lead to redirect URL so if right now before we add any we specify here a URL like for example our homepage it will not work so that's why we need to provide the URL there in superbase first here under redirect URLs I'm going to paste my URL in and I'm going to add an asteris here and the reason why I added it is because I want every URL that's on my website basically to be a valid redirect URL perfect now I can just copy this URL I'll set it up in the redirect or actually I don't need to do that because this is our default URL this is the too screen already so I'm just going to leave this field empty here and now we can basically start setting up our request so what we need to do is set up a trigger we're going to go to actions here I'm going to call it submit create user okay like so elements form o on event oh submit and here we're going to choose perform request request create user and we also want to prevent the default Behavior so we don't want this form to be submitted to webflow and we want to reset the form when it's being submitted and now we can fill out the form I'm going to add my email address here and a password and we can try to run this so if we look at page data now and we look at our create user request we can see if I submit this request it's going to be executed and we can see a user has been created now you'll also notice that if you fill this out that there's an email in your inbox and here we can see that we can confirm the signup and if I click on it I'm going to get redirected to my app and there's going to be an access token here in the URL cool now this is usually used for the get user request I believe but in our case we're just going to keep it simple and we'll set up also a login flow as well so that when the user signs up we'll redirect the user to the login page all right so here we're actually going to add this email redirect URL and we're going to add the login page URL here return login all right perfect and now we'll set up the login user request so I'm going to create a new request like so under app I'm going to choose super base I'm going to use sign in with password mode email and we're going to add the same Fields here so return f. form. email return could have duplicated the request f. format dop password all right and now we basically need to set up a trigger because right now we are triggering the create user request when this form is being submitted so we need to change our action a little bit so we have two ways of doing it one is a bit more nood friendly the other one uses a little bit of code but is yeah using less uh writing so we are not repeating ourselves so I'm going to show you both options and yeah it's quite simple so we have our submit create user we're going to rename this to submits Au and here we have the form a um form and we have that on both the signup page and the login page as I said earlier so here we have on event submit and we have this action so the no code friendly way would be to do this is conditional and we will check if the page is sign up so return end path equals and here we would write signup for slash signup and then we would add another on event submit action like so and here we would choose then our other request which is create login session we'll also prevent the defaults and under conditional we'll choose then return and Dot path equals equals equals login since we're having only two pages we could also create this same thing in a run function so on submit we can EX execute a run function we can delete that so just if you want to see how to do it with code we'll delete our conditional and here we'll write the following so if and here we're going to add a condition andbad equals equals equals forward SL signup then we want to return and now what we're going to do is we're going to execute a request by using the Wiz API so we can write here wiz. requests do execute and now in Brackets we just write the name of the request in our case that was create user and otherwise we're going going to return we'll copy the same thing so since we're having only two pages the sign up page so it's either the sign up page or it is not the signup page then we're going to execute our other request which is login uh create login session if the page is not sign up okay create login session okay and now we can basically test our request we can see if this is working okay so let's refresh the page we're on the signup page and we'll look at page data okay and now if I fill this out now create user is running if I go to the login page and I do the same thing now we can see that the other request is running cool and now we can also create our get user request as well so we're going to create a new request we're going to call it get user and under app we're going to choose super base method get user all right that's it now if we go to any page since we already logged in like the index page for example if we run the get user request we can see here that our user is being loaded cool but let's go back and improve our authentication flow a little bit so when we're submitting a form we are not seeing any information we don't know if the form is being submitted in the background or not except if we look at the WIS page data panel which is not the most convenient way so what we're going to do here is we're going to show the waiting text from webflow on this element while the request is being executed so let's create an action for that we're going to create a folder also called Au where we're going to put all our authentication related stuff like so I'll move this one here as well like so and here in this section I'm going to call this section set submit button text all right under type I'm going to choose element I have submit Au and now I'm going to show you a neat little trick so we're going to choose here set HTML attribute the attribute is going to be the value attribute and under value we're going to use the following you might have noticed that we have here all of this data that we can access and Trigger is the data that's related to the trigger the current elements so here here we're going to write return D dot and let me show you quickly what we're going to get so I'll preview the app and if I right click on the element you can see here in the elements panel that we have data weight and here we have some information inside so I'm going to extract this value out basically and the way I'm going to do it is is like so I'm going to write T do node node means we have currently the element selected Dot and now we can use basically JavaScript to get the value from the attributes so I'm going to write get attribute and that's a method that we can use and now we have to write the attribute name which is data weight I think let's check yeah data weit okay cool and now we basically need to add this only when the request is being executed because if we close this now we can see that the text is set to creating your account but we don't want it to be constantly set to that we want it to show either sign up or login before and then uh show The Waiting text when the time comes meaning when the request is being executed all right now let's go back to our set submit but text and here we're going to add a conditional or we're going to add more than one conditional so first we're going to check the page so we can write if the same condition we had before so n. path equals submit okay actually let's add first another conditional so first we're going to check if the request is being executed so let's choose first create user so we have here is requesting and if this request is currently being executed then we're going to set our text to the value we have so that was this okay so if this request is being executed or the other request is being executed which is read login session then we want to set this text okay then we can add another conditional and write if n do path equals sorry we need to return this my bad if n. path equals signup like so we're going to return create user okay otherwise if none of this is the case we're going to return login and I believe that my conditional here is correct so if one of the requests is submitting we're going to get the value from the attribute otherwise we're going to use either create user or Lo login okay so here we have create user and here we have log in and now if we try to execute this request we can see logging in and now I'm being logged in but we haven't set up a redirect so we can see here that the request for login was successful once again but we don't have a redirect in place so let's set up our redirect here we're going to go to act and we're going to call the action after create login session okay we're going to choose type event because this action type is an event based action so we're listening for a request finishing and under request we're going to choose create login session okay conditional if the request is successful so here we're going to look look at the state if create login session is okay and then we're going to redirect the user navigate to return like so basically we also want to trigger the get user request on page so we're going to create another action for that when the page starts loading we want to perform a request and it's the get user request okay and now if we refresh refesh our page we should see this request running perfect now we need to set up our access control rules so if this request fails for some reason on the homepage we want to redirect the user back to the login page so under actions we're going to create an after get user action or we can call it Access Control okay here we're going to choose event request finishes request get user and here we're going to set up an action so we're going to redirect the user to the login page okay and now we have an infinite Loop here I'll just delete this for now because we have to add a conditional here so the condition needs to be if the page is either one uh page within our dashboard but in our case we only have one page so we're just going to choose and. bath equals this page and most likely we're going to have a little bit of a longer conditional so basically I'm going to write if and then our first condition so if the path is this page and here we want to check if is requesting is false and r. getet user. okay is also false I believe that my condition is correct we can check again otherwise we're going to return false okay so if the request is not currently requesting and R.G user. okay is false okay let me see if I wrote that correctly okay seems like I'm not getting logged out and okay here I have to write also return okay something seems to be wrong with my logic let me just check quickly okay would just this work okay let's check all right seems to be working so R.G user. okay perfect and now let's set up also log out and let's try to rerun this logic if we are logged out so I'm going to create a new request log out okay super base method sign out okay I'll rerun this request and now we're going to try to refresh the page and I'm supposed to be redirected to the login page all right so the access control rules are working basically so if if I try to log in I get redirected to the page here I can stay on the page if I log out I don't have a logout button but if I just run the request and I log out and if I refresh the page I'm being redirected to the login page now that we set up our authentication we just basically have to configure our to-do list to work with superbase and the coolest part is that we're going to set it up so that it works with real-time data so let's log back in and here we already set this up that we can submit a goal like so or make a pizza and after the create to-do list request finishes from open AI a list is going to be generated of tasks that need to be completed okay so we got our test but it seems like I deleted the logic that were that was creating the list okay it doesn't matter but let's set up the logic that uh connects this form over here to super base all right so we need to create for our tasks first a table inside of super base so we're going to head over to superbase we're going to go to table editor and here we're going to create create a new table we're going to call it tasks and now we have to add here the columns that this table is going to have so we're going to have a couple of columns we're going to have um first of all the task name is completed this is going to be false by default here we're going to choose Boolean and task name is going to be a string of text okay and we should also add the user so here we can write U ID like user ID and this is going to be a uu ID and here we're going to select o. uid so why do we need this this is the user field so basically each user gets a unique identifier and we're going to need this in order to make sure that each user that's accessing this table is getting only the tasks that they created all right so now we're going to hit save and for now we don't have any row level security policies but we're going to activate that in a little bit I'm going to get into the details about roow level security in a little bit but for now we can just try to submit some data to it and also let's enable realtime data so we're going to create a new request we're going to call it create task under app we're going to choose super base method create item and here we have to add our table which is the table that we just created called tasks and now we have to add data whenever we're creating an item we have to add data to that item in our case we just have the task name like so and the value is going to be the name of the task that's being submitted to the form so we're going to write this return F form to do task name cool and now we have some data already in that form we can try submitting it and we can see here that it violates our row level security policy for the table tasks so what we have to do is go to our superbase table we have to create a new policy because right now there's no policies here and these policies will allow each user basically to access his or her data basically so here we're going to get started quickly from a template we're going to choose any of these templates where the user has to be authenticated we can use this as a starting point and now here under allowed operations we're going to select all because the user can create items delete items and so on so enable all actions for user based on user ID okay and here we're going to copy this same value down here as well and this just means that the user that's currently authenticated that's submitting the item basically or reading the items has to be the user um with the user ID I believe that in our case it's uid let's try this first okay user ID does not exist we called it U ID like this okay now this has been successfully created and now we can go back to our super base instance we can try to create this task and we can see that a task has been created all right cool but although a task has been created we don't really see it so it's basically not synced with our database so instead of just displaying it on the front end let's sync all of this with our database so we are right now creating different items but we need to also get all the items that we have in our task table so we're going to create a new request we're going to call it get tasks under app we'll choose super base again and here we're going to choose get list under list we're going to choose tasks here in the table section and here we can also subscribe to real-time data this means that as soon as an item is added to our super base table it's going to appear here in our dashboard as well this is super cool especially if you want your app to work on multiple devices at the same time so let's say we are having a shared to-do app um in our team and whenever someone adds an item we basically want this change to be reflected across all our devices so we're going to choose here subscribe real time because of it and we're going to sort these items by a column and that's going to be the created at column okay cool now we can get the data we can see right now we have basically just one task and we're going to do a few things here so first of all whenever this form is submitted instead of just adding items to the array that we're rendering here on the front end we want to actually submit this item to our data so we're going to change our action that we created earlier so we have here this submit to-do form action and before we were just using a run function to add to this array over here so we're going to delete that right now on submit we're going to choose instead perform request and we're going to select the request that we created earlier which is create task okay now we have to also change the array that's rendering these items here on the page so instead of having basically this array over here we can actually keep it but we're just going to replace this with the value from our database so here we're going to delete this we'll get the data from our database and now if I refresh the canvas I should see the items as soon as I run my request so we just need to also ensure that get tasks is getting loaded when the page is being loaded okay cool I'm going to add a new action I'll call it um submit get tasks type is going to be event request finishes the request is going to be get user and I also want to make sure that the request was successful actually I don't need to do that because I have already the um redirecting in place but we could do it so I'll quickly just use R.G user. okay like so okay and under action I'll choose reform request get tasks sorry my bad the condition should be below so return return R.G user. okay like so and now if I just refresh the page the task is going to be loaded cool and also we subscribe to realtime changes so if I add a new task directly in the table with the same user ID I'll go to the table editor and you'll see now if I just add an item here I'll copy the you U ID sheare say hi to everyone is completed is false and The UU ID or the user ID is going to be the same user ID from the first item so now when we save this item over here this should be reflected here in our dashbo Port as well cool and if we create an item like make a pizza at the jungle Jam all right and if we add this this should be reflected as well so we can see here that uh it seems like we haven't submitted our request correctly so let me check that quickly okay create task okay what's happening okay seems like there was an issue with the IDS but uh basically if I submit an item here it gets added to super base and if I delete it it it gets deleted only on the front end but not on the back end so if I refresh the page you can see that all the other items have been added here as well okay so now I basically need to change also the order of these items how they're sorted because I can see here that the last tasks that I created when I refresh the page are at the top and I want them to be at the bottom so I'm going to go to our get tasks uh table or request I should say and I'll change it up so here under sorting I'll choose ascending and this should be correct now yeah perfect now we have to set up delete functionality as well and changing the state of is completed for each item so let's start with the delete function so here we have remove item on click we we are basically just removing the item um from the array that's loading the items on the page but we don't want that we want to run the request actually so here we're going to choose instead of run function perform request and we have to set up delete request all right so we'll go here under request we'll call it delete task super base delete item table tasks and the record ID is going to be the ID of the item so we can see here in Array we have always the item id as well so here we're going to return v. array V do I do ID okay and we're going to run this request in our remove item action so here on event click we're not going to execute this run function instead we're just going to perform our delete request delete task okay okay I'll refresh the convas see the items again and I'll try it out and I can see that the items get deleted in real time as well and they're also deleted in the database so we can see we just have two items left and now we have the setup is completed so for that we're going to create an update item request under app we'll choose super base we want to update the item table tasks return V array P DOI do ID so this is the item that we want to update and one thing that I'm not sure about is if we just add one field is it going to just update that field or do we have to basically copy um all the values that are currently set so let me check that quickly so I'll write here is completed and we'll set this to True like so let's see what happens in the database okay and we can check here okay actually we didn't do anything my bad because we didn't uh execute the request we just did that on the front end okay so we need an action to actually update this because right now we're just updating the array variable we don't want that we want to actually update the item in super base so we're going to find this action here this one that toggles the state that's for the visibility and we have here set completed state so instead we want to perform our request update item okay let's refresh the canvas and let's test it out okay and it seems like our request is getting reflected in the database so I'll refresh the data and we can see here that the state changed to True cool now we have deleting uh we have creating requests creating different tasks but we cannot toggle this state over here so what we want is to change this state basically to the opposite of what it is currently because we want to toggle this so right now on click we are completing a task but we don't want it to just be completed we want it to change whenever this item is clicked so we're going to go to our request again and we're going to change it up a little bit so here under update item we're not going to return true but we're going to return the opposite of the current state so here we're going to write v. array v. I dot is completed and we'll add an exclamation mark in front so we're doing the opposite of that all right let's try it in action and there we go now we can simply toggle the state and the changes are reflected in our database straight away and that's basically it our app is basically completed so today we covered quite a lot of ground we started with authentication we set up our signup and login flow then we moved over to syncing our data with our superbase instance and finally we learned how to work also with realtime data in WIS thank you so much for jumping in and I'll see you in the next [Music] video

Channel: Wized

Views: 1,785

Keywords: Wized, Webflow, AI, Web App, APP, AI APP

Id: 1vnguGJ2-E0

Length: 43min 48sec (2628 seconds)

Published: Tue Jan 02 2024