How to display failure

[JSLNO]

Hey,
I want to display the AuthenticationError that is thrown in the login function on the sign in page. Any suggestions on how I could do that or is this even possible?

Thanks

[sergiodxa]

All the strategies catch the errors your throw and wrap it in a Response.

If you defined a failureRedirect, the response would be a redirect and the error will be in the session.

If you didn't defined a failureRedirect, the response will be a 401 with the error as part of the body. This one could be accessed in a CatchBoundary component.

And you can wrap the authenticator.authenticate call in a try/catch and manually check the response and handle the error.

[JSLNO]

All the strategies catch the errors your throw and wrap it in a Response.

If you defined a failureRedirect, the response would be a redirect and the error will be in the session.

If you didn't defined a failureRedirect, the response will be a 401 with the error as part of the body. This one could be accessed in a CatchBoundary component.

And you can wrap the authenticator.authenticate call in a try/catch and manually check the response and handle the error.

I don't get why but when I try using a try/catch block theres always an error thrown even when the credentials are correct. But when I remove the block it works how it is supposed to. Here's the action function I currently have:

export const action: ActionFunction = async ({ request }) => {
    try {
        await authenticator.authenticate('local', request, {
            successRedirect: '/'
        })
    } catch (e) {
        if (e instanceof Response) {
            const data = await e.json()
            return { error: data.message }
        }
        throw e
    }

    return {}
}

This works when the credentials are incorrect, but when they are correct, it throws:
FetchError: invalid json response body at reason: Unexpected end of JSON input

[sergiodxa]

That’s because the library made use of Remix ability to throw responses including redirects

[JSLNO]

Sound's interesting, do you have any suggestion on how I could fix it?
Thanks

[JSLNO]

Sound's interesting, do you have any suggestion on how I could fix it? Thanks

Okay, I got it working like this:

export const action: ActionFunction = async ({ request }) => {
	try {
		await authenticator.authenticate('local', request, {
			successRedirect: '/'
		})
	} catch (e) {
		console.log(e)
		if (e instanceof Response && e.status === 401) {
			const data = await e.json()

			return {
				error: data.message || 'Unauthorized'
			}
		}
		throw e
	}

	return {}
}