SvelteKit + PocketBase Integration: User Login and Registration
Vložit
- čas přidán 30. 05. 2024
- If you enjoyed this video, please support me by buying me a coffee. Many thanks!
☕️ go.jian.fyi/buy-me-a-coffee
ℹ️ Integrate PocketBase with SvelteKit 1.0: Setup & User Management
📁 Source code: go.jian.fyi/github-pocketbase...
00:00 Introduction
00:08 PocketBase setup
00:57 SvelteKit setup
02:30 Basic layout and styling
04:05 Install PocketBase SDK
05:17 Frontend client
06:52 Backend client
10:10 User registration page
15:42 Log out action
17:38 Log in page
19:12 Final demo
#sveltekit #svelte #pocketbase #javascript #typescript #programming
Why is it always these weird no name channels that make the best guides
This guy just makes me realise how long it takes me to do very basic tasks ROFL. "now we will just create a basic form" > neat looking form with 1 liners jeez very good dude
This is excellent. It's concise and succinct. It's free from the usual plagues of tutorials - "Umm"'s , "Uhhs", mistypes, rambling, etc. It's especially nice that you make the good assumption that there's some knowledge of SvelteKit and aren't going over everything in exhausting, redundant detail.
Would love to see more content like this on SvelteKit and PocketBase. Subbed!
Wow, thank you for your kind words! I'm glad it was helpful!
@@jianyuanlee ; Will you do and update with new sveltekit and the latest version of Pcoketbase?
Your pacing is good. Not too fast but not too slow either. I hope you could explain more about hooks and progressive enhancement in sveltekit. Anyway, thanks for this video, it really helps.
Thank you! I will keep that in mind for my future videos.
Thank you for this video.
It was very helpful and everything worked.
+1 to listing installed Svelte extensions (ie auto complete)
+1 to zooming out just a bit more to see more code width on screen.
This one was so smooth i think am sold on svelte, i just wanted to know how to do SSR login with PB and you conveyed it perfectly
Thank you very much for this excellent tutorial. It seems like less than 5% of example projects work as promised--and yours worked like a charm. Also, your presentation skills are superb. A++++ all the way down the line! I very much appreciate your work on this. Thank you.
Great to hear!
This is called "Magnificent" , i love this content 🔥🔥
Thank you! Glad you like it!
I've used your code sample in a project before and now coded along with the video.
What a great tutorial! Thanks for creating ❤
Awesome, thank you!
Very well explained and easy to understand. Hope you make more Sveltekit videos.
Thanks, will do!
just started learning svelte and this video really helps. thankss man! keep up the good work
Glad to hear it!
Great content. Would be great to see some continuation about sveltekit
Thank you! I plan to release a few more videos on SvelteKit. Stay tuned!
Thank you for this great video! I'm learning SvelteKit and it helps a lot :)
Glad it was helpful!
We need more contents from you please
Awesome content, so clear! 🔥
Thank you 🙌
Wee neeed more!!!!, great content
Outstanding video, thanks. Instant subscription.
Thanks and welcome aboard!
Good job. You work so efficiently.
Thank you!
Amazing video, many thanks!
Glad you liked it!
you are a master, thanks for the video
Btw, this video has helped me so much, thank you!
Glad it helped!
Well explained. Thanks.
Glad it was helpful!
Man u r Amazing....
Excellent content and superbly presented! Hope to see more videos! How about a sample app like to do or blog, with deployment of front-end and back-end... would be great!
Thank you! I plan to make a video on building a fully-fledged app. Stay tuned!
Great video
Thanks!
Hey ! I'm pretty confused about the syntax you use around 10:03 to define the Locals interface, as it's pretty different from what I can read online about typescript interfaces.
My first instinct would have been to import the PocketBase object from pocketbase and write " pb : Pocketbase; " (this is, in fact, how they suggest to do it on the GitHub page for Pocketbase's JS SDK) but your syntax seems to provide more complete intellisense, so I'm guessing it must be pretty different and in term the better way.
Can you direct me to some ressources on how that kind of type declaration works ?
This is good, thank you! is part 2 coming soon with error management? interacting with other collections and file management for instance to have a complete tutorial ?
Working on it!
do you recommend pocketbase for a nextjs twitter like site?
I've duplicated the folder register to insert another form/collection, but it didn't work. Could make an example to create a new form?
I seem to have an issue with using multiple +page.server.ts files. Both login and register work if they are by themselves in the routes folder, but neither work if both are in they own folders (like in your video), nor if both are in the routes folder (can't have multiple +page.server.ts files in the same folder). I get error 405 and 500. Any suggestions?
Keep up the good work!
The complete project is available on my GitHub: github.com/jianyuan/pocketbase-sveltekit-auth
I hope that helps!
very clear cool vibe ! here i gift you a bar |
I'm not ready to drive in just yet and learn Typescript; can I use the TS code for just user auth and use vanilla Javascript for everything else?
Yes, you can! All JavaScript is valid TypeScript too. Though, I still recommend using TypeScript for its amazing auto-completion. You can turn strict mode off to avoid build errors (set compilerOptions -> strict = false in tsconfig.json).
Thanks so much for the wonderful class. Could you teach how to generate PDF with SvelteKit?
thanks for making this video, how viable is pocketbase for production ready apps?
The project is under active development, but I have used it in a handful of personal projects over a few months, and it's working very well so far. There were no backward incompatibilities. If you want to take full advantage of PocketBase, you have to use it as a Go framework to build custom business logic on top of it.
I plan to build a production-ready SaaS using PocketBase in an upcoming video. Stay tuned!
Why are we refreshing the auth token every time the hook is called with a valid token, this isn't scalable at all, tokens are meant to be created once right, please correct me if I am wrong
PocketBase tokens are JWT tokens. The hook checks whether the JWT token is expired or not. It's all done without hitting PocketBase.
It looks like to deploy on cloudflare pages I need to use node_version 16, which does not include structuredClone :( do you have any advice? great tutorial, thanks
I am not much help but I saw another guy on youtube recently mention structuredClone is the same as JSON.parse(JSON.stringify(x)), just more efficient. You'll have to check for yourself.
Try converting it to JSON and back again.e.g. `JSON.parse(JSON.stringify(pb.authStore.model))`
SvelteKit now includes `devalue` (by Rich Harris). Try this instead
What are the consequences of instantiating PocketBase in client hook? I thought PocketBase was supposed to be run on server side? No risks with doing what you did here?
The PocketBase SDK can be used on both client-side and server-side. When we instantiate PocketBase on the client-side, it allows us to interact directly with PocketBase’s features from the client, such as real-time subscriptions and authentication.
@@jianyuanlee I have read the code in the project repository and haven't found any examples of this, as all pages have server-side load functions only. Could you provide an example how would that be used client side?
@@jianyuanlee Also, when instantiating pb the first time server side we supply local pb instance address, but when the whole thing ultimately switches to client side, wouldn't we need to supply remote ip address to still be able to reach pb?
Which browser are you using?
I was using the Min browser
Very helpful tutorial! Can you also make Sveltekit + Firebase authentication next time pls?
Thank you! I plan to do a video on Firebase soon!
would you say this is a better approach than huntabyte's and why?
his approach
czcams.com/video/vKqWED-aPMg/video.html