Lovable AI Supabase Integration... How to Setup & Fix

0:00 hello and welcome everyone let's talk 0:02 about lovable AI superbase integration 0:05 in just the next few minutes I'll cover 0:07 how to set up your lovable AI superbase 0:09 integration and how to get around a few 0:10 snags you'll probably run into like I 0:13 did let's dive in so far I am loving 0:16 lovable AI in just five prompts the idea 0:19 I had for my own gig workk management 0:21 platform is starting to take shape I 0:23 think this is just amazing check it out 0:25 I have a great looking landing page with 0:27 a nav bar on top on the right ins side 0:30 of that Navar I have a sign up button 0:32 and a login link if I click on the sign 0:34 up button here's the page I asked 0:36 lovable AI to create with an explanation 0:39 of the differences between the manager 0:42 and the worker roles and buttons so the 0:45 user can choose which role they want to 0:47 sign up for this button leads to the 0:49 sign up form for the manager role I 0:51 asked lovable to create and this button 0:53 leads to a different signup form for 0:55 workers where the lovable AI correctly 0:57 determined I would want a couple 0:59 additional fields for workers such as 1:02 skills and experience once users have 1:05 signed up they will be able to log in 1:07 with this login page lovable created but 1:10 now I have hit a wall none of these 1:11 forms or other features of my platform 1:13 will work without a database and 1:15 authentication Services fortunately 1:18 lovable AI superbase integration 1:20 provides both but it is a beta feature 1:22 so there are some things you should be 1:24 aware of that I'll cover in a moment in 1:26 my first prompt to implement superpa 1:28 base lovable AI I responded with some 1:30 steps for me to follow as well as a link 1:33 to superbase integration docs which I 1:35 promptly did not read just kidding I did 1:38 glance at them and I'm glad I did 1:40 because the steps that lovable provided 1:42 in the chat left a couple of things out 1:44 but unfortunately the instructions in 1:46 the integration docs were also a little 1:48 too vague and didn't warn me about a 1:50 couple issues I was about to run into I 1:52 had never used superp base before so I 1:55 had to create an account before I would 1:57 be able to create a project for my app 2:00 since I was already signed into GitHub I 2:02 decided to use my personal business 2:04 GitHub account to sign up with superbase 2:06 then superbase automatically directed me 2:08 to set up my first organization and 2:10 project for which I just kept all of the 2:12 default settings for and once I had my 2:14 superbase organization and project setup 2:17 I went back to lovable. deev and clicked 2:19 on the superbase button as previously 2:21 instructed by these steps and then 2:23 clicked on another connect super base 2:25 button under that button and this part 2:27 was a little confusing and stumped me 2:29 for a second it opened this popup with a 2:31 video in it I watched the 4-minute video 2:33 figuring it contained info on where to 2:35 click on next but it was mostly 2:37 unhelpful leaving me think where was I 2:40 where do I click next I finally realized 2:42 all I had to do was click the connect 2:44 superp base button again for a third 2:46 time this time on the one inside the 2:49 popup to finally get the dialogue that 2:51 would allow me to Grant lovable API 2:54 access to my superbase project once I 2:56 granted the superbase API access to 2:59 lovable I was able to navigate to the 3:01 dialogue to select the organization and 3:03 project I wanted to connect to and after 3:05 I clicked connect this prompt was 3:08 automatically generated for me this all 3:10 seemed to work lovable detected that my 3:12 project didn't have any tables yet and 3:14 made a bunch of changes to the code to 3:16 make super base work with my app and 3:19 lovable after that the app urged me to 3:22 just keep building and highly 3:23 recommended setting up authentication 3:26 first so my next prompt was to add 3:28 authentication on the manager and worker 3:31 signup Pages lovable got to work on that 3:33 by first generating the database SQL it 3:35 was going to run through the API which 3:37 it asked me to review and approve so I 3:40 did by clicking on the button which 3:42 generated this prompt for me this ran 3:44 the SQL code I reviewed on the database 3:46 and automatically initiated a database 3:49 migration and then I hit another little 3:51 snag with this response for development 3:54 purposes you might want to disable email 3:56 verification in the super base console 3:59 it gave me two links to click on but 4:01 neither of them worked leading me to 4:03 errors at first this response made me 4:05 think something's seriously wrong here 4:07 but fortunately after a bit of research 4:09 I did figure out what to do all I had to 4:11 do was go to my superbase console and 4:14 navigate to authentication and providers 4:17 make sure email was the only one enabled 4:20 from now and also clicked on email and 4:22 turned off this confirm email switch to 4:25 turn off email confirmations comparing 4:28 links between my superbase console and 4:30 the chat window I realized lovable is 4:32 using broken links in the chat it should 4:35 be structuring the links like this also 4:38 I couldn't see a reason why it gave me 4:39 another broken link to the users section 4:42 except as a reference there was nothing 4:44 I would really need to do there except 4:46 maybe manually delete users for testing 4:49 it seems like fixing broken links should 4:51 be an easy fix they would have 4:52 implemented by now what with all of 4:54 their users but hey superas integration 4:57 is technically in beta we've been warned 5:00 as a side note I am really impressed 5:02 with all of the authentication providers 5:04 super based supports I'm wondering how 5:06 well some or all of these might work so 5:08 if you want your app to work with apple 5:10 or Facebook or Google credentials it 5:13 looks like that might be a possibility 5:14 for your app something I look forward to 5:16 trying in a later video anyway looking 5:19 at the last response to see what to do 5:20 next I noticed it said let me know when 5:22 you'd like me to implement the code 5:24 changes for the signup pages to connect 5:25 them with superbase authentication so I 5:28 did that and it implemented all of this 5:30 including success messages and error 5:33 handling which I was able to test and 5:35 verify I was able to sign up managers 5:37 and workers and get access to the 5:39 dashboard after sign up and it was 5:41 pretty much smoothish sailing from there 5:44 except for one more hangup I'll explain 5:46 how to potentially fix in a moment but 5:48 first I want to show you what I've been 5:50 able to accomplish with lovable AI 5:52 superbase integration so far after about 5:54 30 prompts I can now sign up managers 5:58 and log them in here I can look at all 6:00 of the jobs stored in the database by 6:02 clicking the jobs link here I can edit a 6:05 particular job by clicking the edit 6:07 button for that job I can view a job by 6:10 clicking The View button for a 6:12 particular job which includes this 6:14 messaging interface which stores status 6:16 updates and messages in the database I 6:19 can also sign users out I can also sign 6:22 in workers which get a slightly 6:23 different view of the data which 6:25 includes a new jobs tab where users can 6:28 see all new jobs that haven't been 6:30 assigned yet and the ability to view and 6:33 bid on them down here then once they are 6:36 assigned a job they can see the list of 6:38 jobs they have been assigned under my 6:40 jobs the only issue I ran into doing all 6:42 of this work is that when you start 6:44 working with superbase in your app it 6:46 seems like you get more of these errors 6:48 where you are given the option to try to 6:50 fix the error or show the logs I got 6:53 into a bad habit of just clicking try to 6:55 fix instead of show logs I'm going to 6:58 recommend you don't do this because 7:00 While most of the time I believe there 7:02 was an error that lovable seemed to fix 7:05 there have been a couple of other times 7:06 where this error popped up 7:08 intermittently and then just kept 7:10 popping up every time I clicked on try 7:12 to fix at some point I realized that 7:14 when these errors occur a much better 7:16 way to deal with them is to always look 7:18 at the logs then X Out of the error 7:21 click the refresh here and see if the 7:23 error happens again checking the logs to 7:25 see if it is the same error I do this 7:27 two or three times now to make sure I'm 7:30 consistently getting the same error 7:32 before I have the AI try to fix it what 7:34 I'm finding is that some errors are a 7:36 complete fluke that never happen again 7:39 and that some of these errors are 7:40 intermittent and might not need to be 7:42 fixed right away and of course even with 7:44 authentication and a database your app 7:46 is completely useless unless you can 7:48 deploy it to the web for everyone to see 7:50 watch this video now to learn how to 7:52 deploy your app if you don't see a video 7:54 here yet please subscribe and turn on 7:56 notifications so you will get notified 7:57 when it comes out I hope I help help you 7:59 with your lovable AI superbase 8:01 integration efforts like the video if I 8:03 did and be sure to leave a comment if 8:05 you still have questions thanks for 8:07 watching and I'll see you in the next 8:08 one