Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄
Most apps need auth, therefore tech companies are extremely enticed when *you* know how to wrangle Authentication and Authorization... 🤔 Let’s figure out how to do it server-side, using SvelteKit & Firebase, and increase our marketability overnight 🤑
Magic link yourself: https://with-svelte.com/
See the code: https://github.com/jmagrippis/with-sv...
This took me literally months to put together, and there were no tutorials on how to do it Server-Side when I started; are there any now? 🤔
I did see good ones on client-side auth, but one of the great benefits of a “meta framework” like SvelteKit, or Next.js, is all the server-side work you can do... so if you’re only doing auth client-side, you’ll be missing that little extra something!
Having done the video, I realised why nobody had done it, it’s quite a few hoops to jump through, and an endeavour to explain them all!
I went into greater detail than usual, but I think my default speed is “really fast” 😅 Bear with me, we can do it!
Obviously it’s good for the channel too, but I genuinely think if you go over the video, then go back and rewatch individual chapters, and try to implement yourself, you will absorb quite a lot of lucrative frontend / fullstack knowledge!
Give it a try, and let me know if you need extra help 😄
Highlighted software:
SvelteKit: https://kit.svelte.dev/
Firebase: https://firebase.google.com/
Namedrops:
GUI Challenges Theme Toggle @ChromeDevs: • Thinking on ways to solve a DARK/LIGH...
@Fireship: / @fireship
@MrBeast : / mrbeast6000
🎶 "Spring Blossoms" by Ennio Mano & “Low Rider” by Hara Noda for the background music 🎶
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram and Twitter!
--
TIMESTAMPS
--
0:00 - My favourite method to sign-up & login: Magic Links!
0:32 - Firebase and other Passwordless Auth Providers
1:39 - Creating a SvelteKit login page
4:07 - Firebase client setup
6:58 - Environment Variables for our Firebase config
8:32 - Setting up a new Firebase project
10:21 - Submitting our login form
14:05 - Handling the auth callback in auth/confirm
18:06 - Client-side almost done / halfway point demo!
18:48 - “Remembering” the user’s email with localStorage
20:58 - Login demo ✅ (with no persistence)!
21:28 - Posting our Firebase Auth JWT to an Endpoint
22:34 - POST Endpoint to handle /auth/session
23:48 - Setting up Firebase ADMIN
26:59 - Setting a session cookie
29:42 - Retrieving the cookie in handle and getSession
33:09 - Creating a derived User store
34:12 - Showing an avatar while the user is signed-in
34:58 - No smoke & mirrors: SSR login demo!
35:34 - A profile page
36:00 - Logging users out:
38:04 - Enhanced forms with SvelteKit
39:08 - Redirecting based on auth status
40:22 - 🚀 Full flow, deployed, demo! 🚀
41:09 - Next steps + comment & subscribe!
Смотрите видео Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 27 Февраль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,668 раз и оно понравилось 253 людям.