In this episode, we're tidying up how user data is handled between our backend Laravel API and the frontend TypeScript code. Right now, when we sign in, our API spits out too much information about the user—basically dumping everything unless we've hidden fields in the model. That's not ideal, so we're going to fix it.
First, on the Laravel side, we create an API resource for the user. This lets us customize exactly what pieces of user information are sent in the response (like just id
, name
, and email
). We'll also tweak Laravel's settings so the API resource doesn't wrap our data in a data
object—making the response cleaner and more direct.
Next, on the frontend, we switch over to TypeScript and add a types
directory. Here, we create a global TypeScript interface for the user, making sure the expected fields match exactly what our API sends back. This adds nice autocomplete support so you'll instantly know which fields you can access on the user object—no more guessing!
Finally, we update how we grab the user in our frontend code to use this new interface, getting strong typing and editor IntelliSense. This whole process keeps our API responses neat and our frontend code well-typed, so everything is easier to maintain as our project grows.