Hono•2y ago

Problems with Form POST in Safari and IOS

I have this simple router, relying on a simple HTML form.

export const authSigninRouter = new Hono();

const SigninForm = ({ email = '', errors }) => {
  return (
    <form class="mt-5 grid gap-2 lg:gap-8" method="POST" action="/auth/signin">
      <label class="grid w-full gap-3">
        <span>Email address</span>
        <input type="email" name="email" />
      </label>
      <label class="grid w-full gap-3">
        <span>Password</span>
        <input type="password" name="password" />
      </label>
      <button>Signin</button>
    </form>
  );
};

authSigninRouter.get('/', async (c) => {
  return c.render(<SigninForm />);
});

authSigninRouter.post('/', async (c) => {
  const { email, password } = await c.req.parseBody();
  ///...
  const token = await sign(tokenUser);

  setCookie(c, 'bearer_token', token, { secure: true, httpOnly: true });

  return c.redirect('/');
});

export const authSigninRouter = new Hono();

const SigninForm = ({ email = '', errors }) => {
  return (
    <form class="mt-5 grid gap-2 lg:gap-8" method="POST" action="/auth/signin">
      <label class="grid w-full gap-3">
        <span>Email address</span>
        <input type="email" name="email" />
      </label>
      <label class="grid w-full gap-3">
        <span>Password</span>
        <input type="password" name="password" />
      </label>
      <button>Signin</button>
    </form>
  );
};

authSigninRouter.get('/', async (c) => {
  return c.render(<SigninForm />);
});

authSigninRouter.post('/', async (c) => {
  const { email, password } = await c.req.parseBody();
  ///...
  const token = await sign(tokenUser);

  setCookie(c, 'bearer_token', token, { secure: true, httpOnly: true });

  return c.redirect('/');
});

Using chrome, on my computer, i have no problems whatsoever
Using Safari on the computer, or safari or chrome from my iphone, or safari on the iPhone simulator, it doesn't work.
I get the message on my server:

TypeError: Request aborted, code: "ABORT_ERR"

TypeError: Request aborted, code: "ABORT_ERR"

I'm using Hono with Bun, like so:

const app = new Hono();

Bun.serve({
  port: PORT,
  reload: true,
  fetch: app.fetch,
});

app.use('*', serveStatic({ root: 'public/' }));

app.route('/', appRouter);

const app = new Hono();

Bun.serve({
  port: PORT,
  reload: true,
  fetch: app.fetch,
});

app.use('*', serveStatic({ root: 'public/' }));

app.route('/', appRouter);

any insights on why this may be happening?
Thanks

Ppastilhas I have this simple router, relying on a simple HTML form. ```javascript export c...

Nico•6/26/24, 9:11 PM

What causes it to throw that error, just on load or submitting it?

Nico•6/26/24, 9:11 PM

The reason it happens on chrome on your iPhone is because it’s still the same engine as safari with just a different look

pastilhasOP•6/26/24, 9:12 PM

yeah, it's webkit, i know that

pastilhasOP•6/26/24, 9:12 PM

nothing throws, the error actually disappeared, i'm not sure why, i have been making changes

pastilhasOP•6/26/24, 9:13 PM

i have console.logs all the way down, and everything works as expected

pastilhasOP•6/26/24, 9:13 PM

but in the browser i get

Nico•6/26/24, 9:14 PM

So it’s working fine now?

pastilhasOP•6/26/24, 9:16 PM

the last console.log(3, 'token set')
is immediatly before the return c.redirect('/')

pastilhasOP•6/26/24, 9:18 PM

but it's also not the redirect

pastilhasOP•6/26/24, 9:18 PM

because i get the same result with

pastilhasOP•6/26/24, 9:18 PM

Nico•6/26/24, 9:22 PM

Do you have any middleware that fires before the response sends that could be messing it up

pastilhasOP•6/26/24, 9:22 PM

yes

pastilhasOP•6/26/24, 9:22 PM

hmm

Nico•6/26/24, 9:22 PM

Can you the commenting it out and see if it works

pastilhasOP•6/26/24, 9:22 PM

sure

pastilhasOP•6/26/24, 9:23 PM

pastilhasOP•6/26/24, 9:24 PM

and this works perfectly in chrome on the browser

pastilhasOP•6/26/24, 9:26 PM

also, from the iphone, it never even gets here

pastilhasOP•6/26/24, 9:26 PM

the middleware is only injected for the dashboard router

Nico•6/26/24, 9:28 PM

Well it server side so it would have to work in all browsers for that so it must be something else

pastilhasOP•6/26/24, 9:28 PM

yeah, but i can't figure it out

pastilhasOP•6/26/24, 9:29 PM

and it keeps on working on chrome, haha

pastilhasOP•6/26/24, 9:31 PM

oh, i found another problem

pastilhasOP•6/26/24, 9:31 PM

where the
TypeError: Request aborted
code: "ABORT_ERR"
disappeared

pastilhasOP•6/26/24, 9:32 PM

it comes back if i do

pastilhasOP•6/26/24, 9:32 PM

it stopeed erroring like that, because i had hardcoded email and password for a bit

Nico•6/26/24, 9:34 PM

Don’t destructure it, just set it as a variable and confirm your getting the email and password

Nico•6/26/24, 9:35 PM

Just for debugging I mean

pastilhasOP•6/26/24, 9:35 PM

that's what i did before

pastilhasOP•6/26/24, 9:35 PM

i commented it

pastilhasOP•6/26/24, 9:36 PM

and just had
const email = 'email';
const password = 'password'

pastilhasOP•6/26/24, 9:36 PM

so it did pass that obstacle, but in the end, the result was the same, nothing goes to the browser

Nico•6/26/24, 9:36 PM

But I’m saying confirm that you are getting a username and password in parseBody

pastilhasOP•6/26/24, 9:36 PM

oh i'll try that then

Nico•6/26/24, 9:37 PM

If not JSX might not set the form type automatically

Nico•6/26/24, 9:37 PM

*data type

pastilhasOP•6/26/24, 9:38 PM

pastilhasOP•6/26/24, 9:38 PM

and the headers come correctly
"application/x-www-form-urlencoded"

Nico•6/26/24, 9:41 PM

You are posting directly with the form correct, you’re not sending it with a fetch

pastilhasOP•6/26/24, 9:41 PM

posting directly

pastilhasOP•6/26/24, 9:41 PM

but i also tried with a fetch (using HTMX) and the result is the same

Nico•6/26/24, 9:43 PM

Would you mind sharing the whole route

pastilhasOP•6/26/24, 9:43 PM

i'm going to do something better

pastilhasOP•6/26/24, 9:44 PM

give me a sec

pastilhasOP•6/26/24, 9:49 PM

this is the simplest form, and it is working on safari also

pastilhasOP•6/26/24, 9:49 PM

with this, still working:

pastilhasOP•6/26/24, 9:52 PM

this is also working...

pastilhasOP•6/26/24, 9:55 PM

this, oddly, still works