Generated by XState Viz: https://xstate.js.org/viz

machine.js

const MAX_ALLOWABLE_ATTEMPTS = 3

const userLoginMachine = Machine({
	id: "userLogin",
	initial: "loginScreen",
	context: {
		authError: "",
		attemptCount: 0,
	},
	states: {
		loginScreen: {
			on: {
				SUBMIT_CREDENTIALS: "authentication",
			}
		},
		authentication: {
			invoke: {
				id: "authenticationHandler",
				src: (ctx, e) => new Promise((resolve, reject) => {
					setTimeout(() => {
						reject()
					}, 1e3)
				}),
				onDone: {
					target: "userWelcomeScreen",
				},
				onError: {
					target: "loginScreen",
					actions: assign({
						authError: "We couldn’t authenticate you with those credentials. Please try again",
						attemptCount: (ctx, e) => ctx.attemptCount + 1,
					}),
				},
			}
		},
		userBlockedScreen: {
			// ...
		},
		userWelcomeScreen: {
			// ...
		},
	},
})