How should I authenticate in SPA using VueJS and Vue Router? - laravel

I am building a SPA website with Laravel for back-end and VueJS for front-end. And now I want to authenticate users in my website. So I used Laravel Passport for that. My question is that how should I keep user access token and refresh token in vue to make another requests for authentication required routes? Thanks in advance :)

Related

Laravel + Vue restrict access to some api routes

I have laravel 8 backend app, serving as API for frontend using Vue 3
In my routes/api.php I have
Route::post('/teachers', [TeacherController::class, 'index'])->name('teachers');
This will return list of teachers to be used in VueJS.
How do I restrict so that only my VueJS app can access api/teachers ? I successfully hitting the api above using POSTMAN, which I expect it to be failed.
I have laravel sanctum installed, although i'm not so sure whether this is something sanctum can help with.
Thanks

Secure web routes with laravel passport token

I am newbie with laravel.
I understand that in order to protect routes, you have to first check if a user is authenticated and a session is made. thus, we apply auth middleware in the web routes.
However, I am trying to implement laravel passport and now I am not able to proceed to my routes anymore since I have been authenticated using the passport.
My question is that is it possible to secure the web routes with passport token instead of laravel session? and if so, how one should do it?
Thanks, sorry for english, not native speaker.
Laravel passport is for API routes not for web routes you can use laravel session for web
for more details read it's documentation
https://laravel.com/docs/8.x/passport

How to get details for laravel sanctum

I know that with JWT, you can decode the token and get the details from it. In doing so you can validate in your standalone frontend app.(eg Vue js)
Is there a way to do the same thing with laravel sanctum with an SPA not on the same domain? If yes please how?

How to secure a Laravel API web with Vue.js

I will like to secure Laravel API web with Vuejs (SPA). For example, token sent from Laravel backend to Frontend - Vuejs should be protected or can't be modified by any harmful attacks. Can anyone please guide me to do it? Thanks in advance.

Should i use Laravel Passport or JWT resource?

I know passport uses oAuth, but my question is.. is it better to use Passport for Auth (Login and Register) or should i use jwt for login and register and Passport for external API requests... or use passport for both (User API and Login/AUTH)
Now i'm programming a SPA website with laravel and VueJs 2, i'm stuck in this.
Laravel Passport does, in fact, use JWT so comparing "JWT vs Passport" is kind of wrong.
You can use Laravel Passport for everything you mentioned - logging in, registering (not built-in in Passport but easy to add) and protecting external API requests.

Resources