Building a Simple Real-Time Chat App with Supabase

uh this is the coding garden we write code um it's not always this complicated a lot of times i do fairly beginner friendly stuff um and yeah we just write code here so i'm we're very open to beginners and noobs if you have questions about code you can ask them i think what i'm going to do right now is i'm going to try and uh build a super basic chat app so here's here's the thing for our for our database for our back-end we were using we're using this this uh project this tool called superbase and i'm i'm just learning it so like uh when when did i last stream was this like monday i think uh yeah and it's not this is not sponsored i'll tell you it's not sponsored but on monday i did a live stream where i just kind of learned about supabase for the first time and so i've i think i've know it enough in in building out this that we can build out a super basic project that uses it and um we'll do like the classic real-time example of like a chat app so we'll build a super basic app where you can log in and then there'll just be one room that everybody can send messages in um does that sound interesting can i get a smile in the chat if that sounds interesting and i'll build it i'll build it all the way so i mean it's it's gonna be super basic it's not it's not gonna have rooms there's not gonna be dms um base database [Laughter] it might have been sunday yeah you're right it was probably was sunday yeah and so uh supabase is an interesting project in general because if you look at their their docs basically it's a collection of open source libraries so it has a postgres database behind the scenes we're going to explain everything here we go here we go we're going to explain everything um let me close out of this for now let's kill that um and let's make a directory called bogachat the premiere chat app so all of our code is going to go in here um yeah let me close out all this other stuff i gotta i gotta set the stage i gotta all right so first off what's a database you might okay jlove what's up friend we were so okay yeah a quick shout out to okg love so if you if you're interested in uh japanese pokemon cards you absolutely should be following okjlove uh he opens japanese pokemon cards on his channel um and he speaks japanese and a lot of times he talks about the etymology of like the japanese pokemon names um and he's a super cool dude so check him out but he originally came to me with the idea that uh about the app that i was building that i am building um the fact that it's really hard to find prices of uh japanese cards online especially for english speakers okay but what's the database so um anything that you do in in the web in the world um has some data associated with it right so you're on twitch right now right and you have a twitch profile so on your twitch profile you have an image set a lot of you do you have an image right uh you probably have um uh the well in the twitch chat you can set what you what your color what you want your color to be um there's data about every twitch streamer in that like there's a list of all the videos right so there's all this data where is that data that data is in a database right and there's there's so many different kinds of databases um so uh there's relational databases daces there's not yeah yeah i'll show you so real quick for those of you that don't know you can do this um in the twitch chat if you click on actually i don't know if this is um uh is this franker faces or does everybody have this so if you click that you should be able to scroll down and then you can set your name color does it work this way for everybody everyone has that cool so if you want to set your color you can do this click this and then change your color um but you have to be wondering so let's say you say you set your color today and then you come back to twitch tomorrow and your color is still the same how does that work databases so that that color setting is stored in a database somewhere um and so it's just how the the world works it's persistent storage um and basically by having all of that data in a database when you go to the website there's some there's something happening in the cloud in the background that's reading from that database to see that oh my color should be green or my color should be orange right cool so that's a database there's lots of different databases um you probably you might have heard of uh mysql is the database something uh physical yes absolute well i mean it's running on a physical server so there is a server somewhere that is running database software uh you might have heard of mysql this is like a really common one um and typically you use like with php i mean you can use it with a lot of other stuff as well but mysql is a database uh what else there's microsoft sql server um this is a sql database from microsoft what else there's mariadb which is a fork it's an open source implementation of my sequel oh yeah yeah that's a good one if you've ever taken any sort of like business class you've probably heard of microsoft access yeah so microsoft access uh is like a database but it's just running as an application right typically like you you launch microsoft access you can manage the data but that's an example of a database system yeah oracle is one yeah that's from um oracle oracle vp it's a type of sql database um yeah that's a thing and specifically the one that we're going to be using is a database management system called postgres and so this is an open source uh database uh management system a dbms and um so i mentioned it it's running on a physical server somewhere so somewhere somewhere some somewhere some somewhere someone has a server like and a server is just a computer we're going we're going we're gonna like we're gonna go down the rabbit hole of explaining all of these things so um let's look up a server so if you've ever seen something that looks like this this is this is like a uh a server farm right and basically each one of these little horizontal things is a computer um and uh it really is just a computer like like i have a laptop here this is my macbook this could be a server uh these are typical these are rack servers they're specifically built to be a bit more hyper high performance and to fit within these types of things so you can have lots and lots of them in one place but it's just a computer and it's running it could be running windows it could be running an operating system like a linux variant but on it is the actual software for the database so postgres is running on that machine or my sequel is running directly on that machine and this software stores the data like on the hard drive so someone asks is it physical it's on a computer but this software manages that cool so that's a database and we're building a messaging app so we need a database right um let's just start a little readme to talk about what we're going to need here yeah and so uh climate is just saying what could be considered a database is incredibly broad a text file or even an excel file could be considered a database the more rudimentary ones aren't very skillable and might be a very bad idea to use yeah exactly so any sort of persistent storage could technically be a database but the thing is something like postgres it's been around for a very long time and it's very well supported and very stable so a lot of people building applications will use something like postgres um because it it can handle all that kind of stuff okay so we are going to build a simple as simple as possible a simple chat app uh and java wants me to update um okay but for our database uh we need to store some data right text files so uh we need to store some data in our database for this chat app you tell me what is some data that we would need in this database for our chat app um i'll i'll let you let you give me some suggestions you have to turn the light before you can code yeah username so actually yeah and in the the a lot of times the way you have to think about this is kind of like hierarchical hierarchical so like we need users in our database right but users have certain attributes right users have user names um they might have a profile picture yeah um messages um yeah yeah so let's say we users is is at the top level but each user has a username each user has a profile image right and then um uh users can send messages so this is an example of another story we would need so we need to we need a data store for all of our messages but what do what are some properties of messages their ip address yeah oh yeah so if we're doing username password login technically we would store passwords um yeah what what's on a message timestamp yeah so like what time was that message sent uh the content itself so like what is the message like hello world um the user id right so we want to know who sent that specific message and that's how it's going to tie it back to that specific user yeah for sure um yeah and so the this is the sender and if if this were like a private messaging system a message might actually have a like a sender id and a receiver id so this this is who the message is from and who it's going to um all that good stuff in our in our very simple chat app there is just one room and everybody's in that same room yeah and then you technically could have like messages could have reactions if you think about like discord um and then reactions um are likely their own store that has something like a message id and that way we could have a lot of these and then like a emoji id or something like that yeah yeah so right now we're just kind of talking about what kind of data we need this is what's going to go in our database so we are going to have a place to store all of our users for this chat app we're going to have a place to store all of the messages um and that's that's about it so let's get going let's do it let's make it let's make a database so supabase is built on top of postgres i talked about there's a lot of different databases postgres is one of them superbase is a software as a service that's built on top of it so behind the scenes they're using postgres um and we get access to that so let's let's make a new a new thing can i talk about row version and where it's useful i'm not sure what you mean by that we want emotes we'll see if we get the thing is like this is gonna take some coding okay so um uh i'm gonna create a new project i'm gonna call it booga chat um i need to come up with a super secure database password so please give me a second while i do that um yeah i'm gonna be using javascript for this um and we'll get into like the specifics of the code like where is this code running and where is the code and stuff like that but um refund one two three it's actually it's actually funny because the superbase will prevent me from creating a password that's too easy to guess because basically this password is the password to the entire database and so anybody that knows this password would have full access to the database and so i don't want to reveal that i absolutely don't want to reveal it because if they had the database password they could just they just log in and steal people's stuff okay all right so we're creating our bokeh chat full access you say yeah um and so it's gonna take a second so what this is actually doing is this is provisioning a database server for us which is really cool um i actually don't know the details of it but i imagine it's like spinning up some sort of container and that container has uh postgres running on it but after it's done uh i'll have a full full dashboard where i can access this database and and handle like the data that goes into it and then write code to put data in there and take data out of it yeah and so right now i'm on the free tier the free tier offers uh 500 megabytes of storage for free and then they have some tiers you can pay for yeah oh uh we're we're pausing on the japanese pokemon card app just because we were so far in the weeds like we were so far in the weeds that i would not be able to really explain that much of what was happening and um i feel like this will be a little bit more entertaining we're going to see this app from the ground up from the ground up um okay while that's loading we're gonna open up the supabase docs uh because not so not only do they provide a database they also provide tools for doing authentication um and managing users uh and helon thank you for the bits i'm really famous now that's funny so for our app i actually don't wanna store usernames and passwords i want it all to be managed by superbase and i want people to be able to log in with the one of these specific logins um and i think for now like it's actually kind of unfortunate that they don't support twitch login um yeah and i mean we're talking about databases like if you ever if there's ever been some sort of data breach of some kind that means that that specific company's app wasn't very secure their database password probably didn't get released uh or revealed but some they had some vulnerability in their code that let someone get all of the data out of the system i already know what stack we're going to use we're going to use bootstrap and we're going to use uh probably vanilla.js it's going to be easy it's going to be easy um i guess i guess we'll do google login because most people have that so that's what we're going to do so basically when you go to this page you'll click login with google that will redirect you and say do you want to allow this app to access your name or whatever if you say yes you get redirected back and now you're actually logged in this is an example of oauth you've probably done this on a lot of websites um like social login where basically um a website says log in with facebook or log in with twitter that way on that site you don't have to create a new password you don't have to remember another password you can just log in with one of your existing accounts all of that happens via oauth and basically what happens is these services well we're basically trusting these services we're saying hey i trust you google and i trust that you're going to tell me that that user who's logging in is who they say they are um and so we we should be able to integrate that all right so our database is ready to go uh i'm gonna go ahead and set up authentication um though you know what i'm gonna need we need a client id we could just do anonymous we could do completely anonymous chat app that would actually be horrible um it could be really bad but there won't be any images you know what we're going to keep it simple we're gonna trust you whenever you go to this website you're gonna just type in your name and then anybody that types in that name will be able to send messages as you oh we're not working on the pokemon app right now no no we've switched to gears we've switched gears right now we're just building a chat app we're building a chat app um yeah yeah we're gonna make this an anonymous anonymous chat that's what we're gonna do um yeah yeah you just wait wait can you have i don't know here's here's the thing so if we if we go about like trying to set up authentication here um actually you could do login with email give me a second i need to look at the look i need to look at the dashboard to see um what i need to specify so [Music] if i enable google i need a client id and a secret yeah but i'll show you um what i'm looking at here in the dashboard so within supabase i can go into authentication and settings and i can enable one of these oauth providers this is nice because i don't have to write any custom code i literally just enable it and then put in um my secret values that i get from google i have to i'd have to log into the google developer dashboard uh so that's nice but because i can only use what they provide i cannot add twitch authentication though technically we could do our own oauth like we could do the client flow oauth with no because then i would need like a backend to verify the token go premium you can add your own i'm not going to do that we're going to try it with google actually no no no okay we're going to do it uh we're totally anonymous at first so you can't create an account you just can start sending messages if that gets working then we'll add auth so we're going with anonymous and so we actually aren't going to have a users table we're literally just going to have a messages table that's gonna have a uh we'll say the username the time that you sent the message and then the content of the message oh and congrats yeah yeah i totally forgot to tell you all about the drop game um it's probably going to bring it to us grinding halt but in the chat if you type drop me that will drop your avatar from the sky like that um if a lot of you do it it'll just kind of break and the screen will be unreadable um okay but yeah this is this is it we have a database that stores messages each message each message has a username a timespan timestamp and some content great so here on supabase i need to design a table that will store that data so we're going to call this messages it's going to have a primary key so this is going to uniquely identify each of the rows it's breaking yeah it's starting to slow down um terrible idea i could reset it no it's fine it's fine all right so we have this messages table but now i need to define what the columns are so every message has a username and then you can put in your username so this is going to be a var char so the username is character varying and it cannot be empty so every message must have a username no oh yeah no auth is a bad idea i agree i totally agree but it's easier so that's fine um all right and it doesn't have to be unique because if one user with the same username sends two messages then we're actually going to have two rows in here with the exact same username which is not good database design but it's as easy as we can make it so we have a username and then we also need the content and so content is going to also be a character varying um and it cannot be empty so this is the your actual message like hello world or how are you um and so yeah so we have the content and then lastly we have created at so when was this message sent and this is going to be of type timestamp it cannot be empty and when we create a new message um it's gonna default to right now when that message was created okay so at this point i have my database table and you can see in the ui here it looks kind of like like an excel spreadsheet and that's because it kind of is like this this is like a spreadsheet where we can store all of our data but it's a it's a really big scalable spreadsheet it's a postgres database um we can hold a lot of data we can we can connect to that database across multiple clients and have multiple connections uh so this is basically like a scalable spreadsheet i've just assigned defined i've basically defined what are all my header columns and now we can write some code that puts some data in here uh first thing well actually do i yeah first thing i need to do though is i need to kind of like lock this database down um so i go to my database and i look at roles no not rules why do i do this is it under settings database um give me a second did somebody drop the mic nice storage policies no database um how how have i oh wait why did i see that before okay i found it so if i go to authentication and then policies i can define the policies for messages so right now right now messages is actually just open to the world uh if you were on this website you could create messages you could delete messages all that good stuff we need to lock this down so i'm gonna enable row level security and what that does is by default now no one can do anything to this database table but we're going to add some policies that say if uh auth.role is equal to anonymous then you are allowed to select meaning you can read from this database if you are anonymous uh read messages is the policy i think that's the syntax it's not the syntax uh i need to look at the docs um so if we can look at not storage database auth policy examples allow read access um what's the syntax that's a great question so you can see right now that this thing is yelling at me so if i try to save this this says uh well you can't see that but it says syntax error at or near period so what they mean is they actually don't know what i'm talking about so the basically the code that i put in here needs to be correct it needs to be syntactically correct so that it can actually do something and right now i'm just doing it wrong uh it i did it back yeah so i'm doing it totally wrong and uh mark boots has what we should have so it should actually be auth.roll like that so uh the fact that the uh parentheses were in the wrong place is syntax and i had a syntax error um let's see what wikipedia has to say about syntax but there's syntax all over programming um like your the programming languages we write in uh have to be syntactically correct to be able to run uh because computers are actually pretty dumb they just do exactly what you tell them to do uh and if because we weren't telling it exactly what to do it didn't know what to do with that but this should work so if the role is anonymous you can read messages operator does not exist double equal i really need to be able to just find this in the docs so this is showing me how to create those policies directly with sql um but it's possible to just do it uh here i think is it just a single equal sign it is okay i just guessed and it worked that's fine so now anybody can read messages and now i need to add another policy that says anybody can create messages insert data anybody can create insert data into the database so um let's say if auth.role is equal to anonymous you are allowed to insert um cool awesome these are the only two rules that i want because i so because this is a completely anonymous system i don't want anybody to be able to update somebody else's message because they could just put in the somebody else's username and then update anybody else's messages also i don't want anybody to be able to delete messages basically if you send a message it just gets put into the database forever and ever after that okay soon to be a keyword like if it's sql so this is not actually sql syntax this is a row level security syntax so this is uh specific to postgres and they have their own language for for doing that um and then also that's combined with um i did auth.roll and auth is actually a super bass thing so yeah uh we're kind of making like real-time bogue chan yeah yeah but there's no rooms um there's there's no rooms you can pick whatever username you want okay we're great we've set up the database let's write some code that that actually does something uh with this so here's what i'm going to do i'm going to create an index.html so this is going to be an html file i'm gonna eventually i'm gonna put this out on the internet and then when you go there you'll be able to see this page but for now it's just gonna be uh super basic we're gonna call this bogachat um and i'm going to add an element here that says hello world so we're in html right now uh each of these little things you see with the less than and the greater than these are known as tags and they can do different things specifically this h1 tag is a header one and so that's just going to be some pretty big text on the page um so uh let's go into bokeh chat and serve it up uh cool so there we go we have a page hello world uh but really what we want is we um we kind of want to show like all of the messages right right oh yeah and so uh this editor right here is vs code if you do x only one person needs to do this but exclamation mark editor in the twitch chat you'll get a link to my uh all my settings and stuff like that uh and and exclamation mark vs code will get you there as well and what's up smooth dog and uh richo welcome okay uh i think what i'm going to do so as you can see the site is very basic i want it to look good by default so we're going to use this thing called bootstrap and it's just going to make everything everything look pretty everything look pretty oh yeah you're totally right let me update that title um a simple anonymous chat app how do you spell anonymous a naughty mouse anonymous i did it right uh and iggy sticky bandit thank you very much for that prime sub okay uh anomalous anonymous um okay so bootstrap is really cool basically i can i can just bring this library in and then i can have like buttons that look like this or i can have uh card components that like look like this um and i guess for example i think there's a thing called like a media group media object yeah uh kind of like something like this right where you have like the user's avatar and then their text message and it's in like a nice little box like this and so all of the chat messages on the page could actually just look like this and so what i'm going to do is i'm going to add this bootstrap library and then this code is all i need to have a nice little box that looks like that so here we go uh we're gonna go to bootstrap we're gonna go to get started and um we're gonna just grab the css so css is cascading style sheets when you're building websites there's pretty much three technologies there's html that's what you're seeing right now this is like the structure of the page then there's styles so this right here are styles that somebody else wrote but by bringing them in i now get all of those styles applied to my page and you'll see that hello world is going to be a little bit nicer like that like that it shows a different font for me yeah is this code along viable we're pretty deep into it now though because because we've already created the database though technically uh you could build the ui and talk to my same database yeah okay so uh look at that we got a new font it's beautiful um now for example if we go back to like that media object thingy um this if i copy and paste this code on the page here like that uh we're going to get a nice little card where are we well well what if i copy and paste this well okay so first of all we need to put this into a container like this so i'm gonna have this parent element i'll give it a class of container so this class container is actually built into bootstrap here and that's going to give it a little bit of padding on the edges so we'll use that um and we're going to put that in here okay like that nice beautiful um we need uh actually we should we we need a user image for everyone but i think we're just gonna use um bonzi bonzi onesie please this guy actually how about everyone's user image is just um uh it's it's bogahey yeah like that this is perfect so um each one of these will have an image that looks like that um and then yeah should be fine great it's kind of horrible actually what did i what did i do wrong um media my four um yeah i want it to look like this we'll get there give me one second yeah but really like 2x great um i'm just really curious why this isn't side by side what did i do wrong here regardless um we can actually just use the grid system okay it's gonna get a lot more complicated than this but basically to take a step back what i'm doing right now is i'm figuring out what are the messages going to look like on the page um and i think i actually just need to wrap them in a card because this is not doing what i thought it would and so every um every message on the page is going to be in a card so i'm going to have a div that looks like this um like this actually if i do div class card that might actually yeah look at that it's this giant we're gonna fix it though we're gonna fix it but you can see that now there's like a little outline outline there uh and so now it's inside of a card great um and then um i need the card body um like this there'll be an image inside of it like this great now we're getting closer right because this is going to have the user's image then we'll probably have like the username below it and then like the text off to the right um oh why there's a loading spinner because somebody dropped a loading emote can i set a dark background switching between light and dark is hurting my eyes yeah absolutely actually i'll do this so an even more customization thing we're going to do is uh so we're using bootstrap that's this thing that's giving us all of those styles but somebody has extended or created custom things themes boots boot bootswatch has created custom themes for bootstrap called bootswatch and we can pick from them so for example we could choose the cyborg theme um and now if i grab this css instead of the bootstrap css it'll look the same it will just be uh the cyborg theme by default here we go oh i need rel equals uh stylesheet nice nice and dark okay um all right we're on our way so we have the card uh in here um i think what i want is basically like two columns so i want the image on the left hand side and then the user's text on the right hand side so i'm going to do a div and then uh bootstrap has a built-in class called row so i'm going to say i have this and then i have a p tag uh inside of that p tag is the actual like text of the message so i just have some filler text for now and if we do this um you can see like this happens but what i want is i want the image on the left and the text on the right what is when the url of the bootstrap link isn't available or just oh yeah yeah so if um if this website goes down my page will no longer have any styles on it basically if this website goes down my page will look like this instead so basically by applying these styles we get a we get like nice colors and stuff like that uh okay but we want two columns so uh we have a div with classro then we'll have a div with class column small two so um basically take up two columns and then we'll have another div with the class uh column small uh 10. so the left-hand side should take up two columns and the right-hand side should take up 10 columns like that it's pretty good yep and then like now inside of uh this part right here uh we could specify the user's um uh the username so like there could be uh another paragraph tag right here that says cool guy 420 um like that um but we'll probably like bring the font size down and then now let's actually create some of our own custom styles yeah and i'll tell you like these keyboard shortcuts i'm using so uh in visual studio code if you hold down um at least on a mac if you hold down alt which is option and then the arrow keys you can take that line and just like move it up and down like that um and then if you um uh if you want to like select a line i'm using uh command shift and then arrow keys so select to the end select up select down select all the way to the beginning select all the way to the end yeah okay um here's what we're going to do we're going to create our own custom styles here so what i'm going to call on on this element that has the the user's image and their name i'm going to call this uh like avatar container so now i can write my own custom styles that target this that target this element to style it so let's do that so i brought in somebody else's styles but i can add my own so i'll do i'll create my own file called styles.css and then you can see what css looks like so in here um this will i want to create a class for avatar container so that's going to target anything that has that class on it like this and i want to do some stuff and then right here i'm going to give this a name of like avatar username so i can make the font a lot smaller as well user container we'll show the timestamp like at the bottom right um okay but uh let's say username has a font size of uh 10 pixels um so that should bring yeah so that brings the username's font size way down and then the container i want to make it a flexbox uh and these days in css it's actually really easy to just center it so uh right now um okay that i said i set it to flex and then that happened uh but let's say i want that image and the name to be like in the direct center of that left-hand column we'll do display flex uh justify content center align item center and then flex direction column because i want to center things i want the the elements to be one after another in a column and that does it like that so nice we have some nice and centered uh user profile image name we have the text of their message uh let's see what happens thank you thank you doc let's see if there what happens if their message is a lot shorter so if their message is only like one sentence yeah yeah it's perfectly fine okay uh last thing is we want to show the the date and i think i'm going to show the date like in the bottom right so let's do this we need another row and then um i basically want two columns off to the right that will have the current time does place item center actually work um oh yeah this will be a p tag and then this will just say like 4 20 p.m today um and right now that's just going to be right there but i want it to be off and to the right so we could use some like column offsets let's see um yeah [Music] yeah do i need to put a fixed height on the image i shouldn't have to now margin left auto is that really all i need oh no you're right let's do text align right i like that that'll be the easiest uh we'll just give this a class of uh timestamp and then i can target it and put it on the right so timestamp will have text align right but technically this needs to be a column column sm12 so take up all 12 columns but put your text on the right like that it's beautiful yeah you're totally you're totally right though we actually don't necessarily have to do this text right here's a built-in class so right here we could actually just say text dash right and this is another class built into bootstrap that'll that'll do it it didn't work is it right text oh i didn't save it no it's not working it's fine uh this is about all we need and i'm also going to bring that font size down so i'll say that the font size is i don't know like eight pixels way smaller like that it's beautiful okay this is what the ui will look like now at this point we actually need to hook it up to the database right because right now we just have sample data but we need a way for the user to send a message um and then uh we'll need a way to list out all of those messages actually i'll do listing out the messages first and so to recap really quick we have this html this is like the content of the page uh we have this css which is our custom styles we also have some external css that we didn't write but makes it makes it look good by default next up we need some javascript so the javascript is actually what's going to let us connect to our database and get put data into it and get data out of it margin bottom yeah i mean i really need margin on the whole thing like on the whole card so like margin two and then there's just like yeah there's like spacing all around i like that um okay but we need some javascript so i'm going to call this app.js and this code will actually make the requests to put data into the database and get data out and so if we look at supabase there's some api documentation and so basically earlier we created the table uh let's go ahead and put an example message in there so the username is anonymous and the content is hello world um i always question whether i spelled anonymous write cool okay so uh now that data is in my database i want to write code that pulls that out of the database so if we look at the api uh there's some messages in points and i basically just want to get everything out of messages i want to do this right here so this little piece of code will get all of the messages from my superbase database but i actually want to put this into a function so that way i can call it when the app loads and then we can get all the messages and put them on the page so i'm gonna just call this like init so when when the page is ready um we're going to get all of the messages from uh superbass and then we'll do something with them um but you might be asking what is superbase we actually have to bring this in we have to create a client instance that connects to our back end um i mean on honest honestly okay um but let's do that apis uh no client libraries i guess i need reference data select installing um i wonder if there's a uh uh what do you call it if there's a a cdn link for supabase um i'm gonna look on js deliver so um just like so in this in here we brought the css in from bootstrap and it's just like or a bootswatch and it's just downloading it from their server we need to do a similar thing with supabase we have to actually bring the superbase library in so that way we can use it but i need to find what that url might be or we can just download it locally but let's see this is the library we want there is a dist folder um there's a main and there's a superbaseclient.js i think this is what i want i think this is it um yeah so we can now add this to my page uh and i'm actually gonna add this down here at the bottom i'm gonna add a script tag and the source is going to be that so that should bring in the client which is going to let us talk to that superbase database and then i'm going to bring in app.js and this is going to use that client to connect to the database so let's create a script this will be app.js and then now we need to actually use it um so this was an instance of supabase client and then if we look at their documentation how do we initialize it okay so it's going to be like this we'll say supabase is going to be superbase superbaseclient.createclient and then i need to pass in um my actual project information so like what's the url to my database um and then uh what are the credentials so um the actual uh url to my superbase project is this and so when i'm creating the client i can say you need to connect to the database there soup and base yeah and then i need to specify my anonymous client key and so uh with this key uh it will allow me to do things on the database as the role anonymous um now here's what i'm gonna do i'm gonna write this code up here and then we're gonna try not to look at it and i'm gonna hide my screen now technically this is public information right like uh after i put this key in um when i release my website everybody's gonna be able to see i misspelled superface uh let me fix it soup base yeah you're right super bass um when i release the code you technically will get access to the key which is totally fine because it's just the anonymous user um however i don't want to give it out right now because there's some some of you out there uh would mess with my database before i'm ready before i'm ready for you to uh but after it's out there you're totally free to mess with it but i wanna at least be able to do this um without you messing with it and i'm gonna try my best not to reveal that okay so that goes there this goes here and then that goes there all right um if i did everything correctly we should see some data um cool i need to fix this so i'm getting some errors right now exports is not defined that just means that i picked the wrong one um create client where's superbase client one it's require a thing yeah this is expecting like required to exist um so what i think i need is the module build and then i should be able to import it um maybe all right let me hide my screen for a second uh we're not doing an npm install because i have no build tools um yeah there's no build tools this is all just vanilla js and so if i were to use an npm install then i would need like a build tool to bring it in i could just use fetch but the main reason i'm bringing in the library is i want to for this we actually do need the real time so we want to be able to listen for when new messages are created in the database which is why i'm bringing that in let me see if this works coil twitch bot thank you for those bits i realized i mean the bot gave me the bits but it's because somebody uses coil or something like that um let's see if this works wait oh no you know what i want i want umd so umd is universal module definition i think that's what i want give me a second the readme has the cdn i didn't see it thank you uh ralshma oh here it is oh and i literally i literally just found this link cool but i'll show that let me um all right i'll show you what i'm working with so thank you very much to um uh roushma who shared the link here so i just i have a hard time finding things in the documentation but here it is this shows us exactly uh how we can bring in uh super bass and so i can just copy this and this is the one that i wanted i had pulled in the wrong one before and then um right here i just paste that in and this should work yes okay so uh if you remember i put one message into my database right it just has the text hello world uh now no no no now uh i got data from the server and here it is it has a username of anonymous and the content of hello world so we're on our way we we have connected the front end to the back end uh in the back end being super base our database now what we want to do is we want to take this data that we got and actually put it onto the page because uh right now um it uh this is just junk data right it's example data but we actually want this to be the real data from the database uh so that's what we're gonna do right now so in here uh we just got back the messages i'm going to create a function that adds the the messages to the page so we'll do um function add messages add we'll do add message to page um yeah we're going to do some dom manipulation and so we get the specific message and then basically what we want to do is we want to write code that generates this right so so this uh defines like uh the image the username the text the time right all of this html content does that um but we want to create this dynamically right it's not going to be hard-coded we'll say dynamically created by javascript so um that thing i want to create with javascript now i'm gonna do something initially so i'm just gonna create an element and built into the web browser there's this document object and i can say create element and i can create a let's say a list item and then i could say the inner html of that element is all of this stuff that i've that i figured out earlier uh and really i just want the inner contents here use a framework no it should be easy so basically um and then i do need to add these two classes uh to the list item but uh i'm gonna fix this i promise i'm gonna fix this um so basically i create an element this is going to be the contents of it but we can now change this this part like the name uh and the text and the time we can change those to be dynamic uh before i do that i need to add those classes i can do uh classlist.add an array of strings like this cool so this creates the element uh now let's say right here i want to show the actual user's name here i can do uh message dot username and then here i want to show the actual content i can do message dot content uh and here i want to show the actual time i can do uh message dot created app uh so i am dynamically creating this element but i'm putting in the values that are coming from my database and then i just need to add it to the page so right here this ul is where i want to add it so i'm going to give this an id of messages and then in my javascript i'm going to create a reference to the messages element so i'll say the messages element is document.queryselector so this is going to let me choose one specific element on the page and i want the element with id messages so this code basically just grabs this element right here and then i can add stuff to it so uh right after creating the element i can say messages element dot uh append a message element what did i call this uh or i just called it element which is fine so this function takes in a message that i got from the database it creates one with that username that content and that created that and then it appends it to that element so it should appear on the page um now all we have to do is for every message in this list call this function add that message to the page so that should be easy i'll just say messages dot for each message add the message to the page and now now we broke it uh let's see if it's actually on the page uh oh no there it is oh it just took a second it just took a second also i think we kind of just we might have messed it up let's see it's here it just doesn't have a background um div class row card body so we have an oh i see it put it put a weird class in it it put like a little um comma there i think i did this wrong the uh you know what here's what i can do no array just separated by a com okay i'll just do that card that that no array all right work nice okay so um that's awesome but now if there were multiple messages in the database they should also show up right so if i go back over here to my database and i add another row um and my username is charlie and my content is hi everybody and i save it now it's in the database um over here it this doesn't automatically refresh we need to add some code that will make this automatically refresh but if i refresh the page we should see that message that's in my database i do look at that it's from charlie so this is great now all we need is like a little form where the user can put in their name and their message click send it'll show up and we also need to listen for new messages actually that should be that should be pretty easy to uh pretty easy to do let's let's do that let's make it so that when a new message gets put into the database it automatically shows up on this page without refreshing uh how do we do that let's go to real time this um listening to a specific table listening to inserts this is what i want so when we insert into the message table do the thing um and so i'm going to write that code um actually right here so um our table is called messages uh when we insert we should get that specific message um we'll say message received like this and if this code is right we should see the new message logged to the console when it gets inserted if it doesn't work then i might need to like enable real time on my database i don't know if it's enabled by default um but okay pages loaded we have the latest code i'm going to go back over to the database and add a new row this is javascript yep our username is american2850 and the message is smiley face save now if it worked we should see in the console that it got created and we don't see that we actually don't see that right now so i need to read the docs on how to maybe enable real time i don't know if it's real if it's enabled by default um let's see if we go into data database um and we look at theme of the day read the docs yeah the thing is i'm i'm new to supabase so i'm like learning about all this stuff double check the table name in my javascript uh messages yep um actually one thing i can look at is if uh there's like a a websocket connection if there is then it likely is talking to the back end let's see um let's just see so there is a socket connection to supabase i'm curious if this is going to log out whenever we insert new data is this thing on all right and then over here oh look at this okay so we see a payload no this is just the heartbeat okay we need to do some we need to do some googling or some some some ducking super bass enable real time subscription see you later uh blind gvn uh we can read this blog i guess um only watch one table yeah that's fine um managing real time thank you mark good to hear yeah so rutek is saying real time is disabled by default for new projects for better data better database performance and security uh great managing real time click on the database click on replication so we go to database we go to replication superbase real time oh here we go here we go we need to turn it on for messages all right now that it's on we should should see it okay so uh did somebody hack me oh no that was me but uh but now um let's try again we'll say username is okjlove uh yeah and thanks for hanging out okay love uh we actually weren't working on the pokemon app at all i'll send you some screenshot later screenshots later of our progress so far um but uh yeah have a great one uh the content is um nerdface okay safe and and and message received so um this is great we we have an object uh we have uh the event type is insert and then new is the actual message itself okay and see later uh art art peryan um okay so uh message.new what we can do now is when a new message is inserted into the database we'll just say add messages to page message.new like that and that should show it on the page um i think one thing is we kind of want we want like auto scroll right like uh the container element this unstyled list here kind of needs to take up a certain part of the page and then scroll within it reverse the order but we do want new messages at the bottom right right um but just real quick let's let's work on that that layout so um basically we have our messages here and then below that we want an area where the user will like send their message like a form it's going to be at the bottom um and actually we can just call it a four and i'm going to give this a class of main area just so i can style it so basically i can make the messages take up like 80 of the height and then the form will take up like 20 of the height let's just uh do that and for now we should see that wait um we get a column flex with chat content overflow auto and chat form okay um we'll do that with our custom styles so i'm just going to say the uh bootstrap probably has flexbox in it i just haven't used it that much but we'll make it display flex flex direction is column great uh the chat content and then the form um yeah we'll just call this i mean we'll just target it as form form has flex zero zero auto and then uh for now i'll just say this is the form so this should be at the bottom of the page and then all the messages should be above it okay not quite um content would be 100 so the element with id messages height 100 column flex with the chat content overflow auto and the chat form flex zero zero auto oh 1100 so i see so this is saying could i do like flex grow is that a thing all right i'll try it i've never literally never done this eleven hundred percent so uh main area is our flexbox messages has a flex oh there's spaces i was like what that makes a whole lot more sense flex one one one hundred percent okay it's still not working though but regardless i'll show you the layout so uh we have um our container this is our flexbox i guess the the main area needs to have a height of 100 um uh overflow none so the main area wait overflow is being overridden the container should have the height oh overflow hidden is what i wanted not quite i think i need to style the body um have a height of 100 view height 100 view width okay so body great 100 view height uh um container is taking up the whole area of the body and then inside of that messages and then form um yeah this on i mean this is really just what i want to do check check it out so messages have a height of 80 and then the form has a height of 20 this should this should do it um yeah there's so it's behind but um we can now say messages is overflow uh scroll yeah like this so the form is down here and then you'll uh scroll like this yeah i mean it's gonna be really ugly on mobile we're not we're not worried about that i need i need to finish this i need to need to finish so that way um we can just put it on the internet and you all can send messages like crazy all right we need a form we need a way of submitting and actually uh we'll just test that what i did worked um let's actually do this so is there something like uh scroll into into view can i pass the element to scroll into view overflow um flow y is auto so the up and down you should have a scroll bar but then overflow x like the left and right uh should be hidden and that will hide this bottom thing yeah now there's only a scroll here and then whenever there's a new message i want i do want to scroll to the bottom element dot scroll into view i think this is probably what we want so after adding a new message to the page we could do element dot scroll into view smooth i'm just gonna give it a little bit of a delay like a 300 millisecond delay that way it's actually on the page beautiful so you saw how it scrolled yeah yeah so when when the page loads it scrolls to the latest message and okay now now for the the really cool stuff check it out so well let me make it visible okay this is the website right and then i'm gonna go into the database and i'm gonna add a new row the username is kit boga the content is uh did not redeem actually it's steve this is steve do not redeem all right so when i put it into the database it should just appear right here watch nice nice okay so we're on our way last thing we need is uh is a form so what we need is a form right here where the user can actually put in their message and that way they're not using the super base thing they're like do it using it on the website so check it out if we look at uh a form kind of like this maybe like a text area let's look at the text of this i'm really i'm gonna copy all of this but then i'm gonna remove a bunch of it have the message slide in from the right we could we could do that um um but what i want is yeah there will be a submit button um example text area and then we need a little form for their username i'll take a step back after i get this but i think this is what we want here all right um nice it's really it's really big though um but we're gonna change this so instead of actually yeah it should be fine it should be fine um but instead of email address we'll actually make this say like username and then this will just say username and then the type will just be text and then the id will be username and then we don't need a help message and it should be fine and then this should be for the content so this is where where you'll enter the content of your message just two rows um and then this will just be message and then we'll have a button that says send all right how's it look it's not bad we could definitely use some work on the styles but i think it's perfectly fine for now now all we need to do is hook up this form right so right here i need to be able to say my name is coding garden and my message is holy cram this works and then when i click send we need to send it to get put into the database and then it should appear here and if multiple people are on the website we should see all the messages that they are sending right okay let's hook this thing up so um yeah clear the content on submit disable the username all that good stuff yeah in the in the words of uh insta fluff holy cram holy cram yeah shout out to our good friend insta fluff definitely check him out um okay here we go we need to listen for when the form was submitted um and i'm gonna do that just right here inside of my init function so um i need to get access to the form so i can do uh document.queryselector form so give me the form that's on the page and then i need to listen for when it it's submitted so i'll say add event listener submit and now basically i can specify some code that should run when the form is submitted and actually i do want to store this in a variable let's create a variable called form that's equal to that so that way i can reuse it is document.forms actually a thing okay so when the form is submitted run this function in this case um there's some stuff that i got to do here i actually i need to prevent the page from refreshing because i i don't want it to refresh i want it to use javascript to send the data so we have to prevent the default action and then at this point we can reach in and grab what the user has typed into these these inputs here specifically here on this input i need to give it a name property so um i need to give this a name of username and then right here i need to give this a name of content and the name will allow me to write code that specifically grabs that that thing so here's what we do we create some form data form data is just built in it lets us get access to things in the form um and then i can create an object so we'll call this our message and it's going to need a username property and that's form data get the username and so um because i gave it the name of username that should grab it and then this will be the content and then we need to grab the content so if i've done this all correctly when the user clicks send we should have a nice little object with the name in the content and then we'll send it to the api um let's see if it works so username cj message hello world uh we click send and there we go so we get a nice little object with the username and the content uh now we can send it to the api yeah you can use it with a form element yep that's why i put it in a variable so i could do this now we need to send it to the api and we can look at the superbase documentation for that if we look at api messages we want to be able to insert insert rows like this so we will say um and actually i'm just just gonna do it because if we should get an event that uh that it was created and then it'll show up in the in the ui right there okay so this is this is all the code that it takes um i think do i have to call dot vin on it or do i have to await it should be fine we'll try it uh but basically get the data out of the form and then send it to our database and this is the code that actually sends it to the database you don't have to call it okay so this should just insert it in and then because we've already written the code that's listening for inserts it should just appear on the page after submitting so let's see all right refresh scroll down my username is codinggarden and my message is first try send it didn't work is there an error in the console we can see if it's actually in the database let's see no it's not so i think i do actually need to invoke this like with dot then uh but for now we're not going to do anything with the result we'll just say uh message sent because i think if i don't dot then it and actually uh i need to make sure that my button yes so my button type is submit should be fine uh this is not a framework this is all just um oh wait uh most of the code is vanilla javascript the code for talking to this back end is um super base it's the superbase javascript sdk that lets us do this kind of stuff okay we're almost there all right let's see what happens it worked [Laughter] so i need i needed to call a dot then on it okay last thing is we need to clear the form uh so that way um actually we don't want to clear the form we just want to uh specifically like we want to keep let the use if the user put in a username we're going to leave it but we are going to clear out the content so um let's do this we're going to have a content element um and this is the element with id content so that's what the user typed in to for to send the message um and then um after they send their message we want to just clear it out so we're going to set the value to empty and that way they can type a new a new message okay what's up everybody send i'm good just coding send cool um this is perfectly fine let's put it on the internet this is perfectly fine um yeah we could catch an error i'm not really worried about it i think this is this is good enough for twitch chat um here's what we're gonna do i'm going to uh uh oh yeah you're totally right thank you thank you thank you coheep i i need to sanitize the inputs you're absolutely right uh and we i we thought about this earlier whenever we created an element like this let's sanitize these inputs now i don't want to manually i don't want to manually create these elements and that's the best way to sanitize is just use text content instead of this we could use some sort of regular expression to do replacing here's what we're going to do we're going to use a library there's a library called dom purify this is industry standard this is well maintained and basically it can sanitize user input because actually this is actually really fun let's demonstrate a cross-site scripting example check this out if i actually send a script that says alert you have been honed uh this is gonna work so it should anyways maybe fresh the page no no wonder why not yeah what do i mean by sanitize basically i want to strip out if somebody tries to do something malicious like that like adding a script tag why didn't this work oh no super base definitely doesn't sanitize um i'm just curious why so this was technically it's inside of a pizza you could have a script inside of a pee tag couldn't you i waited for an hour to cross that script well you can try you can try your darndest um firefox ignore script tags inserted with innerhtml really all right well then does that mean um does that mean that chrome is vulnerable give me a second i'm gonna test this in chrome i am baffled why that doesn't work there's there's probably a good there's probably a good explanation for it i just don't know it but someone is mentioning let's try a style tag we'll do that so let's say i want to inject my own styles maybe that will work let's refresh the page okay so uh the message here is just gonna be a style tag where um i'm gonna change the color of everything to be red so i'm gonna say select everything and the color is red and this is important meaning you must apply this style yeah there we go so uh now i've i've i've injected uh some styles and now when anybody goes to this website those styles are always loading right but basically we don't want those styles to load yeah we don't we don't want them um and so this is an example of not sanitizing our input so because we have not uh sanitized our inputs um it is actually running the code that we're specifying here and this is an example of stored cross-site scripting because the the the attack itself is actually in our database and we can see that over here um so we can see right here that it's literally storing this in here uh so this is known as a stored cross-site scripting attack but yeah somebody had a good point a classic cross-state scripting is like you have an image with some url that won't work and then this has an on error where you can specify some code to run nice we got pwned so now when anybody goes to this website it instantly runs that script yeah um that worked and that that's that's like a that's like classic cross-site scripting attack is um you can specify code that should run when something bad happens or when something when an error happens or something like that there's all kinds of events like this um and that worked but the the reason that this is bad is because if we did have i mean right now honestly it's inconsequential because there's no login and the database is fully reading readable and writeable anyways but uh if we had a login system and if somebody was able to send a message like that so what um we could use it like we could write code in here that takes the user's credentials and sends them to some bad bad server um and basically just harvest people's credentials and because the thing to think about is when somebody goes to this page if they were logged in they're loading the page in the context of being logged in yeah so for example if we were using cookies and those cookies weren't protected or weren't uh http only uh you could actually just do like send to malicious did i spell malicious right server document.cookie the code would be a little more complicated than that but that's basically that what could happen yeah so this is why we need to sanitize our inputs so i'm going to add this dom purify library and after i add it we should not see this alert um we should not see pwned the text shouldn't be read so let's let's fix this uh and dom purify is the way to go um let's see can i get this from a cdn i think i can um we'll look at js deliver like we did earlier uh dom verify would on error allow for sql commands no and so um it's important to note that we're not actually writing uh sql code right here it looks kind of like it because we have like selects but basically what's happening is this this superbase client library is taking our code that looks like this and it's turning it into http requests because there's actually an http server that's sitting in front like a an api server sitting in front of the database that handles all of the reads and writes so this technically isn't accessing the database directly this is calling an api which is accessing the database but in terms of our code it looks really simple but there's there's some complexities behind the scenes um okay we need dom purify we'll grab the minified version we'll add this to our html right here so just like we brought in supabase and bootstrap we're bringing in dom purify so this is a uh industry standard sanitization library and basically what it allows us to do is uh pass in a string or pass in some text and give us back some text that's removed all the bad stuff so it'll remove the scripts it'll remove the style tags all of that good stuff so let's try it let's just see if it works so up here when we're creating the element basically i need to just do dom purify.sanitize message.username message.content and message.createdat and so if i've loaded the library correctly and it all works then there we go so now now that i'm sanitizing the user's input before putting it on the page the style isn't overridden um the text isn't actually running uh it's a beautiful thing um let's see if there's some options i can specify yeah like you could do some sort of like regex but the thing is hackers are crafty and they'll they'll find a way around your regex to cross-site script your app uh how so i don't think that it can like yeah and that's a good question um apple jimmy so basically uh oh did i just change it all to username i technically broke it for a second but this needs to be like that um there we go great um though no this should not this should not be loading that image it removes the uh it technically removes the um the on on error attribute so if you look if we look directly in the database uh on error is there but then when we pass it through dom purify it strips that out i don't want to allow images at all uh that's just asking for trouble so i think i can i can have like a white list or an allow list of elements i want to allow um but to your question appo jimmy uh technically this is set by the database the user shouldn't be able to set that value but i'm just doing it to be safe and it should just be the string which is the time itself so yeah i copied the same code to all three fields yeah yeah i fixed i fixed it oh why not enter text instead of enter html uh because i want to specify these elements that's the main reason like i need an image tag and a div and stuff like that yeah and see that that's the other thing if somebody yeah that's um actually if you if you follow uh bin awad he talked about how in doge house he allowed users to just specify a url for their profile image but if you're in control if a bad person is in control of that server that the image is being loaded from they can just log all the ip addresses of anyone that requests that specific image which is why you should use a proxy so yeah like the the attack was someone just set their profile image to be an image hosted on a rogue server and then whenever they join a room they got the ip addresses of everybody that was in that room i'm sanitizing on render not on input yeah exactly so i'm sanitizing when i show it on the page when i send it to the back end i'm just leaving it as it is um i'm sure that their library handles sql injection attempts um i'm just gonna assume that they do it's possible you could wipe my data out but yeah what if the hacker disables the purify script and then loads the page that will only work for them anybody else that loads the web page it won't be disabled for them because anybody else that loads the webpage um is going to get this now like the at the end of the day anybody could go to a website open the open the uh the console and do this this is not cross-site scripting because i have control of the web page like i'm literally writing code to run on the web page it's really only cross-site scripting if it happens without user interaction and the fact that before i could just load this page and the styles would change and the alert would pop up that's why it was a cross-site scripting cool cool cool when was the last seven hour stream i don't know but the sequel attack will have yeah we can try it really quick but uh i i so uh supabase is built on top of postgrest which is a rest api um that just sits on top of a postgres database and i'm sure that they have something on injection or sql injection i don't see it uh sanitize you ha there has to be can i prevent certain inputs to the supabase back in um i think i would have to write like a stored procedure to do validation and stuff like that prepared statement really i'm done though i want to put this app on the web so you all can use it i just want to make sure that i remove images remove images demos advanced configuration demo bad words are fine i'm gonna hide it on my screen at least at least for the first few messages um oh here we go check it out so in whenever i purify it let's actually write a helper function we'll just create a function called uh purify or sanitize text so it takes in some text and then it just returns dom purify dot sanitize the text but then we can pass in some default options and the one i want is allowed tag so basically you can't specify any tags not an image tag not a p tag anything you cannot specify that um and then now i'm just going to call sanitize text everywhere i have this so pass that in don't allow any tags let's see what else we can do keep content remove content add attribute add tags return dom return a document object instead of a string yeah this should be fine so now now that i've done that we shouldn't see the image yeah there's not even a broken image right here and if we inspect this element there should not be any uh image here it's just a p tag all right somebody asked about database size like we technically don't have any hard limits on the size of this field so you could try to fill up the database um please don't [Laughter] uh but here we go let's put it on the internet i think it's time right is there anything else that i need to add before i let you all loose on this thing i am real quick i am going to clear the database uh delete rows go live [Laughter] limit the username length character limits um the thing is i don't i didn't see a way to specify a a character that is a good point um like right now we're downloading all the messages from the database but technically we should only get like the last hour or something like that uh i'm it's it's more fun if i let you all go wild i'm gonna let you go ham all right here we go are you ready so a quick recap of what happened we're using superbase it is uh basically a back end as a service a database as a service we have this messages table in our database and they provide an api that we can use to insert data in and get data out we've built our own custom web page that gets the data out of the database and lists it on the page we've built a nice little form here so users can send messages and it's in real time so if there are multiple people on this webpage anybody that sends a message it will automatically pop up actually i can show this if i i'll just show it locally but in a second we're gonna show it with everybody at it so uh we have this person over here and then this person over here uh when i click send it pops up on both sides wait why are there two uh oof oof oh i think it's because i'm using like live reload all right yeah but that's the thing right now you can't get to this site because right now it's just running on my computer so what i need to do is i need to take this this front end code so i need to take um this html css in javascript and i need to put it on a server somewhere so that way when somebody goes there it downloads this code and runs that code inside of their web browser i'm going to create a folder called public and put it in there and then we're going to deploy that so that app goes in there index goes in there styles go in there and then now those three files are what i'm going to put on the internet for you to load um and to do that i'm going to use search so the domain is bogochat uh and now it's on the internet um i'm actually going to hide my screen for a second um just because um yeah you can send messages okay so i'll i'll explain what's cert oh no i sent the local host url doge doge is here cj's best friend boca queen this is pretty cool okay all right i'm just gonna flash it for just a second but it's working people are literally on this page and they are literally sending messages uh but i'm gonna hide it because sometimes people send bad things or sometimes people will try to fill up the database yeah but it's working i mean it's technically working actually here's what i'm going to do i'm going to add a css blur to the text so you can't see the text and then um uh then uh i can show it on the screen we need slow mode yeah um somebody definitely wrote a script to just like try and fill up the fill up the database um [Applause] all right i can i can at least i can at least i can at least oh are there bad names are there bad names um i think the free trial is over it's dead oh well i didn't i don't i'll show what we have so far so lots of people went to the website uh they put their names in they put their text uh this person apparently tried to fill up the database um and then there's lots of stuff here you can see people potentially trying to cross-site script it you can see that like maybe they sent an empty message yeah and so we're pulling that out um hey stab it stop it stop it um no it's fine though it it what happened it it happened exactly as i thought it would but but we did it everyone we built the website we connected it it works for the most part but as you can see there's definitely some things that we need to add right when you open things up anonymously where anybody can do whatever they want um they abuse it so if we uh were to uh actually add authentication on this then it would require you to have a google account to be able to use it and we could actually um tie the um uh each message to an actual user but yeah let me hide my screen for just a second i'm gonna look on supabase let's see it says loading tables i mean the table's still there uh we only have 241 records yeah so people didn't spam it too hard it should technically still work but there's some um unfortunate usernames um yeah and this this is one issue is uh when the um when the page first loads um it's downloading all of those messages which makes it like super super slow yeah um let's see what i can do here yeah it has to load everything and i think there actually are more than 241 of them um but let's see really quick yeah actually check this out um i'll show you what i'm going to do right here all i got to do is delete my policy that says you're allowed to insert messages and now nobody can create messages so i basically have stopped all rights to the database you can still read yeah you can still go to the website um and you can still you should still be able to see it but you won't be able to create new messages i'm really curious oh yeah well it says 360. i mean i can't see my send button anymore all right give me a second um let's see yeah it's really i don't know why it's so slow um oh you know why it's trying to scroll to the bottom for every single new message whereas if multiple messages come in i don't think it needs to uh do that but um now i think i can show this this person was literally trying to fill up the database but uh now there are no new messages because i disabled rights uh but somebody set their username to be like this really long string and then uh this is their message and then they're just filling it with junk characters to try and fill up the database which is fine but it worked some of you saw that it worked you were on the page you saw the messages in real time all right i think that's all i really wanted to show

Channel: Coding Garden

Views: 31,898

Keywords: javascript, coding, programming, node.js, tutorial, learning, debugging, web development, web, full stack, backend, frontend, live stream, live coding, web scraper, web scraping, scrape the web, amazon price scraper, supabase

Id: C29kMuMTmKQ

Length: 108min 38sec (6518 seconds)

Published: Sat Jan 29 2022