Nuxt 3 Authentication with Laravel Sanctum:A Practical Guide

Enable two factor authentication in the Nuxt front end by leveraging Laravel Fortify, using the two factor secret, recovery codes, and confirm flag to toggle activation.

Implement a password-confirmation flow for enabling two-factor authentication in a Nuxt 3 and Laravel Sanctum setup, wiring the confirm password endpoint and rendering the QR code.

Enable two-factor authentication by activating it via backend, retrieving QR code SVG for a user, and guiding the user to scan with an authenticator app and enter a six-digit code.

Finalize the two factor enable flow by posting the six digit code to the user/confirmed two factor authentication url, then refresh the identity and route to the account page.

Show the two factor challenge during login, verify the six digit code from the authenticator app via the two factor challenge endpoint, then refresh identity to complete sign-in with Sanctum.

Disable two factor authentication in a Nuxt 3 app by deleting the endpoint and confirming the password, then refresh the user identity and redirect to the account page.

Define unit (class) and section models with migrations, factories, and seeders to build a students management crud, then create a student model linked to unit and section with eager loading.

Render authenticated student data with a Nuxt 3 frontend and Laravel Sanctum. Use API routes, resources, and composables to fetch and display students, units, and sections.

Implement the record creation flow with dependent dropdowns, server-side validation, and database storage, including API endpoints for classes and sections and handling validation errors.

Implement a dependent dropdown flow that filters sections by the selected unit id when a class is chosen, using a backend api and frontend composables to fetch and render data.

This lecture finalizes the record creation flow in a Nuxt 3 app with Sanctum, implementing server-driven validations, displaying errors, and redirecting after create.

Implements the record update flow by building a backend update method with route model binding and a Nuxt front-end that fetches, pre-fills, and submits updates via a dynamic id.

Implement the delete operation in the CRUD workflow by adding a backend destroy method, a front-end delete action with confirmation, and updating the displayed records.

Implement pagination in Nuxt 3 by building a frontend pagination component that uses backend metadata (total, current page, links), renders labeled links, and navigates pages via URL-derived numbers.

Finalize pagination by appending the page parameter to the students URL and triggering fetches when the URL changes, validating page navigation from 1 to 3.

Implement search in the student management system by adding a scope search that filters by name or email using a like query with wildcards from the front end.

Implement filter by class by extending the search scope to include unit id, render a class dropdown populated from fetched units, and reset pagination when a new search starts.

Explore the database structure for roles and permissions, including models and pivot tables role_user and permission_role, to enable many-to-many relationships between users, roles, and permissions.

Define the role and permission models with migrations and seeders, create role_user and permission_user pivot tables, establish many-to-many relations with users, and seed admin and user roles and permissions.

Register permissions as gates using a new Laravel auth gates middleware, eager load roles and permissions, and implement backend checks in controllers for student list, create, edit, show, and delete.

Explain how to pass user permissions from Laravel Sanctum to the Nuxt frontend, render UI elements conditionally, and use a frontend permission middleware to redirect unauthorized users.

Resolve the login flow in Nuxt 3 authentication with Laravel Sanctum by refreshing identity after sign-in, enabling automatic redirects to the two-factor challenge or the dashboard.

Replace the browser history on login by using replace: true when redirecting to the dashboard, preventing back navigation to the login page and ensuring the auth middleware redirects guests.