remix-utils

You can manage user locales using a combination of server-side detection and client-side consumption.

1. Server-side: Use getClientLocales(request) in your root loader to extract locales from the request or headers. Conventionally, return an object with a locales key.
2. Client-side: Use the useLocales() hook to access these locales. The return type is Locales (string | string[] | undefined), which is compatible with the standard Intl API.

import { useLocales } from "remix-utils/locales/react";
import { getClientLocales } from "remix-utils/locales/server";

// in the root loader
export async function loader({ request }: Route.LoaderArgs) {
  let locales = getClientLocales(request);
  return json({ locales });
}

// in any route (including root!)
export default function Component() {
  let locales = useLocales();
  let date = new Date();
  let dateTime = date.toISOString;
  let formattedDate = date.toLocaleDateString(locales, options);
  return <time dateTime={dateTime}>{formattedDate}</time>;
}

To protect your forms against CSRF attacks, follow these steps:

1. Setup the Provider: In your root component, wrap the Outlet with AuthenticityTokenProvider, passing the csrf token obtained from your loader data.
2. Add Token to Forms: Inside any Form that performs a mutation (POST, PUT, etc.), include the AuthenticityTokenInput component. This adds a hidden input named csrf containing the token.
3. Custom Field Names: You can change the input name using the name prop, but only if you have also configured createAuthenticityToken with the same name.
4. Manual Submissions: If using useFetcher or useSubmit, use the useAuthenticityToken hook to retrieve the token and include it manually in your submission data.

Note: GET forms (like search forms) do not require the authenticity token.

// 1. Root setup
import { AuthenticityTokenProvider } from "remix-utils/csrf/react";

let { csrf } = useLoaderData<LoaderData>();
return (
	<AuthenticityTokenProvider token={csrf}>
		<Outlet />
	</AuthenticityTokenProvider>
);

// 2. Form usage
import { Form } from "react-router";
import { AuthenticityTokenInput } from "remix-utils/csrf/react";

export default function Component() {
	return (
		<Form method="post">
			<AuthenticityTokenInput />
			<input type="text" name="something" />
		</Form>
	);
}

// 3. Manual fetcher usage
import { useFetcher } from "react-router";
import { useAuthenticityToken } from "remix-utils/csrf/react";

export function useMarkAsRead() {
	let fetcher = useFetcher();
	let csrf = useAuthenticityToken();
	return function submit(data) {
		fetcher.submit({ csrf, ...data }, { action: "/api/mark-as-read", method: "post" });
	};
}

Honeypot is a technique that adds a hidden field to forms. Bots will fill it, but humans won't. To implement it:

1. Server Setup: Create a honeypot.server.ts to instantiate the Honeypot class.
2. Root Loader: In your app/root.tsx loader, call honeypot.getInputProps() and return the result to the client.
3. Root Provider: Wrap your application UI in the HoneypotProvider component using the props returned from the loader.
4. Form Integration: In any public form, render the HoneypotInputs component. Use a className (e.g., display: none) to hide the field from users.
5. Action Validation: In your form's action, call honeypot.check(formData). If the honeypot field is filled, it will throw a SpamError.

// 1. Server Setup (honeypot.server.ts)
import { Honeypot } from "remix-utils/honeypot/server";
export const honeypot = new Honeypot({
	randomizeNameFieldName: false,
	nameFieldName: "name__confirm",
	validFromFieldName: "from__confirm",
	encryptionSeed: undefined,
});

// 2. Root Loader (app/root.tsx)
export async function loader() {
	return json({ honeypotInputProps: honeypot.getInputProps() });
}

// 3. Root Provider (app/root.tsx)
import { HoneypotProvider } from "remix-utils/honeypot/react";
export default function Component() {
	return (
		<HoneypotProvider {...honeypotInputProps}>
			<Outlet />
		</HoneypotProvider>
	);
}

// 4. Form Integration
import { HoneypotInputs } from "remix-utils/honeypot/react";
function SomePublicForm() {
	return (
		<Form method="post">
			<HoneypotInputs label="Please leave this field blank" className="your-css-class" />
		</Form>
	);
}

// 5. Action Validation
import { SpamError } from "remix-utils/honeypot/server";
export async function action({ request }) {
	let formData = await request.formData();
	try {
		honeypot.check(formData);
	} catch (error) {
		if (error instanceof SpamError) {
			// handle spam
		}
	}
}