Supabase Comprehensive Tutorial: Build POWERFUL NoCode Apps QUICKLY With This FREE Backend!

I've been using Firebase as my main storage backend for many years but after building a fairly complex app with super base I immediately realize just how much easier and more straightforward it was to build a complex data schema with super base as compared to Firebase that is why in the future I plan to exclusively use super base especially for complex apps I was that convinced but what is superbase and how can it make your life easier in this video we'll have a comprehensive tutorial on everything that you need to know when it comes to superbase plus we'll also have a focus on integrating this awesome back end with your flutter flow apps now before we get started as always all the apps and all the resources that I demonstrate on this channel are going to be available to view Andor clone from my patreon page and you can learn more about our amazing patreon community via the link in the description below the video in this comprehensive training we are going to be covering what is super base and why it is so awesome we are going to be talking about how to set up super base so that you can easily integrated it with any of your thirdparty apps we are going to have a deep dive on authentication which you can use in order to connect your apps to your users whether these users are going to be logging in using simple email and password or third party providers such as Google Facebook and others next we're going to be covering database which is pretty much the me of superbase this is why most people choose superbase over other competitors and here we're going to have a deep dive on different ways that you can structure store your data as well as accesses next we're going to talk about storage this is where you can store various data various files and then access them later in your apps most importantly we're going to be talking about how to integrate your superbase project with your no code builder of choice with specific focus on flut oflow which I consider the very best no code Builder right now so if you're looking to build apps with superbase this is going to be an important section that you definitely do not want to miss out last but not least I'm going to be sharing with you various best practices tips and tricks so that you can make your super base Journey as seamless and as painless as possible rest assured by the time you finish watching this video you're going to have a complete understanding of what makes super base great and most importantly how super base can make your life a lot easier allowing you to build amazing apps in record time all right so let's begin by defining what exactly super base is so this is their homepage and this is what they say superbase is an open-source Firebase alternative start your project with a postgress database authentication instant apis Edge functions realtime subscriptions storage and vector embeddings and you can kind of learn more about it as you can see they have a data base subsystem they have authentication subsystems they have an edge functions subsystem followed by storage real time and Vector now super base is 100% free and it's also open source so if you head over to their GitHub page and you scroll down you will see that superbase is an open-source Firebase alternative we're building the features of Firebase using Enterprise grade open source tools and then they list the various things that you get as part of superbase so if you think about Firebase that you've been using for a while and really Firebase is a collection of different offerings right things like authentication database and in your apps you can be using you know one of these offerings you could be using multiple of these offerings or you may be using all of these offerings at the same time and this is exactly what super base is now if you scroll down you will see this important statement here superbase is a combination of Open Source tools we are building the features of Firebase using Enterprise grade open- Source Products if the tools and communities exist we will use and support that tool if that tool doesn't exist we build an open source it ourselves now it's important to understand that superbase is not a onetoone mapping of Firebase our aim is to give developers a Firebase like developer experience using opsource tools so what they're saying here is that this is not exactly a on toone alternative meaning that it's not an exact alternative to Firebase but for the purpose of developing your apps you're getting the most important features and functionalities in a nicely packaged open source and 100% package now being a free and an open-source project means that you can also host it yourself for absolutely free so you can either use this service right here on superb.com which is what I personally use or if you're so inclined you can host it yourself here we have official documentation from superbase that tells you how you can self host it right so you have two officially supported options you can host it on Docker right you can deploy superbase within your own infrastructure using Docker compost or you can do BYO Cloud which is bring your own cloud meaning that you can just host it on your own servers or on some virtual server providers as well and so what this means is that you have a couple of options even before you start using super base if you do not want to host it if you do not want to spend your time trying to figure out how to host this product then you can easily sign up for an account on super base they have a free plan you can use the free plan which is what I'm doing right now and you can start building your apps with super base now if you're interested in taking this source code and self hosting it you can do that as well it's really really up to you I would just say that if you are just starting out and you don't have crazy needs and you don't have an app with millions and millions of active users you just want to get started you just want to figure out how it works you want to get comfortable you want to build your first step then I would highly recommend that you guys head over to sub base and create your own free account get started and then maybe down the road as your needs expand as you get more and more users as your apps become more and more successful you can think about either you know jumping on the next plan or self hosting super base all together next let's go ahead and create our account on super base and talk about the dashboard and the different things that you can do with your project so once you've created your free account you should see this dashboard right here when you click on this you're going to be redirected to your dashboard so here we are logged into superbase dashboard on the left hand side we have various options concerning our entire account right so we can see all the projects organizations preferences access tokens different guides API references that we're going to be talking about a little bit later but right here we are seeing all the projects that I have for this specific account now right now I only have one project here but what I'm going to do is I'm going to create a brand new project so that we can explore it together I'm going to click right here choose the organization I'm going to give this project name project two we're going to create a database password use this password right here we're going to leave everything on default and click on create new project okay we're going to give it a few moments all right it's setting up our project right now all right so our new project has been created so here's the main page for this new project that we created prg2 or project 2 and it's telling us welcome to your new project your project has been deployed on its own instance with its own API all set up and ready to use so selling us get started by building out your database explore our other products so things like authentication storage Edge function and real time and you can also connect to your new project okay this is going to be all very very important later on in this tutorial when we are going to be connecting to our superbase app with our a front end app that we are building in flutter flow and so if you've ever created a Firebase project before this process is very very similar except when you create a superbase project it creates all of these other products or subsystems automatically with Firebase on the other hand you have to enable a specific product inside of your project individually okay so as a result we have all of these things enabled they are ready to go we can start using them now on the left hand panel here you can explore each one of these different project subsystems in Greater detail so we have things like a table editor if you have a SQL editor we have a database we have authentication we have storage Edge functions followed by reports logs API docs and project settings and so now that we have created our superbase project we can dive deeper into the individual subsystems next let's talk about authentication authentication is the process of checking whether the user has the right credentials for accessing a specific resource and superbase offers very very comprehensive and Rich authentication capability scroll down and you click right here on authentication on this left hand pane here you will see your authentication dashboard on the left hand pane you are going to see various options so the first thing that we're looking at is the users and right now because this is a brand new project we don't have any us users but that is going to change real soon next you have different configuration options so if you click on policies you will see this is where you can create various roow level security RLS policies and this is something that we're going to be covering in depth in just a little bit next we have providers and these are your thirdparty o providers you can authenticate your users through a suite of providers and login methods so right now we have email enabled but as you can see we have a ton of different thirdparty providers okay so you can also do phone you can do Discord you can do GitHub Google twitch Twitter etc etc and what this means is that instead of the system having to know the users login and password or their email and password and kind of verifying all of that itself the system can instead rely on some third party service to verify whether the user has their credential information so in this case let's say we want to connect it with Twitter well if the user can log in to Twitter then they will be allowed to log into our app same thing for LinkedIn if the user is able to successfully log into LinkedIn then we can say that this is the correct user this is who they say they are and we can allow them into our app this is very very useful because for instance with Google you know everybody has a Google account and so it's very easy to say well you don't have to create a new account for our app you can simply log in with your Google account and typically if they're browsing the internet they they are on YouTube they are already logged into their Google account and they can simply log into our app as well without needing to create another account specifically for our app and so these third party o providers are very very useful for developing apps because that is one aspect of your app that you do not need to worry about as long as your users have an account on one of these sites next if you click on email templates you can see various emails that you can compose and sent to your users right so these are email templates that you can customize the emails that will be sent out to your users okay so this is confirm sign up this is for inviting a user you can send them a magic link this is for change email address or reset password so if the user is taking a particular action on your app right we need to confirm sign up so if they sign up but we also want to make sure the email they speci ify is correct we are going to send them this email that's going to say something like confirm your sign up follow this link to confirm your user and you have this confirmation link which is like a token right which is part of these message variables that you simply insert into your email and this is going to be automatically generated so you can modify all this email text as long as you have this uh confirmation URL as part of your link it's going to automatically generate this this variable right here while keeping everything else the same and it's the same process for the other um actions as well for like you know magic link right you can send them a magic link follow this link to login and there's a confirmation URL and a magic link is nice when you want to log in the user just via their email so they don't even need a password right they enter their email they get a magic link they click the magic link and they're automatically logged in right and you can modify all of this right here you can change email address reset password etc etc and this is very very useful if you want to customize these email templates for your specific app for your specific use case last but not least we have the URL configuration and this is where you can specify your site URL now if I go back into users I can simply click on add a user and I can either send an invitation so I can click here I can enter the user's email and that's going to send them an email with a link to create an account or I can create a new user manually right here so if I click here I can just create an account so let's say James james.com and I can also Auto confirm the user okay so I can create the user without sending them a confirmation email this is very very useful in those situations where you want to create users manually and you know you just want to create various accounts without needing to verify the email so this is useful in situations where I'm building an app that might have tons of users and I want to create like five users and I don't want to worry about you know verifying you know whether their emails exist or not I just want to create those users and start testing my app as these users so like in this case this email obviously doesn't exists or maybe it does but that's not my email I could just click on create a user and I went ahead and created a new user and now we have a user record right here created now you can also click right here you can do send password recovery you can send a magic link and you can also delete a user right here so at this point we have created our first user with email as the authentication provider and so when we eventually connect this project to our new flut oflow app that's going to happen a little bit later in the training we will be able to log into our app using superbase authentication with this user right here that is pretty much all that you need to do at this point it's very very easy and very very seamless next let's discuss the database subsystem and this is considered by many the meat of super base and why a lot of people decide to pick super base over various competitors and myself including so if you head over to this left hand pane you can click on database right here and this is where you can look at your existing tables or create a new table you also have a nice feature called a schema visualizer you can create triggers functions you can take a look at various extensions you have roles replication web hooks wrappers backups migrations and indexes now for the the purpose of this tutorial we're only going to be discussing things like tables schema visualizer and then talk a little bit about extensions as well now when it comes to super base superbase is actually based on post SQL which is a very very old and proven Standalone database engine and system so postgress SQL has been around for ages it has been around since like the beginning of the internet and it's very very proven it has been used everywhere and essentially what superbase is superbases database subsystem is basically built on top of postgress so that means you can be rest assured that it's based on a proven database engine that has been used in real world apps for quite a while and it's very very fast and and it's not going to let you down so when you're creating tables you're doing various queries you're doing various things you're essentially interacting with this postgress SQL now if you are coming from a nosql background so if you started building apps by using firebases fire store DB then all of these tables and SQL and Views etc etc um it's going to feel a little different compared to what you're used to okay on the other hand if you're coming from a relational database background you're going to feel right at home so how exactly does this work well it's actually very very simple and very very intuitive every entity that you want to describe every entity in your app is going to have its own table okay so for instance let's say I'm building an app that that has various cars and then owners of those cars well right off the bat I have two entities I have users which are owners and I have cars so in this case what I want to do is I want to create a new table here and I'm going to call it cars okay it's always a good idea to name your tables with a plural so cars instead of car here you can have an optional description you can kind of skip that next you have an option of enabling Ro level security or RLS okay and this allows you to restrict access to your table by enabling RLS and writing postgress policies so this thing in a nutshell is a way to set up different policies on who exactly can access your data so maybe you want everybody to access your data but only the owner to be able to modify this data or to delete this data okay and you can do exactly this so we are going to enable Ro level security because this is best practice but on the other hand if you're just building your app you're in the testing phases you're in the development phases and you are sure that nobody will have access to your app you can just disable this just to make things easier but we're going to enable this because I want to show you how it works you can also enable real time and this is going to broadcast your changes on this table to authorize subscribers and this is something we're going to be covering a little bit later in the video but right now I'm just going to uncheck this okay now in this section you can define various columns or fields that the records in your table will have now you can also import data via spreadsheet so if you click here you can just upload CSV and you can also paste text now this is very very useful functionality because if I already have data then I don't have to mess around with this I can just you know import my data and maybe modify some of the fields and this is something that very very Tri tricky to do with fire store DB because it's not built-in functionality you have to use third party tools to do this so the fact that you can do this will save a lot of users a lot of time now let's go ahead and create our data schema by adding various columns now the first thing I want to store is I want to store the brand okay what is the brand of the car is it a BMW it is is it a Mercedes is it a Buick after you give it a name the next thing you want to do is pick that Ty now if you're going to be storing text you just want to keep it simple and select text if you're going to be storing numbers then you want to choose numeric if you're going to be linking this column to another table and that is something that we're going to be doing in just a little bit you will have to pick a different data type and I'm going to show you exactly what now in this case a brand is text we're going to select text next you can specify a default value meaning that if you create a Rec record but you do not specify a brand do you want the system to auto fill the value for you well in this case we do not want it to do it right we want to specify the brand so we're not going to specify default value next you can specify a key here right and keys are useful when it comes of finding various records in your table or connecting this one table to another table right now ID is used as the primary key here and we're fine with that we do not want to have the brand to somehow be used as a key because brands are not unique they're text and we don't want them to have anything uh having to do with keys so we're just going to leave it as is next we're going to create a couple of other fields next field I want is a model it's also going to be text we're going to select text and keep everything the same as the previous field next I want to somehow link these cars to a potential owner okay I I don't want these cars to just appear in space without being linked to anyone if you think about the cars that you see on the roads well all of them have license plates and you can link that license plate information to a registered owner or registered user and that's exactly what we want to do here and so we're going to click on ADD column and we are going to type owner ID because this is going to be the user that is going to be linked to this specific car record now because we're going to be linking this owner ID to another entity users in this case in most situations that means creating another table but this is a special case because users table is already created for us right so when I talked about authentication when I talked about creating a user well those users that you create when you create a new record uh they're put in a built-in table called users and you can see that table by clicking here and creating something called a foreign key relation which is where you are linking one record to another record but before we can do that we need to give it a type so because we're going to be linking this to the users record ID we need to give it a type called U ID which is a universally unique identifier and you're going to see exactly what it is in just a moment but if you select this now you can click here and you can edit forign key relations so when you click here you want to select your schema you want to scroll down and select all which is authentication and from here you can scroll down and select users and now it's asking us to select a column from off users to create a reference this is what we want we want the ID column and here you can leave all of this on default okay you want to click on Save and now we've essentially created a relationship to another table which is going to make it a lot easier to have these two tables working together so at this point I want to click on Save and it's going to go ahead and create a new table cars for us and now as you can see we have a new table cars here in our database table okay this has no description it has no rows it has 16 kiloby of size it's not real time enabled we can always enable it later and it has five columns now for any reason if you want to modify this table by adding or deleting columns you can simply click here and you're going to be redirected to the same screen as before and here you can add columns or you can remove columns here it's very very common to modify the table as you're building the app you can also click on this five columns here and you can see all the columns that you have here and you can delete them here or you can modify them here as well now once you've created your first table you want to head over to table editor and you can work with this new table so here you can create a new table right off the screen or you can click on one of your existing table so for instance if we click on cars here you can see all the data that you have here this table is empty you can add row to disable to get started or you can create a new record so let's say I want to create a new record I'm going to create a new row right here and I'm going to be greeted with this create new row dialog box and you have to fill out the field for this new record that you want to create now these two fields are going to be automatically generated for you so if you do not specify the ID it's going to automatically generate an ID and if you do not specify this created dat Tim stamp it's also going to automatically create this date Tim stamp here as well so we can skip these here next we have these optional Fields so we have brand model and owner ID so let's say we want to create a new brand BMW model is M3 now here for the owner ID we do not need to type in the ID ourselves because we linked it to another table we can click here and it's going to go to that link table and let us select the appropriate record so I'm going to click here it's going to load up this table there should be just one user the user that we created previously and we can simply select this user now on the other hand if we didn't link the table we would need to find this ID and then copy it and paste it in the record but because we linked it we can simply select it and it's automatically entered for us here next I want to click on Save and now I've created a new car record with a linked owner that's a link to another table now this table does not have any RLS policy so let's go ahead and enable this now and let's create a couple of policies so that we can make this table a lot more secure so you want to click here and now you're going to be back on the screen called policies with the table selected here and we have RLS enabled but there's no policies created yet which means that nobody will be able to access this table from the outside if we were to build our app right now and we try to access the table we would not be able to access it because RLS is enabled but we haven't defined any policies uh specifying who is able to access what so we want to click on new policy here and here you have a couple of options you can get started quickly you can create a policy from a template while here you have full customization you can create a policy from scratch so if you select this option right here you can get started via a nice template so you can enable read access to everyone you can enable insert access for authenticated users only here you can enable update access for users based on their email enable delete access for us users based on their user ID enable insert access for users based on their user ID so it's very very flexible you can create as many of these policies as you want and they can be as specific or as granular as you want so for instance let's go ahead and enable read access to everyone we're going to say use this template and when we select it it autofills this screen for us because if we decided to go through the full customization route we would be presented with the screen that we need to fill out ourselves and it's actually very very easy to do but still when you're just getting started working with templates is a lot easier so it says here enable read access for all users and here it's selecting the operation right this is the allowed operation obviously I can select another operation I can select all if I want but I'm going to keep it on select here we have Target roles and this defaults to all public roles and next we have a an expression that needs to return a Boolean so in this case we're going to have true which means that for select operations it's going to be available for everyone there's no condition right it says here all users and so it doesn't really matter who is doing the select select is available to everyone so we're going to keep this to true and we're going to say review and now it generates a SQL statement for us you got to understand that under the hood everything is SQL queries okay so when you create a new table when you're creating columns when you're adding columns removing columns all it's doing is generating a sequel statement that the system can understand so in this case it says here create policy enable read access for all users this is a description this is our table cars as permissive for select un select to public using true right so that means regardless who you are you'll be able to access data save policy right here and now we have this policy listed right here so enable read access for all users this is this select policy and here you can come back and you can edit this policy you can change it you can create a new condition or you can delete it all together now apart from viewing the records and your tables uh via this beautiful table interface here you can also click on SQL editor here and you can work with your data via SQL statements which is essentially how it talks to your system under the hood now here you have various templates that you can take a look you have your create table add view add column etc etc you also have various quick starts so you can create the table with all the countries in the world you can do a to-do list uh build a basic to-do list with ro level security Lang chain etc etc now SQL in itself is a whole other topic and that would take another very very very long video but in a nutshell you can type something like this select from cars and if you execute that you will see all the data that you have stored in cars and here you can also specify if you want just to view specific uh fields or columns so I can say select brand from cars reexecute and I'm only going to see that brand for that one car now apart from the simple select statement where we are just getting the records in our table you also have various statements that can order your query by a specific field you can Group by specific records you can also insert new records via an insert you can update via an update field you can also delete drop rename your tables a ton of other things that we really can't go into this video because it's going to take an entire other and so you have a ton of other SQL commands at your disposal that lets you do pretty much anything that you want to your day now one of super base's most powerful features in my opinion is the ability to combine various tables and show you the exact data that you want so for instance we have this cars table here that only has the car information and it also has the owner ID that is a unique record in another table Al together now let's say I'm building an app and in my app I have a screen where I need to combine information from several tables from at least two tables so in this case I want to display various car information but I also want to display something about the user I don't want to display their user ID because that's meaningless to my users that are using the app I want to display something concrete maybe their name or their email so for instance if you click here you will see that we are storing the users email here right we have their email so wouldn't it be cool to be able to display like BMW M3 and then the users the owners email as well well as you can see we don't have their email directly stored on this table we have to get it by jumping a couple of hopes we need to go to another table that's linked to this table and we need to pull up the relevant information well thankfully superbase has this amazing amazing feature called views that allow you to create a view that shows you the data for multiple tables if you want and so you can head over to the SQL editor right here now you can create this view manually by typing in your SQL statement here or you can ask superbase AI to build that query for you just by explaining what you wanted to do and so let's say I want to create a view with information from the Cars table as well as from the user table so what I want is I want a view create a view that displays the usernames car brand and car model okay so let's see if that works we've typed in our prompt here we're going to execute this prompt all right now it's thinking here and it went ahead and created a SQL statement that creates this view for us so on this screen what we are seeing is what we had before and what we have now because we didn't have anything before was just an empty screen we can click on accept change and now we have a SQL statement that was automatically generated for us via this super base Ai and essentially it's creating a view called car info and as you can see here it's pulling in the email and it says here U email but here it says C Brand C model and this U and C represent different tables that it's essentially joining in together because that's exactly what it is when it comes to SQL databases you are essentially joining various tables together to get the data that you need and so in this case we have you that's from off users and C is from Cars okay and we're joining them on this user ID that's the link between these two tables now we're not done yet this is is just a statement we don't have a view yet we don't have anything all we have is a statement that will generate the view and so at this point you can simply run this query and if everything goes well it's going to generate this View and so if you see success no rows return that means that you've successfully created this View and now you can go back to your table of view here and along with this table that we've created before this cars table you're going to see this car info as a view you see it's going to have this little icon there so if you click on this car info it's going to behave exactly like a table okay so you're going to see the fields that you care about and you're going to see the information so in this case we're seeing a list of cars with their owner's email as a result of joining these two tables together now you can join multiple tables together it doesn't need to be just two you can join three tables you can join a bunch of other tables and in fact in many situations you're going to be joining various tables because the nature of SQL is to create one table per entity that's called normalization that's really what makes SQL so easy and awesome to work with is that you have an entity you create a table you have another entity you create a table and then you create various views that give you the data that you need for specific situations and this makes it super easy and straightforward in terms of building apps because your app is going to have various views various screens and you can create different views here in your super base dashboard to just show you the data that you need and so as a result we have this car info which is a view that gets us this data and when you're actually going to be pulling this data from flutter flow you're we're going to be treating this view as a table flut oflow does not care the only main difference is that with this table you can actually add rows you can modify you can remove columns this is real data right this is actual data of view on the other hand is merely a connection to your tables you can modify the structure of the view but you can't delete things and they're not going to affect the actual tables it's like executing a SQL statement to get you various data but a view is essentially a gateway to your tables you can modify how the view is structured you can change what kind of data you want or what kind of fields that you want but you can't edit the original data from The View and so unlike a regular table you can't add new rows you can't add new columns the only thing that you can do is you can click on definition right here you can take a look at your SQL statement and then you can click on open in SQL editor and then you can kind of work with it you can rename this view you can drop this view create a new view you can replace this view with another view that's really all you can do and that is perfect for our use case of building apps because that's exactly what we want we want to have our tables that represent various entities but then we want to have a view that mixes and matches various data from various tables now if you're enjoying the training so far definitely have a look at mastering flutter flow which is my own training when it comes to building amazing flutter flow apps there you will learn everything that you need to know when it comes to building all kinds of no code apps from very very simple to very very complex plus you'll get access to our private Community where you can ask all kinds of questions and get all kinds of advice when it comes to building your no code app you can learn more about this amazing training via the link in the description below the video If if you're serious about no code I really do hope to see you inside of our community next Let's Talk About Storage so if you head over to this left menu and you click on the storage icon you're going to be on a page that looks something like this now if you're coming from Firebase this storage should be very very familiar to you because it works very very similarly to fire basis storage sub subsystem as well and so here you can create buckets to store and serve any type of digital content make your buckets private or public depending on your security preference so here we can create a new bucket so let's say we call it B1 and you have some additional settings so you can specify this bucket to be public so you can click here and it's going to be public and you also have some additional configuration you can restrict file upload size for this bucket you can prevent uploading of file sizes greater than a specifi limit so you can click here and you can specify uh a specific limit in bytes kilobytes megabytes or gigabytes as well and here you can also restrict the type of files that you want this bucket to have so allowed mime types A mind type is basically a type of file so like image JPEG image uh PNG IM audio EG video MP4 etc etc so you can just specify a comma separate created a list of values so something like this image PNG and if I do that then this bucket can only uh contain uh jpex and PNG files okay we're going to separate them and we're going to leave all of this on defaults we're going to click save and that's going to go ahead and create our new bucket so here we are in this screen where we can manage the files in this specific bucket so I can click on upload and I can select a random file upload here and now my file is has been successfully uploaded and in this case I've just uploaded one of my thumbnails for my videos and once you upload a file you naturally have uh you can download it you can also get a URL so you can get a publicly available URL that you can pretty much do anything that you want so this is very helpful uh when you are dealing with uh an app where you need to upload a file and then you need that file that image or PDF or audio to be publicly available so here you can get a URL that's going to expire in one week so I just got a URL and if I paste it I'm going to be able to download this image and this URL is going to expire in a week as well now buckets just like tables can have various access policies attached to them so if you click on policies here you can create and manage various policies so here we have storage policies and then you also have a bunch of other policies so the first thing you want to do is you want to create a policy by clicking here and as was the case before you can get started quickly or you can have full customization so you want to start with a template if you do not have much experience with this and just to get an idea what kind of access policies you can create because you can create as specific access policies as you want so for instance here we have an access policy that will allow access to jpeg images in a public folder to Anonymous users here's another access policy that's going to give users access to only their own top level folder named as uid here you have another policy give users access to a folder only to authorize users followed by give access to a nested folder called admin assets only to a specific user and followed by give access to a file to a user okay so this is a specific spefic file so you specify this file and you specify the user ID here so if these two are you know match up so the user is trying to access this specific file and this is the user's ID then the user will be able to get access to this file so as you can see you can create all kinds of very very interesting uh access policies so that only specific users will have access to a specific re resource okay and so when it comes to creating access policies you have to understand that there are three things at play here there's the name of the resource there's the user that is trying to access the resource and then there's also the type of operations so whether we are creating a new file we are updating a new file we're deleting a file right so you have all of these various things to think about so as an example let's say we want to create a very very simple access policiy so allow access to jpeg images in a public folder to Anonymous users we're going to click use this template right here and on this screen we can further refine the policy so we have the policy but now we need to select the operations so what do we want to allow do we want to allow you know selects do we want to allow inserts do we want to allow updates or delete right it's the exact same thing as was the case with tables right so select is like a readon policy insert is a right policy update is a right policy and delete is being able to delete various objects so as an example if I click here I can see these ones light up so now download list create signed URL what we just did before create sign URLs get public URL are available if I select delete then only this one is available right get public URL okay so we're going to keep this on select we're going to click on review now you can see the entire policy and says here create policy this is the description right here on storage objects for select to public and this is the policy using this is the the condition right so what you're doing is you're creating a condition then you need to specify the operation right what exactly is the user going to be doing and when you're happy with everything you can just click on Save policy and we' have just created our first policy now you can click here you can edit this you can delete this as well as you see fit and later down the road you can create new policies here now all of the things that we talked about so far is really really nice the ability to create tables views storage authentication etc etc but it's pretty much of no use to us if we cannot interact with this data from the outside if we cannot build apps that connect to our superbase instance and actually read this data or write this data fortunately superbase has a very very comprehensive API interface that allows you to pretty much do anything that you want using thirdparty tools or apps and so if you go here on the left hand panel and you click on API docs you will see the ability to access all of your data using an API interface so here in this getting started section if you're building an app from scratch with code then you have to initialize your superbase instance using this code here and after that you can use this authentication code to actually connect to your system and authenticate now if you move down to tables and Views you can actually select the table and the view that you want to access and get the system generated API call to access your data so check this out let's say I want to access the cars table via an API all I need to do is Select Cars and up here what I want to do is I want to select either JavaScript or bash now if I'm building a Javascript app then these JavaScript code Snippets are enough I can just simply copy them and I can use them in my app but if you're building an app with these one of these no code tools such as Flor flow chances are you're going to be using either flutter flows built-in support for super base and we're going to be covering that a little bit later in this video or you're going to be making direct API calls from flutter flow to your super base instance and in this case you want to click on bash and then you can also click on this select your public key and you're going to have your API Snippets ready to go so let's say I want to read all the rows all I need to do is copy here here I'm going to go into one of my API testing tools I'm using rapid API it's a free tool for Mac you can easily download it I'm going to go into file import text paste all of this that I just copied from super base click on import and I have a request generated automatically so now I can execute this request and I'm going to get the data right so this is my response right here I can look at this and remember my table my car's table only has one record that brand BMW and the model M3 and right away this API call works perfectly we have a 200 okay and I'm accessing the data in a very very easy to work with Json format now I can do the same thing with views as well once I've created a view that gets me the data that I want I can access the data in there just like how I would access a table so here I have car info selected I can scroll down read all rolls I can just copy it right here and I can make a new request I can go into file import text paste this and I have a new request now I can e execute this and I'm going to have the data just how I expected it to have so now I'm getting the email I'm getting the brand and I'm getting the model now the thing about views is I can only read rows I can't you know add new records I can't update records I can't delete records because remember a view is just a read only way to access your existing data in your tables I can also filter the data that I'm getting but for instance in the case of a real table I can do a lot more I can insert rows I can update rows I can delete rows I can do all kinds of interesting things so for instance I can insert a new row I can just copy this request come in here file import text paste this and now all I need to do is modify the request so I have some column some value so let's say um we have brand we have model and that's it that's all I care about so brand is uh let's say Ferrari and model is red Ferrari okay and that's all I need to do I'm going to execute it but once I execute it I get a unauthorized error it's telling me new role violates a ro level security policy for table cars and that is because I have a particular security policy so all I need to do is click on table editor pick my cars click here do view policies and I can take a look I have enable read access I don't have right access so I can create a new policy full customization and I'm going to select insert and I'm going to say allow insert okay and here I can just do true which means this condition is always going to be true for inserts review save policy and now I should be able to add a new row so I'm going to go back here reexit execute this and now it says 2011 created and now I can go back here to our my table Select Cars and I should have a new row that I've just created and as you can see I have a new row created Ferrari red Ferrari and later on I can assign this specific car to its rightful owner via this foreign key link and last but not least I can also delete record so all I need to do is scroll down there's insert update delete copy this right here file import text paste this import and we have a new request and in the URL parameters all I need to do is specify a column and some value so that I can find that value in that specific column and delete the record now before we execute this request we want to make sure that we have the right policies we're going to come by here create a new policy full customization we're going to say say delete allow delete and this is going to say true review save policy and now we can go back to our request we can just specify ID equals 1 which is the first record in our table there in this cars Table Right Here and Now if we execute this it should hopefully deleted and as you can see once we refresh the table we do not have that record anymore and so as you can see it's very very simple to get started with super bases API interface and interact with your data all right so you've created your superbase project you've created a bunch of tables you imported some data maybe you've created a view or several views and now you're interested in actually building a full functioning app with super base as the backend and so right now that is exactly what we're going to be doing we're going to jump into my no code tool of choice which is flut flow and we are going to build a simple app using our superbase project as the back end the app is going to support authentication it's going to be pulling data from the tables it's going to be pulling data from the views and everything is going to come together all right so here I am in flut oflow I just created a brand new app I haven't yet configured it which is what we're going to be doing right now so the first thing that you want to do is you want to go into settings and integration and you want to head down to super base and you want to enable super base now once you enable super super base you need to provide these two Fields here and how do you do that well you need to go to super base and look them up and here I am back in super Bas and if you head over to project settings you click on API you will see all the data that you need to provide to a thirdparty app in order to access your project so the first thing we're going to do is copy this URL head back here paste it here and then it needs this Anon key and this is your Anon key right here you can use this because if you use an Anon key and you connect to your superbase project using this Anon key then you have that Ro level security to help you and to kind of make sure that you have the right permissions set up on the other hand you do not want to be using the service Ro right this key has the ability to bypass Ro level security never share it publicly so you do not want to be sharing this key unless you have a really good reason okay so we're going to copy Cy this come back here paste it in here next thing you want to do is click on get schema and it's going to connect to your super base project and get the schema so as you can see it has pulled our one table which is cars and our views right here which is this car info View and now we finished configuring access to our database now it says here super based storage if you expand this it tells us that superbase storage is supported simply setup storage in the superbase console to enable it when uploading images or files you can use the upload to superbase option okay and because we have superbase storage enabled in our project we can use this right away now there's one more thing that we need to do we also want to enable authentication so if we click on authentication here we're going to enable authentication and for authentication type we're going to select super base once we select that we need to specify two pages we need an entry page and a logged in page so the logged in page is going to be the page that we already have which is the homepage and for the entry page we want to create another page that's going to get the user to log in so I'm going to click here create a new page select o and there's one template that I use all the time which is this one right here you can use any one that you want Call It login click on create page and we have this page head back over to authentication and for the entry page want to select login right here now we have a couple of errors here and that is because we need to configure our Google and apple provider and in this tutorial we're not going to be using them so I'm just going to delete them just to simplify things okay and I'm going to do the same thing for the login as well I'm just going to delete this right here and in fact I'm going to delete that all that entire container all right right here and now we've deleted we still have a couple of Errors we have an O action that's not set up correct ly because it needs a confirm password field uh in order to create account so what you can do is you can come in here you can simply duplicate this widget you can call it password to and now if you come here you can actually configure it with password to because we have that now we still have this one final issue here click on it you will see that o provider Google is not supported so if you click here you just want to set your all provider to email here okay and then you can set your Fields email and password right here with a password confirmed field okay so now you should have no issues and indeed we do not have any issues so right now your app should work we should be able to run this app and log in as that user that we set up earlier in the video so let's go ahead and try this right now let's go ahead and run our app and see if at least authentication works all right here's our app and we can go into login and try try to log in with that user so I believe it was James james.com password also James we're going to click on sign in and we have signed in successfully and in fact you can go back to your super base project you can go into logs and so here you see a login request so if you have any issues whatsoever with super base it's not working like you would expect then you can simply click on logs and select the right system that you're working with right whether it's postgress uh rest which which are the API call Storage real time etc etc and here you can see that we have no issues everything is perfectly fine all right so now that we've tested that the authentication works we also were able to pull in the schema with the tables and the views the next thing that we can do is we can have the homepage display some information from the table of the view so here we have the homepage and what we want to do is we want to create a data table that's going to be really easy for displaying this data and let's take a look at our uh our tables uh and our views and what kind of data we want to display here we are looking at our tables and views we have one table and one view now because this table here does not have an owner this view will be empty because this view is trying to get all the data together and so so I'm going to go to this table right here and I'm going to assign it an owner so I'm going to click here and here we're looking at off users and this is the only user that we have so we can simply click on it and that's going to make the link and now if we go into the views here we should be able to see all the data getting pulled from the table the cars table as well as the users table and so we can use this view to pull in the data in our app so let's go back to our app and on this data table you want to click here and you want to add a backend query and here you're going to select superbase query the table is going to be car info list of rows we're going to say confirm okay and so now it has uh the data that's being fed next I want to configure the uh column headers here okay so I'm going to say this is um you know mod brand and this is email okay so that we know that you know we're getting all the data and this is the email of the user and we can also create another column if we want we can just specify three columns so this let's say this instead is going to be brand model and this is going to be the email okay so we have this here and now what we want to do is we want to actually pull in data so for this brand we're going to click here car info select brand click here car info select model and click here car info select email and so now it should display play a list of Records populated in this data view so let's go ahead and run our app come back here let's do an instant reload and let's see if it works as expected all right and here's our app and as you can see it's able to pull in all the data in this case this is just this single record here uh this thing is wrapping and that is because it doesn't have enough space that is fairly easy to fix but all in all we were able to successfully pull the data from our super base back here here now let's say you want to add data how would you do that well it's actually very very simple and so the first thing that you want to do is you want to create a couple of input Fields let's do that right now one text field another text field right here and another text field here and we can place them above this data table put it right here and right there so we have these three text Fields let's go ahead and add a button now we have a button here above this data table and now we can can do is we can give these text Fields a label so this is input brand so that we know this is input and this is input user okay and let's go ahead change the labels real quick this is and the user and in fact for the user we are going to be using the authenticated user since we have that in the App State we're going to delete that and now we have brand and model okay and this button here is going to say add okay and we're going to create our action flow add action you want to search for super base insert row table is going to be cars that's the only table we have and we have these fields okay so you want to get all these fields and you really don't need to populate these two Fields because they're going to be done for us automatically we're going to remove this and for the brand we're going to say widget State input brand it's going to be widget State input model and for the owner ID this is going to be authenticated user user ID now we're not done yet after you insert the record with super base what you want to do is you want to refresh the data so if you type refresh refresh database request and here you can select the widget this data table that way refreshes the data all right so let's go ahead and test this out let's go ahead and reload this all right so let's go ahead and add a new record so let's say we're going to add another another car Audi Audi S4 click on ADD and there you see it Audi S4 and this is uh the same user that's logged in right now let's say we add another car this is going to be Toyota gamry Okay add and there you see it and now you can go back to your database this thing is going to reload automatically and here we see in the view the data being pulled up correctly and if we go into cars you're going to see all the cars there with the correct owner ID last but not least let's also add some functionality so that we can delete these records here as well so you you can do this in this data table and I'm going to click on this data table add another column this column is going to be delete column and here I'm going to add a button here replace and now we have a button and button text is going to be D for delete we can also add an icon button right so you can do an icon button that may be a better option we're going to change how it looks for the icon button we're going to click here and this one yeah this looks nice okay something like this let's go ahead and remove the accent color okay and the radius as well okay so something like this make it a little bit bigger all right so something like this and now we can attach an action just search for delete delete row Sable cars next you want to specify your matching rows here and let's say we want to delete where a model is equal to the model that we are looking at so we're going to select this model right here and we are ready to test out our app so let's go ahead and do an instant reload all right here is our app and let's say we want to delete this Ferrari right here all we need to do is click here and we've deleted it and now if you reload the app we should no longer see that Ferrari there now one thing that is not quite supported just yet at least at the time of filming this video is the fact that you can't really search and filter records from Flat flow so with flut flow you can click here and you can have a query and you can filter but the filter does not allow you to filter on just substrings of a specific variable so for instance let's say I want to find all models that have a certain string in them I really can't do that here okay it's not it's not possible I can just do an exact match but I can do a more of a fuzzy filter fortunately you can easily do that via API so if you come back here you go into this API docs here you select what you want to find so let's say this car info and you select bash and you also configure your key right here now you want to scroll down to filtering here this is going to tell you how you can filter so for instance you can just select and then you can have a filter there so what you want to do is you want to copy this import this request you can see what it looks like so if I do this here you can see everything that you need to know about this request so the these are the keys here you can just copy the key this is API key paste that in there add this other header authorization this final header 09 paste this URL here and if you take a look at URL parameters this is where you specify the parameters and you can just copy that go into query parameters and you can put ID followed by select ID you can specify let's say it's equal one string and then select is here now here you want to specify on what column do you want to search for so let's say we want to search for a brand that has the word Audi in it and here you can specify the name of the string that you want to filter for okay so if we take a look at our database we have Audi here and so if I put Audi here this is going to be a case insensitive search for any word in this brand column that has Audi in it right we're going to hit save come back here test API and you're going to get back there this result right here now if I also put something like di that's also going to match Audi hit save response and test and we still match Audi and so this is a a very Nifty way of searching for things right the user types something and you want to search for something you can take the user's input and put it in here by creating a variable so let's say this is search string right here and we can put S Type string hit save and then here in this query parameter you can specify it like this okay so now you can come in here and you can specify let's say the user wants Audi you can do this and you're going to match Audi let's say the user wants di that should still match Audi and then you can go back to your UI Builder and you can create another data table that's going to be getting the results from the searches and the second data table is going to get data from this API so what we want to do is come back here do an API call search and let's say we specify a fixed string this is going to be Audi confirm and we're going to pull in the data Json body confirm and then these are going to be the items confirm okay and now what you want to do is you can actually uh specify this the certain item so this item right here this is going to be Json path item this is going to be item model model model right here Json path model this is going to be the email and I'm going to remove this delete because we're only showing the results so I'm going to specify data table to have three all right so let's go ahead and run our app and let's see if it's showing us the correct data all right so here's our app and here we are displaying all the records regardless of what we're searching for right just all the records and here they are and here we are searching for a specific record so if I come back here and let's say I want to change what searching for so I come back here I do this back in query and let's say I change Audi to something like BMW okay hit confirm now this should be empty because there are no BMWs there in our records at least not anymore because we deleted it all right so there's our app and as you can see here we still have all the records this is the single Audi car record and here we do not have any more records and so this is a very very Nifty way to implement advanced search functionality in your FL oflow app with your super base backend now if you're as excited about super base as I was when I first discovered it and especially after I started to build some complex apps with it and I realized that it's so much easier than some of the other backends then you definitely need to join our amazing patreon Community because when you join our amazing patreon Community not only will you get access to all the apps that I publish on this channel as well as this one plus over 100 different apps that I published on this channel in the past you will also get extra content such as q&as live streams behind the scenes content and our patreon supported masterclass Series where I do deep Dives about different topics that the community needs more clarification on typically the community wants on a specific topic and I create a detailed walkover and a tutorial video about this specific topic plus you're also going to get support in the form of various questions answered about specific apps that I built and about specific videos that I make and so if you're serious about no code maybe you're trying to build that app that you've been putting off for a while or maybe you want to start a business and actually do this for a living then you definitely need to join our amazing patreon Community because you're going to get a ton of value that's going to go a long way in your no code Journey but beyond that when you join our amazing patreon Community you're going to to be supporting this Channel and supporting my work and that is greatly greatly appreciated so if all that I've just mentioned sounds like something that it might be interesting to you then definitely check out our amazing patreon community and consider becoming a member and you can do just that via the link in the description of the video so I really really hope to see you there

Channel: James NoCode

Views: 8,204

Keywords: supabase tutorial, supabase comprehensive tutorial, supabase tutorial 2023, supabase nocode, SUPABASE FLUTTERFLOW

Id: 4dIz3br55zM

Length: 73min 47sec (4427 seconds)

Published: Fri Sep 29 2023