Remix Authの認証でエラーメッセージを返却する方法

import { Authenticator } from 'remix-auth'
import { FormStrategy } from 'remix-auth-form'

export const authenticator = new Authenticator<number>(sessionStorage) // sessionStorageは下で記述する公式のコードを想定

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

    // 認証処理

    // 認証失敗時にはエラーをthrow
    throw new Error('メールアドレスとパスワードが一致しません') // このメッセージをactionから返却する

    // 認証成功時にはユーザーIDを返却
    return userId
  }),
  'user-pass',
)

import { createCookieSessionStorage } from '@remix-run/node'

// export the whole sessionStorage object
export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '_session', // use any name you want here
    sameSite: 'lax', // this helps with CSRF
    path: '/', // remember to add this so the cookie will work in all routes
    httpOnly: true, // for security reasons, make this cookie http only
    secrets: ['s3cr3t'], // replace this with an actual secret
    secure: process.env.NODE_ENV === 'production', // enable this in prod only
  },
})

// you can also export the methods individually for your own usage
export let { getSession, commitSession, destroySession } = sessionStorage

export async function action({ request }: ActionFunctionArgs) {
  const result = await authenticator.authenticate('user-pass', request, {
    successRedirect: '/', // 認証成功時のリダイレクト先
    failureRedirect: '/login', // 認証失敗時のリダイレクト先
  })
}

import { redirect, json } from '@remix-run/node'

export async function action({ request }: ActionFunctionArgs) {
  try {
    return await authenticator.authenticate('user-pass', request, {
      successRedirect: '/',
    })
  } catch (e) {
    // この記述がないと成功時にリダイレクトができない
    // 認証成功時はResponseのstatusが302になる
    if (e instanceof Response) {
      return e
    }

    // 認証失敗時にthrowしたエラー
    if (e instanceof Error) {
      return json({ message: e.message }, { status: 401 })
    }

    return json({ message: '認証に失敗しました' }, { status: 401 })
  }
}

import { useActionData } from '@remix-run/react'

export default function Index() {
  const data = useActionData<typeof action>() as {
    message?: string
  }

  return (
    <Content>
      <Container size="sm">
        <div>
          <h1 className="text-xl mb-8 text-primary-600">ログイン</h1>
          {data?.message && <div>{data.message}</div>}
          <form>ログインフォーム</form>
        </div>
      </Container>
    </Content>
  )
}