Let's leverage the builtin authentication system, part of the Laravel and React data kit to make it easier for users to register, login and logout. From there, we'll be able to implement a liked puppies shortlist that truly integrates with User accounts instead of just pretending to do so. Okay, let's take a tour of the property. So there is currently no UI for this, but we can access manually the auth routes like register. And so here users are going to be able to create accounts.

but we can access manually the oath routes like register. And so here users are going to be able to create accounts. So let's go test, test@test.com, password, password, and let's create an account and please one password go away. So the starter kit comes with these dashboards that we are not really going to use in this application and that's the first observation of something we need to change. When a User registers, we don't want him to be redirected

of something we need to change. When a User registers, we don't want him to be redirected to the dashboard page, but we want to send him back to the homepage in the code base. If I go to the RegisteredUserController and we look through the code here, there should be a place where the User gets redirected and here it is. You can see this is in the store, the register form is validated, the User is created,

You can see this is in the store, the register form is validated, the User is created, and then they are redirected if successful to the dashboard route. So here we wanna change that to home. Alright? So that's gonna work for new User registrations, but when a User is already registered and they log in, the controller that's being hit is actually a different one. So we need to also take care of that one.

that's being hit is actually a different one. So we need to also take care of that one. And this one is called the AuthenticatedSessionController. Same deal. When someone is authenticated, they will be redirected to the dashboard, but we want them to go home instead. And by the way, by home here, what's meant is if I go to web.php, the main route on the route URL has a name called home. So this is how the connection is happening.

the main route on the route URL has a name called home. So this is how the connection is happening. So let's actually test this. I'm going to log out with tests and good to see that the logout route also goes to home. And now I'm going to manually visit the login route and I will use the test@test.com User that I've just created password. And when I click on login, I'm expecting to be redirected to the homepage and yep, I am.

And when I click on login, I'm expecting to be redirected to the homepage and yep, I am. Nice. Okay, that's pretty cool. But honestly, we can't expect users to visit manually the login or register URLs right now there is nothing in the UI that shows how to log in, log out, register. So let's go and add this. So we want to dynamically add some information to the header of the website based on if there's a User logged in or not.

So we want to dynamically add some information to the header of the website based on if there's a User logged in or not. So what we need to work out is how do we find out if someone is logged in or isn't? And you'll see that Inertia and Laravel makes it ridiculously easy. If you come from React and are new to Laravel, this is going to blow your mind. But in Laravel world, this is sort of basic functionality that's expected out of the box.

But in Laravel world, this is sort of basic functionality that's expected out of the box. If I go to the welcome, that's TSX page, which is a homepage, what we want to do is add some UI action buttons to the header component. Here we have the logo here and then the hero copy that's below. So that's the logo and that's the hero copy. And basically I think on the right hand side here, next to alongside the logo, we want

And basically I think on the right hand side here, next to alongside the logo, we want to have our login logout register buttons. So let's actually wrap this logo in a flex parent. So that flex and I will paste the closing div after the logo. And here we will have our oath actions. Let's just have a p tag for now that says log in, log out. So we wanted vertically aligned and all the way to the right and that's pretty easy with Flexbox.

So we wanted vertically aligned and all the way to the right and that's pretty easy with Flexbox. So align-items center and justify-content space-between, but it's not set, it is center, it is not start either. What I'm trying to say is center. Here we go. All right, and check this out. This is good enough as a placeholder, but now here is where we want to have some conditional logic whether the

but now here is where we want to have some conditional logic whether the user is logged in or not. So let's write the pretend code first and then I'll show you how to implement that. And it's pretty easy. So if we meet a condition, let's call the condition true ? So it's always gonna be true. And if it's true, we want to have the <pt> tag

So it's always gonna be true. And if it's true, we want to have the p tag that says log out assuming the User is logged in. And otherwise if it's false, we wanna have a p tag that says log in. And so I think ES link is not very happy because the condition is always true, but this is just a demo so it should now show logout and yep, it does. And if the condition was false, you know the drill,

so it should now show logout and yep, it does. And if the condition was false, you know the drill, it's going to show login. All right, so now we gotta work out if there is a login User or not. And this can typically be a major pain. Sometimes you gotta go check in cookies or maybe localStorage and do your work to work out if someone's logged in. And with Laravel and Inertia, this could not be easier.

and do your work to work out if someone's logged in. And with Laravel and Inertia, this could not be easier. So let's take a look at the dashboard route, the one we are not using, just to see how they do this because remember in the dashboard route we could see the username at the bottom left. So I don't even remember if I'm logged in, but I think I am logged in. So if I go to the dashboard route, yep, I'm logged in. You can see the test username here.

So if I go to the dashboard route, yep, I'm logged in. You can see the test username here and the email address as well. So let's go check out this sidebar template to work out what's happening. So let's search for sidebar and maybe it's in sidebar. That sounds like what it could be. Alright, so let's scroll down some navigation links. Uh, this is the upside bar with the content, the footer and ooh nav user.

Uh, this is the upside bar with the content, the footer and ooh nav User. So I'm thinking that this is where the dropdown menu with the User happens. And so let's check this out here we have the sidebar menu and woo, you can see it both User here with the User info. That's pretty handy. And so this oauth object here sounds like exactly what we want and need. So if I scroll back up, you can see

what we want and need. So if I scroll back up, you can see that oath is obtained from the usePage hook. And then reaching for the props usePage is a hook provided by the Inertia React package. And it's essentially a convenient way to give you access to the props on a given page. Okay, so in our Header component here, let's try something. Let's import that hook, import usePage from inertia-react, and then here try to access the page

Let's import that hook, import usePage from inertia-react, and then here try to access the page props to see what we have. So let's try const pageInfo equals usePage(). And then here before a logo, let's do the pre tag that I like to do with pageInfo. Now two. Okay, here's the info we've got. We've got the component's name, which is the Page component that is rendered on this page, which is welcome.tsx. And then we have these props object with errors.

that is rendered on this page, which is welcome that TSX. And then we have these props object with errors. And then a name, a quote, what, where does this come from? And then woo, look at this, the auth object, which is what looks like the currently logged in user, which is our test friends that we've created. And then there is Ziggy route information. There's all sorts of useful stuff here, but where is this coming from? To me, the only thing that I was expecting in the page props

but where is this coming from? To me, the only thing that I was expecting in the page props is this array of puppies here because this is the one thing that we've manually set to be passed to the homepage. Remember in the inertia response, and I'm talking about here we are setting the puppies to be passed to the welcome component. And so if I had food here and I was set it to bar, this is the sort

And so if I had food here and I was set it to bar, this is the sort of stuff I'm expecting to be available in the page props. And so if I search for food now indeed that prop is available as well. Alright, so it obviously looks like there is more information being passed to the page than what we've done manually. It looks like every page comes bundled with a set of information passed to its end.

It looks like every page comes bundled with a set of information passed to its end. That's exactly what's happening. Every Inertia response comes bundled with a few extra bits of information. And if I go to the handleInertiaRequest file here, this is where this extra page information is bundled. So I'll scroll down and you will see that there is a share function here that will essentially share extra information to all pages in your application.

function here that will essentially share extra information to all pages in your application. And so here we go. Look at this, the name of the app, the inspiration quote, and yes, the authenticated user, which is exactly what we were looking for. So that share function here is super handy if you want to pass some information that you want available on every page, but obviously you need to think about it.

that you want available on every page, but obviously you need to think about it because it is going to send over the wire that information on every page. So because we know we have access to this oauthUser, let's try to implement this in our Header components. So we've seen that usePage has a props property that we can drill down to, and then it has the oauth object, but we can destructure it from here like so and so. Now, if I just ify the oauth here,

but we can destructure it from here like so and so. Now, if I just if the oauth here, we just have the oauth object. Now let's see what happens if I go to my dashboard just so I can log out here. Aha. Now the user is null. So what this is basically telling me is that I can check for oauth that user, and if that is null, there is nobody logged in. And if there's a user object, we have a logged in user,

and if that is no, there is nobody logged in. And if there's a User object, we have a logged in User, this is super cool and we can use that everywhere we want, which makes it amazingly easy to do templating based on the logged in user or not. All right, so check this out, I'm going to get rid of the string gify data dump here and here I'm going to replace the false condition with $authUser.

and here I'm going to replace the false condition with Oath User. Now you can see that we have this Oath of type unknown. So if you remember on the App Sidebar component for the Nav User, you can see it's using here the shared data type, which seems to be coming from the types. And there it is. So here you can have the shape of the Oath object. So let's add this type to our Use page here.

of the oath object. So let's add this type to our use page here. We are going to need to import that up here. And so now let's go and handle properly the oath actions because now we can tell if there's a logged in user or not. So instead of just having some text here, uh, let's have a link to the login page. We could have two links login and register, but from the logging route it's quite easy to go to the register.

but from the logging route it's quite easy to go to the register. So let's have just one. And so instead of using an anchor tag here because we're using Inertia, we're going to use an Inertia link tag instead. And also because the project is using Shiny UI, let's see if we can find a button style that looks nice in a header. Alright, so let's turn our anchor tag here into a link

that looks nice in a header. Alright, so let's turn our anchor tag here into a link that I can import from Inertia React. And for the href we are going to pass instead of a hardcoded URL, the Ziggy route, which is available globally in the starter kit. So this is super handy and we wanna go to route logout, which again is a named route. So if I do a global search for logout,

which again is a named route. So if I do a global search for logout, you can see we have things like text link that goes to Route::logout, which is what we're doing here. And the actual route, named route is here in the auth. You can see that the logout is a POST route and that has that name. So the link we've just created is going to hit the destroy method on the AuthenticatedSessionController.

to hit the destroy method on the authenticated SessionController. All right, so let's do the same if a User is not logged in, but obviously we are going to change the route to log in and change the text to log in. Alright, and so now this should be turned into a link that goes to the login page. And like I said, if someone is not logged in, they can always go sign up. But let's try to style this login a little bit.

they can always go sign up. But let's try to style this login a little bit. I kinda want this to look like a button. So let's try to use, let me add parenthesis here and I'm going to wrap the link in a shadcn-ui button, not from headless-ui, but from the UI component, which is the shadcn-ui components. And let's close the button afterwards. But like I think I mentioned, I want the button to actually be a link tag, which is an anchor tag.

But like I think I mentioned, I want the button to actually be a link tag, which is an anchor tag. And so most chatson components have a really nice asChild prop, which is basically going to use the child tag as the component. Just to make it clear here, we have a chatan button component, but it's going to offload the responsibility of the tag to use to the child with the asChild. And so the child is a link tag from Inertia,

to use to the child with the S child. And so the child is a link tag from Inertia, which is an anchor tag. So we are going to have the stars of the sha n UI button, but using an anchor tag because of the link tag from Inertia. Let me quickly do the same for the login button and take a look at what we've got. Aha, very nice. We now have a style button with H style focus styles.

Aha, very nice. We now have a style button with H style focus styles and all the good stuff from chat cn. And if I inspect the elements, you will see that this is an anchor tag because it's taking the child element, which is the link tag. Alright, so let's try it out. login test at password. And now I'm logging and it says logout. We could even be cute.

And now I'm logging and it says logout. We could even be cute and say the name of the User here just to make it a bit friendly when we logged in. So if there is a User here, let's have a div that wraps the button and p tag here that says Hi $user that, and this is not the JSON resource User with only name and email.

and this is not the JSON resource User with only name and email. This is the oauth from the request. So we have access to all these fields. So if I wanted to display the email address, I could do that. Yep, I could. But here we want to display the name with a little exclamation mark. So let's add a class name of flex items center and gap, eh, let's try four, actually four works.

So let's add a class name of flex items center and gap, eh, let's try four, actually four works. All right. And just like that we have a really nice interface with the authentication setup that we've got. So I can log out, whoops, I made a big mistake and I'm really glad that I've made this mistake so we can go and fix it. So as you can see, uh, when you want to log out, this is not a get request,

So as you can see, uh, when you want to log out, this is not a GET request, but a POST request for some security reasons. And so with Inertia, we can tell our link tag to have the post method, but we need to add it to it. So in our logout link here, I can have the method of, and you can see all the options available. I will go post here, remember if I go to Oath that php, the logout is a POST route. And so we wanna match that, which we just did with that.

the logout is a post route. And so we wanna match that, which we just did with that. So let's try one more time to hit the logout. And this time it's logged me out instantly and I'm back to the homepage as an unauthenticated user. So I'm going to log in with Simon this time, simon@laracasts.com, which remember was our seeded default User and it should say Hi Simon. And it does very cool.

and it should say Hi Simon. And it does very cool. Just before we wrap up, I wanna do one more customization based on whether there is a logged in user or not. And it's the hero text here. So if the user is not logged in, we are not going to show the short list. And so I want the hero text to invite user to register to be able to shortlist their favorite puppies.

And so I want the hero text to invite User to register to be able to shortlist their favorite puppies. So this happens right under here in the hero copy. So we are going to keep this at all times, but we are going to check if we do not have a logged in User or that User. And here we can have a single scenario. And by the way, how cool and easy it is to do some conditional stuff based on having a User or not.

and easy it is to do some conditional stuff based on having a User or not. I love this. And so here we'll copy this paragraph and we'll have another paragraph that's going to say, Hmm, what should it say? Uh, sign in to keep track of your favorite puppies and add new ones. Perfect and cherry on top. We can wrap this in the link. link href is going to be route('login') and we are going to close the tag after the sign in

Link href is going to be route('login') and we are going to close the tag after the sign in and let's quickly give it some stars with class name underline. And then on hover we remove the underline with no-underline. That is my go-to trick for text links. And the last thing I wanna do is maybe add some empty mt-4 margin on top here. All right, so we logged in so we don't see the second line, but as soon as I log out we should see the sign in.

All right, so we logged in so we don't see the second line, but as soon as I log out we should see the sign in to keep track of your favorite puppies. And when we sign in, we are offered to sign in. Obviously we logged out and we invited to sign in, but we still see the short list. So let's also hide or display the short list component based on the logged in status. If I go back to welcome.tsx, this is going

on the logged in status. If I go back to welcome.tsx, this is going to happen here shortlist. So let's speed run it. const both equals usePage() that I'm going to import. We are going to pass the shared data from the types and access the props just like so and so. Now, once again, we've done this and we can go in the shortlist and go both that user do we? And if we do, we can wrap that.

and we can go in the short list and go both that User do we? And if we do, we can wrap that. So that was quick, but basically I grabbed the authUser status from the page props, and if we have authUser, we show the short list, otherwise we don't. And so no short list if you're not logged in, but if you do log in, you now are upgraded to be able to see the short list. Alright? Whew, that was a bit of a long lesson,

to see the short list. Alright? Whew, that was a bit of a long lesson, but this is groundbreaking advancements in our application and now we are going to be able to really implement the liked puppies and the short list in the way that integrates with User and is just like a real application instead of pretends to have a User attached to the puppy. So I'm excited with that. See you on the next one where we are going

So I'm excited with that. See you on the next one where we are going to complete the liked puppies functionality.