Flows with Corbado Observe

getTracker().flowFinished({ flowName: "signup", userId, identifier });
getTracker().flowAutoFinished({ flowName: "login", finishedByFlowName: "signup", userId });

getTracker().conversion({ name: "purchase", touchpoint: "checkout", userId });

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

const tracker = () => getTracker()!;

let provideIdentifier: OperationFullProvideIdentifierWithCUI;
let passwordLogin: PasswordLoginOperationFull;

// Step 1: The login page renders.
function showLoginPage(emailInput: HTMLInputElement) {
  tracker().flowStarted({ flowName: "login", touchpoint: "account" });

  tracker().authMethodsDecisionStarted({
    decisionName: "pre-identifier",
    options: ["identifier-email", "social-other"],
  });

  provideIdentifier = tracker().provideIdentifierOperationFull({
    inputHtmlField: emailInput,
    explicitSpecType: "email",
  });
}

// Step 2: The user submits the identifier.
async function submitIdentifier(email: string) {
  provideIdentifier.provideIdentifier.postResponse.start({});
  const result = await checkIdentifier(email);
  provideIdentifier.provideIdentifier.postResponse.finished({}, { userReference: { userId: result.userId } });
}

// Step 3: The password screen renders.
function showPasswordScreen(passwordInput: HTMLInputElement) {
  tracker().authMethodsDecisionStarted({
    decisionName: "post-identifier",
    options: ["password-login-known-identifier", "forgot-password"],
  });

  passwordLogin = tracker().passwordLoginFullOperation({
    inputHtmlField: passwordInput,
    explicitSpecType: "password-known-identifier",
  });
}

// Step 4 (optional): The password is wrong.
async function submitPassword(password: string) {
  passwordLogin.postResponse.start({});
  const result = await loginWithPassword(password);
  if (!result.success) {
    passwordLogin.postResponse.errorTyped({ code: "invalid_password" });
  }
}

// Step 5: The user clicks "forgot password". The navigational choice is finished
// explicitly, then the nested recovery flow opens.
async function startPasswordRecovery(email: string) {
  tracker().authMethodsDecisionFinished({
    decisionName: "post-identifier",
    explicitDecisionValue: "forgot-password",
  });
  tracker().flowStarted({ flowName: "recovery", touchpoint: "login" });

  const crossEnvironmentTransactionID = crypto.randomUUID();
  const emailLink = tracker().emailLinkOperationFull({ explicitSpecType: "email-link-login" });

  emailLink.send.start({}, { userReference: { crossEnvironmentTransactionID } });
  await sendPasswordResetEmail(email, { crossEnvironmentTransactionID });
  emailLink.send.finished({});
}

// Step 6: The user opens the reset link, possibly on another device.
async function verifyResetLink(token: string, crossEnvironmentTransactionID: string) {
  const emailLink = tracker().emailLinkOperationFull({ explicitSpecType: "email-link-login" });

  emailLink.postResponse.start({}, { userReference: { crossEnvironmentTransactionID } });
  const result = await verifyPasswordResetToken(token);
  emailLink.postResponse.finished({}, { userReference: { userId: result.userId, crossEnvironmentTransactionID } });
}

// Step 7: The user sets a new password and is logged in automatically.
async function setNewPasswordAndLogin(token: string, newPassword: string, newPasswordInput: HTMLInputElement) {
  const passwordReset = tracker().passwordEnrollmentFullOperation({
    inputHtmlField: newPasswordInput,
    explicitSpecType: "password-reset",
  });

  passwordReset.postResponse.start({});
  const result = await completePasswordResetAndLogin(token, newPassword);
  passwordReset.postResponse.finished({});

  tracker().flowFinished({ flowName: "recovery", userId: result.userId });
  tracker().flowAutoFinished({ flowName: "login", finishedByFlowName: "recovery", userId: result.userId });
}

// Steps 1 to 6 as above.

// Step 7: The user sets a new password, but is not logged in.
async function setNewPassword(token: string, newPassword: string, newPasswordInput: HTMLInputElement) {
  const passwordReset = tracker().passwordEnrollmentFullOperation({
    inputHtmlField: newPasswordInput,
    explicitSpecType: "password-reset",
  });

  passwordReset.postResponse.start({});
  const result = await completePasswordReset(token, newPassword);
  passwordReset.postResponse.finished({});

  tracker().flowFinished({ flowName: "recovery", userId: result.userId });
}

// Step 8: The user is sent back to the login page. The login flow is still open,
// so showLoginPage() must NOT fire flowStarted() again. Only the decision and the
// identifier helper are re-created; the pre-identifier checkpoint is genuinely re-presented.

// Step 9: The password screen renders again (showPasswordScreen() from above).

// Step 10: The user logs in with the new password.
async function loginWithNewPassword(password: string, userId: string) {
  passwordLogin.postResponse.start({});
  await loginWithPassword(password);
  passwordLogin.postResponse.finished({});

  tracker().flowFinished({ flowName: "login", userId });
}