Let's Connect SvelteKit and Supabase Auth!

that bothers me yeah and i can't watch the movie anymore and i loved it before yep i hear that it's like yeah those inaccuracies it's like it's real tough it's real tough all right we are officially live now so that i just want to make sure that that you know that no no no secrets secrets here hey we got we got ben in here on mute that's good um always a pleasure no matter what the uh the mute status is um cool so we got uh it's me ben and travis right now i think we're gonna have some few a few more people um join in on the discord side of things um but then also uh if you are you know uh jumping in on chat uh feel free to kind of like change the direction of things that we uh we do as well um oh i should turn off the server noises though anthony what's up hey good to see ya good to see ya so um for today so for friday something we've been doing kind of for fun is these uh i've been calling them affectionately block parties um and uh you know that would probably be even better if we did anything with a block chain or whatnot but we don't so maybe someday but yeah the idea is just that a bunch of friends in discord we get together and we try something that we're all interested in learning and um you know at any point they can chime in you'll see their faces right here there's no uh like just because i'm lacking another monitor in order to do this there's no chat overlay for this one but i will try to if you um if you say something in chat i will um try to relay it as we uh as we go through this so um yeah that's kind of the that's kind of the strat today um yes then yeah um so if i had so so my setup here is kind of it's growing it's kind of funky but i have a monitor um set up here where we're going to be doing all of our coding and then that monitor goes into discord um and then i do a pop out for discord um and um so i can show all of the you know the people who are talking so it's not just kind of like you hear this random voice but you can actually see the you know the green around their voice and you know see their avatar or their face if they um so choose to do um but the problem is is that i'm full screening this and streaming this screen if i had one more screen i think i could pull this screen um the discord screen into obs and then overlay those and then stream from the oes screen so i just need one more screen and i think that i'm good i think it'll be awesome i'm hearing a gofundme request or whatever kicks or whatever those are yeah i yeah i i can find a i can find a a decent 1080p screen on uh on uh craigslist i'm sure for for not too much hey emconnetbreath welcome i did i said that right that time i feel like i i didn't i did pronounce the k though which i know is is important i failed that last time i said it out loud um good to see you ready to talk screens yes i am yeah i'm curious like is there like a like a killer 1080p screen right now it seems kind of funny in today's world but i'm sure that there has to be i'm sure that it's probably like you know 480 hertz or whatever you can get like a killer gaming screen display um for uh at 1080p um cool let's dive in also i'm really glad that i'm glad that you're here good to see you thanks for the thanks for chiming in i said it right enough i'm gonna get it right one of these days that's that's my goal um okay cool so let's uh let's let's dive in um anyone here have anything to say about svelt or super soup another name that i didn't quite say right supa bass um before we dive in anyone in here [Laughter] um something about super bass makes me want to like sing it every time i don't know why yeah like i can't just say super bass i have to like say it like as if i'm singing it super bass yeah i hear ya you know you achieve peak hype though peak front end type framework spell kit you want peak back end hype service yeah you know there's an integration potential right here i think you know how like some fancy brands will like change the u for v there's a cevipa base uh i think uh integration here that uh there's some potential there i think okay [Laughter] they do work with slack and spotify auth providers now so maybe you should like do that i don't except for i wish we were not on a slack channel base then says sevipa bass or babust i like it okay cool okay so let's uh let's dive into this so so um we have svelt and this so there's felt and spelt kit and these are two uh totally different things um well not totally different things but like svelte is just like the front end uh library part of it you know i guess i guess was felt i guess you always have a compiler but then spell kit is like the full on like framework this is like the next js or the remix or the next or whatever of svelt also for those smarter than me here uh feel free to uh for correct me um yes next for spell okay basically exactly what it is okay cool next for spell um and so we have um yeah we just have some setups so um i thought it'd be cool to do this i know that the super bass instructions so if we just google super bass uh svelte um i think that there's some instructions i think that they just go through the like kind of like standard svelte setup not these felt kit setup so i thought it'd be kind of fun to kind of dive into that and then if we have extra time kind of see what any like additional stuff look like so there's also some printing going on in the background because yes we still have a printer which is wild um so yeah we're just gonna go through this um i have had some success and some failures going through this um stuff but uh yeah also anthony how was your stream today oh it was really great yeah i mean alex so all you gotta say yeah yeah yeah yeah super fun super fun because he's never seen step zen before and he was like oh sweet i want a thing like gatsby that wasn't gatsby this seems like the thing like yeah i honestly like as the scrum mastermind team i was half tempted to like find a reason for us to cancel stand up so i could go totally oh good i'm glad it was i'm glad it was good be one mind thanks for following i appreciate it um okay cool so we got svelt here uh sorry spelt kit um and then we have our quick start guide for super bass so let's dive in by just making a new svelte app we're going to copy this actually i'm just going to copy the part that i need um and then i always just i mean just if you're writing documentation something i really love is this hint right here the cd into the directory it like makes it very clear that this is going to make a new directory for you um big fan of this onboarding experience right here personally all right so we're gonna make a little app npm run svelte at next okay i need to install the following packages okay so recent versions of npm will actually notify you that it's going to install this package before running it which is um great uh let's see okay to proceed yes we're gonna hit enter and see what happens oh hey what's up alex we were just talking about your stream with anthony and uh that it went it went well do you have a you have you want to link the uh the the description or the mod or like whatever so people can uh can check it out yeah it's on youtube i'll grab the link okay cool cool cool cool oh no no this is really interesting i this this whole uh affiliate thing is very like new to me i don't really uh know how any of it works but you know hey thanks so much for uh for for subscribing alex i appreciate it um i yeah thank you i am working out i'm using your contacts to uh to get some like emotes so uh so incoming uh additional emotes uh so thank you for uh for doing that with you know no rewards except the founders badge which is cool which is cool i got one of those for uh for semantics dev uh subbing what was that party chan is coming right oh my gosh you should you should rerun this again but then give it an actual name because you did that and it spelled at next but you didn't actually give it an app name you're right let's kill that um that was my bad okay so uh what are we gonna call this we'll just oh we already have a name for it right what was it uh yeah like that okay we're gonna add a name this time now i'll put it in a directory okay so do we want a spelt kit demo app or a skeleton project let's do the demo app today um i think because then that'll have like a few more pages i think and then we can just kind of you know copy and paste our way through the integration uh typescript uh i'm gonna go with no today going with note today uh at eslant for coding uh no hell no um add prettier yeah no i'm into that i like prettier okay so we have again our instructions repeated right here so we can just copy and paste that if we hate typing um cd super paper base [Laughter] worth it for the founders badge gonna nft this one once the channel hits millions followers that would be nice let's uh you know i'm we're in this i i finally got into the race with with you all so you know let's let's see what happens um okay so we got savabase um that's very awkward to say uh we got seven bass um and let's see what's next uh old school spelling right and they used to spell you with a p symbol yeah yeah yeah someone heard years ago yeah you mean o-l-d-e [Laughter] and s-k-o-o-l old lang sign style um okay uh cds okay did i go into that already okay npm install we got it oh look at this or pm pm okay i'm gonna i'm gonna oh wait i don't i don't have i don't have it i got excited for a second but i don't have it uh anyone using pnpm like so yeah this actually come up with uh slinky we're probably gonna move off npm to either yarn or pnp okay but um i've used the like the spelt kit like mono like there's basically a spell kit mono repo that uses npm so if you just went to like the spell kit github and then kind of follow their instructions the first time i used it at least this was like a year ago it was basically giving you pmpm commands kind of out of the box and then you would use the spell kit mono repo to like spin up your application or your example application yeah so it looks like they've kind of gone more towards just letting people like do an npm kind of a knit thing but the first time i used felt kill like i was just using npm or pnp okay cool uh anthony do you mind turning your um mic up a little bit if you can i think i need to get closer to my face probably cool perfect perfect um cool michael says that walmart uses it um but he hasn't yet okay cool a whole chat you know what actually i might be able to uh i might be able to fix that let me see if i can uh juice that up a little bit over here hold on one second i always feel like i'm screaming so it's good to know i'm actually quiet a paper clip they're in the drawer over there kids needs paper clips um okay i pushed it as far as i can but i think i could probably you know improve that a little bit test test next next time hopefully i think you sound good to me i think it's um kind of going through going through all the stuff to the stream um i could probably make a little bit better next time be one mind uh using pnpm with spell kit no clue about it though i was about to be on the same program just sveltkit and uh you give me an npp npm and that sounds pretty cool um so uh yeah i've been hearing a lot about this i i mean i heard about it before but i've been hearing a lot about it recently um in particular with like workspace support which is not super great in regular npm and was kind of the only reason that i used yarn for a while um so anyway anyway cool uh how are we doing so far so we have uh we ran our npm install um npm run dev open i am a fan of the uh the flag here also i'm just you know i'm a fan of the way svelte is doing things uh i i like the deliberate flag to open it um it opened in my other screen though so um it it wasn't a deep thing actually oh felt kit necessarily oh okay cool is that yeah but i mean it was using that back when they were doing snowpack they had this the same starting command i think yeah i think that was a snowpack thing too that just got brought over to veed cool cool as i look how it works the first time isn't that impressive yup um alex did help me diagnose something i had a failing uh like bash script it wasn't initializing right um actually i don't know if that was actually the issue i was realizing alex there was a i think it was compounding issues i went in and i deleted stuff and it was breaking and then i fixed the stuff that was breaking it but then i continued to break it because i had bash scripts that were not fully initializing which was not like sourcing my uh uh you know environment properly and so it was just kind of like it was a it was a domino effect i think yeah that was just it was a disaster i'm glad that this is up and running for you like right away let's not curse it yet let's not just let's see it's promised i am knocking on my wooden desk right now um okay cool so let's uh let's see i have a bunch of urls that open so i'll make sure i'm back on uh okay back on chat um okay hello friends yo yo yo okay so i have to say the more that i so i've been playing with um svelte and the um you know what it kind of the way that it kind of like points you to the v documentation for certain things i've been this is my first beat experience and um it's pretty great it's pretty great not gonna lie change your life bro [Laughter] i like can't even imagine like doing things without feet now because i'm using it and it's like like nuxt uses beats smelka uses beat slinky uses feet astro uses v like when i'm building out all these now projects all these like newer frameworks almost every single one of them is using v now it's incredible v is literally taking over the world it's it's nuts okay we're going to open this in our code editor and see if we um whoops come on i can't even manage the the three screens that i got oh crap i did that thing again hold on i will say this this discord setup is a challenge to uh to to manage right i'm just wondering like when we're going to see like your uh my passwords your all my powers yeah your country you're on tokens yeah just just a word document of uh passwords and auth tokens just that i have on screen all at all times all right hopefully this gets us back to where we were okay um let's see okay we're good um okay so we opened up our project um and we have uh kind of this really really cool thing so it has both the counter built into it as well as a to do app very cool can mark these done love to check the accessibility of these uh these later alex doesn't like it because it's too popular now yeah i hear that um okay cool so let's uh let's open this up so we've got this uh we've got this open and then um i think that that means so we have our our app bundling so we can kind of go into the quick start portion of this supa bass thing and see uh see what's going on if i can get i'm gonna break my windows again um all right i guess something that we should do is so i have that going but i should probably get the app building part of this um set up pretty quickly um but let's go through you know because it does take like i don't know i think it took like three to five minutes last time does felt have like a blessed router or is this like something that like svelte adds maybe anthony knows the kit has a router in it but if you just use felt by itself it does not interesting yeah because that was another thing that like they they went through the same thing that the react people did wherever they made a million different routers they didn't really want to pick one as like the blessed router and so routify is one that i think most people centralized on but then sapper came around sapper i think had like a built-in router kind of thing like next and then spell kit is like the reimagined version of zapper so yeah the the routing is handled for you in spell kit but not inspect proper that's really interesting i was um i had a lunch with and with some kind of industry friends yesterday and we were talking about we're talking about exactly this this problem in the react space that they're you know we've been spending like a lot of time kind of talking about suspense and you know concurrent uh you know rendering and all of those things and it's been you know kind of like long awaited and like part of the problem seems like there's a big challenge in trying to generalize uh these things if you don't have a router um and so like you know you so you look at frameworks like next and you look at frameworks like remix and you look at frameworks like spell kit and even you know next in the view community and it's like there's a lot of things like when you control the routing uh there's a lot of things that you can do um it informs the the data portion of it um and so it's like really hard to kind of like solve for that without like knowing specifically what the contract with your router is well it's yeah this is the main reasons that um redwood didn't use next is because they want to build their own router right it lets you make your own opinions um and i don't know if you remember from the server components um video yeah that dan did last year um but he specifically talks about how facebook solves that problem without a router by doing some weird stuff with relay which is fine for them um but it's it's either that or you don't have a good understanding of your data and you have to rely on network waterfalls which might work just fine for you yeah but that's the trade-off that you have to make yep yeah it does feel like it does feel like routing is kind of the differentiator in a lot of these frameworks which is interesting you know in the react side to see react router kind of like go into framework to like service you know territory uh wild chat friends any thoughts on that any uh any thoughts on uh kind of like the your experience either with react and kind of having to choose a router or like other frameworks like svelte um and kind of like having the router being like part of the framework and getting those like integration points uh from the framework that was a long run on question that's like that's a very like react podcast kind of question like hang on i'm popping something in the chat it's i love doing npm trends comparisons just to see so next embeds its own router and we've got react router which is the most popular router for react period like end of story and comparing that against reactdom which gives us an idea of how many react for web downloads that there are just to get an idea for how insanely popular react router is this is oh there we go finally loaded it took a second to to load all the trends i think it was having trouble keeping up with the trends um so we have next react dom and react router what's this dip right here christmas it's christmas yeah really that's so easy nobody does anything the last week of the year if you change it to five years it dips consistently every single year it is the funniest little uh anomaly i love i love that i love scenes nobody is building anything the last two weeks of a year everyone taking their breaks it's you know this is a sad revelation though as someone who does a annual thing you know at react dot holiday where i'm teaching people that that i can't compensate for this this huge dip it's like i'm down in the trough there's like five of us uh programming that that month you're fine the dip doesn't start until december 13th so okay so i just gotta i just gotta limit it we're just gonna do like 13 days of the holiday and then like you know yeah just you know just memes after that it'd be great if it's on the friday the 13th oh is that happening this year or this month i don't know but it would be awesome if it was all right so we need to go to our superbase dashboard uh and uh follow these instructions so we're gonna click a new project i think i opened this twice click new project boom uh we're gonna do so i took a word that i already had trouble pronouncing and made it even more difficult to pronounce uh oh no i don't want to make it organization oh no no cancel cancel we're going back uh i just want to make a new project okay you have to pitch pick which org the project's under oh i just hit new or got it gotta get it okay let's do uh let's do this so name thank you database password oh gosh we did this last time um it's going to be i'm going to recycle this password one two three alex is really really really cool you need a stronger password how many reallys were there a random one just go like strong password generator or something like that i just have a quick little utility i just use for this or that you can do with one password also yeah i i was i was worried that if i open one password it was going to show some stuff which i don't want to do yeah that's why i would say just open up a google tab and just say strong password generator and you can create or just add a bunch of random crap either way oh my gosh all right i finally got one that will work that i think i can remember uh b1 mine says uh svelt has quite a few routers too glad first felt kit though oh interesting i did not know that there was a you know marketplace competition for the spell router um do you mind sharing a couple of those i'm very curious yeah that was i link's routify earlier that's a big one cool then most most of these though i think people are now dropping for just using straight up spell kit but um yeah i would imagine if you're someone who's already been using spell for a while you're already kind of familiar with the router then you might be a little more hesitant but anyone coming in today is just gonna use felt kit yeah yeah yeah yeah okay cool so we got the first thing done um create a new project enter your project details uh wait for the new database to launch okay cool um set up the super bass schema okay so we have our ui and um we have our sql um i'm a ui guy new guy guy so go to uh sql section uh click user management starter and then click run okay so i think we might have to wait for this let's see if there's anything that we can else we can do yeah gotta wait it is doing quite a bit of work for us so we're not waiting too long for the amount of work that it's doing um but i do think that we can do we can jump ahead um and install some of the dependencies um so let's see so we need to get our api keys um okay we have that um building the app okay so we have okay so it didn't initialize git for us which is interesting i think a lot of the other starters do um yeah it did mention the things it's like optional if you want to to get followed here's some instructions oh gosh so it didn't say it in the in the output nice i i i missed it i kind of like i thought that was interesting and i can see what they're going with but i kind of like to get by default yeah i'm gonna go personally yeah i'm gonna jump back there and see what i missed oh i might have cleared cleared it away um oh right there oh okay uh get in it and git add all and git commit initial commit oh okay i guess i can just i can copy that oh i already get edited in inited but we're fine okay cool show that commit yep yep yep yep yep okay cool all that stuff so we have a place that we can jump back to now if we need to so uh let's see so we can use the quick start svelt template okay i probably should have just done this uh so for anyone doing this on their own later uh there is a quick start spell template live and learn live and learn um okay so some of those alternate routers um so if you one mind is sharing uh routify elder js um then sapper yep um interesting interesting i had no idea that elder was a router it has a router it's more of like a static site generator with a built-in router cool learning so much today so much alright so this one is not going to apply to us because we didn't go that route we're going to npm install the we were talking about in uh in chat the other day in in the discord chat the idea of doing a what was it um just installing like a base site to all of the free um like i don't know free plans with a free tier hosting plans with a free tier like that will let you do like a note app or like whatever i think that would be a really interesting adventure because there's a lot of there's a lot of steps if we did all depends on how complicated your app is like it's true i don't know what it takes to get super base set up but if you've got a postgres server out there you just pass in the postgres token is the connection string yeah an environment variable yeah you're all set but that doesn't work with serverless because serverless services serverless okay we need to set up an nv uh end the env environment or uh file so we'll touch a n file and we're going to we can copy this whole thing that's cool um now i know that okay so if we go to v did i say that right v i believe it's v but i always want to call it fight now so one thing that veet supports is this notion of local files so um loaded in all cases uh and local so this is ignored by get apparently by default i don't know if that's only if we initialized with veet or if this will work um in our sphere file see what's in it yeah let's do that so git ignore okay it okay so it uh ignores all of the m um variables or just the dot end one okay cool but worth noting there are different end files that you can kind of you know support in uh veet yep he's also got some weird thing where you have to like add like dot meta or something oh yeah yeah following this guy but if you hit errors i already have an idea of where we might want to look yeah are you talking about this thing weird thing being es modules yeah that dot meta thing yeah so we that may or may not come up i'm not sure but this i've been learning how to do this with slinky recently so it's just yeah mine yeah i know this is another dot facebook oh sorry dot meta sorry yeah i noticed felt kit also says that like they these have to be prefixed with uh v which is interesting um i i guess we'll explore that see what happens okay so uh let's see we gotta go back to uh where was i i was needing to copy this which i did and then this is our in file which we will go into oop nope not our m-file that's what it is we checked our git ignore and that's being ignored now we just need to replace that with the actual keys from our app um so project api keys actually that's not the one we need right we need the url okay and the super bass anonymous key that yeah this one all right so we got those set up we got our keys set up um let's see what is next um our app is almost functional to mix felt work with supabase and m files we first need to change the roll up config file a bit super bass imports json files to convert json files to esx modules okay this may or may not apply to us and actually i wonder where the we could probably look at this felt template nirvana hey welcome to chat thanks for being here jf davis thanks for following appreciate you being here as well um yeah super bass is uh super cool super cool um and uh yeah i'm just i'm i'm just learning it i feel like if i do enough reps with enough frameworks i'll finally like actually like understand uh how supabase works a little bit um yeah yeah yeah okay cool cool uh let's see where are we at so we got that um the next part of it i'm not really sure i don't think we have do we have a roll up config we definitely don't have a rollup config so that we might have to go through because we're all using v for all this stuff yes there's a little bit of a mishmash between what we're doing and what this guy is giving us because this guy is assuming we don't have feet and spell kit and all this kind of stuff yeah yeah yeah yeah this guide seems uh like very uh okay cool so that's fine um we'll we'll tackle that part of it when we need to we knew there'd be a little bit of kind of like you know possible confusion um so we'll get to that uh hooking up those environment variables okay so what was the step that we skipped now that our app is probably running oh we need to set it up with the user management starter okay no problem we're gonna go in here we're gonna go to sql uh there's a ui for this and we can just look for the user management starter boom takes a second and i think we just hit run success no rose returns awesome okay now we need to go back and start um you know playing with this okay so we would put these in svelt prefixed um variables so uh environment variables um and then let's see how those get exposed what would be a good test for this i could just try to like expose them via uh like via a page right just see if i have access to it go for it yeah just render just do the thing with the stuff just do the do the thing with the stuff let's see let's um let's do it real big it's like every user story i try to write just do all the things to make it work stuff is required for doing things submit ticket as a user i want to do stuff okay so yeah this is where we get into the the funk so import meta dot n dot you know what vite some key okay this is kind of that funk uh is this a sphelp file i should have some i thought i had oh maybe it's just on my laptop um let's fill for okay cool installing get some syntax highlighting and some some warnings and all that stuff for us okay there we go i love this about vs code it's so easy okay is this our uh nope nope oh that's our template well now that jsx has kind of become the de facto way of writing like html under javascript wonders are just going to become like part of es6 yes not esx but ecmascript um that's a good question i mean people keep talking about jsx2 changing the way that the language works and adding some niceties and features yeah so that's the question how how would you be able to do that without breaking the web i think it works better outside of browsers personally yeah they get built in typescript before they get built in jsx i think and that right there has a host of issues too because typescript drops breaking changes on point releases okay sorry i had some trouble with my server there okay so we have undefined right here so uh oh and because that's the wrong key okay so we need to make sure that it's right key let's go into our end and paste that in also undefined okay i wonder if this has something to do with that uh veep prefix yes i would guess hang on i haven't been paying attention yeah okay when you change dot end it restarts the server that's something you've got to make sure you do in some cases oh yeah yeah okay now i just fully hosed it yeah let's uh let's restart it make sure you know environment variables are kind of you know funky that's looking promising hey we got it cool okay so i think my understanding is is that with these instructions that we got here that was all just to kind of you know do work it with the you know kind of like non svelte kit set up so we can bypass all of this now that it's connected is that correct uh you still need like the suet based client the create client and all that kind of stuff sure sure okay yeah uh let's see we haven't that's probably after the roll up config i would guess you'll be good to go did i install this i feel like i ran that i don't want that but maybe i didn't okay so we need the client um json dependencies i have not installed it yet so we'll kill that uh npm install supa bass super bass js we got the client oh i guess i did already do it i just had to do it again do the third time one more time one one more time it's really installed now time to celebrate hey is that ben holmes first thing he says is he actually sings it i i heard something was all about super bass we got a slinky super bass project now yo well i'm adding support to slinky right now oh yes i heard some ben holmes tenor in there that was that was quite a way to join a room van holm's tenor that is there was no tenor all soprano no teddy we're gonna create the uh react podcast discord acapella group barbershop quartet all right my god one four the emerald's already harmonizing their arms it sounds great [Music] oh that's quite a acronym right rp b s uh q i like that i like that probably probably available on a dot com even [Laughter] though anthony was like disgusted and yet bob got the domain at the same time this is horrible buying the domain yeah you gotta you gotta downplay it until you get the domain and then you hype you gotta have the domain first for at least two years yes that's true that's true yeah oh yeah i i have to say my partner um was we were doing some budget stuff and uh and she was like you know we get a lot of charges for domains do you still need all these it's like yeah 100 yeah like it's like define the word need yeah not non-negotiable storage unit but i will stop drinking coffee i will not buy any clothes uh i'll ride my bike everywhere i just have to keep these domains have to keep them yeah cut my own hair hello i still have 11 pounds i want to do something cool with that 11d what eleventy fans [Music] it's got some heat it's got some heat let's set up this login we can talk about domains all day [Laughter] i am curious like what's your favorite most useless domain though you can you can while i navigate these uh you can all shout that out and in chat too if you have a favorite useless domain one that like has no value but uh you want to uh you just keep keep renewing it year after year uh i wanna know that i wanna know i hate to do but all of my domains are actually being used right now i recently marie condo'd my domains that's good that's good i'm signing into cloudflare right now i'll see if i've got a any spicy one michael says free dinosaurs i like that what's what's going on what's what's good on free dinosaurs [Laughter] it's just a dino starter project if you put anything on it it's not useless it's only useless if you bought domain and then did nothing with it i have a hundred of those at least so uh through to my brand i've got thoriumsim.com which is my spaceship game spaceadventures.org spaceguard.org and spacecenterblog.org you love space i love that you love space i love that they're all orgs too yeah i was thinking uh no thorium sim.com i've got one com oh okay i have a question uh a question real quick um the so this is saying to put it in capitalized auth.felt and so i'm curious for those who are more familiar with smelt than i am uh is this a um an important convention uh for any reason or is it just kind of a personal preference um i tend to just because i have had some pains with this in the past to always use lowercase file names um but i'm curious if there's any like juice that we get out of this as a as a convention huh i'd have to try to see if it breaks but i know well the thing is lowercase route names work so that should mean that lowercase filenames per spell don't break yeah okay yeah that's interesting so in spelt kit all of these are lowercase so it seems like the convention that they're using at least is all lowercase um so let's go because it's a route medium and then for component names otherwise yeah interesting oh so is this uh so this is tough this is another area where the documentation might um also uh whoever uh would you mind putting sir uh streamer mode on on there on your background so we don't hear that blue oh michael garbage city that's a great domain that's a good one i like that that's that's that's my flavor of domain for sure okay uh let's see so we have some issues here why is it why is it pod okay so it's trying to implement okay oh i have it's just a js file duh sveltstack.dev oh i like that yes yeah funny enough it'll be pretty dang silly to what we're actually building right now it's just spell kit and stick a back end on you guys felt stack nice nice i like it i liked it you know someone was saying um someone was telling me that like i was asking like they were email marketer and i said okay so you have a lot of domains it seems like you're using them like like how do you like like think about them because like a lot of them just redirect to like you know your main you know your main email list or you know whatever and uh and and he was saying i think about them as qr codes for your ears and i was like that's that's an interesting way to think about it i like it okay uh so we have this i copy and pasted that in to access user information in other places we use a writable store okay this will be my first writable store i've never written a writable store before haguna matata happy friday glad you're here welcome um this will be cool so create a new file called session store okay now am i going to put this just in this doesn't mean need to be a route right no one wants to answer me yeah i think i can answer i think by convincing we're all trying to figure out how to go to streamer mode i'm just kidding oh sorry [Music] sorry i didn't mean to interrupt what were we saying austin oh no we scared austin away i think convention regular js files like this would go under the the lib folder okay lib um okay i think that's just kind of like a catch-all for like everything that's not a routes like your components or just like regular files would land in there okay cool so source lib session store and then they're saying they use the capitalized thing i don't necessarily like that personally it's not my flavor um is it a problem if i you know don't don't do that there's no like conventions that uh i'm opting out of nope i think i think that's fine okay and the same with a component a component can be a lowercase file name as long as you import it as uppercase so it doesn't get confused for an html tag okay cool we're gonna make a new i found the lib convention kind of interesting because that's how like when i do like library code that's like the the equivalent of a disk folder for me in my mind and so i don't know that's just kind of an interesting convention i would have to get over pretty quickly but i could sure ben holmes is typing i i've muted my other audio i figured it out nice isn't uh did you find stream mode yeah i didn't think it would be a whole settings panel yeah i think i have it bound to like command shift s or something like that which is uh which is a worthwhile buying a discord bind in my opinion um okay cool so we got this set up uh i just added a profile file and um so that has a bunch of stuff that i don't fully understand yet but we'll uh we'll dive into that and um yeah a bunch of bunch of templates so then it says just uh launch it uh now that we have all the components in place let's update app.felt okay um i think we can just take everything out of whatever i guess this isn't to be app.felt this is going to be our index.felt um and i'm just going to replace it wholesale with what they have recommended to us uh looks like i get an error oh yep that makes sense that is a good error to be or the right error to be getting um session store if you don't follow the guide you gotta remember where you didn't follow it can't resolve session store that's right because it's in lib i think oh we got to go out to lib my bad still getting my head the other thing about the lib folder i'll just throw out is i think by default spelt kit sets it up so that it's alias to dollar spine lib like that you should yeah you should be able to get there from anywhere just with dollar sign lib okay cool nice that's it fingers crossed convention oh yeah be one mind also also saying that cool perfect uh that is that is nice i i have to say spell kit utilizing this dollar sign multiple places love it love it uh see you soon i'm sorry query is upset but like i'm just kidding okay fail to resolve superbase client from am i a joke to you dot jpeg okay you all know that i mean so it's in your head now just seated it in there okay super base client oh i never set this up i skipped over this part um okay so we gotta put this in uh another thing that we should put in lid it's going in lib for now i like it okay cool and then i forgot i uh deleted my index stuff i forgot the path to the environment variables it was import meta inv oh my gosh okay import meta end and then uh was this so got that and then we got that okay i think that looks properly formatted now okay hopefully uh we're gonna need to change our index to do that same thing we use that directory alias for lib super bass client lower case with the dashes okay and then there's some trouble with uh auth svelte these aliases are cool lowercase cool jquery mad okay um we're so close uh let's see swoop this was in where's this error profile another one yes [Music] that was a lot of a lot of renaming and pathing and all that kind of stuff but let's see what we did see what we did um oh oh we're almost we're almost there it's almost an hour and uh we might have gotten it let's see which would you okay here here we are okay i think we should applaud that we haven't had like a node error yet yes yeah that's like the biggest the biggest outcome yet is no node or node error uh yeah all right doxxing myself a little bit here that's fine it happens okay go check your email okay i'm not i'm definitely not doing that one on screen um i want to read michael chan's email but it's so juicy it's just all domain renewal notifications every every week here's your nine new domain renewal there's a ton of brony emails i know okay friendship is magic oh my gosh we did it we did it uh so i'm gonna update so i'm just hit my name and my website is http at https uh https um we'll update and we will sign out to make sure that everything works uh null is not an object oh dang it um okay so session user okay well i might i might okay that's fine maybe that's a that's a problem for another time because we're just so you know we we did we do it oh yeah yeah we maybe got a couple minutes okay so then to make everything make sure everything worked we're at um let's go home here uh let's see what this looks like uh we have one user that's cool can i go to the users right from there yes and that's me that's my email address i have a unique user id which is really cool um sweet and it it updated oh wait did it update because i don't see my name there well and you were supposed to add an email address but like is that a column yeah so this is that where the null error was coming from maybe maybe because the way it's passing like the response back to the client you might need to like kind of shape that somehow great success yes thank you michael uh sorry uh was that austin were you trying to see them yeah i was just gonna say was do you have anything in your database tables like i think this is the authentication view specifically did it set up any actual tables uh i think we set up one table was with which was just the uh user management um let's see all tables um profiles um oh okay yeah so it did oh okay so that's where your name went okay yeah i was just good call so we were looking at the auth view which is a limited um presenting limited data but the all this stuff did get passed through appropriately and updated um that is super cool um let's see you know uh yeah maybe i'll save that i got a few more minutes do we want to try to see what that last error is and you know clean it out or just uh just move on with life is this pushed up to the to the get repo uh it's not yet i don't have a associated get repo yet cool you should do that so i could fork this and then start spell stack for real nice we'll have one less useless domain that would be a huge outcome from uh this stream [Laughter] um okay cool so let's uh let's see so we're signed in and we had a problem signing out right we really need to update their docs like submit a pr yeah spell kit for for this after learning everything we did totally yeah i mean i'm sure that they would love it if someone wants to kind of go through what we uh did and um you know submit that to their documentation team i'm sure that they would uh be over the moon uh honestly um okay cool uh so let's see i want to see if we can find in our project where session user is being set okay so it is in our what is this our index dot okay so we have our template so if there's a user we're going to render the profile if there isn't we're going to render auth and then what is this superbase auth on off status change we don't have a [Music] null is not an object the profile component do you think yeah okay so how far so we got down to launch i wonder if there's any like kind of follow-up i've been trying to do a better job of like actually going to the next paragraph which is something that i find myself not doing to my own detriment a lot um okay so that is more just kind of like stuff that you could do um on upload what are the other areas where we are okay so session store okay so travis you were saying something on profile because that's where we're kind of the page where we're having the error yeah seems like that's where we're doing the actual update right so session store is our the lib file that we created and we're going to export const user writable false interesting austin d does this uh what does writable faults mean yeah so like when you call the writable function it returns this felt writable store and that false parameter is just the default value okay that it starts off with so it's basically just initializing a an empty writable store oh is this um roughly equivalent to kind of like passing in a default to like a uh use effect like use uh state yeah okay cool cool yep yeah yeah so so in the index route i think it was in the index route it calls like the store dot set um so it imports the user store and then it calls store dot set and it passes in the current user and then on every off state change it also passes in i think when you log out i think that on off state change would get called again yeah and then session.user is going to be empty um if someone's logging out so i'm not exactly sure why they they set it up that way go back up to that update user if you wouldn't mind yeah so [Music] update okay so we have this form so uh use get profile class um so on submit prevent default update user is what's being called so try loading true const super bass auth so user is super base auth user is this a global or did we okay no we imported that from our client okay updates so updates worked it's the sign out that we're having a problem with right i thought it was the uh update didn't work no no the update worked yeah oh okay i misunderstood sign out i'm back ben glad we're back we actually got things uh we got things working um so we uh we used you know spelt kit we got we got logged in through our magic link and um oop i got i got logged out on this one so maybe it does work but it's just reporting an error yeah i think my my gut feel is that uh so when you call super based off that sign out yeah the the super base auth client has like this like light eventing system basically which is what the on auth state changed okay um callback is doing so that whenever an auth event happens that on off state change function gets called again um and in our index file we're just blindly saying you know whenever an auth event happens we're just going to set our user store to um whatever's in the session however when we're logging out the session's not going to have a user anymore so it tries to say session.user and that's probably nolan gotcha okay so where the air is throwing so so the problem is is just is is more that we're alerting that error than it not working yeah yeah yeah like i feel like the sign out is fine okay um so something's just that the alert's getting thrown up so somewhere around here we probably want to redirect because all of this seems to be seems to be working for the most part um let's let's test that theory let me uh log in again okay so it tells me to go check my email which i do on another page and um oop wrong email account oh i have so many email accounts i feel like i feel like that's one of the motivations for either being a um like you know starting up your own business or being a uh you know full-time creator is just having one email address okay cool so i um i use that link i logged in and then um i we know that update works because we already did that but if i hit sign out um oh i still get that so i'm not sure why that uh i commented out that alert but maybe i just didn't save it i don't know i think i did um so we'll hit close close um but then it does do a redirect um so it really is just a matter of the the blogging i don't know interesting yeah that is interesting so it seems like if we just got rid of the login we'd have the experience that we wanted and maybe they're just trying to show us uh i guess what it what it's doing behind the scenes you know for our own education but yeah so we did it we got it all done in an hour we got to talk about domains and um and you know uh you know alternate uh frameworks and whatnot this is pretty pretty good um any questions before we uh shut this thing down for the day what's going to be next time what's going to be next time next time next time next time next time do you like selling do like the batman thing like that's pretty solid same challenge actually you saw he just knows what he's supposed to know because i told him me too i want you to learn it so i can learn it while you're learning it okay this is what i think we should do next time is i think we should try again you know failed last time but we've had we've had better luck with felt than we have in the past with other frameworks so what if we tried deploying this next time and if so where will we get to no you want to deploy spell kit like again railways for databases spell because not a database you want to deploy small kit net levi i'm just throwing up name the random clown thing that came to mind yeah deploying small kids is a piece of cake so definitely down to try that next time michael thanks so much for being here um and yeah have a have a good one peace out uh deploy it to the internet haguna matata says um okay cool yeah i think the internet would be a good a great fit for this actually i want you to do old school and like ftp into a server and upload static files one by one what if we did this what if we deployed our sveltkit app to um cloudflare workers yes that'd be very interesting that would be fun right first off though do you have wrangler already installed oh do i need to make sure that i have that before we do this that'll be a whole thing okay so you can't actually install it with npm at all you need some sort of node version manager so it's like you should figure out wrangler before the stream or else you're gonna spend 30 minutes installing wrangler on your computer good call i've seen that is it wrangler but like js is it a js thing or like what's the no it's the cli oh cloudflare wrangler okay yeah it's cloudflare's cli that for working with workers it's actually great like once you get it installed it works really really fantastically it's just kind of a okay okay i'll send you one of my blog posts i give three different ways to install it because so many of them were just tripping me up because cloudflare is javascript but not no right is it is it worth like is it worth like going through the process of installing this if it's that much of a pain in the butt no it is yeah if you want to work with cloudflare at all you got to get wrangler on your computer it's it's a one-time thing once you got set up as i said and forget it type thing sure i guess i meant um streaming it like would there be a benefit to uh folks to like you know see us bashing our heads against the wall for for for a long time it's up to you i'll send you my blog post take a look at it you can just have for yourself cool cool well next time then so for our next block party which will be actually not this next friday because i'm going on a little uh anniversary trip um but the next week after that i don't know it's probably a holiday and we probably won't do it then either but um the next time we do it you can you know so you just just join uh just join our discord um then you'll know what's up uh i'll post a link in there right now um join discord and uh we'll talk about the next thing that we're gonna do it might be wrangler but probably more likely i will set up wrangler on my own time um since anthony already has a comprehensive blog post on that and then we will deploy this to cloud for flare workers which i think will be a lot of fun um cool i think that's it you know thanks uh thanks everyone on twitch for joining us thank you friends uh who are here in discord helping me uh helping me out with this uh i appreciate you and i'm glad that you were here hanging out and helping me help me through this um y'all are awesome i love you not afraid to say it i love you uh we'll see you later peace later be it

Channel: lunchdev

Views: 389

Keywords: games, twitch

Id: aC2JXJMfb2o

Length: 72min 7sec (4327 seconds)

Published: Wed Nov 17 2021