Handle login request form data

[asacarter]

As is with the authentication, it seems everything is handled by the library internally and there is no way to handle the form data from login form requests.

export const action = async ({ request }) => {
  const formData = await request.formData();
  const errors = loginErrorMessage(await login(request));
  ...

The request body can only be consumed once so trying to request the formData will fail.

If the user enters an invalid url, the user is taken to a full page outside of the app and shows a 500 error which is a very poor experience.

A better experience would be to check that a URL exists and display an error if not.

However my preferred approach is for the app template to be more open and customisable.

I'd really like to use the official template instead of my own but there are still so many issues like this that still make it unusable.

This is how I check a url exists in my template, along with disabled and loading props on the submit button.

export async function checkWebsiteExists(url) {
  // Check the url begins with http:// or https://
  if (!url.startsWith('https://') || !url.startsWith('http://')) {
    url = 'https://' + url;
  }

  try {
    const response = await fetch(url, { method: 'HEAD' });
    if (response.ok) {
      return true;
    } else {
      return false;
    }
  } catch (error) {
    return false;
  }
}

[matteodepalo]

Hi @asacarter thank you for your feedback, I'll put this issue in our backlog so our team can take a look.

[sle-c]

Hey @asacarter , there are 2 issues I see from this thread. I'm trying to understand the problem better.

Error flow

I tried to navigate to an invalid URL in the app. It shows a 404 for the app with the top menubar and sidebar.

This is pretty standard for apps on Shopify so I'm not too sure how you'd like to change it.

Request body not returned

The request body can only be consumed once so trying to request the formData will fail.

That is true, we read the request body using request.formData() inside the login function. This is a decision from Remix.

If you need the .formData() but still want to use the template . You can clone the request as follow

const cloned = request.clone();
const formData = await cloned.formData();
const errors = loginErrorMessage(await login(request));