Form POST requests failing when authenticate.admin is called

[aidan-sl]

Issue summary

From POST requests failing with various errors.

Before opening this issue, I have:

• Upgraded to the latest version of the @shopify packages
  • Affected @shopify/shopify-* package and version:
  • Node version:
  • Operating system:
• Set { logger: { level: LogSeverity.Debug } } in my configuration
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

I have an action method which handles POST requests from a form. The first call in this method attempts to authenticate the admin request: const { redirect } = await authenticate.admin(request); has we require the redirect helper.

This is failing with an application error.

Actual behavior

The authenticate request fails.

I have noticed looking at the network requests, the GQL mutation GenerateSessionToken is also failing, with the response:

{
    "errors": [
        {
            "message": "Internal error. Looks like something went wrong on our end.\nRequest ID: f5311f12-ee30-4c09-948b-4f1fd2a94fe0-1721833405 (include this in support requests).",
            "extensions": {
                "code": "INTERNAL_SERVER_ERROR",
                "requestId": "f5311f12-ee30-4c09-948b-4f1fd2a94fe0-1721833405"
            }
        }
    ]
}

We are using the suggested unstable_newEmbeddedAuthStrategy

Steps to reproduce the problem

• Perform a POST request to a route and authenticate the request. For example:

import {ActionFunctionArgs, json, LoaderFunctionArgs} from "@remix-run/node";
import {Form} from "@remix-run/react";
import {Button} from "@shopify/polaris";
import {authenticate} from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  return json({ message: 'loaded' });
};

export const action = async ({ request }: ActionFunctionArgs) => {
  await authenticate.admin(request);
}

export default function Index() {
  return (<Form method='POST'>
    <Button submit>Submit Form</Button>
  </Form>)
}

Debug logs

16:00:49 │                     remix │ [shopify-app/INFO] Authenticating admin request
16:00:49 │                     remix │ [shopify-app/DEBUG] Attempting to authenticate session token | {sessionToken: {"header":"undefined","search":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvZmFrZS1jby1sdGQtYWlkYW4taW5zdGFsbC1mbG93Lm15c2hvcGlmeS5jb21cL2FkbWluIiwiZ
GVzdCI6Imh0dHBzOlwvXC9mYWtlLWNvLWx0ZC1haWRhbi1pbnN0YWxsLWZsb3cubXlzaG9waWZ5LmNvbSIsImF1ZCI6IjI3ZmQ5MTczYjgxN2EzMzc4ZDAxMjkyMDRhZDA2ZjU5Iiwic3ViIjoiODU2NDc0MjU2ODgiLCJleHAiOjE3MjE4MzMyMTYsIm5iZiI6MTcyMTgzMzE1NiwiaWF0IjoxNzIxODMzMTU2LCJqdGkiOiIyMDY2ZmQwOC1iNjY3LTRjMWUtYmIwMC0yYzYxYzg5
OTM5MzgiLCJzaWQiOiI5NjNjODdhMi00NDI1LTRjNWItYWFlYS0wYjliMmJiZDllYTIiLCJzaWciOiI4M2M5MDFjNTNmYzA3ZDAxZWFmYTA5ZmM0NzU0NWQ3NjBjMjk0MGIxMmIzMjZjMDIyMGNmOWI1ZGRkNjBjNDg4In0.ckBS2RgsurclKBFy4RjE_WC5E_0WgjIFiMDTw10H7bc"}}
16:00:49 │                     remix │ [shopify-app/DEBUG] Validating session token
16:00:49 │                     remix │ [shopify-app/DEBUG] Failed to validate session token: Failed to parse session token 'undefined': Invalid Compact JWS

[aidan-sl]

I've managed to isolate this to an issue with using Sentry, it doesn't occur without it. It seems Sentry are making modifications to the request object.

getsentry/sentry-javascript#7785

[aidan-sl]

Unfortunately still seems to be an issue after removing Sentry

[TheGreatSimo]

@aidan-sl try to use useSubmit from Remix to submit to an action function
and also return something from the action function If you don't need any data just return null