Introduction and demo: Build a Starter Kit With Inertia and Fortify

Build a Starter Kit With Inertia and Fortify

Sign in Get started

Playing

01. Introduction and demo

Episodes

0%

Your progress

Total: 5h 21m
Played: 0m
Remaining: 5h 21m

Join or sign in to track your progress

01. Setting up

01. Introduction and demo

02. Installing Inertia from scratch

03. Installing Tailwind

04. Layout and navigation

05. Installing Fortify

06. Exposing routes with Ziggy

07. Global modals

02. Authentication

08. Registering users

09. Sharing the authenticated user globally

11. Signing out

12. Redirecting to the intended location

03. Feature management

13. Adding feature management checks

14. Client-side feature management

04. Building a toast feature

15. Basic flash messages with Inertia

16. Building a toast plugin

17. Styling and transitioning the toast

05. Profile management

18. Creating an account layout

19. Detecting and highlighting current pages

20. Updating profile details

21. Profile photo output and swapping

22. Storing a profile photo

23. Changing user passwords

24. Account feature toggling

06. Password confirmation

25. Using a modal for password confirmation

26. Confirming user passwords

07. Two factor authentication

27. Building the two factor modal

28. Showing a QR code

29. Enabling two factor authentication

30. Disabling two factor authentication

31. Showing recovery codes

32. Fixing password confirm redirect

33. Fixing password confirm flow when enabling

34. Challenging the user when signing in

08. Email verification

35. Mail setup and forcing email verification

36. Adding a verification notice

37. Resending the verification email

09. Account recovery

38. Sending a recovery email

39. Setting a new password

10. Fixes and improvements

40. Closing the user navigation on click

Transcript

00:00

So in this course, we're going to build out a starter kit with Inertia and Laravel Fortify. And the goal of this course really is to learn more about Fortify and how you can integrate it into a more front-end based application

00:13

that you would normally build with Inertia. So essentially, if you've never heard of Fortify, it's a front-end agnostic auth implementation for Laravel. So basically, when we install this package, it's going to give us a ton of

00:25

controllers and actions that will do things like create accounts for us, allow us to sign in, it will allow us to enable two-factor authentication, all the good stuff that you'd want to integrate into an app. And doing this from scratch is a really good way to, first of all,

00:40

learn about Fortify and how to integrate it. Second of all, it's a really good way to learn more about Inertia. So we're gonna be covering a huge amount here. This looks really simple on the surface, but there's a ton of stuff that we're

00:52

gonna go through here, which is gonna help you hopefully build better applications. So let's go ahead and have a look around. It's probably what you would expect, but let's check it out anyway. Okay, so I'm gonna head over to the dashboard.

01:03

As you can see, we get stuff like root protection here, so we have to sign in to be able to do this. Let's create out a new account here to kick things off. So let's go ahead and enter an email address and a password.

01:16

And once we've created that account, it's gonna go ahead and bump us into the verify email section. And that is because we're trying to access the dashboard, which is protected. So we do have the ability to force users to verify their email address for

01:32

specific routes. So let's go over to our email provider here, and let's go ahead and click Verify Email Address. We are in, and we can access pretty much everywhere now.

01:41

And you can apply this middleware to any of your routes, it really depends. Okay, so let's go over to our account section here, and you can see that we've got the ability to update basic profile information. We can change our name, our email address, and

01:54

that's gonna go ahead and flash a message. So this host message that you can see here, we're gonna be building completely from scratch. We're gonna build our own view plugin for this,

02:03

which is gonna hook into Inertia's router. So when we flash this on the back end with Laravel within a Fortify response, that's gonna then come through to the front end and show that within a view component, and we can control it as much as we need,

02:18

cuz we're gonna build it ourselves. But if you want to, you can swap that out for a third party solution, and we'll see how that works later. Okay, so another thing that we're doing is, of course,

02:29

avatar upload, so you can choose a new profile photo. Let's go ahead and choose someone here, hit Update, and sure enough, that gets updated. Everything is reflected in real time as well, which is really nice.

02:41

Okay, so our security section, we've got the ability to change a password. I'm not gonna demo that, it's pretty boring. But more excitingly, we've got the ability to enable two-factor authentication. So when I click on this, this is gonna ask me to confirm my password,

02:55

which is another thing that we're gonna have to implement. So confirm password can be applied to any of your routes, so you can protect any of your routes if you need to. In this case, for two-factor authentication, it is required.

03:06

So I'm gonna go ahead and enter my password here. That's gonna bump me into this modal with a QR code. So I'm gonna go ahead and grab my phone and just scan this QR code out. And that's gonna give me a code on here,

03:19

which I can enter to enable two-factor authentication. So let's go ahead and do that now quickly. And I'm gonna hit Continue, and there we go, two-factor authentication is enabled.

03:30

So a nice flow to go ahead and do this. We can also show our recovery codes here as well. And of course, we can disable this. So let's go ahead and enter our email address to sign back in.

03:41

And of course, we get our two-factor authentication prompt, which is exactly what we want. So I'm gonna go ahead and enter the code that we registered earlier. And there we go, we are back in.

03:52

So that's pretty much everything we're gonna cover. There are a couple of other things that we need to do along the way. But like I said before, this is a really good exercise to learn about Fortify and integrate something like Fortify into Inertia.

04:04

There are a ton of things in here that are gonna require a little bit of work and a little bit of manual implementation of certain things to get everything flowing how we need to. So hopefully this gives you really good knowledge about Inertia, Fortify, and

04:18

everything you need to build something like this. Let's head over to the next few episodes, get a load of stuff set up like our modals, all that good stuff, and then we can start implementing every single feature that Fortify gives us.

Episode summary

Welcome to the course! In this introduction episode, we kick things off by talking about what you'll be building: a modern starter kit for authentication and account management, using Laravel Fortify and Inertia.

We start off by looking at what Fortify offers—it's a front-end agnostic authentication package for Laravel, so you can build all your login, registration, and security features on your own front end using Inertia (and whatever frontend stack you prefer!). You'll see how Fortify provides the backend logic for things like registration, login, email verification, two-factor authentication, password updates, and more, while you get to handle the UI.

Through a quick demo, we walk through signing up, dealing with route protection (so only logged in users can see certain pages), email verification, editing profile info, flashing messages when you save changes (and how we'll build our own component for this), avatar uploads, and enabling two-factor authentication with a real QR code flow. We also look at how password confirmation works to protect sensitive routes, and how two-factor authentication fits into the login flow.

Overall, the idea is to show how much control you have by wiring all this up yourself using Laravel Fortify and Inertia, and how each piece of functionality requires a bit of setup so everything feels seamless and modern. The rest of the course is going to be hands on, as we build out the frontend components and connect them to Fortify.

So, let's get started setting up the project, modals, and all the good stuff before diving into building every Fortify feature in the coming episodes!

Episode discussion

No comments, yet. Be the first!