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!
Watch video Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 27 February 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,668 once and liked it 253 people.