Hello Shopify Community! ![]()
Since I deployed my Shopify App I encounter following error in the Backend after restarting the server:
Session was not valid. Redirecting to /api/auth?shop=myshop-dev.myshopify.com | {shop: myshop-dev.myshopify.com}
It seems like all sessions get deleted when restarting the server and strangely, in my App I don’t get redirected to authenticate again but I just see a white screen.
Some extra information:
- Reinstalling the app solves the problem short-term (until restarting the server again)
- I created the App based on the boilerplate code of the Shopify CLI
- I set up sessionStorage as a SQLiteSessionStorage when creating the Shopify app object
- In the local environment I didn’t encounter this problem
- The App Frontend is made in VueJS and I stripped any React components
- Although authentication seems to fail the code of the frontend still gets executed (I see my console.log statements of the frontend)
The questions I have:
- Which session is not valid? The one used to make authenticated requests or the one connected to the OAuth token that gets generated when installing the App?
- Am I supposed to save the session persistently instead of using the SQLiteSessionStorage?
- Is it possible that I don’t get redirected to reauthenticate properly because I use VueJS with its router in the Frontend or is this redirection happening in the Backend?
This is how the authentication is setup right now:
/web/index.js
// -check
import { join } from "path";
import { readFileSync } from "fs";
import express from "express";
import serveStatic from "serve-static";
import useProductRoutes from "./routes/product.js";
import useFilesRoutes from "./routes/files.js";
import shopify from "./shopify.js";
import webhookHandlers from "./webhook-handlers.js";
// -ignore
const PORT = parseInt(process.env.BACKEND_PORT || process.env.PORT, 10);
const STATIC_PATH =
process.env.NODE_ENV === "production"
? `${process.cwd()}/frontend/dist`
: `${process.cwd()}/frontend/`;
const app = express();
// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
shopify.config.auth.callbackPath,
shopify.auth.callback(),
shopify.redirectToShopifyOrAppRoot()
);
app.post(
shopify.config.webhooks.path,
// -ignore
shopify.processWebhooks({ webhookHandlers })
);
// All endpoints after this point will require an active session
app.use("/api/*", shopify.validateAuthenticatedSession());
app.use(express.json());
useFilesRoutes(app);
useProductRoutes(app);
app.use(serveStatic(STATIC_PATH, { index: false }));
app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => {
return res
.status(200)
.set("Content-Type", "text/html")
.send(readFileSync(join(STATIC_PATH, "index.html")));
});
app.listen(PORT);
/web/shopify.js
import { BillingInterval, LATEST_API_VERSION } from "@shopify/shopify-api";
import { shopifyApp } from "@shopify/shopify-app-express";
import { SQLiteSessionStorage } from "@shopify/shopify-app-session-storage-sqlite";
import { restResources } from "@shopify/shopify-api/rest/admin/2023-01";
const DB_PATH = `${process.cwd()}/database.sqlite`;
const shopify = shopifyApp({
api: {
apiVersion: LATEST_API_VERSION,
restResources,
billing: undefined, // or replace with billingConfig above to enable example billing
},
auth: {
path: "/api/auth",
callbackPath: "/api/auth/callback",
},
webhooks: {
path: "/api/webhooks",
},
// This should be replaced with your preferred storage strategy
sessionStorage: new SQLiteSessionStorage(DB_PATH),
});
export default shopify;