Learn @Supabase — Full course for beginners [3 hours] 2023

hello everybody and welcome to this course about Super Bass I'm really excited to introduce you to my favorite product of the year because it's been a long time that I was waiting for a product that will do the same as Firebase but with postgres and so SQL Super Bass it's an open source alternative to Firebase and other Firebase users since many years I was waiting for that since a long time with Super Bass what you can do basically it's to create tables but also you can have an authentication system a storage system and everything that is provided by postgres on one click you can create a backend as a service and that's really great for people who wants to create project really fast but also with Super Bass you can create projection project because Super Bass is built on top of postgres so you have all the benefits of postgres and also you have all the benefits of a real backhand because you can use also the real time and you can use for instance the edge function so in this complete course I'm going to teach you how to deal with Super Bass to create a backend on one click and to launch your project right away or to choose the best alternative for your clients for instance or for your startup here is the program of our course first we are going to learn how to create a project so how to sign in sign up how to plug it to your application for instance then we are going to look at the tables because Super Bass is built on top of postgres so of course we can create tables and everything that is around it policies uh roll-level security etc etc so there is also a chapter on row level security to understand what is it exactly and how to use it there is a chapter also on authentication or to deal with authentication because Super Bass has a full system to deal with authentication and with the SDK it's so fast to install we will talk also about user management recover password email templates and email templates this is something that I love about Super Bass when a user is going to sign in or sign up it will receive an email automatically from Super Bass you don't have to do it and you can work also on the templates of those emails we will enter in the real subject of using a backend so we will talk about raid insert delete or update elements rows in your tables but also in storage for instance we will talk about subscriptions we will talk about relation between table because it's SQL so we can do relation with Super Bass we will talk about functions triggers schema so storage logs because it's a backend of course we want to know if something went wrong we will want to have some feedback and we're going to use for that the logs we will talk about extensions real time Edge functions and we will see that H functions are really useful and finally finally we will talk about web books which is really really cool to use because for instance every time you're going to add some data to a table you want to perform an action we can do that with WebEx it was an example we can do way more but we are going to see all of these together so if you are ready to create a project with Super Bass right now and to learn everything you need to know to create a backend as a service in some minutes let's go let's work together on that welcome to this new course about Super Bass I'm really really excited to introduce you to my favorite product of the year why because actually Super Bass is a backend as a service on one click and it really helps you to bootstrap your application really fast so what is Super Bass as I said it's a back end as a service it means that you can create a project on the platform and actually you can have a notification system that helps you to deal with all the providers such as Google LinkedIn GitHub whatever and you can actually help on your front-end application to log in through those providers but also there is a database and this database is running on postgres and you can create table make relationships triggers everything that is around postgres because Super Bass has been built on postgres so there are really big fans of postgres and everything that is available under postgres is available on Super Bass but also with Super Bass you can have Edge functions that helps you to run some application on the backend side such as a dino server for instance you can have real-time subscriptions also of course there is Storage and one of the feature that I like the most is that you have a documentation that generates depending on your table all the code that you need for your SDK on the front-end side but we are going to see all of this in this long course about Super Bass and I really hope you're gonna enjoy so basically when we arrive on the website of Super Bass we have some explanation of what is Super Bass you have some testimonies and Etc you got some code and we clearly see that it's really easy to implement really fast because you just have to install the SDK or Super Bass use the create client and then you can use it and there's a lot of other things but what we want to do we want to create a new project right away we want to have our backend as a service under super base so to start it's totally free okay it's free and up to 500 megabytes of database and one giga of file storage so we have a a big size that is available on us on the hard drive to build a project okay so to bootstrap a startup it is really ideal that's the best you have also two gigabytes of bandwave etc etc 50 000 monthly active user etc etc if you want a GoPro on Pro you have a bigger database of course and you have more services for only 25 dollar per month honestly for this price this is the best deal ever you can have because you can have an almost unlimited I mean 2 million ad function invocation 100 000 amongst the active users and this is really big etc etc so to start Super Bass is free so what we're gonna do we are going to click here on the top on start your project and we are going to create immediately our project so when you click on sign up and you arrive on get started there is two possibilities you can either log in with GitHub so it will be related to your GitHub instance otherwise you can add your email and password so what I'm going to do me I'm going to connect with an email and a password to have a fresh instance on super bass once we are logged in we arrive on a dashboard and on this dashboard you can find the project but also the organization so you can have several projects on the free plan you are supposed to have maximum two projects and one project contains a whole actually project of Super Bass with everything inside so the authentication the database the storage etc etc you can have also several organizations and on those organizations of course we understand that we can have several projects also you have everything that is related to your account the preference the access token you can log out you get the API reference also but we are not going to wait that much we are going to click on new project because we are here to create a new project and this is where we are going to set up everything so I arrived here on this uh pop-up creating a new project and here I can select my organization also what I can do is to put the name of this project so I can put my new Super Bass project okay and I'm supposed to have a database password okay so basically this password should be very strong because it's supposed to be for the database this is why they provide to you here a button generator password that you can use and what I propose you to do is to copy paste this password somewhere okay so you get to keep this password it's really really important also there is the region so here we gotta create actually an instance and on this instance we have several regions several servers that we can check I'm going to stay on North Virginia and down there you have the pricing plan and that's what we saw before you can choose the pro or you can stay on the free so for this demonstration I'm going to take a free plan even if on my own instance I got a Pro Plan here we can work with a free plan to show what is exactly Super Bass and there we go my project has been created so we see here that it's setting up the project on the server once it will be done we will get access to all the features of Super Bass that are here on the left so we can already see that we have a table editor so we will see that just after the SQL editor so there is an SQL editor there a database an authentication system the storage The Edge functions the reports the logs the API Docs and down there we got the project settings here on this page what we've got we've got a link directly to documentation there so if I open the documentation here I arrive on everything that is related to Super Bass and how to use it and this dock guys is brand new thanks to the Super Bass team it's a really really nice Dock and it's really efficient at the same time so you get guides if you want to integrate Super Bass with react nextgs flutter because Super Bass works a lot with flutter view solid GS velkit etc etc you get also documentation on database art storage real time so super bass thought about everything they are making a product for people who don't want necessarily to create a backend or work on it on just having the skills to do it so they design and they wrote a very nice documentation that goes straight to the point so if you want to have more information next to my courses you can click for instance on here on database and down there you get a lot of examples of the tables that we are going to see after on how to use the database if you want to go too hot it's exactly the same you even have videos and here there is the CTO and Wilson that is talking to you about Earth here we see that we can log in with email magic Link phone social login etc etc okay there is a lot of documentation like this we can come back to it later and there we go back on the project we see that we have an analytics part on the database request on the authentication storage and stuff so there is also inside the product an analytics part that is very interesting to have an overview every day on your product if it is working or not etc etc if you are using different client libraries you also have guides about it on JavaScript python or flutter of course everything here is really clear to handle and if I go on table editor we can see here that we can create tables that's what we're going to see in the next lesson there is an SQL editor but of course Super Bass know that not everybody knows how to work with SQL so they build a very smart system for me that is a script system that helps you to actually create a script with a starter actually this is the starters that you can use if you want to have a script on show extensions an incremental field value to add a colon of course and there is even a user management starter that is very very useful and that maybe most of you will use because if you don't know postgres and if you don't know how to write SQL you will maybe have some trouble to deal with creating a user management system you can just click on this and there we go it creates for you in the SQL editor all the command to create your table's profile and also it's creating a with the raw level security and we are going to come back on this later it's creating all the policies that are locking the access of your database if you want that your tables are not public you can use policies that are there otherwise if you want them to be available for people that are authentified everything has been fought to make your life easier okay also you get the database here tab when you can access tables triggers function extensions etc etc you get the authentication system that we are going to see also with all the providers and look with Super Bass you can offer to your clients to log in with bitbucket Discord Facebook gitlab there's a lot of options there there are also email template things that helps you to deal with somebody is going to sign up or if you are going to invit a user because we can invit people a magic link that helps us to log in without a password that is amazing the change email address the reset password you can go to storage and on storage here it's all about the assets image documents whatever and there is also the edge functions there is the reports because there you can create reports about your back end you got the logs and of course the logs for an API it's really really important and finally you get the API documentation that here it is going to generate for you all the code related to your tables you understood Super Bass is a complete product that is amazing I could talk during hours about it it will help us to bootstrap a product this backend as a service will save us a lot of time Super Bass is working with postgres and with postgres we can create databases those databases are made with tables so we are going to create now a table and I'm going to explain to you everything you have to know about tables so here I can click on table editor here on the left and when I arrive there is no table yet of course because we didn't create any table so we are going to click on create a new table but before if you look on the right on the left sorry we can see that we got a first option which is the schema and if we look at it we see that we have different schema so for now we are going to stay on the schema public and I will come back later to explain to you what are schemas so you can create as much table as you want and all those tables will be displayed here on the left a table what is this well actually a table it's a simple table with rows and columns and they are going to Define some kind of business logic or some kind of data it will Define actually the model of what you want to create so we need to create tables to store our data so I'm going to click on new table and we see here that I got this form that is opening on the right and here I can start to create my new table under the public schema so first I gotta give a name and this name I suggest you to write it in cam in a snake case it's really important so what I'm going to do here I'm going to create several tables with several models and the first table that I'm going to create is a table clients okay I want to store clients and on the description I can put a table to store my clients all right so we have the enable row level security that is checked and it's returned recommended so enable raw security we will have a full listen on it it is restricting the access to your table by enabling this mode so basically with the row level security in your table your database will not be accessible until you will write policies on postgres so we will need later to write policies to make our table accessible so we are going to let that check we are not going to enable real time the enable real-time option is to broadcast the changes on the table and we are going to start right away by creating the model of our clients so we can see here that we've got a little editor and we've got columns with name type default value and primary and also we've got this cross to just remove this element and we've got options here when we click on it we see that we got extra options here this is the the model of your data all right so you got to create columns to define the model of clients also what you can do here we see that we get an option to import the data via spreadsheet all right so let's create the model of our clients there is an ID here and we can see also that it's snake case convention and what I can do is I can change if you want the name and later we'll add new columns yeah I see that I get a little button when I click on it we see that it's to add a foreign key for ID so we will also look at this later what we want to do is to create the model for now so there is a type and when I click on type we can see that super bass is providing to me all the postgres data type that I can add to my specific row so here it's ID so we can see that I get integers floats numeric Json text uuid that date and timestamps and of course booleans so here I'm going to choose uu ID and if I go on the official documentation of postgres on postgresql.org I can find that postgres is providing to me functions that are generating different kind of uuid and here we can find the function that is integrated to Super Bass the uuid generate V4 that generate a version for uuid which is derived entirely from random numbers and by extension in Super Bass with get function that help us to trigger some generations or some actions so here I'm going to click here and it's going to be the primary key so for those who don't know postgres the primary key this is the key that is going to help us to index our element and to find it through the postgres engine all right so our client will get an ID there will be also a created ad which is a timestamp and here we can find again the function now so now it's again a function provided by postgres to give us the current date and time all right however this client will have more than this any I would like to add actually here a new column it will be an email column and I don't get any type email here so what I can put is text okay I want to add a text and there we go however the thing is that I want that on my database client every client here should have an email if there is no email I want to prevent to enter a client I don't want to have to have a client that is generated without an email because I cannot identify him only with the ID I would like to identify him with the email so what I can do is to click here and when I click here we see that I got these extra options open and I get the option is nullable so when I check this I allow that email would be null on insert and that's not what I want so I'm going to remove it and also I want that this email would be unique because on my list of clients I don't want to have different clients with the same email I would like to prevent this I can do it so if I want to add a client without an email I will get an error and if I want to add a client that is already in my list I will have an error also so I'm going to click on this there we go I got an ID I created ad and an email all right so let's say that we are going to stay on this for now I'm going to click on Save I'm going to save the tables client it's going to add the three columns to the clients table and now there we go our table clients is good to go so we are ready to use it and we see that it takes the form actually exactly like a spreadsheet so we got columns and we can insert elements and also what we got here we see that we get a plus if we want to add a new column to our model it's all of course possible congratulations you get your first table clients we've got several options we see that we get refresh which is very useful because we don't want to refresh all the browser we can refresh just the table we can then filter sort the client so let's imagine we will have thousands of client we can do it right away on Super Bass and this is something that I like we can talk about it for a second this is something that I like a lot with supervisors that it's visual so when you are building a company and one once you have a back end you must have a back office for your company a search as for the marketing department for um the clients everything that is related actually to non-technical departments well with super bay is your marketing department can come here and look at the data when they need something instead of requesting all the time uh actually the backend developer to to have the state of the data so it's very useful you don't have to code it it's right away there what I'm gonna do I'm going to click on insert and here we see that we get two options insert row an insert column so inside column it's exactly the same as this plus there so I'm going to click on insert row and there we go I got a new form and here we see that I can insert a client all right so what I'm going to do I'm going to click on Save right away I'm not going to fulfill anything and what's going to happen of course is that I'm going to have my first arrow on Super Bass violates not new constraint remember email of clients cannot be known so I have to enter a value so what I'm going to do I'm going to enter a value so it's going to be called with Geon at gmail.com there we go and on the uuid I don't need to put anything the function is going to generate it for me as well as for the created ad and there we go I got my first entry inside my clients table let's say that I'm going to add a new row and this time it's going to be and Wilson at superbass.com I'm going to save there we go I got another one so as you see I can later consult here my um actually my um my data and changing right away because under this I'm totally super admin so I can change everything and here I forgot to put actually I forgot to put one column so I can click here and add a new colon and this one is going to be is active and the description will be defined if client is active Okay I can add a foreign key relation we're going to do it later and as a type I'm going to put Boolean all right and it cannot be null and by default is going to be on true what's going to happen here and when I'm going to click on Save is that it's going to add okay the column is active and put the default value to all the members all right good now let's say that I'm going to try to add a new client but with the same email I'm going to click here I'm going to type this and when I click on Save I got another error which is totally legit it violates the unique constraint clearance email key because Andrew is already existing inside my database okay we've got the table clients now let's create a new table and this one is going to be a table orders orders by the clients by clients actually there we go we enable row level security we do exactly the same I'm going to use uuid then I'm going to use the generated ad and here what I'm going to do I want to add a client ID for the future and this one is going to be uuid also and here I'm not going to put the generator because I want to fulfill by an existing client ID so here I'm going to put that it's not nullable because I don't want my orders to have an empty client ID so I'm going to save this ID created at client ID let's say that we're gonna have some kind of price and there what I can put is just let's say a numeric okay for now let's say numeric we allow it to be null for the moment and what I can have also with this as an order is client ID price we can say a lot of other stuff like such address and there here what I can put is actually a text okay here we Define the address because it's supposed to be related to the client but maybe the client will put a different address so if we store the address in the client we will have trouble later we want to relate the address to an order okay so address and let's put the ZIP code okay we've got the zip code and again I'm going to put the text of course I could put varsha the variable length character string but here I'm just going to put this ZIP code and city and I'm going to put this let's say text and there we go so we've got Clay on tidina and we need of course we need the name because if we don't get any name for the order it will be terrible so created that client ID price address ZIP code order there we go so I'm going to click on save so now I'm not using uh any SDK with any app so what I need to do is to take an existing client ID so let's say that I'm going to take mine so here I got an ID a uuid I'm going to save and to create my order I need a uuid so I'm going to insert a row and here I'm going to put as an ID this one there we go then as a price I'm going to put let's say uh yeah 20 there we go the address I'm going to say um one two three uh Super Bass Road there we go as the ZIP code a890 there we go City Super Bass and the name is going to be code with Guillaume and I can put anything I want here I'm going to save and there we go I got my first order with my clients that I can use for now so you see we can create tables really fast we can have as much table I just created those two tables as an example but just imagine that later you will have a lot of tables and we will succeed later to create relations between the tables to actually deal to actually deal with fetching the data at once and not fetching the clients than the order etc etc but we are going to see this after because right now our table is not active because we didn't edit the RLS policies the row level security policies it's time for us to talk about raw level security the security feature offered by postgres to allow the usage or the access of our database essentially it means that the user has to configure all the access by writing security policies to all the tables that are created to all the rows of our tables for example an administrator can create a policy to allow access to the table to everybody but to restrict actually to write on this table or to delete some elements on the official documentation of postgresql we have more information about raw security policies and I'm not going to read the old article you can find it on postgresql.org however we have some interesting text here that we can read together in addition to the SQL standard privilege system available through Grant tables can have raw security policies that restrict on a per user basis which rows can be returned by normal queries by inserted updated or deleted by data modification commands this feature is also known as row level security by default and this is the case on the table that we created tables do not have any policies so let's get back to our tables there and we can click here on clients for instance and we can click here on orders so right now we've got one holder and of course those orders they could not be fetched by a user that is not authentified and it could not be fetched by somebody else than the user that wants to fetch it so to write my first row level policy what I can do is either to click here on no active RLS policies either going here on authentication and go on policies and here we got the list of the tables and we've got the option concerning rollover security again if you want to have more information you can either click here on the rollover security button that we have here what is your level security and you got more explanation here on the official documentation of Super Bass here we've got the clients we've got the orders okay so let's create a new policy because for now we want to restrict the access so when you click on new policy you can do two things you can use actually the templates provided by Super Bass and this is very useful for the people who don't know anything about SQL or you can click on full customization to create a policy from scratch so I'm going to click on this at first and here we see that we have a form again and we can enter the policies name we can click here on select insert update delete all to select actually which is the operation that you want to do and you can also Target the roles so we can see here and we discover now that in Super Bass every user can have a role that we can Define okay so here we've got Anon so Anon we understand it's for anybody actually authenticated it will be for people authenticated through the authentication system and after you got other roles etc etc and down there you can provide a SQL condition expression that Returns the Boolean all right so if you know SQL it will be very easy for you to create your policy through here but if you click here on view template okay there you can have four template for now on creating policies so for the actually we are looking right now on the clients and on the template we see that here we've got one template that says enable read access to everyone so here we got the SQL template that gives this policy and it will enable the real access to everyone it says create policy policy name so here you're supposed to have the name of your policy which will be actually enabled in access to everyone on public which is the schema actually we are on the schema public and we created uh tables on the schema public dot clients which is the name of the table for select using with the condition true which means that anybody is able to select so to read every element of clients so if you want to do that you click on use this template and you will actually release your table clients to the rid of anybody it's like the unknown condition that's something we don't want to do on the clients then we have enable insert access for authenticated user only so here we've got another SQL query and we can see that this policy gives insert access to your table to all authenticated user only so it would create the policy again on the table clients for insert to authenticated which is the role okay with check true so we want to use this one so what I'm going to do I'm going to click on use this template and suddenly I'm getting back to the form of the full customization and it's totally fulfilled and we can see here okay we can see that actually what's happening is that it has fulfilled the all form with the insert authenticated role with a condition which is true so I'm going to click on review finally I'm reviewing the policy to be created on publix.clients and there we go I got my policy and if I click on Save policy here we see that I got one policy on client which concerns insert on authenticated so right now you can insert clients only if you are authentified alright we want to do the same with order so what I can do is to click on here on get started and I can do exactly the same because it's a template so now on order it will be only for people authentified okay however this is a problem what I'm doing now because I'm not sure that I want to create orders directly here like this this way the thing is that I would like to have later a trigger that will create an order automatically for this course I'm just going to click on review and save this policy because I just want to show you the example on how to add a holder directly this way from the front end but normally I wouldn't do this way I would use a trigger to do it there we go so now we've got the clients we've got the order and we've got our two policies and in the future as much tables you will have you will have to write all the time do policies concerning those table and you have to be really careful on that guys because you have to really deal with the fact that sometimes if you do mistakes your tables could be public and you don't want that so let's pretend that now I want to give access to everybody I want to give access to everybody to my clients so if I do it okay now anybody that could connect to the database would have to select publicly all the clients you will be able to read all the clients however this is something that I don't want to have so I want to delete and I'm going to click here and I'm going to click on delete you can of course delete your policies that's really really important so that's good but the thing is that I don't want that everybody could read the clients I just want some people to do it so I'm going to click again and of course I didn't told you but of also what you have to do is to deal with the update and the delete access to the elements so here I'm supposed to add clients through an application so I want to update them maybe I will have a button to click and click on modify exactly like I did before so if I click here I should add this condition and we can see that on the odd GW WT sorry I got this condition which is using expression that's so cool that's what I want to do I want to update with only the email actually that is related to the current actually element so we enable the update for users based on email okay I'm going to save this and I'm going to add this policy and of course you can add as much policies as you want I'm going to continue and I want also to delete I want to also delete actually the clients that I can have and here we see that we got something else we got this condition odd uid is equal to user underscore ID so I'm going to keep this using this expression there and I'm going to review and save the policy and here I got a problem because I don't get actually the colon user ID on my clients so I'm going to close this I'm going to get back I'm going to go on the table editor on the clients and here as I see I don't get user ID and that is a problem that I didn't solve at first is that many users will have their clients in the clients database but they are not related to a specific user ID so what I can do here is to add actually a colon user ID and this user ID will be actually the owner's ID of the client okay so what I can do there is to say it's going to be a uuid and what is going to be this user ID well I think it's going to be the user ID of the authenticated user so I'm going to save this I don't allow nullable and I don't Hello is unique because I can have several clients I'm going to save that and suddenly I have a problem because I'm supposed to have at least okay I'm supposed to have at least one user ID in the column and we see that right now it's null for a lot of them so for now I'm I'm clicking on allow nullable and it's going to work and there we go but what I should do is to fulfill the right user ID of those two clients which would be mine however I don't have for now so I'm just going to delete those two rows and I'm going to just come back after and when I will add a new client I would need this user ID to change my table I can go on database and on tables I go to clients okay so here I get clients I can click here on five columns and I got my user id there and I'm going to click here and this time I'm going to remove hello new level because in the future I really want this user ID okay so I got my user ID and now I can come back to write my policy back in the policy I'm going to click here new policy and what I want to do actually is to go here and the access that I had before it's this delete template so I'm going to use it but I'm not going to use it as delete I'm going to use it actually to select enable select for base for user based on user ID and actually here it's going to be automatic authenticated sorry every time I'm going to select clients from the table client it has to be related with my user ID what does it mean it means simply that our table clients will be full of different clients coming from you from me from any or anybody but it it's not possible that I can fetch your clients we want that you you can fetch only your clients and me I'm fetching only my clients so what we do we enable the select for you for clients so it's not usable based on user ID so I'm going to select the clients only on my user ID on authenticated and this odd dot uid function is will come actually from the authenticated session that we will have and then I'm going to click on Save policy and there we go I got everything that I need for clients I should do exactly the same for orders but I think you understood by this a quick exercise that you have to work on Raw level security if you want to secure your database if you want to secure your Super Bass instance and especially on tables where you don't want the public to get access on later we will see that if you get an API you can have a certain role to get all the access to all databases because here in this case we don't want our user to get access and to create orders we would like to have a trigger or an API to do it the rule level security help the administrator to create policies to secure your super base data base it is time for us now to look at authentication with Super Bass right now we've got two tables clients and orders and we've got row level security policies written however later in our application we would like to have some kind of authentication system that allows us to log in or log out from our session well with Super Bass it's totally possible to create an authentication system so when you click here on authentication you arrive on this dashboard and on this table and here we see that we've got a list of user with email phone provider created last signing user ID all right so here our table is totally empty up there we've got reload button and also invit and if I click on invit here I have a pop-up and this pop-up is showing to me an input with a user image so if I'm putting geom88 for instance at jobmail.com and I click on invit user Super Bass will send an email to invite this user to join and while this user will click on the button to join what you will get is just here a status of waiting for verification so as we can see the user here has been created so we don't need actually in Super Bass to create a table user here I mean you could do it for further information about the user and there is a template actually called user management a SQL script template that is creating a profile that a table to put more information but basically at first Super Bass is providing to us this here this list of users so right now we should go on this email and look at what superbay sent to us alright I'm on the email and here we can see that I have an invitation and I have a button that is click the invite however it says that I need to actually redirect to a localhost 3000 to validate my user that's what we're gonna do actually we will use a template A View application to display our authentication system so the user will receive this email we click there and it will be redirected to localhost 3000 however when it will be on production we will have to change this URL because right now we would like that this email goes to the production URL not localhost well we can do it here by clicking on URL configuration so you get the sit URL redirection of course but you got here the Ctrl that will be provided directly into the email now Super Bass give us the opportunity to edit the email template on several case and if we click here on invit user we can see that we've got the email template down there we've got several other options however I will come back to this later on another lesson on our application we will give the possibility to login with your email and here on providers we can see that we've got the email provided however we get several other options that allows us to give the possibility to the user to log in with other providers such as Google so when I click on Google we can see here that I have to provide a client ID and a client secret and I can click up there on Google enabled I'm not going to show you how to connect with all those providers but basically you have to go on the documentation of every of them and create an app on the developer site to get the keys related to The Connection by those providers so right now we've got this email that's good now we would like to have a front-end application where we could actually create a connection I have created for you A View GS free application with an authentication system in order to use Super Bass I didn't show you how to code it because on my channel there is already a video to code actually the authentication system from a vgs application to Super Bass I also have a video about this with nexgs you can go check it out but for now we are going to work with this application so right now I got a login here form and we can see up there that I if I change the url and I go on any other route I will never move from the main page so find the repository into the description and once you've cloned it you write it here and so it's a basic vue.gs free application with terrain CSS we have our Super Bass client here that is coming from the Super Bass GS SDK and again if you want more information about Hearth you can go on Super Bass dock on hoof everything is explained there to work with authentication me I did the whole work just for you so it will be faster video credentials to access to your Super Bass project you can go down there on Project settings you click on API and here you got your key your actually your secret key and down there you get the service wall that allows you actually to do everything so be safe take this one for the user and the URL is up there so remember if I go on here on the API docs I can go to authentication up there and I have the keys that I need or I have the elements that I need to set up the authentication itself okay but if I click on user management here we can see that we've got data uh super bass.signup and we can use actually we can use those elements to login so we can see also which is cool is that we can log in with magic link via email this is exactly what we did before we send an email and there is a magic link we don't need any password and we can log in just by email so what I did here is just to bind my values email and password to a model and I have a function login and it's really simple actually I'm calling Super Bass dot hearth.signup Super Bass it's the client that I have initiated here I'm cutting it directly from the SDK I'm calling dsdk with the function signup coming from the documentation with email and password so I put login here but actually it's sign up okay so I'm going to take sign up instead of login there we go I'm going to save get back I'm going to update and I'm going to click on sign in and for now nothing is happening however I'm going to get back to Earth and I'm going to reload up there and when I click on reload there we go I got my user there before going on the email I'm going to open my console and up there I'm going to click on confirm your email once I click I'm redirected directly to my application on localhost 3000 and I got here the user so we can see we got the access token we got the refresh token the token type and we've got down there the full user and I'm going to reload and we can see that now my user is not waiting for any verification so what we did in this lesson well it's basically really simple to understand we have a front-end application where we installed super bass and we are using this SDK of Super Bass and we initiated our client we are credentials okay and what we did is just to set up on app.view or on our main file the authenticated system that says that if there is no user we just show login if there is a user we show all the other pages and oh do we check this user by using the on odd State change from coming from Super Bass SDK that returns a session to us immediately so we don't need to set up any token we don't need to do any art with a GWT token because everything is already done with the Super Bass SDK so we actually win a lot of time we save a lot of time by using this SDK we don't need to work on the authentication system Super Bass is dealing with it and it is recording for us automatically our users on the example with the authentication I just show you to sign up of course you would have to create a second form which will be about login because if we look at the documentation and here on the user management side of the documentation on API docs on the left we can see that we've got a user sign up method that we used but also we got down there a user login so of course you would have to use a second form I didn't do it in the template but you can do it which is really cool with Super Bass is that the user management is super easy you have several ways to sign up or log in your users and basically we've got here a quick explanation super bass makes it easy to manage your user Super Bass assigns each user a unique ID you can reference this ID anywhere in your database this is why we created before on the tables listen a colon with user ID because when we will log in as a user we will get our ID and we will store it into our context into our session and we will be able actually to use this user ID to fetch data from the tables so here we've got the user ID that is available okay so what we can do we can sign up we already saw it before we can log in with email and password we can log in with magic link via email so this is really the my favorite feature of Super Bass is that you don't need to worry about storing crypted passwords or stuff like this which is a very bad practice in my opinion but what you can do here with Super Bass is just to log in via email and it's really easy so how does it work because I got this question all the time well actually you send a user a passwordless link which they can use to redeem an access token after they have clicked on the link all interaction using Super Bass GS client will be performed as that user and which is cool is that you don't need to code your own system to store your access token inside the cookie or in local storage or whatever you don't need to do it the SDK is going to do it for you which is really really easy to handle and at the same time it's really Pleasant because with the on odd State change method that we are going to see just after again it's going to work by itself you don't need to do anything you do not need to write extra code like all the time which is boring and you save a lot of time you can also sign up with phone and that's a cool feature you can log in Via SMS you can verify an SMS and down there you get also other option to get the user to actually to get a forgotten password email that we are going to see after update your own user here however to get more information about the user you would not store them here but in a table in a third table like a profile table for instance and you've got of course the log out there so if I get back to my application and if I update okay what we can see is that actually every time I'm logged in my on odd stage change function is sending me to the main uh actually to the main page so what we would like to do is to sign out so you can use all those functions to create your own system you can either propose the option to for the user to invit other users down there me what I want to do I want to log out so I got this Adder up there and what I'm going to do I'm going to just create this quick function call logout so it's going to be actually it's going to be sign out which will be an asynchronous function and it will be trigger on click on this button sign out so here I get sign out there we go so I got my Super Bass instance which is there so I'm going to import Super Bass from actually here at Super Bass there we go and what I just need to do is to go here and to copy paste this piece of code so I'm going to move this this way there we go I'm just going to copy paste this so I'm going to put here my sign out I'm not going to handle anything it's just to show you I finally implemented the authentication system that I wanted I have the login form and I got the sign up form so right now I'm an existing user so I'm going to click on login and what's happening there is that I arrive on my application and I'm logged in now I'm going to click on sign out up there and when I click on sign out there we go I'm logged out so I can try to go on any page I want it's not going to work you can find this template in the description we see that with Super Bass we've got a very easy user management system that help us to implement the authentication that we want a very common case is to forgot your password and Super Bass as a method to help you to recover your password on the official documentation we've got forgotten password email here and we can see that we have this method reset password for email we only need the email of your user to recover the password however how does it work well it's really easy you have first to get a recover page so here on my application on The View application that you can find in the comments down below you have here a recover page and on this recover page which looks like this you've got an image to enter and a send method I'm using this method here reset password for email and it's going to trigger uh actually an email that is going to be sent from Super Bass to the current email okay then once logged in you should direct the user to a new password form so basically from here when I'm going to enter my email and we can look a little bit at the code what I did here I just looked at the validate email method that we've got so if you go on the composable we've got this method that help us to check first if it's an email or not so if we get here and we click we see that we've got an error if we don't enter a basic email also if we try to trigger it with something else it's not going to work here it's going to work so I'm not going to trigger it it's going to call reset password for email from the model that we've got down here so we will receive an email that help us to recover the password however this is not the end of the process actually before you should create another route and this route is supposed to be an update Route so basically here we've got this view which tell us to update our user and it said here you should use a update user view below to save the new password and down there we've got this solution we've got this update user method this update user method should be in another view then your recovery View so I'm just created under the profile folder an update view which does exactly the same as the recover except that we call the update user method and we pass the email and a new password all right so basically it does almost the same but here this is the view that will be actually in the link of the email so we need to change the link of our email so what I'm going to do I'm going to go on email templates here and I'm going to go on reset password because this is where I want to lead and remember me I got a specific pass and on my application the specific pass is profile slash update if I go on my router here my update profile so my update user is on the pass profile update so remember the confirmation URL and I will make another listen just after on this here leads to localhost 3000 but me I want to go on localhost 3000 slash profile slash update so what I need to do is to put here on my reset password slash profile slash update because the link on my email has to go to this pass later we will change the confirmation URL for the projection URL so what I can do here is to use the email of the current user or if I want I can click here and click on send password recovery so I'm just going to copy paste this and I'm going to use my app of course because I created it for the for this so I get back here I'm going to put this and when I click loading successfully reset password so I'm going to go on my email I'm going to update and I just received an email and I got a click here and when I'm going to click here we are going to look at the pass I just opened my URL and as you can see I've been redirected immediately up there so what I need to do here is to type the same email as I had so I had this one okay yup made.com and under here I'm going to put my new password okay I'm going to click on update and there we go I am successfully updated in short I have a recover page with the method reset password email I enter my email I click on send it's going to send me an email but before I need to go on reset password on the authentication email template Tab and put the link where I want to lead my reset password link to once it's done I receive an email I click on reset password on reset password I arrive on the page to update my password I can click and save my new password on every applications it's always the same when we had users we want to send an email to say hi welcome or when they subscribe we want to confirm their sign up another case when we recover the password we want to send an email to recover the password and lead to the front-end application with Super Bass we can do that inside our dashboard and we've got the options just here so right now I'm on the authentication tab where I can deal with all the users that are recorded inside my Super Bass application I can also invit some user if I want with their email but what I want to deal with is this email templates and which is really cool with Super Bass it's that here we've got access to the template of five different email cases and we can insert our own HTML with here we've got our variable that we can use and of course some very often we need the confirmation URL we've got a pre-written template and that's really cool because Super Bass here for instance on confirm sign up is going to send automatically this email to the person who is going to subscribe to the application another case if we Envy the user we've got some text already written here with the confirmation URL for the magic Link login it's the same for the change email address exactly the same and for the reset password also so what I propose you to do is to try to still is a little bit the confirm signup email the invit user and we will see how it looks like to actually display a nice email to send to our users as a mailbox I'm going to use yupmail it's a fake mailbox that helped me to catch some emails these emails actually are deleted every day every 24 hours so this fake mailbox will help me to subscribe to a fake user so on the confirm sign up here we can see that I have a template with a variable confirmation URL and we've got some help here about the variables that you want to grab maybe sometimes you will need a token the token Ash the city URL so the URL of your seat or maybe why not the user's email okay so me I grabbed a quick template of the email that I'm going to send as a confirm sign up and I'm going to go down down there in the editor and that's really cool to get this editor I'm going to copy paste this and there we go so what I need to grab is this confirmation URL just here so I need to confirm the sign up okay so what I'm going to do I'm going to change it with here there we go so I got my confirmation URL here and I'm going to remove this and there we go so now when a user is going to subscribe okay you will receive this confirm sign up all right but right now I don't want to use the application so I'm going to use exactly the same here but for the invit because with here with my users table I will be able to invite myself through fake email it will be faster so I'm going to get back to templates here and I'm going to go to invit user and I'm going to copy paste the exact code so I'm going to change and I'm going to put you have been invited exactly like up there thank you to confirm okay I'm going to change this text a little bit because I have to be clear on what is this invitation you have been invited to create an account so I'm going to change this an account and an account on and here I can put the URL so actually I'm going just to grab the same text and be safe of course about the text so here is not confirm your sign up but here it's going to be this there we go and on my button I'm going to get on the button text it's not going to be confirm sign up so sorry about that I'm going to put it like this there we go I'm going to say create an account there we go and after on the text is best regard if you do not initiate this sign up please disregard this email I can remove it okay there we go so I got my uh email there and I can remove the previews template because I want to have only one template so as you see you just have to write some HTML here and to insert your configuration URL variable and what I did me I put some CSS because I want to have something nice okay um you have been invited to and here I can put code with Geon okay there we go so I'm going to get down I'm going to click on Save okay all right successfully updated so I'm going to get back to users and I'm going to invite a fake email address so it's going to be fake emails super bass at Yahoo mail.com so I'm going to save this fakie made super bass at yorkmail.com there we go and here we see waiting for verification so I'm going to go on my email I'm going to put my fake email at this fake email superbase shopmail.com I'm going to click on this and there we go I got my email with the design you have been invited you have been invited to create an account on blah blah blah so localhost 3000 of course this is wrong we should later change the url of course create an account best regards okay so basically if I click here what's going to happen and there we go it worked my fake email super bass at Yahoo mail.com has been recorded as a user I'm going to get back to my template so what we did is just the invite user but we could do the same for the magic link for the change email address for the reset password the confirm sign up and there we go if you are looking for email templates you can either ask chat GPT to write one for you in HTML and CSS or you can browse online and find the design that you want when a user is signing up to your front-end application or if he envites a user to join it for instance well there is a redirection that is triggered from the button in the email and actually you have to deal with the URL confirmation this variable that we can find in the email template we saw previously that we can inject this variable inside the email templates of different cases however this URL has to be changed once you are in production because for now what we've got we've got this site URL here which is my locals 3000 and you understood that in production localhost 3000 does not exist you need a website so configure the URL of your site this is used for password reset email and other links well this URL configuration side is very important for super Basin especially for you when you are going to deliver your application for the clients in production so what you need to do is when you deliver your application and you want to redirect immediately from the web you have to change this website URL so I give you an example for instance me I will have a website one day very soon call called with geon.com and I'm gonna use this instance of Super Bass to trigger this redirection on password reset or on confirmation signup I will have to change this website URL to change actually the variable inside the email template down here all right that is the first case of the URL configuration another case is the redirect urls well sometimes you need to redirect some URLs on post authentication for instance as we see down there so basically you can click here and add a domain to redirect on authentication services so this concern the redirect URLs pattern however for most of you here you would need just to change the site URL to the production URL it is time for us to look at the core feature of Super Bass which is actually to read insert delete or update elements inside our table okay so right now on I'm on my Super Bass instance and I currently have one table called holders and holders is composed by an idea created at client ID price address ZIP code city etc etc so what I would like to have is a set of fake holders to start so what I'm gonna do I'm going to go to my SQL editor and I already prepared a fake script to insert fake orders inside my table we will insert all these fake orders inside the table orders and later what we're gonna do we are going to use the SDK of Super Bass to fetch all those orders here and what we will do also is to do some operations on on them so we are going to read them for sure then we will try to insert a new order then we will delete some orders so let's go on my SQL editor right now I have created a new query and I'm going to rename it it's going to be insert 10 20 sorry fake holders okay so I'm going to rename the query this way and there we go and here I'm just going to copy paste a list of fake orders that I have created based on my model so my table orders is composed by colon address column zip code city name ID client ID and Creator and there we go success no row returns it means that my query didn't fail and it worked I'm supposed to get right now all the orders in my table orders I'm going to go to it and there we go I got fake orders we are missing the price for now so it's a mistake but we will be able maybe later to change it now I got all those fakeholders what I'm gonna do and remember on my view GS app right now I got the SDK installed and I have my session I'm logged in so what I'm gonna do first I'm going to check on my database and we never know I'm going to check on my database if I got the row level security okay so I got enabled row level security okay and what about the policies of it so I'm going to get back to the table orders here I'm going to click up there and we see that I got one active role ever sign treaty so we can see that we enable the insert for authenticated user only however I want to grab them click on new policy I'm going to click on get started and here we are so enable read access to everyone it's not exactly what I want what I want is to select only if you are authenticated later we will work maybe on adding a colon with the user ID to know who created the current order and to manage only the current user to grab is orders not the orders of somebody else so I'm going to click on review I'm going to click on Save policy so to authenticated Only Rule and I'm going to save that and there we go so now we see that we can select the orders for authenticated all right so now what I'm going to do I'm going to click on API docs down there and here what we got is that here every time we are going to create a new table we will have all the code generated by the SDK from tables so here I got clients of course but here I got orders also so I'm interested in holders and here we see that we got some code that we can copy paste directly inside our application to get our orders okay so here I'm not interested on getting only one key what I would like to have is to have all the orders okay so let's say that I'm going to grab this I'm going to copy this there we go again if I would be logged in as a user to grab my orders what I would do as a super admin I would tell in the policies to be able to grab only my orders okay back in my application what I can do is to import Super Bass okay coming from Super Bass there we go okay so it's my Super Bass instance which is here with my create client and what I'm going to do at first is to create a function okay so it's going to be fetch orders which will be of course an asynchronous function in here I'm going to create a try catch function and inside I'm going to catch the row so I'm going to console log my arrow and if there is orders I want to console log them so I'm going to console log my orders there we go what I'm going to do here I'm on vgs but it's going to work or so on react next as well kit whatever I'm going to launch this function here and let's go so here it's not an asynchronous component or whatever we don't care for the moment we just want to look at our orders and look at this there we go I got all the fake orders I had before without the price and as we see here we've got all the data we asked so as you see here just this piece of code and using the SDK of Super Bass is helping me to grab actually a table and to select by using select here from holders to grab all the orders that I wanted okay so let's say now I want to grab only for instance I want to grab only the name okay and the ID instead of putting the store I'm going to put the ID and let's say that I would like to have the name okay so let's get back let's uh let's look at it and look at this we are selecting only the ID and the name which is really really cool because sometimes we don't want to grab all the data we would like to be fast and just to have some elements of the orders so here I'm just selecting the ID or the name for the foreign table I will do another video about it to explain deeper how we can grab some data from another table based on a specific column okay so also what I can do which is really cool is that I can work with the pagination with range so here I'm just going to grab this and I'm going to get back and instead of having the ID and the name I'm going to grab all the orders I'm going to take range here which is a value that I could change for instance with here pagination and because I'm on ugs I'm going to put ref here okay so I would need to import ref from view in my case there we go so here I got pagination let's say I'm going to put pagination here so pagination dot value there we go and when I get back and I update what's going to happen is that I got from 0 to 9. imagine later I want to do an infinite scroll on all the orders what I would do is that at first I would grab the 10 orders I would scroll down and what I would do is to store those orders into an array and then with the pagination I would just increase this number to fetch the new orders coming from 10 to 19 for example what about filtering so here you got a lot of examples on how to filter okay on how to filter your orders so let's say that right now let's look at it and here I got Michael Michael Johnson okay so let's say that I'm going to grab this name Michael Johnson here okay and let's say that I would like to have the order uh of Michael Johnson so right now I only got one but what I would do is coming back here and using a point equal so I'm going to go here and here the colon will be name because on holders I got a column name and let's say that I'm going to put Michael Johnson as a result I would like to have only the orders of Michael Johnson for any reason so I'm gonna get back here I'm going to update and look at this I got the order of Michael Johnson so I used dot equal to do it all right I could use also greater than so greater than would be for instance if I would have a number because right now I don't get any price in my in my order what I would do is actually to put the current price greater than and I would put the number and there's a lot of other option less than greater than or equal to less than or equal to case sensitive so here it would be very nice to try another comparator would be is here we could see that we want to match the columns in order that would be none so actually I would have all of them because right now it's a problem you could use in to do some comparison on a colon with another with array values so here you would put an array and here you would do some comparison etc etc so you can find this in API docs filtering here and you get a lot of options to deal with uh some filtering on some columns all right I got a button here insert fake order I'm not going to put a full form you can do it it's really easy and when I'm going to click on it I'm going to insert a new order so I'm going to pass to 20 record down there okay so I'm going to insert a new order so what I need to do here is to grab the function to insert a new order so I'm going to get back here and instead of having all of this I'm going to use exactly the same so here I'm going to copy paste this function here and I'm I'm going to not trigger fetch holder here but to trigger it on my button so down there I'm going to type on click insert order so right now I don't get this function what I need to do is to create this function so let's change it up there insert order okay so when I'm going to click on insert although it's going to insert an order however what I need to do is to write this function so I'm going to get back here I'm going to insert this one and here I got to insert actually a fake order so I'm not obliged to put an array here it here they put an array because maybe sometimes you would like to insert several elements but I'm just going to put my order here so let me write a fake holder based actually on the model of my database all right so I created a new order but this time there is no idea no created at why it's really simple to understand remember our table order actually generate the ID and generate at the same time and do creator that okay so I can't push any ID that I would invent by myself here because it will not match to what we created on the table orders so I got this order with address ZIP code etc etc I can't even put a price so I'm going to put 12 for instance and when I'm gonna click on this insert order it will push this into my database so what I want to do I want to say if there is data I want to console log the data okay so let's look at what is going to give to do this Michael is passed with a 201 there we go and if I get back to my orders there we go we've got 20 records so it means that somewhere here and at the end of course I got my order with the 12 into the price and it's about Emily Williams so I'm going to show it here there we go so now let's grab again the orders of Emily Williams so I'm creating a new function called Fetch orders from emini Williams I'm going to get down this way so I'm going just to show it this way and instead of having this insert that we have here I'm going to put select all the orders and I'm going to use the client ID because here I can just identify Emily Williams with with her client ID so I'm going to grab this one here I'm going to console log this and there we go so here it's going to be holders and I'm going to console log the holders and I'm going to fetch the orders from Emily Williams back in my application I update and look at this I got the two orders of Emily Williams once with 12 as a price and once with null another thing that I could do is instead of using this I could use the name so now I'm going to grab the name of Evie Emily Williams there we go and here I'm going to put name and when I get back I got the same results I got the order of Emily Williams you have to be always clear about what you want to fetch either it's going to be the name either is going to be the client ID all right be safe because sometimes you may have some error if you don't match the right client ID or the name okay so right now I got the two MINI Williams matching with the same client ID but in the two case I'm supposed to have two orders if you would have three and two in one it would mean that either the client ID would be false either your name would be false also okay so this time we want to update an order of um Emily Williams and if I look at my list down there we see that here Emily Williams has a price null on a specific element ID which is this one so what I'm gonna do I'm going to use a function and here it's not going to be insert in order this function will be actually um const update um Emily Williams order okay so this is a very bad practice that I'm showing here to you but it's just into the context so I'm going to do always the same so it's going to be a try catch and here it's not going to be insert order but it's going to be updated with William's order so I'm going to get back down there update Emily Williams order okay for this example I'm going to get back to the documentation and I'm going to grab this code which is update here okay what I want to do here is to Target a specific order so here I'm going to type here that I'm looking for a holder with a specific ID and remember it's this specific ID down there with the price turn so I'm going to grab this ID and I'm going to put it here and what I want to update is the price and let's say that here I'm going to put a 200 okay so I'm going to console log the arrow if I get an arrow and I'm going to console log the data if there is data like always so console log data there we go so I'm going to update the order of Emily Williams with this ID and change its price but the thing here is that I didn't add on row level security Depot the policy to update my orders so I'm going to click here on get started and I'm going to put here for update using auth.gwt alright let's try again if I click on update Emily's holder there's nothing happening but if I update my table and I look at the price there we go it worked we've got the price at 200 down there and if I'm checking to my orders there we go I got 200 here on the price of my table okay now let's delete this order really easy to do like always we go here and we've got a delete row delete matching row we're gonna grab this and I'm going to do exactly the same all right I got a function called delete Emily William order inside I got the equivalent to the ID of the order that I want to delete I got delete here and when I'm going to click down there I will trigger the function but before I need to add a new row level security though so I'm going to click here and I'm going to go down and what I'm going to do I'm going to use this template on authenticated again and actually what uid will be related to client ID so that's a good example remember I got a client ID here so let's say that we would like that only Emily Williams will be able to delete her own order we'd have to match actually this client ID with the current session I am in right now it's not the case so what I'm gonna do I'm just going to put true for the example but don't do it all right I got my row level security so now I'm getting back I'm updating I'm going to click on delete Emily William order and I'm going to update again and right now I got only one holder because I deleted the previous one in this course we saw that we can read insert update or delete element with the SDK of Super Bass before what we have to do is to always work on the row level security on the authentication pardon policies and to enable some cases if we want to insert select update or delete our elements from the table coming directly from our Super Bass instance of course with Super Bass we can subscribe to the changes of a table here I got a table order with 20 fake orders okay so what I can do I can click here on an APA quick start or I can go down here on API docs but if I click here I got a quick access to the API documentation related to Super Bass so I got all the code related to the SDK and when we go down we see here that we get subscribed to changes and here we got the code that we can import into our application so right now in my app it's totally empty I don't got the orders so what I'm going to do I'm going to get back here and I'm going to create a new function called Fetch orders okay so here it will be an asynchronous function all right what I want to do before triggering this fetch order I want to create an interface because I'm on typescript which will be an interface order in this interface I will have the model of my table so here it's going to be a Name ID I created that etc etc and down there I want to create a const orders here is going to be a reference and this will be an array so I'm waiting for an array what I want to do also is to specify here is going to be of type order here we go so now we are going to store our orders here what I can do is to write my function fetch order so it's going to be really simple I'm going to fetch from Super Bass my orders and I'm going to apply the orders to this variable here then I want to trigger this fetch holder at the end of my code and when I get back here we go we've got all the orders okay so now I'm going to put the order this way and here I'm going to put the Super Bass instance here so I'm going to get back here and here we go so what I'm going to do I'm going to change data here and it will appear immediately here but before I need to implement my code to subscribe to actually to subscribe to the table orders so the first thing I need to do is to create a cons channel here and I'm going to call Super Bass okay and then I'm going to call the function channel so here it's going to be my new channel for others let's say okay you can give the name you want and here we go so here we are creating a channel so I'm going to put some space here to be more clear here we are then I'm going to type on and here I will take three arguments the first one it's an argument that is totally normal which is postgres changes here we are then I'm going to specify okay the event that I want so here at the event and I want is to have all the order back okay here you can put the specific key that you want the schema is going to be public okay and here I'm going to specify the table which will be orders okay so right now it's on red because the last argument will be a callback a function and this is where I'm going to catch my event so I'm going to console log my event here we are last thing if you want to put a filter you can put it here by typing here buddy is equal and here you can type your filter so you got equal you get LTE etc etc me I don't want that I want to get back the changes here okay so here we are at the end what we need to put of course is dot subscribe which is a function so now when we gonna have changes what's gonna happen is that we are going to console log the changes here but before we have to enable this real time so what we're going to do we are going to click here on database and we're going to go here on replication okay on replication I got super bass real time on insert update delete truncate but here as we see we've got zero table so we need to say hey this table is enabled for Super Bass real time so I'm going to click on zero table and here we've got orders orders by client and here we got client so here I'm going to check on here here we go holders is enabled for real time back into my application we see that here Ava Wilson is living on in Chicago on the 60606 ZIP code I'm going to change a zip code and down there in the console we are supposed to get an event console log so I'm going to put 0 and look at this we've got the answer from our subscribe and we got a lot of data here we've got the commit timestamp we've got an update we've got the hold data and we've got the new data and we can see that the ZIP code is now zero so now I have to update in my array of orders okay this uh actually this new data for Ava Wilson back in my code I'm going to this structure my event so it's going to be const here it's going to be my event and here it's going to be new however I don't want to use new I want to type new holder because here in this scope it's an order and what I'm going to do I'm going to apply to orders value nodes dot value dot map and here I'm going to check the holder okay so what I'm going to do here exactly I want to check if it's the right idea that I want to change inside my array so I'm going to type if order dot ID is equal to newholder dot ID here we are what we want to do here is to return an object that will merge at first the older but the new data so new data here the New Order this way okay and at the end of course we want to return also the other orders all right so here we are supposed to merge the whole data with the new data inside our orders array locally back in my application Ava Wilson is on the bottom and our function will help us to not move those elements I got Jack Jackson Thompson here at the top and I'm going to change Jackson Thompson here and it's supposed to change Jackson Thompson on my app in real time so what I'm gonna do I'm going to put code with Geon okay as a value I'm going to type enter and look at this here we are it changed my value for code with Geon so it's really really useful what I'm gonna do I'm going to change also the price and this time it's going to be 100 look at this and here we are for Madison Perez we've got a 100 so here in the database it's moving from the top to the bottom but not in my application in real time we succeed to change the order's value and it's applying to my array the new value so why would you need to subscribe to events well for different kind of application here we are on a CRM so we've got clients here a list of orders but you could do that for a chat of course because in a chat you would like that people get the new messages in real time so you would subscribe into your application with the method channel on And subscribe you would subscribe to the list of latest messages coming from your database as you see it's really fast to set up it's really easy to use of course you you want a filter you would need to add the filters and check out the API docs for it but here in some minutes we succeed to subscribe to a channel and we succeed to update our value locally how to make relation between tables in Super Bass let's get an example in the previous lessons I have created a table orders and a table client let's start over for this example I have here a SQL query that will actually create a table orders with a model ID client ID etc etc I'm enabling the rollover security and I got a table client with an ID after I'm inserting in my clients the email it will create an ID also and in my table orders okay I'm going to generate okay I'm going to generate a fakeholder and I'm going to inject from clients that is related to the email of Daniel Garcia which is up there so I'm going to click on run and here we are so I'm going to get back to my tables and now I'm going to have two tables a table client with an ID and I'm going to have a table orders with an order and in here I'm going to have here exactly the client ID of the email Danielle Garcia so the client ID of an order is actually the ID of a client so now what I can do is to make a relation between them in database here I'm going to click on my table orders I'm going to click here on the pen and I'm going to add a foreign key relation so I'm on orders and when I click here I want to make a reference to another table and this table here you understood it will be clients and of course I want to make a relation with the ID form clients so I'm going to click on Save and here we are we have a relation now between every holder which the client ID will be related to the client's ID now I know that I got this relation so to confirm that I can go on the table orders and here we see that there is a little link here which means that there is a relation on this column to another colon now I'm going to go on API docs on the table orders and I'm going to look for foreign key okay and down there we see that with the SDK I have a solution to fetch actually my orders with another table so here you understood it's going to be clients and between parentheses I'm going to put what I'm going to put the foreign key and in order the foreign key its client ID back in my app I have a function fetch order with a star here and what I want to do I'm going to put here at the line clients so the foreign tables and in clients I'm going to put a star because I want to have the full client of course before I need to check if my rollover security policies are made here it's not the case so I'm going to add a new policy let's say that I'm going to apply this enable read access on clients and I'm going to do exactly the same on orders and here we are I got my order down here and if I click on it look at this I got client ID but I also got the data from the client so what we did here we created a relation we used the client ID of an order to make a relation to another table which is client ID of course you can make as much relation as you want until the moment it doesn't imply that the colon have constraint that are not related for example primary Keys is nullable etc etc you gotta be sure that your colons can fetch together here I got a colon client so if I click here I got some elements and I can also here if I want make a relation okay between the client's email and order so here I'm going to click on select a tables reference to and here is going to be orders and when I click down here I can check that the orders email will be fetched in relation to the client's email so I'm going to click on Save and here we see that we got the relation already done and here we are I got a relation between those two of course if you want to delete those relation you can do the opposite Super Bass is built around postgres and in postgres you can create what we call functions functions can be triggered on insert update delete and other steps of your application if you don't know what our functions in postgres I just typed it in Google let's look at the definition together a postgresql function or store procedure is a set of SQL and procedural commands so like SQL scripts that we get in Super Bass such as declaration assignments Loop flow of control Etc stored in the database server and can be involved using the SQL interface so here in postgres or Super Bass we can create our function and if we want to have some example we can click here on the SQL editor and remember on the SQL editor we can write scripts but we also got custom scripts already written by the Super Bass team but at first what I want to do I want to get back to my table editor and remember I've built this app that is fetching the orders from my table here orders so what I want to do I want to go back to my table orders and here I would like to increment a field however there is no field that I would like really to increment so I'm going to add one column here by clicking here and here we are and what I'm going to do I'm going to create a column called views and it's going to be number of views of my order it doesn't make really sense here but it's just to give you an example the data type it's going to be an integer two okay and the default value would be zero okay we don't hello nilable I'm going to click on Save and here it's going to add to every column actually of my orders here the views so here we don't get a zero I don't know why maybe I went too fast but anyway in Fetch I'm going to look at my order and here we are we see down there that we get the views so we would like to increment discount every time we fetch actually the order we can do that with functions there are two ways to create function in Super Bass the first one is to go to the SQL editor and to write a script like I have here either you can check to take one here the second way is to go to database and here you've got functions on Alpha so when you click on functions on Alpha here I already created a function but I'm going to click on create new function here I can create my function so let's say that I'm going to recreate the one I have it's increment and it's going to be on public and here we return void but later we will need to return trigger if we want to pass the trigger I can add my new argument and down there I can copy paste the part on PNP gsql the language to write my function okay so down there you would have your function let's say that as an argument I would have my order ID which will be an integer uh no not an integer two but it would be a uuid here we are and down there I would copy paste the function that I want and here we are you have advanced settings to change the behavior here is going to be volatile we've got a language we can pass some params and we can work on the type of security check the security invoker here you will have your function and then you click on confirm and it will save your function finally you get your function appearing here increment with the argument where you ID with a return type void and when you click on it you can edit it go to the dock or delete the function the second way is to go to your SQL editor and to write your own function or to select a script there so we are going to select this increment field value we are in the SQL editor of course I'm going to click on here and here we have create function increment here so we've got some postgres here PL SQL sorry that has been written for us here immediately and what we would like to do is to change a bit this function to adapt it to our colon all right I have a query here to actually increment my tables view so here is the function that I wrote and I got my update orders and I'm setting the view plus 1 where the row ID will be equal to ID as a language SQL volatile there we go so I'm going to click on run and here we are my function is now existing if I want to check I can go to database and to function up here and what's appearing here I got my function increment now I'm getting back to my app and I have a function increment view where I call superbase.rpc increment the first argument of this function is the name of your function actually so dot RPC is the function to call increment here and we pass here the object with the row ID remember this row ID we need it in our function so if I get back to my query here we pass the row ID which is the uuid the row ID it's simple the ID of my order okay so here I'm just changing Danielle Garcia so I put here the ID immediately of Daniel Garcia let's go back to our app and let's check if we pass from zero to one back in my app I'm going to update let's look at the network and we see down there that I called increment here we are if I look at the object in the console I got view 0 so I'm going to update again and let's look there and here we are we got views one here of course we don't count the view that we just passed so if we get back actually here we are we see that we got two views for uh Daniel Garcia okay so that's how we can call functions immediately from our app in Super Bass we create our function first then we look at the rollover security uh policies if we got something to change to allow the the client to update or insert and finally we call it by using superbase.rpc the name of the function and we can pass as many arguments as we want previously we created a function together to increment our views inside our table in Super Bass and per extension with postgres but we can call this function with what we call triggers if you want to know where are your triggers inside Super Bass you can go here on the left on database and when you click on it you got a list up there so I'm going to zoom a bit and here we got triggers and when you click on triggers here we are you got a list of triggers here and you get the trigger under every schema okay you get schema real time schema PG sodium schema storage and here we got the name of our triggers and the table where they act so here we get subscription for THX filter we see that the function that we call is subscription check filters and it's triggered on certain events here it's before insert before update so we understand that triggers are calling function at a certain time when there is a special event and here we see that we get these events before insert before update for those who don't know postgres let's look at the definition of triggers postgresql triggers a database callback functions which are automatically performed invoked when a specified database event occurs so we can see here that our functional triggers are actually linked to a specific database a trigger that is marked for each row is called once for every row that the operation modify so when we get back here we see that we've got a function tier check filters on the table subscription the function that is called is subscription check filters and here we got the events before insert before update okay at first what we can do is to click up here to create a new trigger and we can see here we got the name of a new trigger okay so here please use snake Case by default and here you can check the table if you want to check a specific table so here we've got session health we got user hoof and we've got up here orders the table that we created before in this course here are the list of the events okay we've got insert update delete okay these are the events you want to trigger your trigger and the function and here you get the trigger type so when you click on it it's before or after as you see here okay before the event or after the event for the orientation of the statement we can say that it fire wants for each processed rule most of the time you will select that and down here you're going to choose the function to trigger so this is the first way to add a new trigger if you don't want to use the SQL editor you can go here and click to add a new trigger and down here you would select the function that you would have created previously if you want to know how to create a function please refer to the listen on functions okay I'm going to write a SQL query to create a table to create a function to add every time somebody is going to authentify to my Super Bass instance a row in this table users be safe it's not going to be about the auth.user stable is going to be about the users table and then I'm going to create date trigger immediately so I'm going to click here on new query and what I'm going to do I'm going to type create table users okay right now I don't got any table so here it's going to be good it's going to be with an ID with uuid references here auth.users okay not null and it's going to be primary key here we are so I'm going to zoom a little bit for you here we are then it's going to have an email and I'm going to store the email text here okay so I'm going to go down here and what I'm going to do I'm going to create also a function so I'm going to type create or replace because maybe we're going to run the query several time if we make mistakes okay function and here is going to be public dot handle a new user here we are there we go and then we are going to return here returns a trigger it's really important at this step to return the trigger because we fix the trigger on this function okay you have to return the trigger so here is going as double dollar here we are and we are going to type begin and end and between those two we are going to pass our function and we want to say insert into public dot users so here the table that we've got up there we want to insert an ID and animate and where it's going to come from where it's going to come from the new user that is going to uh actually log in or subscribe to my application so basically here we've got new that is available in myscope so what I can do is to say values here and it's going to be new ID and then I'm going to pass new DOT email okay so here I'm going to return new here we are and after I'm going to show you where it comes from exactly here we are so at the end I'm going to type here language and here is going to be PLP gsql and it's going to be of type security definer here we are and here we are we've got our function here that is going to work okay down here I'm going to create a trigger so I'm going to type create trigger and here on new user okay and here it's going to be after insert and it's going to be on auth.users here we are and down there what I want to write here is that for each row I want to do what I want to execute procedure okay and here it's going to be what I think you understood is going to be public handle new user and here we are it's supposed to be good so now I'm going to go on my database I'm going to go on functions and here on function we see that we've got handle new user which is return type trigger okay and if I go on my triggers here down here I'm going to unzoom here we are we can see that we've got our new user which is my trigger that is going to call what it's going to call actually oh we don't see it here but it's going to call my function okay let's get back to our tables and here we've got a table that has been created there is no row level security enabled so maybe I would I want to do it so I'm going to type enable rollover security we've got our table with ID and email and what we're going to do we are going to go to authentication add a new user and see if our trigger is going to be actually calling the function and had the new user so I'm going to click here on authentication here we are so I'm going to take this fake user it's going to be this one and I'm going to put a new number click on invit user okay the invit has been sent and now if I go to my table users here we are we see that we've got our function that has been triggered all right so what we did here we created in our script a table users then we created a function and this function can be found here in functions Alpha here and all new user and if I click here exactly we've got the code that I wrote between begin and hand just here with the public etc etc then I created a trigger called on new user that is triggered after insert and this trigger is triggered every time there is a new user on the table Hoth so if I get back to my table I add my own table user public dot user which is here we see the schema and what happened is that I added a new user through the authentication system I invited a new user so if I click here and I look at the schema down here which is half I get a list of tables related to the schema Hoth and down there I got users and we can see that in users I got my new user here so when I have a new user it's new DOT email that I catched inside my function and with this new email that I catch inside my function I said add it to the public dot user table Super Bass is built around postgres and of course postgres is using schemas so what are schemas well actually a schema it's a name container for database objects such as tables views sequences indexes functions schemas are a way to organize the separations and to organize your database objects a schema is essentially a namespace that contains one or more objects by default there is a schema called public so here when I go back to my table we can see up here that we can select the current schema we are on depending the tables so when I click here I can select for instance half and we see that I access new table so we understand that Hearth and public are two different schema containing their own tables so by default this schema is the G4 schema public okay and all objects created without specifying a schema will end up in public by default so why do we need such a thing why do we need schemas well I told you first it's for the organization you can separate some parts of your application directly through those schemas of course schemas are used to manage permission let's say that some part of your application you will need to be available only for admins you would do some schema like admin or you would have the public that will be for public etc etc you can create as much schema as you want and you can determine actually to who you want to build this schema for schemas are also amazing to avoid naming conflicts here on public I got a table user alright with two columns but if I go on half I also got a table user depending on another source of data so I have both dot users but I got also public dot users so here we avoid the match between two tables and get the same name but don't get the same columns the same model schemas are also amazing to facilitate the multi-tenancy of your application so what does it mean well let's imagine that you got multiple clients and you want the customer to share data each client can have their own schema those multiple clients it helps them to keep the data separated and organized basically a schema provides some help to separate the concerns of your table to manage and secure your database particularly when the size is going to grow up and the complexity is going to make trouble to your developers to understand where are the data exactly and to not mix the database names okay so let's get back to the SQL editor and we are going to create our first schema so here I got a create schema sales this will create those schema says so I'm going to create a table and here it's going to be the name of the schema so sales that customers all right and inside here I'm going to have what I'm going to have a ID type uid and it's going to be actually no primary key here we are then we would have a name it would be a text okay and an email that would be a text also here we are so I'm going to click on run and look success no rule return I'm going to get back to my table and if I go to schema suddenly I got the schema sales okay so I'm going to click on sales and now I got the customer with which is actually empty right now but I created a separated part of my application through the schema so now I get the public and I can have the schema sales if I want to store customer somewhere else in a different business logic or different part of concern of my application storage in Super Bass is super easy Once you have created your project you can go down here to storage okay and when you click here you arrived on the list of the buckets the buckets it's the places it's where you are going to store all your documents images whatever okay so here we are so I'm going to click on create a new bucket and here let's say I'm going to create a bucket for avatars all right so here I can only enter letters number dots and hyphens all right so buckets cannot be renamed once created so be safe on the name you are going to give if I click down there here it's going to be a public bucket so if it's public anybody who's got your url will be able to fetch and see the image okay so here for avatars it's the case Okay I want it to be public but be safe if you want to have a specific document that are going to be private you will not edit this public bucket but you will work with row level policies after to be able for the users to fetch the document the private document they uploaded before so down here I got a warning public buckets are not protected users can read objects in public bucket without any authorization okay rollover security policies are still required for other operations such as objects upload and delete so we see now that when we create a bucket actually we have to still write some rollover security policies to be able to fetch the elements so I'm going to click on create the bucket avatars and here we are and we see up here that we've got a label public that tells us that here it's public it's available on fetch okay so what I'm gonna do up here is to upload the file however I can if I won't create a folder or so I can reload or etc etc so I'm going to click on upload the file and here I got the image the term name of the current video that you are watching here it's storage.png and when I click on it I got some information here here's the thumbnail you get the image size you get the date you can download it get the URL so I'm going to click on get the URL and I'm going to enter the URL up here and we see that there is a public inside the inside the URL so it means that I can fetch it and here we are we got the image available thanks to the bucket option that we get here download of course if I want to delete I can click delete it here I can also download it immediately okay so what I'm going to do I'm going to delete this file for now and now in my application I'm going to push actually the image directly from some kind of Avatar element that helped me to upload the image all right here we are I got this upload element with Tailwind CSS and when I click on it I can upload an element however I didn't work on the row level security yet so what I need to do is to get back to my application and go to my script SQL editor I have written this SQL script to tell that I want to enable on a certain table the row level security okay so here we see that the schema is storage so let's have a look let's get back on our table editor remember and if I click down there I get a look for a schema called storage and this is where is the schema with all the tables and all the policies related actually to the storage so I'm going to click here on upload and here we are look we've got three tables we got buckets okay we've got migration and we got object so I'm going to click on bucket and when I click on bucket what's happening here it's that I got actually a table with Name ID okay I with id id and name Avatar sorry I got a created date Etc public true Auto detection Force etc etc okay so here is it's the bucket I created it's the table related to the buckets that I'm going to create in the future look at this on objects I got an entrance okay that is pushed here so what I got to do is to enable the rollover Security on the storage and object so I'm going to get back to my SQL editor and let's look at this query that we got down there alter table storage dot objects so do schema and the table objects enable whatever security and here I'm saying for select operation okay I want to select only if you are authenticated otherwise you cannot select any element also for insert and I have to use with check instead of using here it's really important for insert okay we check um actually I want to insert only if my role is authenticated same for update sample delete I'm going to run this query and it's going to enable the row level security on storage.object and had these four policies here once it's done I can go to authentication policies click here on schema and go down to storage and I can look here that for objects I got those row level security here already entered alright so what I can do now is to get back to my storage here to avatars and here I got my component so let me show you how this component looks like it's a component made with Tailwind if there is an image URL I'm going to show it otherwise I have an avatar upload button here with the SVG that helps me to input actually an image so over here I got my function handle file input change here we are so we got the file that I'm going to upload and I'm going to use my client Super Bass storage from Avatar and I'm going to upload here I'm changing the name of the file Avatar with here the date and I just put the date this way if you want to put something else like for instance the email of the person authenticated or something else you can do it here then if there is an error I'm going to show the error it's a basic function help here to push on my storage so I'm going I'm using actually the storage from the SDK client the storage function with from and upload to upload my file let's get back let's open the console I'm going to click here I'm going to click on storage and here we are we see that I get my image so it's not very nice from now we would say that we would deal with a squared image for another tab anyway and here I got my image on my network I have a 200 for the Avatar and the date and now if I get back to my bucket I'm going to reload and here we are I have uploaded my avatar okay it's as easy as this of course you would have several bucket in the future maybe with different folders where you are going to push into okay but it's as easy as this first you create your bucket then you write your raw level security policies then you create your function here thanks to the SDK of super bass in your application you use storage from a new upload with the name of the file then the file itself as a backend as a service of course Super Bass is keeping track of all the events through logs whatever is happening within your application Super Bass is creating logs if a user is subscribing you have a log if a user is creating a record you have a log if he's updating a record etc etc so you can find all the logs of Super Bass here in the application here on logs so when you click on it you arrive on the dashboard here on actually and Editor to write your query inside your postgres instance to get all the logs of the last 24 hours for instance or you can get the logs of a custom date logs can be very helpful in many ways first with logs you can debug your application so everything that you're gonna do here you're gonna find some track for instance inside here inside the postgres instance so as you see here I got a track right now on what I'm doing and whatever is happening in here so when you will get an arrow for instance here we've got a fatal arrow down here I can keep track on what's happening on my Super Bass instance so here it's helping me to know if something goes wrong inside the application so logs are here to help me to know if an error happen okay if an arrow occurred inside my application so now I can fix the problem I can troubleshoot my uh actually my process my application here and through here this list of logs that are very consistent we can see here that almost every second I got four or five logs I can click and I can know what happened here so of course in terms of security logs are very useful because I can track the user activity and I can see really clear really fast if a request indicates some kind of security breach inside my Super Bass instance however here it's not supposed to happen super bases super strong as a backend as a service but we never know we want to always get a hand on what's Happening Here and this is why the logs are very useful for security another thing is that the logs help us to work with the performance optimization all right so actually by when you analyze the logs you can see which queries are taking the longest to execute you can have some metrics on what is taking a lot of resources on your Super Bass instance well there's a lot of stuff that you can do you can see also which endpoints are the most frequently requested and give you an Insight on what is the feature you created that is the most used so let's explore a little bit the dashboard of the logs so here we've got the postgres instance so as I showed you here we we have the list and up here we can see that we got a refresh but with a real-time notification here with 18 new events so when I'm clicking on this look at this I'm refreshing my logs and I got here the locks time the request that I got actually here on my Super Bass instance and I got the latest logs okay so I can refresh I can click also on severity to get only the error so here I'm going to just save this and let's have a look and what's going to happen here I'm going to have only the arrows okay so if I'm clicking again and I put no error of course I will have no Euro and if I want to have all the logs I can click on log this way all right here if I'm clicking on chart here I can display or not the chart that I got on the top all right so here I'm just going to remove this I'm going to save again and start again for you to understand here we are and as you see I can hide the hide and show the the chart by clicking on this button I have the option to download the log so I'm going to save the logs and I'm going to open them and I have them as a CSV file all right so through this CSV file we can see here that I got all the logs of my Super Bass instance okay so here when I go here on query I can query actually my super bass or postgres instance to get okay the latest logs that I want okay I can click over here on Saved queries so let's say that I want to write some queries that I want to launch really often I can save them here I got the recent queries here and if I don't know how to write queries for this log Explorer I got templates that are here so it's really nice from the team of Super Bass to think about people who don't know how to write queries here you got some templates that you can use I get also the API Edge Network that helped me to retrieve all the calls made on my instance through the API Edge okay on the host log it's different here if I want to change actually let's say that I want to have the last three days logs what I need to do here is to upgrade my plan here okay for the log retention I need to pass to a paying plan so I need to upgrade my plan for the storage here I'm going to do exactly the same it's exactly the same I will need to pay to get logs for the storage also because there is still the duration of three months log retention and for the real time you understood it's exactly the same here it's a paying feature but is the most important to remember it's that every time you want to debug Super Bass you can go to your instance and go to logs down there and click on your postgres instance and in here you will see all the requests if they succeed or not and you will be able to debug just from here so I didn't show you but down here you got some metadata that you can also use which is very useful if you want to know what was wrong in your request what happened and why it failed one of the advantage of postgres is that it's extensible it means that the user can add additional functionalities to progress through what we call extensions and of course with Super Bass we've got access to extensions so when you are on your instance on the left you go to database then you go here to extensions and by default you got a lot of extensions that are already enabled so here you see you get a check and when you click you can turn on or turn off your extension but if you go down there is a bigger list of extension that you can add so what kind of extension would you need well for instance here you get the extension PG underscore net and this PG underscore net here we've got a description it's an asynchronous HTTP extension that helps you to actually trigger the extension to make asynchronous HTTP call extensions in postgres are actually software modules that had extra feature to progress they are developed by the postgres community and most of the time when you want to do stuff inside your functions you may want first to enable an extension to do it because by default here you don't get the asynchronous HTTP call inside postgres you gotta had this extension PG net that will help you later to use it inside a function that you are going to declare Super Bass is built on top of postgres it is supporting postgres so it means that actually you can use everything that comes from postgres so if you find an extension available on postgres there's a lot of chances that it's already inside your Super Bass dashboard if you are looking for more information about postgres extensions you can go on the official documentation of Super Bass and here we've got some explanation so I already told you that it's in the database on the dashboard but down here you get a list of the extensions that are available and If you look here for the extension you can type HTTP here we've got an example with the HTTP client for postgresql allows web page retrieval inside the database so what I propose you to do now is to give an example on how to use an extension alright so right now I'm on my Super Bass dashboard and here we see that I don't get the HTTP extension yet so I'm going to look on the list and we can see here that I got the extension just here on top of me so I'm going to click on switch on the switch and here I'm going to enable the extension for the schema extension so I'm going to click on enable extension and here we are so we've got the HTTP on now we can create a function that is going to make an HTTP call I'm on MySQL editor and I have created this function let's look at it a little bit I got a create or replace function get API data that is going to return to me a Json okay and I got a URL that I'm going to call for an example.com API data and I'm supposed to gather a Json from this API but I would like my function to do this operation so I have enabled before the HTTP module and I'm calling the URL here so HTTP here it's coming from the extension that we enabled before in the database and in extensions so here the function is going to process to the call through the extension HTTP alright this is because I have enabled the extension HTTP that I'm able to create this function to make my call through the URL that I declared up there and this is where I'm going to get the response Json up here okay so the thing is that here I can use my HTTP function because it's already enabled in the extension bar if you would have done it through postgres by default what we would have done actually is to say create the extension if not exist HTTP here we don't need to do that because we are in the Super Bass environment and we don't need to declare this function declaration creation before because we already enabled it on the extension part so you got to understand that through the extension there's a lot of possibilities that you can trigger a lot of modules that you can find that you can add actually to Super Bass okay I'm just showing you today the HTTP one but you can for instance enable graphql with Super Bass okay you can work with the Json web token API for postgres with PG gwtdt which is enabled here the pgpg crypto etc etc what you got to do is to look for an extension that is doing the job you are looking for that's the best solution to do and you can look to it on the Super Bass documentation here to see which are the extensions that are enabled for instance here we've got the Geo extension that we can look through we got the data set one etc etc but you can also look at the postgres regular extensions that are available through Super Bass of course let's talk about real time and with Super Bass we can do real time so what is real time here I got an application that I have created and I'm going to push online okay and in this application you will be able to write messages and here those messages will be like in real time like a chat okay so what I want to do here is to create first a table a new table and this table is going to be called posts okay and on this post I would be I will have an idea created at okay and what I want to do I want to actually have the model of my message so here we see that we've got a name so I'm going to add a name and here is going to be a text okay and then I will have a description okay and here it will have a text also so here I want to say it's not going to be nullable for both of them we want to have some content and here we are so I'm going to click on save all right I got my post table but I didn't enable real time here so what I'm going to do I'm going to click on database here I'm going to go on the table post which is here and I'm going to click here you see we've got enable real-time broadcast changes on this table to Auto write subscriber so I'm going to do this I'm going to click on Save and when it's done what I need to do is to go on authentication on policies and I need to add some actually some policies to my table so I'm going to click here on add a new policy I will say that I will enable the read access to everyone and I don't need anything so here I can select the role Anon so I'm going to click on review save policy so everybody will be able to select the post now I want to say that I want that everybody can be um actually a poster so I'm going to click here on news template here we are and I'm going to unzoom a little bit and I'm going to remove here authenticated okay I'm going to put Anon and I'm going to click on review so now everybody on the post table will be able to get the messages and to insert them but before we send our message we need to have a look a little bit at the code so what do I have here I have an insert here that actually is inserting the new message that I get up here okay and what I do here I'm pushing the message of course locally if we've got data in return so that's the first thing let's see if we can push messages into our posts table okay let's go let's say test test I'm going to click Send I'm going to update and here we are we've got test here and if we look at our database we've got a test down here also so I'm going to delete this rule let's say that now what I would like to do is when I put my uh actually my message here I would like to him to appear here so what I can do is to create a second function called Fetch message that we can have down there and call it once I have sent my message that's the first solution and the second solution is of course to subscribe to the table post so here with that code with client.channel and here we are going to subscribe to a custom channel so here it's going to be the name that I give it can be anything I can say on so channel on postgres changes I'm going to subscribe to any event here with the um star on the schema public and on the table post so I'm going to console log my payload here just to see if I got an answer every time I'm going to push a message here it is supposed to answer so I'm back in my app now I'm going to say code with geom and I'm going to type hello there and I'm going to click on send and look at this I got an answer from my subscribe and I got the message down there so if we look here we've got an answer from the table in real time because we enable real time before and because we put this code client channel on we are listening we are subscribing down here to the the table post that we've got here and in real time when there is some changes here we can see that we are notified so what I'm doing here I'm pushing to my message list okay the new message on the payload so this is why I got this message here and if I'm getting back to my application we can see that my message has been recorded if you want to test this real-time functionality on my own database you may go to Super Bass minusrealtime.netlyphi dot app here you can try in real time to post messages and maybe you will see some other people posting messages at the same time Edge function became really popular the last years and with Super Bass you can of course create those serverless function that helps you to trigger some operations let me give you an example you have a front-end application and you need to create a payment with stripe you will need to create a an API actually between your client and stripe to trigger this payment intent how would you do you would create a node.js application that you would deploy somewhere and it's a lot of work it's a lot of time and you may not have that time well the solution is to create actually a net function to do that but you could also use this ads function to do a lot of other stuff such as creating a bot for Discord a bot for Twitter or maybe a bot for telegram you have to understand that this Edge functions are serverless and they help you to deploy really quickly a server that where you are going to trigger some actions alright so in my Super Bass instance I go here on edge function and what I can see here is that I got no h function yet so I would need to create my first H function in my Super Bass project so back here I got my Super Bass project and what I'm going to do here I'm going to copy paste this Super Bass function new hello world but before we do that I propose you to look at the documentation okay so H functions here are server side typescript function distributed globally at the edge close to your user so you can use third-party Library like stripe but also Dino for instance and this is what we're gonna do if you want to have some examples you can go down there with Super Bass yes course headers react native flutter etc etc OG image generation and storage CDN caching there's a lot of stuff that you can do with Edge function and if you are looking for some project done with Edge functions you can go on the Super Bass GitHub repository and here on the examples here on the Super Bass function you get a lot of examples so for instance here we see that we've got H function with open AI with open graph paper tier if you want to do some boat or some scrapping streams striper books which are really useful when you want to do some payments and telegram bot but there's there are a lot of other projects that you can look at us we are going to start by creating our own function so I'm going to copy paste my Super Bass function new hello world so as we can see I created a super base folder with a subfolder called function with the name of my new function that I created so here when I type new after I can put the name I want it will give the name of the function all right so how does it work I got an index.ts file that is created by default and here we see that we've got a Geno server here so we've got some commands here and down here we have the command if we want to invoke our function all right so right now this function is doing what it's importing serve from Dino here we've got Dino that is exported from a Content delivery Network all right from the official dino.land website and we've got the function serve and here we serve a node.js application okay a dino is Yes actually here so it's really simple uh in our request okay we are supposed to get uh the name in the request as a Json then we create an object and we return as a response this object so how does it work well now we've got this function right now our Super Bass instance doesn't know okay what we need to do is to deploy this function from our project to our Super Bass instance so to do that I'm going to get back and here we see that we've got deploy your function so I'm going to copy paste this I'm going to get back to my application and right now I am logged in on my Super Bass instance if you are not you will have to type Super Bass login or right and down here it will ask you the access token so if you don't have it you have to click on this link to open it and here you have to generate a new token so I'm going to click here this name is going to be my new token let's say okay I'm going to click on generate a token and here we are so here be safe I get this token I have to copy this access token somewhere and to keep it because it's really really important I'm going to copy paste and I'm going to get back and I'm going to enter my access token here and here we are I'm logged in on my Super Bass instance so now what I can do is to get back here and copy paste again my Super Bass function deploy hello world so I'm going to get back and I'm going to copy paste Super Bass the functions deploy hello world be safe hello world here is a reference to my folder so if you gave another name you have to change the name here okay so I'm going to deploy it directly from my code editor here from my project locally to my Super Bass instance I'm going to type enter and here it says building hello world and then I got the message deployed function hello world on the project etc etc all right when I get back in my Edge function I got my Edge function here so what I can do is just copy and paste this URL I'm going to open it inside my browser and why do I got this missing authorization error of course because here I cannot call my Super Bass function if I'm not authorized all right remember that you will need the token if you keep the authorization with GWT so you get the token down here you would copy paste it inside your header otherwise what you can do just to test is to click here on the function itself and here you get some information about the name if you want to change your name then you get some other information and down here you got infos GWT verification going to disable this just for the example please don't do it for the function that you use all the time otherwise anybody could call your function okay so I'm going to click on Save now I'm going to call again my endpoint here I'm going to do a post and I'm going to post the name because remember on our function we need to catch the name okay and it's supposed to return to us hello name so let's start let's try to call the endpoint itself we just deployed I'm going to click on send and look at this here we are we've got our message all right so here we see that our server is doing some operation for us and that's really cool let's clean this a little bit and what we would like to do so I'm going to keep keep this also what I would like to do is maybe to call my Super Bass instance so let's give an example right now I got this phone function in a word running and what I would like to do is actually to call my database here my tables and let's say that I would like to get for instance the post so I'm going to look at the post and here we've got a lot of posts previously of a lot of people that wrote here a lot of messages to test the real time so let's say that I would like to call here on my request my Super Bass instance and get the post by the edge function it's totally possible what I would do at first is to call create client from the Super Bass SDK that I'm calling up here from a Content delivery Network then what I would need to do is here to pass some Secrets some environmental variables what we need to do here is to create a new file here it's going to be an of file and I'm going to copy paste some keys that will help me to access to the Super Bass instance the first one is going to be a Super Bass URL so here I'm putting an underscore on the top of it to don't get any error and then it's going to be the Super Bass Service key if I want to find those keys I can go to Project settings API here I got my URL and down here I need to get what we call the service role key here it's going to give me all the access okay so now I can create my client when I initiate my Super Bass function so I'm going to use my Super Bass URL that I got in my own file here locally in the same folder then I got the Super Bass Service keyhub here and I'm creating the client down there so I go on my API docs I got my post and let's say that I want to have I want to read all the posts so when I I'm gonna do I'm going to click here let data post so I'm going to go down here here we are and I'm going to actually return so here I'm returning the data exactly here so what I can do is instead returning an object with data anyway and here I can return my post okay so what I'm going to do now is that when I am going to request hello world it's going to return to me the hello with name whatever or let's say that I'm going to put by default Geon because I don't want to put GM all the time and then I'm going to return all the posts from my Super Bass instance so you understand here that I'm using the SDK inside my Super Bass Edge function to provide some actions so here I'm just selecting but let's say that later you would have an API to do some operation some crude operations so create read update or delete you can use the SDK directly from here but the thing here is that I don't get my own file that is deployed immediately on my function so what I would need to do is here to push my environmental variable to my Super Bass instance and to do that we are going to use the Super Bass deploy secret function so I'm going to type Super Bass secret set minus minus of file and here what I need to do is to go to the super base folder so here it's in Super Bass function hello world and here of course I need to type of okay just here I need to type off okay so I'm going to type enter and when I type enter I got an error called Super Bass link so what I want to do I want to type Super Bass link and here I need to enter my database password if I look for the password what I need to do is to go to Project settings database and here I got a password and it's written the password you pre you provided when you created this project if you get trouble you can reset the database password I get my password so now I can type Super Bass link and I want to pass the password so I'm going to type minus p and I'm going to type my password and type enter okay now I can come back on the command I entered before I'm going to type enter and here we are finished super bass secret set so now I can deploy again so again Super Bass function deploy in the world it's going to build again and at the end here we are we've got our hello world function working okay here we are let's call again our function I'm going to click on send and here we are so I got my message from the server and look at this I got the list of the post that you posted on the real-time application that I have created before so what we did here we created a function that is calling our Super Bass instance and that is providing to us some operations that we can do so you got to see the function like a dino server that you can call anytime to do some specific operation okay let's get back on everything that we've done since the beginning we created a function that we deployed immediately on our Super Bass instance then we can request this function to do some operation what is this H function this H function is actually a dino server and this Dino server can do anything that a backend could do it can do many operation it can be connected to stripe it can be connected to upspot it can be connected to many other libraries everything that is an API actually we can make call we can make asynchronous operation but also we can call our Super Bass instance and use the SDK from Super Bass exactly like we do in a front-end application to do some operations so here we've got the select from post that is returning to us the post of the previous users okay so here the edge functions are playing the role of a back-end serverless okay it's a distant backend that you are going to call I'm not going to show you in this design how to use it locally because you would have to work with Docker and you would have to do some more configuration and in the description I'm giving you the link to work with Edge functions locally it's a video from the Super Bass team and it's a very good tutorial from torch Thor is a member of the Super Bass team but you have to think about Edge functions like a way of creating really fast a dino server to do some operations for you if you are familiar with the concept of webbooks you get to know that with Super Bass you can also create some web books web books are a way for two apis to connect together and to exchange some data to communicate every time there is an event and of course inside of Super Bass you can do the same inside of my Super Bass project what I'm going to do I'm going to click here on database then I'm going to click here on webbooks okay and then what I have here is database web books database webos can be used to trigger serverless function or send requests to an HTTP endpoint so I'm going to click on enable webbooks and then I can click on create webbook but before we create a Web book I would like to create an endpoint with an API so what I did here is I created a nexgs 13 application okay and I got an API endpoint here on my route and what it does is just have two endpoints a get endpoint where I got data in return and data up here will have good data sent by my book okay this is just an example and this is just to show you how you can work with an API then here down there I get a post endpoint and when I post here I'm updating the data up here so what I got here as a response is a status 200 data and a message down there so what I'm going to do I'm going to deploy this application on Versa and I'm going to check if it is working all right I'm on Verso I deployed this application that I got here it's totally dumb there's nothing on it right now but here up here I got an endpoint I'm going to type slash API and look at this here we are right now I got just an email with a record here so what we would like to do is to post on this endpoint from my webbook so I'm going to get back up here I'm going to click on create a Web book and here I'm going to say for instance it's going to be new user let's say new user Web book this way here we are so I'm going to click on here and what I'm going to to do actually I can just pause and go to the table public users for instance or I can go on my auth users up here so let's say I'm going to go on off users and what I'm going to do I'm going to say that on the events insert down here I want to do an HTTP request so of course you can do update you can do delete etc etc down here we see that I can also call a Super Bass Edge function but there are a lot of other examples online uh to to watch if you want to create a Super Bass Edge function and what I'm going to do I'm going to click on method post and here I'm going to put my endpoint okay I got the content type application Json here we are okay so actually it's not going to be a new user Web book it's going to be let's say last user subscribe that's what I want to catch okay I want to catch the last user that subscribe on this webbook okay so here I can go down I get my HTTP request I'm going to post and I'm going to click on create webbook and here we are so right now I get this Web book that is running and on insert to a new user so I can click here on edit hook on insert on the table half users it's supposed to update here the data that we will get and remember on my endpoint I'm going to save the data in here in this data I'm going to go on authentication I'm going to have a new user to my table and let's say it's going to be Aurelia at yopmail.com whenever I'm going to click on invit user and here we go so now let's check if my application on version has been called click on API and look at this here we are I got the whole data coming from actually the user so here it's really bad to do that okay because here it's public you should never record something like this I should only record the email for instance so I'm going to um actually I'm going to fix this right away right I did an update up here when I'm gonna get my endpoint I just want to have the data.record.email okay so here you get the schema it was coming from the full set of data that we had before we don't want to deliver all the data here all right it's deployed now I'm going to add a new user aurelia12 at yupmail.com I'm going to click on in which user and here we've got Aurelia in the list now I'm getting back here I'm going to update my endpoint and here we are we've got our last user Aurelia on my application on versal HUB here okay so up here we see that I got my latest user as we saw we can create web books to trigger some operation to trigger some calls when we insert update or delete any table and this is really useful because down here we can see that we can send HTTP request or we can call Super Bass Edge function with different method and we can give parameters to it so web books are a feature that I like a lot that I use a lot personally because I send data to a lot of other endpoints you can imagine a lot of stuff with that that's really useful in this video I'm going to show you how to self-host a Super Bass instance so basically what we can do we can run super bass locally so what we will need to do is to install first Super Bass to run some commands and then we will be able to launch our Super Bass instance locally on my terminal I'm going to type Brew install and here I'm going to type Super Bass slash tab slash Super Bass I'm going to type enter and it's going to install on my machine okay it's done nothing right now my Super Bass package that I need so I'm fetching super bass once it's done what I need to do is to type Super Bass login and here I need to get a token so I'm going to open my Super Bass instance then what I need to do is to generate a new token and let's say it's going to be local uh local let's say local I'm going to generate this new token and here we are so I got my token which is here I'm going to copy paste get back and I'm going to enter my token now when it's done I'm going to create a new folder so here it's going to be for instance my Super Bass local project okay I'm going to type enter then I'm going to enter into my Super Bass local project then I'm going to type Super Bass init I'm going to type init and then it's done and what I want to do I want to type Super Bass start okay so I'm going to type enter and here I'm supposed to get an error okay so if you got an arrow what you need to do is to install Docker because here super bass start need to have a Docker instance to run as you see up here if you don't know Docker yet it's a tool that helps you actually to run containers to run instances of code inside your machine okay so we need to install Docker here so you can install Docker desktop or you can go more down and find the download link Docker is used by many companies it's a very useful tool if you want to know more about Docker I'll let you look online once you've installed Docker you're supposed to have something like this back into the project I'm going to type again Super Bass then start I'm going to type enter and here it's going to pull the images and it's going to run all the containers that I need to make my instance running so I should wait a little bit because sometimes you can then take time to pull everything and to complete the whole project but once it's done we will get a message that our instance will be running all the time every time there will be Docker that will run okay so it's supposed to be done we've got several URL here the graphql URL the API the DB URL which is our postgres instance so for those who really look at where is the postgres instance you get it here there is also the studio URL so the studio it's simply the dashboard made with nextgs and Tailwind that gives you access to the Super Bass instance okay you got your Anon key you got your service role key you got everything in here so I'm going to open my studio and look at this here we are so we've got our local Super Bass instance running so I'm going to show you the URL here so it's running on my localhost and I can use the default project that I got here all right so I'm running super bass locally in this machine I got my table I got my SQL editor I got my database with all the main features that we've got usually the authentication but it means some specification here some features that we have it's going to come up with time but basically here I can run super bass locally with the basic feature that we have on the cloud on the app.superbase.com free instance or a pro instance that you get so when I go on Docker here we can see that I got my Super Bass local project which is running with several different okay containers so the main question now is how to migrate from local here to a Super Bass instance if you want to move all your work from here somewhere else you can go to the guide of superbass.com okay the guide is on the URL superbass.com docs guide CLI local development and here you got more information why I'm not doing a video about this because there are already these guide so here it's everything that we've done super Bassy needs to pay base start etc etc and down there you get already a video about database migration okay so here you can look at this video if you want to migrate your database it's not really complicated first you need to create a migration file by typing super bass migration blah blah then you can add the SQL to your migrate migration file sorry and then you apply your migration okay so it's really easy to do so imagine one day you would have a Raspberry Pi or some computer running there you could run your own Super Bass instance locally on your machine and that's what gives me the most hope in this product is that super bass gives you actually the power to have the full control the full access on your database personally I will still always use the version on the cloud because it's really efficient I will have no maintenance to do but at first to test your project and to work with Super Bass I really advise you to create a free project on superbass.com and if you want to go further you can host your own Super Bass instance on your machine thank you very much for following this course Please Subscribe and see you next time bye

Channel: Codewithguillaume

Views: 27,416

Keywords: course, code, startup, dev, supabase, full course

Id: 8DTOTT7q0XA

Length: 175min 23sec (10523 seconds)

Published: Wed Apr 19 2023