VueJS + Laravel Passport CSRF Token Expired How to refresh it

Question

I have a page leave it for 2 hours. If I using Laravel only, when I submit the form. It will have CSRF Token expired error.

Now I have a form using VueJS. When I submitted form. In console log it showed {message: "Unauthenticated."}

But It actually not a unauthenticated, because after I refresh the page, it did not redirect to login page. And during my login I already tick "remember me", so the user is authenticated. I open a new page with the same URL. It is able to access. As I check the differential is the X-CSRF-TOKEN.

Below is the curl I copy from Chrome dev tool.

//Token Expired
curl 'https://project-a.test/api/add-stock' -H 'origin: https://project-a.test' -H 'x-xsrf-token: eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ==' -H 'x-csrf-token: 0vEwLewA4rDtiftLpoYgqeNkIrs6Eyb9gvRiP2Ug' -H 'accept-language: en-GB,en;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh;q=0.6,zh-TW;q=0.5,id;q=0.4,ms;q=0.3,ja;q=0.2' -H 'x-requested-with: XMLHttpRequest' -H 'cookie: remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6ImRWSVVuNlZNcERvNXRKMkd6N2hHYmc9PSIsInZhbHVlIjoibHZyNHhReUp1RlNoamZJODZKWlhVQmpsSXNFOTZCeW40M2VWTEJnZzhJKzRYY2VnNjFIanFQRUZkbzh3RlFnQmhVZFF2RmhtS013bjhsc0ZWSVJUcHZmMVVDVUtQOGVDS0lNSXVcLzB5aFJNekJmRlVRUkVZeTJGTTdwTnJ1U0JQRXdac1NjWVNqdWs4XC9JSjZ1dGhTVUhQa29hcWQrUVk5REgrNGdJVTZcL1BVPSIsIm1hYyI6IjkxOTA5MmEwNmY3MmY0MGQ1OTg5YzVlNzJlZGJmMWMzODAyNjhkMzQzMDgwNTgyZGEzYjI4ZWRiYzUyN2I3ODkifQ%3D%3D; laravel_token=eyJpdiI6Iml6YUxjOUxBWHFOOXozazFrUnkxXC9BPT0iLCJ2YWx1ZSI6Ikt1emoxTHJcL05obzVrOXFManJcL3ViSzV4M1Z4TjhGcjlJNHdzNTVteEVFUG5XN0JDcEVqaWVsXC9CNnNxTjl5UStMNG9QRUdQZjNcL1dEQTJGOVZ6cDZ2Nk1TMGZNTzBBS01tQiswZjgwV3lIaVpXR25BTm13MDhNeWV2S3cyNU0xYmNxNGxcL0JVQ3BKclF5eUNMMmc3TnF5THR4MFl6VnRCS3lJR0RCSWhBb3YwZHBMUGFqZ25NcEtiT0RnenJsRmFnZjgwSDJCTHhISEVueW51amNDVXpcL0JYdzY2blAwYTFBTXpnb05EMElEdGJrOTQ2a2pNNVhMVWJtUU55OWxrczYiLCJtYWMiOiJkM2Q0NTU3ZDVjZDY0NWM0MDM2MjQ3Njk4N2Y3NzY0OThlMTJiYjllMWFlMjNjN2JmMWUxN2E3ZTFmYmJkM2Y2In0%3D; XSRF-TOKEN=eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ%3D%3D; longvision_malaysia_stock_management_session=eyJpdiI6IkV3TjJGOFhzdkdKTEpCKzJuVjZUYkE9PSIsInZhbHVlIjoidTNFXC9rbUg3S2JubXErZm1VN3JEOGhXbEx6QXBCYVpWTldvcHQ0UDM2WEhCTHBWNVwvV1FwSDVKYTlwdDMzTG5hIiwibWFjIjoiY2M0ZGRlZjUzYWIwMWE2M2U2YjVjYjUwMGNhMzNmNGVjZDcxMzcwZDczZDY3Njc0OWM5NzI2YTY1MjE2ZTEwOCJ9' -H 'accept-encoding: gzip, deflate, br' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' -H 'content-type: application/json;charset=UTF-8' -H 'accept: application/json, text/plain, */*' -H 'referer: https://lvm-stock.test/request-assets-add' -H 'authority: lvm-stock.test' --data-binary '{"qty":{"1":0,"2":0},"remark":"","customer":""}' --compressed

//After refresh the page, it updated the CSRF Token value which is working
curl 'https://project-a.test/api/add-stock' -H 'origin: https://project-a.test' -H 'x-xsrf-token: eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ==' -H 'x-csrf-token: kmp9fz2SGMXx0gEYuUymH5eNitgCs6IoDwNE68kX' -H 'accept-language: en-GB,en;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh;q=0.6,zh-TW;q=0.5,id;q=0.4,ms;q=0.3,ja;q=0.2' -H 'x-requested-with: XMLHttpRequest' -H 'cookie: remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6ImRWSVVuNlZNcERvNXRKMkd6N2hHYmc9PSIsInZhbHVlIjoibHZyNHhReUp1RlNoamZJODZKWlhVQmpsSXNFOTZCeW40M2VWTEJnZzhJKzRYY2VnNjFIanFQRUZkbzh3RlFnQmhVZFF2RmhtS013bjhsc0ZWSVJUcHZmMVVDVUtQOGVDS0lNSXVcLzB5aFJNekJmRlVRUkVZeTJGTTdwTnJ1U0JQRXdac1NjWVNqdWs4XC9JSjZ1dGhTVUhQa29hcWQrUVk5REgrNGdJVTZcL1BVPSIsIm1hYyI6IjkxOTA5MmEwNmY3MmY0MGQ1OTg5YzVlNzJlZGJmMWMzODAyNjhkMzQzMDgwNTgyZGEzYjI4ZWRiYzUyN2I3ODkifQ%3D%3D; laravel_token=eyJpdiI6Iml6YUxjOUxBWHFOOXozazFrUnkxXC9BPT0iLCJ2YWx1ZSI6Ikt1emoxTHJcL05obzVrOXFManJcL3ViSzV4M1Z4TjhGcjlJNHdzNTVteEVFUG5XN0JDcEVqaWVsXC9CNnNxTjl5UStMNG9QRUdQZjNcL1dEQTJGOVZ6cDZ2Nk1TMGZNTzBBS01tQiswZjgwV3lIaVpXR25BTm13MDhNeWV2S3cyNU0xYmNxNGxcL0JVQ3BKclF5eUNMMmc3TnF5THR4MFl6VnRCS3lJR0RCSWhBb3YwZHBMUGFqZ25NcEtiT0RnenJsRmFnZjgwSDJCTHhISEVueW51amNDVXpcL0JYdzY2blAwYTFBTXpnb05EMElEdGJrOTQ2a2pNNVhMVWJtUU55OWxrczYiLCJtYWMiOiJkM2Q0NTU3ZDVjZDY0NWM0MDM2MjQ3Njk4N2Y3NzY0OThlMTJiYjllMWFlMjNjN2JmMWUxN2E3ZTFmYmJkM2Y2In0%3D; XSRF-TOKEN=eyJpdiI6InVwUWpQUnAwN2w2OFU4eGhsUk11aHc9PSIsInZhbHVlIjoiOExWWk9NdWpDVSs1aFdNSVA5cDh4a1E2NFNoVlF0anZQSFV3UzI1Q1E4T045b0FGc25OQmRjN1YzS2FGK2hvayIsIm1hYyI6IjZlNjNkYTc5YTBkMmYwMzNhOThlZjRkMWI1NTJiMDA0YTI5NDFmNmQ1NWVmMDFhNjM0OTdjODYzNjk0OWZmYzcifQ%3D%3D; longvision_malaysia_stock_management_session=eyJpdiI6IkV3TjJGOFhzdkdKTEpCKzJuVjZUYkE9PSIsInZhbHVlIjoidTNFXC9rbUg3S2JubXErZm1VN3JEOGhXbEx6QXBCYVpWTldvcHQ0UDM2WEhCTHBWNVwvV1FwSDVKYTlwdDMzTG5hIiwibWFjIjoiY2M0ZGRlZjUzYWIwMWE2M2U2YjVjYjUwMGNhMzNmNGVjZDcxMzcwZDczZDY3Njc0OWM5NzI2YTY1MjE2ZTEwOCJ9' -H 'accept-encoding: gzip, deflate, br' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' -H 'content-type: application/json;charset=UTF-8' -H 'accept: application/json, text/plain, */*' -H 'referer: https://project-a.test/request-assets-add' -H 'authority: project-a.test' --data-binary '{"qty":{"1":0,"2":0},"remark":"","customer":""}' --compressed

I think generally Laravel will just return general message 'Unauthenticated.'. How to I notify user it is not Unauthenticated error, but they just need to refresh the page. Or it is able to prompt a message?

I tried in app/Exceptions/Handler.php added following line:-

public function render($request, Exception $exception)
    {
        if ($exception instanceof \Illuminate\Session\TokenMismatchException) {
            return response()->view('index', ['message' => 'custom message'], 500);
        }
        return parent::render($request, $exception);
    }

But it is still return Unauthenticated error.

Laravel Framework: v5.7.24
Laravel Passport: v7.1.0
VueJS: v2.5.21

did it get resolve? I am facing same error with same version of laravel and passport. — Hassan Raza, Sep 17 '20 at 10:33

Md. Miraj Khan · Answer 1 · 2019-02-03T03:41:51.787

0

I think you should customize the token mismatch error message, then show it to your user. please check the following post to customized the error response.

How to handle Token Mismatch Exception

edited Feb 03 '19 at 03:41

answered Feb 03 '19 at 03:32

Md. Miraj Khan

377
3
15

It's work for normal Laravel, but not with API base. This was I tried with fully Laravel app. But this one I work with API, I updated my questions. – Shiro Feb 03 '19 at 06:58
hmm.. you are trying to return a view but this is not the case, you must try JSON response and show that response to the user like `return response()->json(['message' => 'custom message'], 500);` now show the response message to the user. – Md. Miraj Khan Feb 03 '19 at 10:12

VueJS + Laravel Passport CSRF Token Expired How to refresh it

1 Answers1