Subflows with Corbado Observe

op.postResponse.start({});
const body = await submitPassword(password);
if (body.rejected) {
  op.postResponse.error({ code: "invalid_password", message: body.errorLabel });
  // or, compile-time checked where the helper types the code:
  op.postResponse.errorTyped({ code: "invalid_password" });
}

op.postResponse.error(
  { code: "invalid_password", name: "AuthenticationError", message: "Password rejected" },
  { rawError: providerDiagnostic },
);
// Or a typed code with additional diagnostic context:
op.postResponse.errorTyped(
  { code: "invalid_password" },
  { rawError: providerDiagnostic },
);

import { getTracker, sanitizeRequestOptions, sanitizeAssertionResponse } from "@corbado/observe";

const handlePasskeyLogin = async (email: string) => {
  const op = getTracker()!.passkeyLoginFullOperation({ explicitSpecType: "passkey-known-identifier" });

  let options, response;
  try {
    op.getOptions.start({});
    options = await fetchAssertionOptions(email);
    const assertionOptions = sanitizeRequestOptions(options);
    if (assertionOptions !== undefined) op.getOptions.finished({ assertionOptions });
  } catch (e) {
    op.getOptions.error(e);
    return;
  }

  try {
    op.ceremony.start({});
    response = await startWebAuthnAuthentication(options);
    const assertionResponse = sanitizeAssertionResponse(response);
    if (assertionResponse !== undefined) op.ceremony.finished({ assertionResponse });
  } catch (e) {
    op.ceremony.error(e); // also when the user cancels the prompt
    return;
  }

  try {
    op.postResponse.start({});
    const result = await verifyOnServer(response);
    op.postResponse.finished({});
    getTracker()!.setUser({ userId: result.userId });
  } catch (e) {
    op.postResponse.error(e);
  }
};

import { sanitizeCreationOptions } from "@corbado/observe";

const projectors = { userId: () => undefined };
const attestationOptions = sanitizeCreationOptions({ user: { id: new Uint8Array([1, 2]) } }, projectors);
// Send the serialized telemetry only. Keep the original options for WebAuthn.

import { getTracker, sanitizeRequestOptions, sanitizeAssertionResponse } from "@corbado/observe";

const identifierInput = document.getElementById("email") as HTMLInputElement;
const op = getTracker()!.provideIdentifierOperationFull({
  inputHtmlField: identifierInput,
  explicitSpecType: "email",
});

// Conditional UI, started when the identifier surface renders.
const startConditionalUI = async () => {
  let options;
  try {
    op.cui.getOptions.start({ explicitSpecType: "passkey-cui" });
    options = await fetchConditionalUIOptions();
    const assertionOptions = sanitizeRequestOptions(options);
    if (assertionOptions !== undefined) op.cui.getOptions.finished({ assertionOptions });
  } catch (e) {
    op.cui.getOptions.error(e);
    return;
  }

  op.cui.ceremony.start({});
  try {
    const response = await startWebAuthnAuthentication(options, { useBrowserAutofill: true });
    const assertionResponse = sanitizeAssertionResponse(response);
    if (assertionResponse !== undefined) op.cui.ceremony.finished({ assertionResponse });

    op.cui.postResponse.start({});
    const result = await verifyOnServer(response);
    op.cui.postResponse.finished({});
    getTracker()!.setUser({ userId: result.userId });
  } catch (e) {
    // Torn down because the user submitted the identifier or left: not an error.
    if (!displacedByUser) op.cui.ceremony.error(e);
  }
};

// Manual path: the user submits the form.
const handleIdentifierSubmit = async (email: string) => {
  op.provideIdentifier.postResponse.start({}, {
    identifier: { value: email.trim().toLowerCase(), type: "email" },
  });
  try {
    const result = await checkUserOnServer(email);
    op.provideIdentifier.postResponse.finished({});
    getTracker()!.setUser({ userId: result.userId });
  } catch (e) {
    op.provideIdentifier.postResponse.error(e);
  }
};

// When the component unmounts.
op.destroy();

import { getTracker, sanitizeCreationOptions, sanitizeCreationResponse } from "@corbado/observe";

const handleManualEnrollment = async (userId: string) => {
  const op = getTracker()!.passkeyEnrollmentFullOperation({ explicitSpecType: "manual" });

  let options, response;
  try {
    op.getOptions.start({});
    options = await fetchAttestationOptions(userId);
    const attestationOptions = sanitizeCreationOptions(options);
    if (attestationOptions !== undefined) op.getOptions.finished({ attestationOptions });
  } catch (e) {
    op.getOptions.error(e);
    return;
  }

  try {
    op.ceremony.start({ mediation: "required" });
    response = await startWebAuthnRegistration(options);
    const attestationResponse = sanitizeCreationResponse(response);
    if (attestationResponse !== undefined) op.ceremony.finished({ attestationResponse });
  } catch (e) {
    op.ceremony.error(e);
    return;
  }

  try {
    op.postResponse.start({});
    await verifyOnServer(response);
    op.postResponse.finished({});
  } catch (e) {
    op.postResponse.error(e);
  }
};

import { getTracker, type PasswordLoginOperationFull } from "@corbado/observe";

let passwordOp: PasswordLoginOperationFull;

// When the login component mounts. Returns the cleanup for unmount.
const handleOnLoad = () => {
  const passwordInput = document.getElementById("password") as HTMLInputElement;
  passwordOp = getTracker().passwordLoginFullOperation({
    inputHtmlField: passwordInput,
    explicitSpecType: "password-known-identifier",
  });
  return () => passwordOp.destroy();
};

const handlePasswordSubmit = async (email: string, password: string) => {
  passwordOp.postResponse.start({});
  const result = await verifyPasswordOnServer(email, password);
  if (result.ok) {
    passwordOp.postResponse.finished({});
    getTracker().setUser({ userId: result.userId });
  } else {
    passwordOp.postResponse.errorTyped({ code: "invalid_password" });
  }
};

// One input for the whole code.
const op = getTracker().smsOtpOperationFull({
  explicitSpecType: "sms-otp-login",
  inputHtmlField: codeInput,
});

// One input per digit. Pass the boxes in reading order.
const digits = Array.from(document.querySelectorAll<HTMLInputElement>(".otp-digit"));
const op = getTracker().smsOtpOperationFull({
  explicitSpecType: "sms-otp-login",
  inputHtmlFields: digits,
});

const op = getTracker()!.socialLoginOperationFull({ explicitSpecType: "pre-identifier" });
op.getRedirectUrl.start({ provider: "naver" });

const op = getTracker()!.socialLoginOperationFull({ explicitSpecType: "pre-identifier", entry: "one-tap" });
op.exchangeCode.start({ provider: "google" });

const check = getTracker().trustedDeviceCheckOperationFull({
  explicitSpecType: "key",
  purpose: "mfa-exemption",
  storage: "indexeddb",
});
check.ceremony.start({});
// When discovery establishes that no eligible local key exists:
check.ceremony.finished({ result: "no-eligible-local-key" });
// Continue your existing MFA fallback.

const tracker = getTracker()!;
// The enclosing process flow is already open; the form has just been shown.
const form = tracker.formOperationFull({
  name: "personal-details",
  fields: ["firstName", "lastName"],
});

// When the user submits, track your application's existing save operation.
form.submit.start({});
try {
  await savePersonalDetails();
  form.submit.finished({});
} catch (error) {
  form.submit.error(error);
}