Shopify JWT session token expired while making axios request call - laravel

I have created an app on laravel and vue.js and for the authentication process, I have used the laravel-shopify package. right now when the Axios call duration is long that time gets a session token expired error. I have already referred this solution but this was not worked for me.
Shopify App-bridge session token is having some issues while working with the vue.js and Axios?
Please check attached documents, please check.
video:- https://drive.google.com/file/d/1US2dzgcPWm6iQcK4SMS4b6q85q9l89Mx/view?usp=sharing
When I have passed many files to Axios, I don't want to get expire token error. Does anyone have a solution for this?

Related

Laravel sanctum logout not working even after tokens are deleted

I have tried so many options I could think of or find online, user details are still persisted even after successful deletion of all the tokens!
I am using Laravel sanctum with Vue. The logout function I created works as expected when I use postman to make the request, but this is not the case when I make the request via axios from the browser. The tokens gets deleted quite alright but I still can access protected routes.
I have also tried
Auth::logout()
I have continued to try this using sanctum and web as guard.
Any help will be appreciated.

Why should we call sanctum/csrf-cookie on Laravel Sanctum

I was reading document, and one question occurred. Why would we need to call this endpoint /sanctum/csrf-cookie to get CSRF protection when login?
I understand what CSRF is, and per my understanding, the practice that Laravel uses to prevent CSRF is to set a cookie xsrf-token on browser and then Angular or some framework would automatically attach the cookie to header as x-xsrf-token, and it's also called server side double submit as one of the practices to prevent CSRF
However, I just don't get why on Laravel Sanctum we have to manually call /sanctum/csrf-cookie before login. With Web guard, this protection is automatic after login without any manual work before login.
My question is what is the benefit or logic for calling /sanctum/csrf-cookie before login rather than automatically sending x-csrf-cookie to browser via response after login?
Anyone could help to further explain will be so much appreciated.

Best Way To Integrate Server Side Laravel Login VueJS SPA

How can I authenticate a user with sanctum when the whole login process happens server side? The question I am asking is kind of hard to phrase so I will explain my situation.
I have a Vue SPA for my front end and a Laravel app as a backend api (they run on the same domain). Normally, to authenticate with the laravel api using sanctum, you would send the credentials in a post request, and if the login was successful, you would get the session information returned. However, I want to use steam login for authentication. I already have to whole process on the backend figured out in terms of actually logging in, however I am unsure how to pass the session data back to the SPA. Currently I have a link on my site that takes the user to the login endpoint on the api, and that endpoint will have them authenticate with steam, so the entire login process is handled on the backend. Now I just need to figure out how to send the session data back to the SPA. I guess it world be similar to using sanctum with socialite.
So far I've tried usisng Sanctums Mobile Aplication Authentication. I did this by having the user log in into the laravel app using steam, then once authenticated, a access token for their account would be created, and they would get redirected back to the Vue apps call back file, with the token as a part of the query string. Then the token would be stored and . This worked, however it presented some security issues.
The token was passed back in the url, so anyone could screenshot it and use it
Anyone who obtained the token by some other method could use it.
Here is the code for what I tried: https://gist.github.com/DriedSponge/4e8549486c2bfa33e4c0b21a539bdf85
So in summary, I want the entire login process to take place on the server, but somehow at the same time authenticate the SPA. If you have any ideas on how I can make this work, please let me know. If you have any questions just leave a comment. Thanks in advance.

Authentication with VueX and Laravel Passport

I'm currently using Vue (and VueX) and Laravel Passport. I have my register page working fine, now I've moved into my Login page. All the tutorials and posts I've seen online show a login system where the generated token is stored in localStorage but I've seen also that everybody says we shouldn't store any sensitive data in localStorage, then how should I do it? How can I manage sessions if my frontend (VueX) is separated from my backend (laravel)?
It's alright to store the token in localStorage, what you need to do is set the expiry of the token for less time, let's say 2 days.
These lines should be added to AuthServiceProvider.php
Passport::tokensExpireIn(now()->addDays(2));
Passport::refreshTokensExpireIn(now()->addDays(30));

Laravel passport: increase "laravel_token" cookie expire time

I have Laravel Passport implemented in my project and it is everything working well except the cookie expiration time where the tokens are being stored (that is just 1 hour).
My project consists in a backend Laravel 5.8 api (with Laravel Passport) that serves a front SPA app (Vue).
Users from my app can login successfully using a page with a Vue component that makes a POST request with the user credentials and, if the login is successfully done, users are redirected to a new URL (app home) - this redirection is a GET request that creates the "laravel_token" cookie - created by the CreateFreshApiToken middleware.
From now on, users can go everywhere inside the app and all data needed from the app components' is obtained through ajax calls (Laravel will note the presence of the cookie "laravel_token" in these ajax calls and will identify the logged in user using the JWT present in that cookie).
My problem is:
The "laravel_token" cookie that was created when user logged in was created with a lifetime of just 1 hour. Because this is a SPA, this cookie never gets updated (exchanged by a new one, with a new hour lifetime)... so, after 1 hour, when a new ajax request needs to be done to the backend Laravel server, it will receive an Unauthenticated response - that makes sense because "laravel_token" cookie is outdated.
How do you deal with this problem?
I know that i can refresh this cookie by perfoming a full refresh/reload of the page before this cookie expire but this is not a good solution in terms of user experience.
I can't make an ajax call to refresh this cookie because this is a SPA and i don't have the client_id and it's secret from client side... and also because not only this cookie is httponly but also it is encrypted by Laravel - so, i can't exchange it by a new one using JS.
Is the only solution increase the lifetime of this cookie (from 1 hour to.... 1 year, for example)? Do you see any problem with this? And where can i set this cookie expiration time? Does i need to extend the ApiTokenCookieFactory class?
I would like user to be logged in until he deliberately performs a logout request or the access_token expires (that, in my case that i am using Laravel Passport defaults, is a long-lived token of 1 year).
I would appreciate if someone could help me with this problem.
If you see something that i am not doing the correct way, i also would appreciate your comments with suggestions.
Thank you very much!
According to ApiTokenCookieFactory an expiration time of laravel_token cookie is getting from session lifetime value.
Well, just change value of SESSION_LIFETIME in .env

Resources