POSTing to form strategy from a different route action?

[tconroy]

I'm trying to understand how to validate+create a user in one route action, and then authenticate the newly-created user in another via remix-auth form strategy.

I have this form strategy defined:

// services/auth.server.ts
authenticator.use(
  new FormStrategy(async ({ form }) => {
    const email = form.get('email');
    const password = form.get('password');

    invariant(email, 'Email is required');
    invariant(password, 'Password is required');

    const user = await userModel.verifyLogin(email, password);

    invariant(user, 'Provided email or password was incorrect.');
    
    return user;
  })
);

and this auth route:

// routes/auth/$provider.ts
export const loader: LoaderFunction = ({ request, params }) =>
  login(request, params);

export const action: ActionFunction = ({ request, params }) =>
  login(request, params);


async function login(request, params) {
  invariant(params.provider, "Must specify a provider.");

  try {
    return await authenticator.authenticate(params.provider, request, {
      successRedirect: "/dashboard",
      failureRedirect: "/login",
    });
  } catch (error) {
    throw error;
  }
}

I have this /signup route, where the user input is validated + a user entity is created. This route posts to its own action handler, to validate the input and create the user.

// routes/join
export const action = async ({ request }) => {
  const result = await serverSideSignupValidator.validate(await request.formData());
  if (result.error) return validationError(result.error);

  await createUser(result.email, result.password);

  // what here?
};

function Join() {
  return (
    <Form>
       <Input type="email" name="email" />
       <Input type="password" name="password" />
    </Form>
  );
}

This successfully creates the user, but now I want their session to be authenticated. How do I route the user from /join action to /auth/$provider action? i.e what would come after the createUser() call?

I've tried making another POST from the /join action to try and forward the form data, but this didn't work

export const action = async ({ request }) => {
  const result = await serverSideSignupValidator.validate(await request.formData());
  if (result.error) return validationError(result.error);

  await createUser(result.email, result.password);

  // doesn't work
  return fetch('/auth/form', request);
};

[sergiodxa]

Once createUser returns a new user you can manually store it in the session yourself. You only need to be sure the key of the session is the same used by Remix Auth, you can do that by using authenticator.sessionKey.

// routes/join
export const action = async ({ request }) => {
  const result = await serverSideSignupValidator.validate(await request.formData());
  if (result.error) return validationError(result.error);

  let user = await createUser(result.email, result.password);

  let session = await getSession(request.headers.get("cookie"));
  session.set(authenticator.sessionKey, user);

  return redirect("/somewhere", {
    headers: { "Set-Cookie": await commitSession(session) }
  });
};

function Join() {
  return (
    <Form>
       <Input type="email" name="email" />
       <Input type="password" name="password" />
    </Form>
  );
}