In this episode, we dive right into building our login functionality. We start by setting up the basic structure for authentication in our Nuxt project. First, we create a new pages directory, and inside of that, an auth folder where we drop a new login view component. This is where we'll be putting our login form.
We build out a simple form with email and password fields, along with a sign-in button. Instead of using hard-coded form submissions, we setup a submit method and use the useSanctumAuth composable to hook into our backend authentication logic.
For testing, we pre-populate the form with test credentials and connect the fields properly with v-model to our reactive form data. Then, we check that everything is wired up right by heading over to the browser, but run into a quick 404 because we haven't rendered the page component properly yet. Adjustments are made to ensure our Nuxt app can render newly created pages.
After making sure the page loads, we send the login request, keeping an eye out for CORS errors or any other issues. We confirm that even though we get a 404 (since the backend route doesn't exist yet), CORS is working fine. Next, we quickly add a login route to our backend API (Laravel), make it accept POST requests, and try again. This time, we successfully get a 200 OK response—proving the connection between the frontend and backend is set up as it should.
To wrap up, we do some cleanup and also create a basic homepage under the pages directory. By the end of this episode, we've confirmed that both our homepage and login page are accessible, and we're set up to properly build out authentication in the upcoming sections!