Login with Magic Links 💌 Email Signups 🔐 Fullstack SvelteKit Part 8 🚀 LIVE Coding & Chill 🔴

Let’s add one final way to login to our app: The best one yet, email login with magic links!

In the previous two episodes we did “Login with Github” & “Login with Google”, and we could follow the same steps to add any other OAuth2 / Social Login provider we wish! But emails are a bit different, and they’ll also enable us to test our auth, so we’ll be diving in deep today!

In this series with our new code-along project, Loot Goblin, we keep increasing the complexity until we get to working with ChatGPT and the OpenAI API! This will legitimately build CV experience for those fresh new “AI Developer” positions.

If you’re a beginner, you may want to start with that Portfolio series, and end up with the same or an equivalent project: https://www.youtube.com/watch?v=9_y1J_4BKts&list=PLD9qSm-W5DLrKMChNEir_3kR4EE5e7FrK&index=1

… or you can get Johnnify Premium which includes all this code & more, while supporting all my work 🙌

Playlist with all parts of THIS series: https://www.youtube.com/watch?v=Ov40nlwpaxw&list=PLD9qSm-W5DLr69tVvz8fHMQ9b3JGlg_Pl&index=1

—

This series will get you firmly into the day-to-day job of a software engineer, in any company. If you can talk to databases, APIs, if you can fetch data, and render it nicely on the screen, you can do web dev, I promise 👊

It’s also a great way to increase you price range: With our previous series, you should be able to make portfolio and marketing sites, but this one will get you into serious contracting range! You’ll be able to charge those who think they have the best ideas in the world some serious money 🤑

Or, hey, if you’re the one with the passion project, you’ll be more able than even to make it happen 🚀

🚀 Click around the app yourself: https://lootgoblin.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/loot-goblin

— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —

— COMMUNITY —
Our DISCORD SERVER 👾: https://discord.gg/eR5Q52Sfm3
— 🥳🥳🥳 —

— Agenda —
[ ] What are we doing today? Why email logins & magic links?
[ ] Let’s create UI for “Login with Magic Link”!
[ ] Server-side logic! Generating a verification code: https://lucia-auth.com/guides/email-and-password/email-verification-codes
[ ] Schema changes to accomodate!
[ ] Send email with Resend! https://resend.com/docs/api-reference/emails/send-email
[ ] Validate email and log user in!
[ ] What about auto-refreshing whether the user has logged-in?! https://svelte.dev/docs/special-elements#svelte-document
— BONUS —
[ ] E2E testing auth! MSW & Inbucket: https://mswjs.io/ & https://inbucket.org/
[ ] Hijacking the email send with MSW!
[ ] What about email + password auth?!
— FUTURE —
[ ] Users can favourite loot!
[ ] Users can submit their own loot!
[ ] User profiles and avatars!
[ ] Integrating with ChatGPT! Describe your party, ChatGPT suggests the loot drops! https://platform.openai.com/docs/introduction
[ ] Dynamic OpenGraph Images with: https://vercel.com/docs/functions/og-image-generation

— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Lucia Auth: https://lucia-auth.com/
Drizzle ORM: https://orm.drizzle.team/
Turso: https://docs.turso.tech/introduction
Resend: https://resend.com/overview
Tailwind: https://tailwindcss.com/
DaisyUI: https://daisyui.com/
Playwright: https://playwright.dev/
Vercel: https://vercel.com/

My own website: https://magrippis.com/

Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: https://discord.gg/eR5Q52Sfm3

Between the comment section and the socials, let me know **somewhere** what you’d like me to cover next 🙌

Stream number 94!

—
TIMESTAMPS
—

0:00 - What are we doing today? Free frontend course?

Видео Login with Magic Links 💌 Email Signups 🔐 Fullstack SvelteKit Part 8 🚀 LIVE Coding & Chill 🔴 канала Johnny Magrippis