Basic Flow — Login + Output

Build a complete automation flow that navigates to a website, logs in with per-profile credentials, reads page data, and writes output results.

What you’ll learn:

Setting up the project
Defining config with input/output schema
Writing the script() automation logic
Using BrowserUtils for browser interaction
Building and deploying as .hira file

Create the project folder


mkdir my-login-flow
cd my-login-flow

Create package.json:


{
  "name": "my-login-flow",
  "version": "1.0.0",
  "main": "src/index.ts",
  "scripts": {
    "build": "hira-cli build"
  },
  "dependencies": {
    "@hira-core/sdk": "^1.0.6"
  },
  "devDependencies": {
    "@hira-core/cli": "^1.0.0",
    "typescript": "^5.0.0"
  }
}

Create tsconfig.json:


{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "lib": ["ES2019"],
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true
  },
  "include": ["src"]
}

Install dependencies:


pnpm install

Define the flow config

Create src/config.ts — this declares what inputs and outputs your flow has:


import { defineFlowConfig } from '@hira-core/sdk'
 
export const config = defineFlowConfig({
  // Global inputs — shared across all profiles
  globalInput: [
    {
      key: 'targetUrl',
      label: 'Target URL',
      type: 'text',
      required: true,
    },
    {
      key: 'delay',
      label: 'Delay between actions (ms)',
      type: 'number',
      defaultValue: 3000,
    },
  ],
 
  // Per-profile inputs — each profile has its own values
  profileInput: [
    {
      key: 'username',
      label: 'Username',
      type: 'text',
      required: true,
    },
    {
      key: 'password',
      label: 'Password',
      type: 'text',
      required: true,
    },
  ],
 
  // Output — results for each profile
  output: [
    {
      index: 0,
      key: 'loginStatus',
      label: 'Login Status',
    },
    {
      index: 1,
      key: 'pageTitle',
      label: 'Page Title',
    },
  ],
})

[!TIP] Use as const on the arrays for full TypeScript autocomplete on context.globalInput, context.profileInput, and writeOutput().

Write the script logic

Create src/flow.ts — this is where your automation runs:


import {
  AntidetectBaseFlow,
  AntidetectProvider,
  BrowserUtils,
  FlowLogger,
  IScriptContext,
} from '@hira-core/sdk'
import { config } from './config'
 
type FlowConfig = typeof config
 
export class LoginFlow extends AntidetectBaseFlow<FlowConfig> {
  constructor() {
    super(
      AntidetectProvider.GPM,     // anti-detect browser provider
      new FlowLogger('LoginFlow'), // logger
      config,                      // type-safe config
    )
  }
 
  async script(context: IScriptContext<FlowConfig>) {
    const { page, logger, globalInput, profileInput, output } = context
    const browser = new BrowserUtils(context)
 
    // ──────────────────────────────────────
    // 1. Log current profile data
    // ──────────────────────────────────────
    await browser.logProfileInput()
    // Log:
    // 📋 Profile Input:
    // {
    //   username: "admin",
    //   password: "secret123"
    // }
 
    await browser.logProfileOutput()
    // Log: 📋 Profile Output: { loginStatus: null, pageTitle: null }
 
    // ──────────────────────────────────────
    // 2. Check if already logged in (from previous run)
    // ──────────────────────────────────────
    if (output.loginStatus === 'OK') {
      logger.info('Already logged in from previous run, skipping')
      return
    }
 
    // ──────────────────────────────────────
    // 3. Navigate to target URL
    // ──────────────────────────────────────
    const url = globalInput.targetUrl
    await browser.goto(url)
    // Log: 🌐 Navigate → https://example.com
 
    // ──────────────────────────────────────
    // 4. Login with profile credentials
    // ──────────────────────────────────────
    await browser.type('#username', profileInput.username)
    // Log: ⌨️ Type "admin" → #username
 
    await browser.type('#password', profileInput.password)
    // Log: ⌨️ Type "secret123" → #password
 
    await browser.click('#login-btn')
    // Log: 🖱️ Click: #login-btn
 
    // ──────────────────────────────────────
    // 5. Wait for page to load & verify result
    // ──────────────────────────────────────
    await browser.waitForNavigation()
    // Log: 🔄 Waiting for navigation...
 
    const isLoggedIn = await browser.exists('#dashboard', 10000)
 
    if (!isLoggedIn) {
      await browser.writeOutput('loginStatus', 'FAILED')
      // Log: 📤 Write Output [loginStatus] = FAILED
      await browser.screenshot('login-failed.png')
      // Log: 📸 Screenshot: login-failed.png
      return
    }
 
    // ──────────────────────────────────────
    // 6. Read page data
    // ──────────────────────────────────────
    const title = await page.title()
    logger.success(`📄 Page Title: ${title}`)
 
    // ──────────────────────────────────────
    // 7. Write output results
    // ──────────────────────────────────────
    await browser.writeOutput('pageTitle', title)
    // Log: 📤 Write Output [pageTitle] = Dashboard
 
    await browser.writeOutput('loginStatus', 'OK')
    // Log: 📤 Write Output [loginStatus] = OK
 
    // ──────────────────────────────────────
    // 8. Verify output was saved (real-time update)
    // ──────────────────────────────────────
    logger.info(`Status after write: ${output.loginStatus}`) // → "OK"
 
    await browser.logProfileOutput()
    // Log:
    // 📋 Profile Output:
    // {
    //   loginStatus: "OK",
    //   pageTitle: "Dashboard"
    // }
  }
}

Create the entry point

Create src/index.ts — the file that exports your flow class:


export { LoginFlow as default } from './flow'

[!IMPORTANT] The entry point must use export default. The SDK uses this to find and instantiate your flow.

Set up the project structure

Your project should now look like this:


my-login-flow/
├── src/
│   ├── config.ts        ← defineFlowConfig() — input/output schema
│   ├── flow.ts          ← LoginFlow class — script() logic
│   └── index.ts         ← Default export
├── package.json
└── tsconfig.json

Build and deploy

Build the .hira flow bundle:


pnpm run build

This creates a dist/my-login-flow.hira file that you can import into the Hira desktop app.

To import:

Open Hira desktop
Go to Library
Click “Import Flow”
Select the .hira file

Full script() flow diagram


script(context) called
  │
  ├─ logProfileInput()     → see all profile data
  ├─ logProfileOutput()    → see previous results
  │
  ├─ Check output.loginStatus === 'OK'?
  │   └─ YES → return early (skip)
  │
  ├─ goto(targetUrl)       → navigate to site
  ├─ type('#username')     → enter username
  ├─ type('#password')     → enter password
  ├─ click('#login-btn')   → submit form
  │
  ├─ waitForNavigation()   → wait for page load
  ├─ exists('#dashboard')  → verify login success
  │   └─ NO → writeOutput('loginStatus', 'FAILED') + screenshot → return
  │
  ├─ page.title()          → read page data
  ├─ writeOutput('pageTitle', title)
  └─ writeOutput('loginStatus', 'OK')

Key Takeaways

defineFlowConfig() — declare inputs/outputs upfront for type safety
script(context) — your main logic, called once per profile
BrowserUtils — wraps Puppeteer with logging, abort handling, and error safety
writeOutput() — save results for each profile, persisted across runs
output.* — read previous output values to skip already-completed profiles
Return values — click(), type(), goto() return boolean, check them!