Shopify App-bridge session token is having some issues while working with the vue.js and Axios?

Question

I am facing some issues while making a shopify application Vue.js as frontend and laravel as backend.

I am using app-bridge to generate session token it is generating session token fine and its working fine until the session token is regenerated. After session token gets regenerated it responds "Session token is invalid."

I am following the proper guidelines from the official documentation follow link .

I have checked the headers and the new token is passed when I send request using Axios instance. In simple words token is not working first time after it gets regenerated.

• "@shopify/app-bridge": "^2.0.5",
• "@shopify/app-bridge-utils": "^2.0.5",
• Laravel version: 8.65,
• Php version: 8.0.8,
• shopify version: 2.0
• "vue": "^2.6.12",

This is my code.....

 import axios from "axios"; import { getSessionToken } from "@shopify/app-bridge-utils"; const instance = axios.create(); instance.interceptors.request.use(async function (config) { return await getSessionToken(window.shopify_app_bridge).then((token) => { console.log(token) config.headers["Authorization"] = `Bearer ${token}`; return config; }); }); export default instance;

Answer 1

After a lot of struggles I have found out that app-bridge needs time synchronization. I am using windows machine so I synced my computers time and now its working perfectly.