How I Created Laravel And Vue Authentication: API + SPA

In this video, I will show you how I built a user authentication layer for single page application using Laravel and VueJs.

I've created two separate applications:
- VueJs single page application for the frontend
- Laravel application for the backend (API only)

They are both running locally on my laptop.

For the frontend, I'm using vuex and vue-router packages, but they are not needed to follow along.

For the backend, I'm using the Laravel Sanctum package. It offers a simple way to authenticate users using Laravel’s built-in cookie-based session authentication services.

You can find the example code on my GitHub repo:

Timestamps:
00:00 - Frontend setup
01:18 - Backend setup
01:41 - Setting up authentication on the backend
03:49 - Installing and configuring Laravel Sanctum
07:46 - Setting up authentication on the frontend

#laravel #vue #sanctum #tutorial

[simonposka]

Instead of putting an authenticated user inside sessionStorage, It's better to put the user inside a localStorage, because the session is still valid even if the browser is closed. This will prevent the bug where on browser/tab close, the user is getting deleted from the browser's sessionStorage, and then when the web app is opened again, you are getting redirected to a login page and login API call fails.

[userfriendly]

Thanks! Your video is exactly what I was looking for. You saved my time!

[Freddie-ti]

Thanks man! You save my time! Double, Triple LIKE!

[stabby]

thanks! amazing structure, can you made new video, how to install and separate structure back and front with all libs?

[Excess-qnqh]

thank you for this video!
do i need sanctum only if i want to offer the api ... or also if i use the laravel BE for my VUE FE ? can i use than the 'basic' Auth from Laravel without Sa
nctum ?

[anonimousse]

Great job :)
But after trying to integrate this to existing project still can't access to posts, the user informations are correctly stored in store and session storage. I checked and rechecked config laravel files. How can I debug this ??

Thanks for your work :)

edit: I didn't mention that in my case the front end is not separated with the backend (front folder is in the laravel folder)
edit 2: My cookies are empty after login
Edit 3: Finnally solved the problem after hours and hours only by removing SANCTUM_STATEFUL_DOMAINS and SESSION_DOMAIN from the .env file :/

[ashique]

Good but you should make another one with Vue composition Api.
Thanks!

[КириллБелоусов-ые]

in which folder is the admin panel created? in client project or inside laravel project?

[couts]

Thank you for video guy, it help me a lot... You have one more subscrible.
Cheers from Brasil!

[jamols]

I get unauthenticated on sanctum for some reason. There is no token bearer or such thing as what the other person has commented, I also have configured my .env like this


SESSION_DOMAIN=.devtest.test
SESSION_SECURE_COOKIE=false


Im not sure what am I still missing as of the moment I hope you could help me.

[darinelcigarroa]

Lastima que no entinedo el idioma a la perfección, thanks for sharing your knowledge <3

[محمدفضلالباريمحمداحمد]

when i logged in with corrected credentials i got 401 error and remove session storage how fixed it

[MoawiaAlmardoud]

Why you did not use "Mobile Application Authentication" and store the API token in local storage?
The way you did it will not work with the mobile app since it is based on session authentication, and you need to create a new API endpoint for the mobile.