Simulate login form values for authenticate()

[binajmen]

Hi,

I have a form that will update an existing user data (if already logged in), or create a new user and log him (by generating a password and creating a new user in the db). Follow by a redirection to the next page.

In the second case, I'd like to use the authenticate() method, but I don't know:

1. How I can simulate the typical login form values (email & password) necessary in the second parameter (Request).
2. How I can retrieve the error (in case the email already exists for example – unique value in the DB)

        const genPassword = await register(formData, catalog as CatalogType);
        
        return await authenticator.authenticate('form', /* what should I pass here ? */, {
          successRedirect: '/next-page',
          failureRedirect: '.', // <-- in order to redirect to the same page ? or skipping this parameter will defaulted to current page ?
        });

Any help would be greatly appreciated 🙏

[binajmen]

I've been trying this, but get a TS error:

const { email, password } = await register(formData, catalog as CatalogType);

const data = new FormData();
data.append('email', email);
data.append('password', password);

// TS error on body:
// "Type 'FormData' is missing the following properties from type 'ReadableStream':
// readable, read, setEncoding, pause, and 22 more."
const loginRequest = new Request({ body: data });

return await authenticator.authenticate('form', loginRequest, {
  successRedirect: '/next-page',
  failureRedirect: '/login',
});

[binajmen]

Second unsuccessful attempt:

export const action: ActionFunction = async ({ request, params }) => {
  const copy = request.clone();
  const formData = await request.formData();
  const action = formData.get('action');

  try {
    switch (action) {
      case 'register':
        const { email, password } = await register(formData, catalog as CatalogType);

        const data = new FormData();
        data.append('email', email);
        data.append('password', password);

        /*
        data NodeFormData {
          _fields: { email: [ '[email protected]' ], password: [ 'bl26kxc4jj' ] }
        }
        */

        const loginRequest = new Request(copy, { body: data });

        return await authenticator.authenticate('form', loginRequest, {
          successRedirect: '/next-page',
          throwOnError: true,
        });

authenticator.use(
  new FormStrategy(async ({ form }) => {
    const email = form.get('email') as string;
    const password = form.get('password') as string;

    console.log({ email, password }); // <-- returns { email: null, password: null }

    let user = await verifyUser(email, password);

    return user;
  }),
  'form',
);

[sergiodxa]

Is there a reason why you can't call register inside the FormStrategy?

authenticator.use(
  new FormStrategy(async ({ form }) => {
    let email = form.get("email")
    let password = await form.get("password");

    if (!password) {
      let result = await register(form, catalog)
      return await verifyUser(email, result.password
    }

    return await verifyUser(email, password);
  }),
  'form',
);

[sergiodxa]

If register already creates the user, why do you want to call authenticate? To store the user on the session? You can do this:

let user = await register(form, catalog)
// get the session object
let session = await sessionStorage.getSession(cookieHeader)
// set the session on the sessionKey configured in the authenticator
session.set(authenticator.sessionKey, user)
// commit the session
let headers = new Headers({ "Set-Cookie": await sessionStorage.commitSession(session) });
// send a response (most commonly a redirect)
return redirect(somePath, { headers })

[binajmen]

This is exactly what I want. If the form data are correct and the createUser() succeeded, I want to redirect the user to the next page while logging him automatically (pushing the user on the session).

I was thinking to use authenticate() to do so, but your suggestion is to do it manually instead, correct? Excuse my ignorance, but where do you retrieve cookieHeader from? The action request? -> request.headers.get("Cookie")

[binajmen]

I'd rather avoid to repeat what is nicely encapsulate in remix-auth success method

remix-auth/src/strategy.ts

Lines 143 to 164 in fa736e6

	protected async success(
	user: User,
	request: Request,
	sessionStorage: SessionStorage,
	options: AuthenticateOptions
	): Promise<User> {
	// if a successRedirect is not set, we return the user
	if (!options.successRedirect) return user;
	let session = await sessionStorage.getSession(
	request.headers.get("Cookie")
	);
	// if we do have a successRedirect, we redirect to it and set the user
	// in the session sessionKey
	session.set(options.sessionKey, user);
	session.set(options.sessionStrategyKey || "strategy", this.name);
	throw redirect(options.successRedirect, {
	headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
	});
	}
	}

[sergiodxa]

So my recommendations is to do one of these:

1. Create the user inside the FormStrategy
2. Create the user outside and set the user data on the session yourself.

Also, check my other comment below about how to create the FormData and Request manually to pass them to authenticate.

[binajmen]

I'll keep these both recommendations in mind and implement nr. 2 for now as I feel this is a specific way to log a user and it should now mess with the "normal" verify implementation.

I did check your comment below. It helped to replace the request (or the clone) by "" as the first parameter to Request(). Although, the successRedirect didn't work as expected. I'm probably doing something wrong.

Thank you for your help, really appreciate what you do for the community! 🙏

[sergiodxa]

And specifically about your error. To pass a body to a Request it needs to be a non GET request, which is the default when you don't set the status. Check the FormStrategy tests here for example

https://github.com/sergiodxa/remix-auth-form/blob/6bab8efb06fd92c0868df9f442a33d4a23f69bdb/test/index.test.ts#L21-L32

It creates a FormData, set the value and creates a Request with the URL (you can use the same of your action request), the body is the FormData and sets the method to POST.

[binajmen]

I tried this:

export const action: ActionFunction = async ({ request, params }) => {
  ...

  const formData = await request.formData();
  const action = formData.get('action');
  const { pathname } = new URL(request.url);

  try {
    switch (action) {
      case 'register':
        const { email, password } = await register(formData, catalog as CatalogType);

        const body = new FormData();
        body.append('email', email);
        body.append('password', password);

        const loginRequest = new Request('', { body, method: 'POST' });
        const redirectUrl = pathname.split('/').slice(0, -1).concat('checkout').join('/');

        await authenticator.authenticate('form', loginRequest, {
          successRedirect: '/ok',
          failureRedirect: '/login',
        });
        break;
      ...
      default:
        return json('Not implemented', { status: 500 });
    }
  } catch (error) {
    console.error('error', error);
    if (error instanceof Error) {
      return json(JSON.parse(error.message), { status: 400 });
    }
  }

  // setSuccessMessage(session, 'Changes has been saved');
  return json('ok');
};

authenticator.use(
  new FormStrategy(async ({ form }) => {
    console.log({ form });
    const email = form.get('email') as string;
    const password = form.get('password') as string;
    console.log({ email, password });

    let user = await findOrCreateUser(email, password);
    console.log({ user });

    return user;
  }),
  'form',
);

Seems the form/body on an empty request (new Request("", ...)) works (vs. new Request(request, ...)). I can see the user object correctly printed in the console. But the successRedirect doesn't seem to work now. I enter the catch block instead (I don't know why..).

[1] { email: '[email protected]', password: 'wlcue2sqjj' }
[1] {
[1]   user: {
[1]     id: '0f6416e6-441e-4e10-bedc-471975780135',
[1]     email: '[email protected]',
[1]     admin: false
[1]   }
[1] }
[1] error
[1] Response {
[1]   size: 0,
[1]   timeout: 0,
[1]   [Symbol(Body internals)]: { body: null, disturbed: false, error: null },
[1]   [Symbol(Response internals)]: {
[1]     url: undefined,
[1]     status: 302,
[1]     statusText: 'Found',
[1]     headers: Headers { [Symbol(map)]: [Object: null prototype] },
[1]     counter: undefined
[1]   }
[1] }