Supabase Authentication & Realtime Database with Flutter #SupaLaunchWeek

hello everyone welcome back to my channel I know my audience here is mostly flutter and Firebase but there are so many cool technology out there that we have to explore with each other and yes you read that right in the title that today we will be exploring Super Bass the open source alternative to Firebase so without wasting any more time let's get started now I love Firebase databases they are very quick and easy to set up they allow you to use collections which are like key value pairs of data however there are times when nosql or document based storages may be a bit problematic for the kind of data that you want to store and that's when relational databases makes more sense for you and that is why Super Bass can be the right use case for you because they offer postgresql which is a relational database management system and of course they allow you to use SQL commands which are so powerful for complex operations and it is pretty quick and easy to set up if you are using the free tire and I will be showing you how but you can also self-host it on Docker if you like that and of course the great thing about surveys is that it does not lock you in like proprietary services like Firebase and AWS Etc and that means no vendor lock end so without wasting more time let me just show you the dashboard and how we can create a very first project a very first databases and how we use the flutter plugin to interact with the database from flutter apps and here we are at the Super Bass dashboard once you have logged in with GitHub you can create a new project and name it anything here I'm adding it chat client and add a strong database password then you can choose your region where most of your users are going to be based in and then add a pricing plan and then you can create your very first project on super bass once you have landed on the project page you will find a lot of views which is is going to be for table editor SQL editor database authentication storage Edge functions Etc you also have the project API keys and the project configuration URLs here at the dashboard which is going to be useful for you to connect your flutter app with the Super Bass project now let's talk about how we can actually connect to our Super Bass project from a flutter application let me give you an idea of how the video is going to be like we're not going to be building an entire folder application from scratch like the UI the logic the classes everything no we will be only exploring the super based apis that is there in the current flutter stable plugin and I guess you are right now in a great stage of your Learning Journey and you will be able to figure out how to add that knowledge or how to basically use this apis in your flutter application so once you have your very first project and Super Bass already added to your Pub spec you can go ahead and and add Super Bass dot initialize and await on it because it is going to be an async function it is going to take two parameters which is going to be the URL which is the super based configuration URL that you will find in your dashboard and also the Anon key which is also something that you can find in your dashboard and of course you are going to add the async key to your method because this is going to await on a function and that means this void main has to be an async function as well and also called the widgets flunder bindings in a short initialize method because you are adding a native plugin to your flutter application and it will be required in your world main now once you have initialized super bass you can basically start using the instance of the Super Bass class which is going to be so base dot instance dot client this is a Singleton instance that means that you can create this as many times as you want and it will give you only one instance throughout the project basically you can have this instance in as a global variable wherever you want but that may not be a great architecture for your application so I would suggest to add it to a class that probably something that is database service and of course to make this class more testable you can have this client being added to other Constructor and remove the instance creation inside the class so now your database service is created we will create something similar like maybe an odd service now that means that we can start working with authentication and let's explore how easy it is to actually build authentication services with supervis so in the authentication Service class we will be doing some generic methods like how to sign in the user listening to the auth status or getting a method that tells you if the user is logged into the current session or not and of course signing out the user as well however today we are going to be exploring how we can do authentication with email otps which means that the user is going to give an email to the device and we are going to send an OTP to that email and we have to verify that OTP is correct or not that means it is not just like one sign in user method you will also have a verify OTP method as well which is going to verify the OTP given by the user now let's talk about the sign in user thing and see how easy or hard it is so you have a sign in user method which is going to be a future avoid function and you can take a parameter for the user email which is where the OTP is going to be sent and then you can basically do client dot auth dot sign in with OTP and that's the method that is available currently the flutter plugin and of course this sign in with OTP is going to get the same parameter for the user email so superb is going to do do their magic and send an OTP to this email ID and of course you got to await on it because this is an async function now usually in your super based project email authentication will be enabled by default but you can check it in your dashboard as well and check all the properties that are enabled and disabled and if you want to change any of these values and of course there are phone authentication Google authentication Etc that you can play with later after this once you're here in the authentication tab there is something called email templates which has templates of the email body that you're going to send to your users and go to the magic link Tab and instead of confirmation URL add the dot token variable which is going to be the OTP confirmation URL is like the magic link that a user can be sent to or redirected to and they will be automatically logged in but the token is for OTP so now probably have built the front end of your chart application and you probably have a button that is going to be signing the user with the given email once that button is clicked it will trigger Super Bass to send an OTP to that given user email ID and currently the email body is going to look something like this for the user so now the user can just get the OTP and add it to your front end of your application and now you can start verifying the OTP which we are going to explore in the next three seconds and here we have the verify OTP method which is going to be also a future avoid function and the parameters are going to be the user email and the OTP value and once you have got those values you can basically call the auth instance again and call the verify OTP method on it and give the user email the OTP and also something called an OTP type which is going to be.magic link for this certain scenario there are other types as well like for Recovery OTP or some phonota P or whatever it is you can check it out in the inum for OTP type and once this verify OTP is called it will let you know with an error or a success message with some details of the user and the token Etc now for any software there is an input and there is an output or for application you can say that you get some data you send some data so it's always like a transaction that means that in your login page you're basically sending your email or OTP details to a system and the system is sending back your authentication status if it's logged in or not so if the ODB is wrong you warn the user and if the OTP is right you take them inside your beautiful application so we either get the current authentication status or we want to fetch the current session data for now we're going to proceed and figure out how we can listen to the authentication State changes so here we have the listen to odd status and again on the instance of auth we are going to call the method on auth state change and list listen to the data changes of authentication right in this block of code so we can also return this and basically this will be a stream subscription of auth State class however let's go into the listen block where we get the current information represented by data and inside this data we can get session details which is going to be data.session and also auth change even which is going to be data dot event now how do we basically work with this that we can actually you know Add a switch case for the auth change event and the switch cases were going to be like for signed in and here we can check if the session details or the session data is not null that means the user is successfully signed in and at this point you can basically handle the sign in logic whatever that you want to do and there are other auth change events as well which is like uh for password recovery or for find out statuses and there are others Etc that you can check out in the documentation now of course we also want to check at certain places of your application if the user is logged in then we allow them to do X or we don't in this case we just get the instance of auth and call the current session variable and see if this current session is null that means that this user is not logged in and if it's not null it is logged in so you can basically just return this Boolean value in this method and of course the final method which is for logging out and it's a simple sign out method on the auth instance and that was super simple I feel but also pretty out of the box right but let's talk about the one thing that supervised is really famous for which is databases so imagine you're building a chat app what an original idea and of course you want your messages to be in real time so we are going to be exploring real-time databases by Super Bass but first let's build our table in our Super Bass dashboard you can use the SQL commands to create a table from the SQL editor however I know that most of my audience is front-end so they are not so Hands-On with SQL commands so I'm going to be using the table editor to create a table in the dashboard so here we are at the table editor of the Super Bass project here you can create a new table table and give it a name in this case it's going to be the messages table and you can also add a optional description make sure to enable the row level security for the RLS policy and since this table is going to be real time make sure to enable that as well now what are the columns do we need for this table we have the ID and created ad for the timestamp we also need the message column because that is what it's going to store the actual message content and the type for this is going to be text and here we have to Define what the default value is going to be will it be null or an empty string in the extra options if you check this column can be nullable so you can definitely check that also we add another column which is for the author ID which is going to be an integer and it's going to store the author who actually sent that message in the extra option this is not going to be nullable because there has to be one author ID for sure and yes we are creating a very first table for our very first Super Bass project now from the dashboard itself you can create your very first row of course you can do the same thing from the application as well but we just want to have some populated data at this point of time so here you can add your author ID because the ID is auto populated and of course the message which is going to be very custom I'm sure and of course even at the date and time is also going to be Auto populated so yes you have your very first row in your very first table of your very first project of Super Bass so let's get into the code and how we can actually integrate this with the apis or the flutter packet so now we have the database service previously we had the authentication Service and this will have our very first method which is going to be listening to the chat messages because we want to get a real-time update of Whenever there is a new chart for a particular condition so we have our listen to chat messages method in your database service which is going to be listening to all the updates on the messages table for a given condition for a given user Etc so first we need to get the instance and from there you can do Dot from and in from you can basically Define your table name which is going to be in this case messages and then you have something called dot stream which is basically saying that I'm going to be streaming this message is stable here and here in the Stream you are going to be adding a parameter for the primary key which in this case is the ID and then you basically can listen to the stream of messages from this message table now this listen block actually gives you a callback method which is basically going to give you the data that you will require you from this table in this case it's going to be a list of data and this list is going to be a map of string of dynamic and inside this lesson block you can do whatever you want to with this data you parse the data and you can display it in the UI now when you actually try to run this you are not going to get any messages from the stable and that is because your RLS policies are enabled however you have not defined any policy for this particular table so let's get to the dashboard again and Define some policy for how or what kind of data can be fetched from this table here are the table editor in the dashboard you see in the top right no active RLS policies now here you can choose to disable RLS completely for the stable and that means that anybody can fetch any rows from this table or you can choose to create a new policy which will decide how and who can access data from this table now you can create it from scratch or from a template I will choose templates and here in the templates you see the one for enabling read access to everyone so if you want to use that or if you can check the second one which says enabling insert access for authenticated users only now that kind of fits our use case so we can basically use this template and modify some of it so instead of insert we can choose select operation because we want read access and return true because there is no expression also change the policy name and then you can submit for review now after enabling the policy if you run the listen method you will get all the previous messages and any new message that gets added to the database after you are running the application which means that anytime there is a new message in the table and it matches the condition it will notify your client which is your flutter application and then you can do whatever you want to do with that data displayed in the UI or notify the user Etc let's see that in action so here from the dashboard itself I'm going to be adding another message again ID is auto popular related user ID some random user ID and I will add a custom message here and of course created art is also Auto populated so once I save this there will be a notification on my client if you can see I actually added a debug Point here and if you see the last message is the new message that I had added from the dashboard now that was seamless and latency wasn't an issue either now supervis allows a lot of filters and modifiers as well for example once your app scales you're going to have loads of messages and you do not want to load all of them at once when the user opens your application so that means that you want to limit the rows that you want to call for that particular call which will limit your responses and make sure that your payload size is also controlled so like we have this free method and after stream you can basically just call the limit and add a number here and say that you only want three responses at a time now of course either you can call this method in your in its state of your widget or you can actually return this stream of data and this can actually be used or called by your stream Builder later and you can work with the data of the UI once you have any kind of change in the messages table now supervis allows a number of features under real time one is broadcast where you could basically send messages from one client to another with low latencies another is a presence feature which can track and synchronize shared State between multiple clients and also we have postgres changes that can also be notified to the users in case you want to notify users Whenever there is any kind of addition in a particular table you want to notify all the users for it or a particular set of users let's check that in action where we basically have a notification method that lets us know whenever an insert has happened on the messages table so if I have an insert method we get the client instance and call the channel method on it which takes a schema and the table name in this case public current messages then we call the on method on it which takes a listen type a channel filter and a callback method the first one which is the listen type is going to be postgres changes because we are listening to the database changes here and then we have the channel filter here where you can Define what event you're listening for so in this case we have the insert operation and then the schema and then the table name and then you have a callback method which basically provides you that payload data and on this block of code you can do whatever you want to do once that insert operation has happened so either you basically send a toast to the user or like change the UI somehow whatever you want to do and finally you subscribe on this call and that's it you can call this method from any of you in its state and it will notify you whenever there is an insert operation happening on the messages table now our database service has a lot of real-time methods that means that we are getting a stream of data from these tables however what if we have scenarios where we only need like a one-time fetch like suppose we want to fetch a list of the start messages for this particular user we don't really need it in real time right so we need a one-time fetch API and of course Super Bass allows you that as well so now we have a method called Fetch start messages which will again call the messages table and it will in this case call the select method because we want to like Fetch and read data only and if you do not have any parameter in the select method it will mean that you need all the data from your table all the columns I mean but if you specify a certain column inside the select method it will only give you the data of that particular column and of course on top you can add an equal method which is going to check the condition for the data that you need so in this case we want to check if there is a column called start and the value is true in this case I only want those rows which are starred as true and of course you await on this because this is an async method and you get back a list of data which you can work with parse it and do whatever you want to do with it now from the dashboard we can create a new column called start and give it an optional description and the type is going to be a Boolean which means that it will take either true or false and not null so we have to uncheck allow nullable here here and give a default value for false now you can save it and you will see that all the rows are Auto populated with false from the dashboard itself we can basically change some of the values to true so that we get some data when we call the fetch method now here from The Client app when we run this method you will notice that there are two data the two items are actually appearing which are the ones that we have changed from the dashboard now if you go into the reference page of the Super Bass flutter plugin you will find a lot of different filters and modifiers that is allowed by the plugin but of course supervised allows you to play with all the kharad operation and not just read Because till this time we've only been working with the read operations and also while we are adding a message we're doing it via the dashboard but you can do it all by your client app as well and of course when you are doing the start messages you are going to notify the database that you know make this true or false and that would be an update operation on an existing row and and you can do it something like this you have your star message method which is going to take the value if it's going to be start as true or false and the user ID because you need to know which row that you want to update so in this case you again call the client from the messages table and here instead of Select you're going to be doing an update property and mention what is the new value that you want it to update to and of course it needs to have a condition which is it only updated for the user ID where it matches with this given X user ID so definitely with an update you need to have a match property as well that was it for today's video I had a lot of fun exploring Super Bass and also working with proscare SQL after a very long time and the fact that it was super quick and easy to set up was a cherry on the cake so if you have worked with Super Bass before then let me know your experience in the comments below so that we can let the team know about it and they can work on it based on your suggestions and of course if you've liked the video then definitely do like it because that makes me very happy and of course share it with your friends that makes me happier and maybe subscribe to my channel because that will make me the happiest and have a great day and a great learning and I will see you in the next video

Channel: Pooja Bhaumik

Views: 8,641

Keywords: low code, no code, supabase auth, supabase vs firebase, supabase tutorial, supabase flutter realtime, supabase flutter, flutter, flutter database, flutter packages, flutter authentication, low code no code, dart flutter, postgresql, postgresql flutter

Id: UTSSYPOd5A0

Length: 23min 0sec (1380 seconds)

Published: Tue Dec 06 2022