I am developing an app
the app was working well, then I added the billing, still the app was working on the developing server, like: on the ngrok server. Pushed my code to heroku. After that I installed that app on the store, on the installation process install page --> payment approval page --> then the app doesn't redirect to the app dashboard. I returned to the development mode with ngrok server, on that i tried to install and that was working fine, but it doesn't work on production mode.
Here is the screenshot of the error:
Here is my authe code from server.js and below app.js:-
app.prepare().then(() => {
server.use(
session(
{
sameSite: "none",
secure: true,
},
server
)
);
server.keys = [SHOPIFY_API_SECRET];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET,
scopes: [SCOPES],
async afterAuth(ctx) {
// Access token and shop available in ctx.state.shopify
const { shop, accessToken } = ctx.state.shopify; //Store Access Token in Cookies
ctx.cookies.set("shopOrigin", shop, {
httpOnly: false,
secure: true,
sameSite: "none",
});
ctx.cookies.set("shopify_access_token", accessToken, {
httpOnly: true,
sameSite: "none",
secure: true,
}); // Redirect to app with shop parameter upon auth
server.context.client = await handlers.createClient(shop, accessToken);
await handlers.getSubscriptionUrl(ctx);
},
})
);
server.use(
graphQLProxy({
version: ApiVersion.October19,
})
);
router.get("(.*)", verifyRequest(), async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
});
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
});
});
---------and also app.js:-
import fetch from "node-fetch";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import Cookies from "js-cookie";
const client = new ApolloClient({
fetch: fetch,
fetchOptions: {
credentials: "include",
},
});
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
const shopOrigin = Cookies.get("shopOrigin");
return (
<AppProvider i18n={translations}>
<Provider
config={{
apiKey: API_KEY,
shopOrigin: shopOrigin,
forceRedirect: true,
}}
>
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
</Provider>
</AppProvider>
);
}
}
MyApp.getInitialProps = async ({ ctx }) => {
return {
shopOrigin: ctx.query.shop,
};
};
export default MyApp;
