Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
10. Authenticating on reload

Episodes

0%
Your progress
  • Total: 1h 35m
  • Played: 0m
  • Remaining: 1h 35m
Join or sign in to track your progress

Transcript

00:00
There's not much use in having some login functionality that works like this, but then refreshing the page and all of the state that we've set is lost. Like I said, in the last episode, technically we are now authenticated because of this Laravel session cookie, but we're not resetting our state.
00:20
Now, if we call the attempt method that we built in the last episode from anywhere, that's going to go ahead and make a request to the user endpoint. And as long as that was successful and the user is authenticated, it will set all of the state for us that we need.
00:35
But where do we call attempt from? Well, there's a couple of ways that you can do this. And the way that I prefer to do this is over in the main.js file, where we set up our app and we mount it, do it as a preconditioning to mounting.
00:53
Now this won't mean that if the user isn't authenticated, it won't mount the app. If we do get rid of the app mount, we just don't get anything on the page. So that's not going to happen. What we will do is just make sure we're authenticated or at least check if
01:06
we're authenticated and then render the app. And that way we won't get any flickering data. Think of it like a standard network request to a normal web app, not a single page application.
01:17
When you send a request to an app, the probably one of the first things that will happen is it will attempt to authenticate the user before it renders anything out of the page. So how do we do this?
01:27
Well, the first thing that we need to do is pull in our composable from use auth. So let's go ahead and pull that in first of all, and then we need to go ahead and set this up. So let's just do this a little bit further down here and we'll go ahead
01:41
and just pull out the attempt method. That's pretty much all we need in here. Now, what we can do is we can attempt authentication down here, which will work on its own.
01:51
If we head back over, you can see that now when I refresh, we're already authenticated because we've got the session in there. It's making a request to that user endpoint and it's successfully setting that state.
02:02
But we get this flicker and we're also going to find issues later with some of our router hooks not quite working. If we're not authenticated before the app mounts. So remember from our attempt method, what we did over in use auth is we
02:17
returned, or we didn't return anything from here at the moment. So if we do return this response, what we're going to see is over in main, we can do attempt and then once this was successful, then go ahead and mount our app.
02:36
Let's try this out. So if we head back over now and give that a refresh, you can see that it's doing that before it renders the app and therefore we don't get any of that flicker and by the time we've hit the view app and everything is rendered out,
02:50
we know that we definitely have that user in there. We check out our network requests. You can see that we're still sending a request down to this user. Then it's rendering the app, which is perfect.
03:01
Okay. So the only issue with this is if we're not authenticated. So let's bring up our application again and give this a refresh. Well, you can see that we always send a request down to user.
03:11
Now we get a 401 unauthorized back because we're not authenticated. I don't think that's too much of a problem because it's just saying, well, we're attempting authentication. It's not worked, but we're gracefully handling this by just
03:23
setting the state back to the default. Okay. So now when we log in, it means that once we are authenticated and we refresh, we are always logged in.

Episode summary

In this episode, we tackle a common problem with authentication in single-page applications—losing your login state when you refresh the page. While our login functionality technically authenticates you (thanks to the Laravel session cookie), our app doesn't rehydrate the user state on reload. This can lead to annoying issues like flickering data, broken router hooks, and generally a bad user experience.

To fix this, we see how to call our attempt authentication method inside the main.js file, before the app mounts. This ensures we check for an existing session (and grab the user data) before the UI is rendered, giving us a seamless experience with no weird flashes or unauthenticated views popping up briefly.

We walk through importing our authentication composable, calling attempt, and making sure the app only mounts afterward. As a result, after a refresh, if you're still logged in (cookie's there), your user state is correctly set without any flicker. We also look at what happens if you're not authenticated; the app gracefully defaults to the logged-out state if the user endpoint returns a 401. By the end, your authentication feels truly persistent across refreshes!

Episode discussion

No comments, yet. Be the first!