Nuxt 3 + Laravel Sanctum Authentication: Setup Secure SPA & API Auth (Step-by-Step Guide)

In this tutorial, I’ll walk you through setting up Nuxt 3 authentication using Laravel Sanctum to secure both SPA (Single Page Application) and API authentication. Whether you prefer cookie-based SPA auth or token-based API authentication, this guide has you covered!

📌 What You’ll Learn:
✔ Installing the Nuxt Sanctum Authentication package.
✔ Configuring cookie-based SPA authentication.
✔ Setting up API token-based authentication.
✔ Handling CORS issues and configuring Laravel’s CORS settings.
✔ Creating login functionality using the useSanctum() composable in Nuxt 3.
✔ Testing requests in the browser and troubleshooting common issues.

By the end of this video, you'll have a fully functional authentication system for your Nuxt app integrated with Laravel Sanctum!

🛠️ Demo Repository:
GitHub Repository: https://github.com/qirolab/nuxt-sanct...

📦 Nuxt Sanctum Authentication Module
https://github.com/qirolab/nuxt-sanct...

🗒 Blog Post:
https://qirolab.com/posts/set-up-nuxt...


▶ Effortless Real-Time Chat Apps with Laravel Reverb and Vue.js 3
   • Effortless Real-Time Chat Apps with L...  

▶ Real-time Chat system (Laravel WebSockets, VueJs, Laravel-echo)
   • Real-time Chat system (Laravel WebSoc...  

▶ VSCode Customisation Tips & Tricks
   • VS Code Customisation Tips & Tricks  

▶ Code Quality DevTools
   • Code Quality DevTools  

▶ #1: SPA Authentication using Laravel Sanctum Tutorial
   • #1: SPA Authentication using Laravel ...  

▶ #2: API Token Authentication using Laravel Sanctum
   • #2: API Token Authentication using La...  

▶ SOLID design principles Playlist
   • SOLID design principles  


🔗 Related Products:

👉 Ctrl+Alt+Cheat - The Ultimate Cheat Sheets at Your Fingertips
https://qirolab.com/ctrl-alt-cheat

👉 Spec Coder: AI-Powered VS Code Extension
https://qirolab.com/spec-coder

👉 JavaScript: A Comprehensive Guide from ES2015 to ES2023 - eBook
https://qirolab.gumroad.com/l/javascr...


Timestamps:
00:00 - Introduction
00:38 - What is the "Nuxt Sanctum Authentication" Module?
01:41 - Create Nuxt 3 App
02:57 - Install Tailwind CSS in Nuxt 3 App
05:41 - Create Login, Register, Dashboard Pages
13:48 - Create Laravel App
15:34 - Set up matching domain for Nuxt3 App and Laravel App for SPA Authentication
18:11 - Install Laravel Sanctum Package
19:27 - Configure Laravel APP for SPA Authentication
23:08 - Install "Nuxt Sanctum Authentication" Module
25:42 - Test Setup by making a request to Laravel API
30:07 - Install Laravel Fortify
31:53 - Implement Login Feature
36:33 - Implement Logout Feature
38:21 - Middlewares & Redirect Options in Nuxt module
42:31 - Add `api` prefix to Fortify Routes, And `sanctumEndpoints` options in Nuxt Module
45:39 - Implement Register Feature
50:01 - Validation Error handling
53:40 - API Token Authentication
01:00:00 - Closing

#Nuxt3 #Laravel #Authentication #Sanctum #WebDevelopment #Tutorial #Coding #SPAAuthentication #APIAuthentication #FrontendDevelopment #BackendDevelopment #FullStack #VueJS #PHP


Support my work:
1. On BuyMeACoffee: https://www.buymeacoffee.com/qirolab


Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: https://fb.com/qirolab
𝐓𝐰𝐢𝐭𝐭𝐞𝐫:   / qirolab