How to perform auth in action?

[adaboese]

I don't understand what is the point of remix-auth-form.

I already use conform to build forms and actions to process data changes.

How do I do something like this in an action?

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const submission = parse(formData, { schema: FormDataZodSchema });

  if (submission.value) {
    if (submission.intent === 'submit') {
      // check credentials ...

      // TODO ??? authenticator.setAuthenticated; 

      return redirect(`/app`);
    }

    return json(submission);
  }

  throw new Error('Invalid submission.');
};

[adaboese]

I think I figured it out...

I changed my auth.server.ts to:

import { sessionStorage } from '@/services/session.server';
import { type User } from '@/types';
import { Authenticator } from 'remix-auth';
import { FormStrategy } from 'remix-auth-form';

export const authenticator = new Authenticator<User>(sessionStorage);

authenticator.use(
  new FormStrategy(async ({ context }) => {
    if (
      context &&
      'userAccountId' in context &&
      typeof context.userAccountId === 'number'
    ) {
      return {
        id: context.userAccountId,
      };
    }

    throw new Error('Invalid authentication request');
  }),
  'user-pass',
);

and now I do all validation in action and just pass the userAccountId when authentication succeeds.

[adaboese]

Started hitting this error after attempting this remix-run/remix#7660

[sergiodxa]

You need to clone the request before reading the body (calling request.formData()), otherwise when the strategies tries to read it, it will fail.

[sergiodxa]

The FormStrategy exists to centralize auth logic into Remix Auth strategies, if you're not using it with the OAuth2Strategy (or a derived strategy) it will be simpler to just do your code in an action.