Use Supabase in your bolt.new app: a 6min guide

if you want your Bol app to be anything more than just a cool demo you probably need to store your data in a database and have some user accounts today I'll show you how to use super base to build a quick and scalable application in just a few steps I'll also explain what the deal is with the security policies and what you have to pay attention to when setting them up so let's dig first what is superbase in their own words it's an open- Source Firebase alternative that provides an industry standard database Authentication real time

connection storage and other cool features by the way if you're interested in integrating Firebase with bolt there are two quick tutorials about it on the channel already so feel free to watch them afterwards they do explain some different aspects of database storage and authentication than what we'll focus on here today we'll work with this Notes app that's not connected to any database yet so let's add authorization and data storage in super base if the user is not logged in they shouldn't see the main app UI off will be based on a username and password also

give me the query for creating the database table store sensitive config in the EnV file Also let's ask bold if it needs anything from us this is a pretty elaborate prompt but I've crafted it while building a lot of these Integrations already and it helps to take care of several possible bumps which will ultimately save us a lot of time and tokens this time bold hasn't actually changed anything in our code yet instead it prepared a query that we'll need to put into super base to set it up properly the query consists of three areas

that are worth some explanation the better you understand what's Happening Here the easier it will be to modify it to your own needs and figure it out in in case something goes wrong first it will create a notes table and it lists all the properties that will be stored for every Noe even if you're not working specifically with nodes in your app you can expect to see the ID and user ID here next we secure the rows in our table doing anything in the row will be forbidden unless we explicitly allow a certain operation under

certain conditions such certain operation Plus certain condition is called a policy and that's the really important part basically a database can allow creating what's called inserting in the database World reading called selecting updating and deleting it is crucial to make sure all these policies are defined for instance I've often seen that there was only the select policy and in that case I not Bol to make sure the policies for editing deleting Etc are there okay with that lecture out of the way we can proceed let's copy the query and go to super base.com here after

you create a free account you'll have to create an organization any name works and then a new project I'll call it Notes app at this point super base prepares the project when the project is ready the most important piece of information will need to bring back to bolt will be down here but we'll revisit that later first let's use that query that we've copied from Bolt go to the SQL editor paste it and run it looks like it worked so we can now go to uh the table editor and see our notes table in here

one last thing I need to do to make our lives a little simpler is to go to authentication and providers and turn off the confirm email option superbase would need us to set an email server for sending these confirmations which would go a bit beyond the scope of our task today now let's go back to the super base dashboard and scroll down to copy the project URL now back to B here's the project URL back to super base to copy the API key back to bolt here's your API key and these are the two things

that bolt asked of us here so it's time for bolt to work its magic it installed this super base Library put the URL and API key in the EnV file created some utility functions to work with the database the UI components for registering and logging in and some more code to handle storing the notes we should be good to go I'll sign up for a new account and we have no notes let's create one about our bolt super base integration and nothing happens ah we have an error uh let's see what that is so there's

something about the time or date and such an error might often happen when we integrate one system with another probably the date formats are incompatible Bol should be able to fix that Yep looks like it knows what it's doing it updated the data definition and fixed how some of the functions deal with the date and now our note is showing let's add another one another note and its contents so now of course we should check if it really shows in the database in superbase I'll visit the table editor enter the noes table and see our

notes let's try editing one from here I'll just change the title and back in Bol it actually automatically updated nice so that's all for today I hope this is was full and you've learned a thing or two let me know in the comments what other topics you'd like me to cover next and join me next time when I cover the heavily requested topic of adding payments to your bolt app with stripe