I am working on a shopify app so it uses remix. In the app.tsx file I have the following code which I got when the app was created
export const loader = async ({ request }: LoaderFunctionArgs) => {
console.log(' in app loader')
const { session } = await authenticate.admin(request);
console.log('shop', session.shop)
return { apiKey: process.env.SHOPIFY_API_KEY || "" };
};
I have a route and in this route I only have an action method. My action method does work and authenticate.admin does give me a valid session object ONLY when the form is submitted for the first time. If I navigate to the app home page by clicking a link and then come back to the form by clicking a clicking and submitting the form in the action method authenticate.admin redirects me to a screen showing me to enter my shop url so it probably means that the authentication is failing.
My action method has the following
export async function action({ request }: ActionFunctionArgs) {
console.log('action', request)
const { admin, session } = await authenticate.admin(request);
console.log('session shop', session.shop, session.expires, session.isActive)
const formData = await request.formData();
....
When the form is submitted the second time I see the first console.log with the request but the second console.log for ‘session shop’ never shows up and I see the screen asking me to enter my shop url.
How do I resolve this?