Switching Exposed Team IDs in Laravel Jetstream
Playing
01. Switching Exposed Team IDs in Laravel Jetstream

Episodes

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

Transcript

00:00
By default Laravel Jetstream uses IDs to identify each of the teams that you have in your application You might want to switch this out for something like a UUID and I'm going to show you how to do this in this snippet Okay, so let's start by adding a UUID to the teams table so I'm going to go ahead and make a migration here and we'll just say add UUID to
00:26
Teams table and let's just specify the table in here just in case that doesn't work nicely and let's go over and open that up. The application that I've got set up here by the way is just a freshly created Jetstream app
00:40
The only thing I've done is changed over the EMV to set the database up and I've migrated this by default so let's go ahead and add that UUID and and Let's make this unique really important and then down here. Let's go ahead and just drop that which is of course optional
01:00
Just in case we roll them back. Great. So let's come over and run PHP artisan Migrate and we already have a team in there So let's go ahead and get rid of all of the test teams that I've used and this user as well And let's go ahead and rerun that. Great. So now over in our team's schema. We have a
01:20
UUID. Perfect. Now this UUID needs to be filled when we actually Create a new user and therefore create a new team. So if we head over to our team model, let's add in a Booted method in here which automatically assigns this UUID whenever a team is created So to do that we go ahead and create out the booted static function and this would be called once the model has been booted
01:47
So all we need to do in here is start to hook into eloquent So we're going to say when this team is being created We're going to take that team we can type in that there if we want to So let's just pull the namespace in for that. We want to assign that UUID
02:01
so let's say team UUID and we can use Laravel string helper to generate out a Version for UUID and we just want to make sure we pull that in from illuminate support and string Okay, so now that's done we should be able to Reregister an account. So let's go over to register and we should get that team created with that UUID in
02:25
The database nothing would have changed at the moment, but that's the next step Okay, so this team now has the ID of 8 and that's what we want to get rid of Now, let's just start to take a kind of look behind the scenes now It doesn't matter whether you're using live wire or inertia here. What you want to do is open up the roots file
02:45
That's either live wire dot PHP or inertia dot PHP within the vendor folder under Jetstream Now if we have a look here at the teams Let's have a look So we've got root get teams slash team and that references this team controller and show
03:03
That's the page that we can see here And I think that's the only place where this is referenced unless you reference yourself with any further functionality So this is the controller that we want to take a look at. So let's open up that team controller And yeah, sure enough
03:18
What we're doing here is using the base Jetstream class to grab a new team model and then we use find or fail Now with find or fail this uses an ID So what it's expecting from our roots file that we've seen here is an ID to be passed into here This isn't root model binding and it's taking that team ID and finding it in the database
03:38
And then of course doing a couple of checks here and then showing that view that we can see over here Now the problem we've got is we can't modify this team controller because it exists within our composer files So what we need to do is actually modify or rather completely customize all of our Jetstream roots So we can hook this specifically into a controller that exists within our application
04:04
So what we're going to do is first of all copy all of these routes over to our project so we can modify this Disable the registration that automatic registration of Jetstream routes So we don't end up with duplicates and then we can start to change around the team controller So I'm going to start by taking all of these routes from the composer files and copying these over
04:26
To a roots file of my own here So I'm going to call that Jetstream dot PHP paste them in go over to web and require this in so this might seem a little bit weird that we're doing this, but hold on and we'll Go ahead and get rid of the routes that are defined by default. So let's say Jetstream dot PHP
04:47
and Let's go ahead and disable the Jetstream routes that are registered by default just to give you an example of that if we come over To our roots now that we've got if for example, I changed use a profile over to just slash profile That's going to work. So let's go to profile because we've now got them roots within our app that we're registering
05:09
but the defaults still works if we go to user and Profile Or user and profile that works as well. So we've basically by copying them roots over we've duplicated them So to get around this we can come over to the Jetstream service provider and
05:28
Using the base Jetstream class if we just take a look at that really quickly Down the bottom. We've got this ignore routes method which sets registers routes to false Which means that it won't register any routes of its own So that will get rid of the base routes that are registered and we'll just use the ones that we've copied over
05:45
So we're going to say ignore Roots and if we head over now user profile doesn't work but slash Profile does work. So they're our roots now. I'm going to change that around so let's just bring that back to use a profile because I don't really want to change that around and
06:02
That of course goes great. So user and profile Should still work. Okay, so we've got the roots copied over now What we can do is create our own controller to handle the team functionality We're pretty much going to be copying and pasting that over as well
06:18
But that's the reality of using a boilerplate. Sometimes we need to do things like that So let's open up that team controller that we looked at earlier under the live wire or inertia Section of the Jetstream composer files. Let's grab this entire thing and copy it over to a controller for our own I'm not going to organize this
06:37
I'm just going to put it in the base, but you can go ahead and place that wherever you want So this is our new team controller that exists within our app. Let's change the namespace over here to app HTTP Controllers and the name remains the same and pretty much everything else here can be exactly the same as well Now over in our Jetstream routes that we've copied over we can now reference a different team controller, which is ours
07:02
So I'm gonna go ahead and import the controller that we've just locally created and that's what that over just at the top So this should still work, but now we have the control over that controller So over in this controller We know we get the team ID through just to test that out
07:21
Let's die dump on team ID give that a refresh and sorry I've been referencing this page the whole thing, but I actually mean the team's page. So Completely ignore I said before is this page that we've now copied over using the team controller and not the profile page So you probably get the idea that now gives us the
07:40
Team ID which is eight. That's what we want to change over to a UUID. So, how do we do that? Well, let's hook up our navigation first because that's really where all of this comes from So I'm going to open up navigation menu dot blade dot PHP and let's just look for current team So we've got current team ID here. We can switch that over to UUID and let's look again at current team
08:03
I don't think we have another one in there that looks fine and let's just search for ID and Oh, yeah, we do. So current team ID. So it's a UUID and
08:14
I think that should be okay. So let's just go and Check this out So if I hover over team settings now, you can see at the bottom that has now changed to be UUID If we go over to Alex's team that still has an ID
08:29
We'll take a look at that in just a second because that's another piece of information that of course reveals how many teams we have But pretty much now we've switched this over to a UUID now It doesn't work at the moment because of course we know in our team controller. We're using find or file on a string This is a ID which is an integer or a big in in this case
08:50
So we need to switch over this query to get that working. So we just want to change this over We're going to say where UUID which will look that up and then we can switch this to first or fail So we fail if that can't be found let's go over and give that a refresh and there we go So now when we hit team settings this now references this by the UUID everything else still works
09:16
But we're just seeing this in the URL in place of the ID So now a little bit more tricky we want to look at this switch teams now just to demo this I'm gonna go ahead and create out a new team. Let's just call this co course and create that out and In this list now we have when we click on this and a hidden input
09:35
so let's just inspect this and take a look at the content of this so in here, we've got a Hidden team ID which we can still look at so that if this was really commercially sensitive information Then we want to get rid of this as well because we don't want this to be in here either
09:54
So, let's again go over to the navigation and look at the switch team section which actually uses a Jet stream or a laravel blade component under the jet namespace So this is what we now want to change around. Let's open up the switchable team blade PHP file again
10:14
this is now within our composer files and There is that hidden input that we just saw in the element inspector in the browser So we're gonna go ahead and copy this over to our application again So we can switch this out and then we'll need to update another controller as well
10:31
So it's a little bit of a fuss But if this is really something that you want to do then at the moment, this is the only way to do it Okay, so I'm gonna go ahead and copy this and let's generate out a blade component on the command line So let's say make component. Let's just give this the same name
10:48
So switchable team and let's come over to our app. We're gonna go ahead and get rid of the Switchable team component here to make this anonymous and if we open up views components and Switchable team. This is ours. Now we can paste all of this in so let's go over to our navigation again And let's change this over to just X switchable team, which is now the component that exists within our application
11:17
So that's pretty much giving us exactly the same thing. It still works I can switch between these teams But now we have again a custom component here that we can start to do whatever we want with for example Switch this over to you ID and I don't think this is used anywhere else in here doesn't look like it
11:35
So we should be good. So let's just take a look at this really quickly and We should see if we open up The Element inspector on this we should see that you ID we don't at the moment
11:48
So I have a feeling that that is just for one of the other Menu items like the responsive menu items. So let's look for switchable team. Yeah, there we go So there's another one just in there as well. So again, let's just change that over to just switchable team on its own Okay, let's give that a refresh and when I click on this now
12:08
We should see an error, of course because we are going over to this passing an ID and you guessed it It's looking it up with that you you ID as the integer for the auto incrementing ID So now both of them are switched over. We now need to look at what happens when we actually switch a team So again back to our roots file that we've copied over. Let's go down here current team that uses current team controller
12:32
Again if we open that up from within the base code within our composer or vendor folder Yeah, it's still using find or fail. So we want to do pretty much exactly what we did before and switch this over So let's go back up to our controllers. Let's create the current team
12:52
Controller in here as well. And let's paste that in again switch the namespace over I'm just gonna grab it from here to save some time and we can just start to hook this up again so let's go and change this over to our version of that and We are nearly done. We just need to of course change over the controller that we've created to make this work
13:14
Let's just make sure this is going through first of all, and it looks like we didn't import that properly So let's go back over to our roots and just make sure That's actually being replaced So yeah, it's not being replaced. So let's get rid of that. And there we go
13:28
So I can still switch but of course it still doesn't work However, now we have our own controller We can do pretty much exactly what we did here But via the request thing that gets added to the form as a hidden input
13:42
so again, I can say where you ID and we can go and say first or Fail great and let's go ahead and try and switch this team over. So let's go back over to our dashboard Switch that over to code course. And there we go We have been switched over to a new team and really importantly now
14:02
This does not contain if we just open up one of these the ID it contains the UUID inside of here Now if we take a look at the database the way that team switching works is it sets the current team ID in the database? This is still fine because of course he wouldn't allow access to your database for anyone So this is still represented by the actual team ID
14:24
Nothing has changed in the actual implementation of this switching teams over But we've just kind of superficially changed this on the front end So both the team settings and the other one works nicely now. I've made a mistake here by probably Getting rid of that team controller. So let's just go and make sure we pull that in before we finish off
14:45
There we go and We should be good great So this now shows a UUID switching within the form shows a UUID and we've successfully hidden that ID from the client side

Episode summary

In this episode, we tackle the problem of exposing team IDs in a Laravel Jetstream application—something you probably want to avoid if you're aiming for a bit more privacy or security (or just prefer UUIDs over incremental integers). We walk through how Jetstream, by default, exposes simple integer IDs everywhere—for example, in your URLs and hidden form inputs—and how you can switch all of this over to using UUID instead.

First, we update the database: we add a UUID column to the teams table and make sure it's auto-filled on new teams using an Eloquent model event. Then, you’ll see how to swap Jetstream’s default route handling for your own customized routes and controllers so you can swap IDs for UUIDs everywhere in the app. We copy over the Jetstream routes to our local app, disable the default Jetstream route registration, and hook up our own controllers.

A big chunk of the process is updating all the spots Jetstream exposes the internal team ID. That means updating Blade views like the navigation and team switchers so everything points to the team UUID instead. For those Blade components tucked away in Jetstream’s vendor code, we duplicate them locally and edit as needed. There's some copy-pasting and a bit of code wrangling, but it's all pretty straightforward once you see the pattern.

Finally, we update logic everywhere an ID was being used (lookups, switches, etc.) to use the UUID instead, so now all team URLs and forms show the UUID. As a result, users no longer see the simple auto-incrementing IDs anywhere. The underlying logic with user-team relationships is untouched, so everything else still works as before. The episode wraps up with everything working nicely using UUIDs, and those numeric IDs hidden from the frontend.

Overall, it's a real-world walkthrough of extending and overriding vendor boilerplate in Laravel Jetstream, so you get a good feel for how to take control of your own app’s security and structure!

Episode discussion

No comments, yet. Be the first!