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:

📦 Nuxt Sanctum Authentication Module

🗒 Blog Post:

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

▶ VSCode Customisation Tips & Tricks

▶ Code Quality DevTools

▶ #1: SPA Authentication using Laravel Sanctum Tutorial

▶ #2: API Token Authentication using Laravel Sanctum

▶ SOLID design principles Playlist

🔗 Related Products:

👉 Ctrl+Alt+Cheat - The Ultimate Cheat Sheets at Your Fingertips

👉 Spec Coder: AI-Powered VS Code Extension

👉 JavaScript: A Comprehensive Guide from ES2015 to ES2023 - eBook

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:

Also, follow us on:

[QiroLab]

🛠 Demo Repository:

📦 Nuxt Sanctum Authentication Module


🔗 Our Products:

👉 Ctrl+Alt+Cheat - The Ultimate Cheat Sheets at Your Fingertips


👉 Spec Coder: AI-Powered VS Code Extension


👉 JavaScript: A Comprehensive Guide from ES2015 to ES2023 - eBook

[sajjadhossainshuvo]

Hello sir, thank you for this wonderful tutorial. Also thank you for the laravel vue reverb tutorial. I've been following this channel for a long time. It would be really helpful for us if you make a series about design patterns using php/laravel for cracking interviews. On YouTube, there are not many series that completely explain design patterns using php/laravel.

[AntonSjölander-er]

Thanks for the tutorial! What about email verification? Is that something you could show us? :)

[DevelopmentAltıniş]

Will you also work on the Laravel spatie be role permission package?

[adamtech]

Thank you for the guide. However, I have one issue—after successful authorization (receiving a 200 response from the api/user endpoint), my app doesn’t redirect to any other page. When I manually navigate to an auth-protected route, the app still redirects me back to the login page. Interestingly, if I open a new tab and visit my Laravel app directly, I can see that I am successfully logged in. I understand it might be difficult to pinpoint the problem without code, but does anyone have any ideas?

[nghiaaovan]

I have a problem, when I reload the page it goes to the login page for about 2 seconds then redirects to the dashboard page. How to fix it ?