cloud ui docs + cookbooks (#4759)
Co-authored-by: Ritik Sahni <ritiksahni0203@gmail.com> Co-authored-by: Kunal Mishra <kunalm2345@gmail.com>
This commit is contained in:
Naman
96
docs/cloud/managing-credentials/credentials-overview.mdx
Normal file
96
docs/cloud/managing-credentials/credentials-overview.mdx
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Credentials Overview
|
||||
subtitle: Securely store login details, payment info, and secrets for your automations
|
||||
slug: cloud/managing-credentials/credentials-overview
|
||||
---
|
||||
|
||||
The **Credentials** page stores sensitive values — passwords, payment cards, and secrets — so your workflows can use them without you pasting passwords into prompts.
|
||||
|
||||
<Note>
|
||||
Credentials **never reach the LLM**. The AI agent decides *where* to type, but the actual values are injected directly into the browser by the automation layer. Your credentials aren't exposed in prompts, logs, or model provider APIs.
|
||||
</Note>
|
||||
|
||||
<img src="/images/cloud/credentials-overview.png" alt="Credentials page overview" />
|
||||
|
||||
## What you can store
|
||||
|
||||
**[Password credentials](/cloud/managing-credentials/password-credentials)** — username, password, and optional 2FA configuration. Used with Login blocks to automate full sign-in flows, including two-factor authentication.
|
||||
|
||||
**[Credit card credentials](/cloud/managing-credentials/credit-card-credentials)** — payment card details (number, expiration, CVV, cardholder name). Used in workflows that complete purchases or fill billing forms.
|
||||
|
||||
**Secret credentials** — a single sensitive string: API key, bearer token, encryption key, or anything you don't want hardcoded. Create one from **+ Add → Secret** and reference it in any parameter field:
|
||||
|
||||
```
|
||||
{{ credential_name.secret_value }}
|
||||
```
|
||||
|
||||
## External credential providers
|
||||
|
||||
If your organization already manages secrets in a dedicated vault, reference them directly from **Bitwarden**, **1Password**, or **Azure Key Vault** by adding credential parameters in the [workflow editor](/cloud/building-workflows/add-parameters).
|
||||
|
||||
### Bitwarden
|
||||
|
||||
Works with hosted Bitwarden and the self-hosted [Vaultwarden](https://github.com/dani-garcia/vaultwarden) fork. Supports passwords, credit cards, and identity data (SSN, address, phone numbers).
|
||||
|
||||
Point a credential parameter at a specific vault item using the **Collection ID** and **Item ID** from the Bitwarden web UI. Alternatively, set a **URL Parameter Key** so Bitwarden matches credentials by the target URL — useful when the same workflow runs against different sites.
|
||||
|
||||
For identity data, specify an **Identity Key** and a comma-separated list of **Identity Fields** (e.g., `ssn, address, phone`).
|
||||
|
||||
### 1Password
|
||||
|
||||
Connects via a service account token. Supports passwords and credit cards.
|
||||
|
||||
**One-time setup:** Go to **Settings** → find the **1Password** card → paste your [service account token](https://developer.1password.com/docs/service-accounts/get-started/) → click **Update**. The status indicator turns **Active** once validated.
|
||||
|
||||
In the workflow editor, select **1Password** as the credential source and provide the **Vault ID** and **Item ID** from your 1Password web URLs.
|
||||
|
||||
<Warning>
|
||||
Credit cards from 1Password need a text field named **"Expire Date"** on the item in `MM/YYYY` format. This is a workaround for how 1Password structures card data.
|
||||
</Warning>
|
||||
|
||||
### Azure Key Vault
|
||||
|
||||
Pulls credentials stored as Azure secrets. Supports passwords with optional TOTP.
|
||||
|
||||
**One-time setup:** Go to **Settings** → find the **Azure** card → enter your **Tenant ID**, **Client ID**, and **Client Secret** → click **Update**.
|
||||
|
||||
In the workflow editor, select **Azure Key Vault** as the credential source and point it at your vault by name. Provide the **secret names** that store the username and password (and optionally a TOTP secret for 2FA) — not the values themselves.
|
||||
|
||||
### Which source should you use?
|
||||
|
||||
| Source | Best for |
|
||||
|--------|----------|
|
||||
| **Skyvern built-in** | Fastest setup — create credentials directly in the UI, no external dependencies |
|
||||
| **Bitwarden** | Teams already using Bitwarden who don't want to manage credentials in two places |
|
||||
| **1Password** | Teams already using 1Password with service account access |
|
||||
| **Azure Key Vault** | Enterprise environments with centrally managed Azure secrets |
|
||||
|
||||
You can mix sources within the same workflow — one Login block using Skyvern-stored credentials and another using Azure Key Vault.
|
||||
|
||||
## Deleting credentials
|
||||
|
||||
Click the **trash icon** on any credential. Deletion is permanent — the Skyvern team can't restore deleted credentials. If a workflow references a deleted credential, it will fail at the login step until you assign a replacement.
|
||||
|
||||
<CardGroup cols={3}>
|
||||
<Card
|
||||
title="Password Credentials"
|
||||
icon="key"
|
||||
href="/cloud/managing-credentials/password-credentials"
|
||||
>
|
||||
Store logins with optional 2FA
|
||||
</Card>
|
||||
<Card
|
||||
title="Credit Card Credentials"
|
||||
icon="credit-card"
|
||||
href="/cloud/managing-credentials/credit-card-credentials"
|
||||
>
|
||||
Store payment details for purchase workflows
|
||||
</Card>
|
||||
<Card
|
||||
title="2FA / TOTP Setup"
|
||||
icon="shield-halved"
|
||||
href="/cloud/managing-credentials/totp-setup"
|
||||
>
|
||||
Configure and manage two-factor authentication
|
||||
</Card>
|
||||
</CardGroup>
|
||||
53
docs/cloud/managing-credentials/credit-card-credentials.mdx
Normal file
53
docs/cloud/managing-credentials/credit-card-credentials.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Credit Card Credentials
|
||||
subtitle: Store payment details for purchase and checkout workflows
|
||||
slug: cloud/managing-credentials/credit-card-credentials
|
||||
---
|
||||
|
||||
Credit card credentials store payment details so the AI can fill checkout forms without you embedding card numbers in prompts or parameters.
|
||||
|
||||
## Creating a credit card credential
|
||||
|
||||
Click **+ Add → Credit Card** from the Credentials page. Provide the full card details:
|
||||
|
||||
| Field | Description |
|
||||
|-------|------------|
|
||||
| **Name** | A label like "Corporate Visa" to identify it later |
|
||||
| **Cardholder Name** | Name printed on the card |
|
||||
| **Number** | Full card number (spaces added automatically as you type) |
|
||||
| **Brand** | Card network: Visa, Mastercard, American Express, Discover, JCB, Diners Club, Maestro, UnionPay, RuPay, or Other |
|
||||
| **Expiration** | Month and year in `MM/YY` format (slash inserted automatically) |
|
||||
| **CVV** | 3 or 4 digit security code |
|
||||
|
||||
After saving, the card number is masked — only the last four digits are ever shown again.
|
||||
|
||||
## Using credit cards in workflows
|
||||
|
||||
Credit cards work with **Browser Task** and **Browser Action** blocks that interact with checkout pages. The AI identifies payment fields on the page and fills them with the stored details.
|
||||
|
||||
To reference a credit card, add a **Credential parameter** (type: `credential_id`) and select the card when running the workflow. This lets the same checkout workflow work with different payment methods.
|
||||
|
||||
<Note>
|
||||
Credit cards from **1Password** need a text field named **"Expire Date"** in `MM/YYYY` format on the 1Password item. See [Credentials Overview](/cloud/managing-credentials/credentials-overview#1password) for details.
|
||||
</Note>
|
||||
|
||||
## Editing and deleting
|
||||
|
||||
Credit card credentials can't be edited after creation. If card details change, delete the old credential and create a new one. Click the **trash icon** to delete — the action is permanent.
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
title="Password Credentials"
|
||||
icon="key"
|
||||
href="/cloud/managing-credentials/password-credentials"
|
||||
>
|
||||
Store login details with optional 2FA
|
||||
</Card>
|
||||
<Card
|
||||
title="Credentials Overview"
|
||||
icon="lock"
|
||||
href="/cloud/managing-credentials/credentials-overview"
|
||||
>
|
||||
All credential types, external providers, and security model
|
||||
</Card>
|
||||
</CardGroup>
|
||||
74
docs/cloud/managing-credentials/password-credentials.mdx
Normal file
74
docs/cloud/managing-credentials/password-credentials.mdx
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
title: Password Credentials
|
||||
subtitle: Store login details and use them in automated workflows
|
||||
slug: cloud/managing-credentials/password-credentials
|
||||
---
|
||||
|
||||
Password credentials store a username, password, and optional 2FA configuration. Reference them from Login blocks in your workflows, and Skyvern handles the entire sign-in flow — including entering 2FA codes.
|
||||
|
||||
## Creating a password credential
|
||||
|
||||
Click **+ Add → Password** from the Credentials page. Three fields: **Name** (a label like "Salesforce Production"), **Username or Email**, and **Password**. The password field has an eye icon to toggle visibility.
|
||||
|
||||
<img src="/images/cloud/credentials-add-password.png" alt="Add password credential modal" />
|
||||
|
||||
Save the credential and it's ready to use in a workflow.
|
||||
|
||||
## Adding two-factor authentication
|
||||
|
||||
If the site requires 2FA, expand the **Two-Factor Authentication** accordion below the password fields. Three options, depending on how the site delivers codes:
|
||||
|
||||
<img src="/images/cloud/credentials-2fa-setup.png" alt="2FA setup options showing Authenticator App, Email, and Text Message" />
|
||||
|
||||
| Method | How it works |
|
||||
|--------|-------------|
|
||||
| **Authenticator App** | Paste the TOTP secret key and Skyvern generates codes locally on demand — fully automated, no delay. Preferred when the site supports it. |
|
||||
| **Email** | Provide the email address that receives codes. Skyvern waits for you to push the code via the [2FA tab](/cloud/managing-credentials/totp-setup) or API. Identifier auto-fills from the Username field. |
|
||||
| **Text Message** | Provide the phone number that receives codes. Same push-based flow as Email. |
|
||||
|
||||
<Tip>
|
||||
Authenticator App is always the best option when available. Email and Text require either manual code entry or setting up automatic forwarding.
|
||||
</Tip>
|
||||
|
||||
<Accordion title="Finding your TOTP secret key">
|
||||
The secret key is the base32-encoded string behind the QR code you'd scan in an authenticator app. Most password managers let you view it:
|
||||
|
||||
- **Bitwarden**: Edit the login → TOTP field → copy the key
|
||||
- **1Password**: Edit the login → One-Time Password → copy the secret
|
||||
- **Site settings**: Many sites show a "Can't scan?" link during 2FA setup that reveals the text key
|
||||
|
||||
If you only have a QR code, decode it to extract the `secret=` parameter from the `otpauth://totp/...?secret=BASE32KEY` URI.
|
||||
</Accordion>
|
||||
|
||||
## Using credentials in workflows
|
||||
|
||||
The most common pattern is a **Login block**. Select the stored credential from the dropdown, and Skyvern navigates to the login page, enters the username and password, handles 2FA if configured, and waits for the page to confirm authentication. See [Block Reference → Login](/cloud/building-workflows/configure-blocks) for details.
|
||||
|
||||
For workflows that need different accounts at runtime, use a **Credential parameter** (type: `credential_id`). When someone runs the workflow, they pick which credential to use from a dropdown.
|
||||
|
||||
You can also pull credentials from **Bitwarden**, **1Password**, or **Azure Key Vault**. See [External Providers](/cloud/managing-credentials/credentials-overview#external-credential-providers).
|
||||
|
||||
## Managing credentials
|
||||
|
||||
Stored credentials show the name, credential ID, username (plain text), password (always masked), and 2FA method if configured.
|
||||
|
||||
<Warning>
|
||||
Credentials can't be edited after creation. To change a password, delete the old credential and create a new one.
|
||||
</Warning>
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
title="2FA / TOTP Setup"
|
||||
icon="shield-halved"
|
||||
href="/cloud/managing-credentials/totp-setup"
|
||||
>
|
||||
Push verification codes and manage 2FA for Email and Text methods
|
||||
</Card>
|
||||
<Card
|
||||
title="Block Reference"
|
||||
icon="cube"
|
||||
href="/cloud/building-workflows/configure-blocks"
|
||||
>
|
||||
Configure Login blocks and other blocks that use credentials
|
||||
</Card>
|
||||
</CardGroup>
|
||||
81
docs/cloud/managing-credentials/totp-setup.mdx
Normal file
81
docs/cloud/managing-credentials/totp-setup.mdx
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: 2FA / TOTP Setup
|
||||
subtitle: Configure two-factor authentication for automated logins
|
||||
slug: cloud/managing-credentials/totp-setup
|
||||
---
|
||||
|
||||
Skyvern handles 2FA through two mechanisms. **Authenticator App (TOTP)** generates codes locally from your secret key — fully automatic. **Email/SMS** waits for you to push the code via the UI or API. Both are configured on the [password credential](/cloud/managing-credentials/password-credentials) itself.
|
||||
|
||||
## Authenticator App (TOTP)
|
||||
|
||||
The preferred method. Store a TOTP secret key in a password credential, and Skyvern generates valid 6-digit codes on demand during login flows. The Login block enters credentials, detects the 2FA prompt, generates a fresh code, and enters it — all automatic.
|
||||
|
||||
**Setup:** Create a password credential → expand **Two-Factor Authentication** → select **Authenticator App** → paste the TOTP secret key into the **Authenticator Key** field.
|
||||
|
||||
The secret key is the base32-encoded string behind the QR code you'd normally scan. Copy it from your password manager (Bitwarden: TOTP field; 1Password: One-Time Password field) or look for a "Can't scan the QR code?" link during the site's 2FA setup.
|
||||
|
||||
## Email and SMS codes
|
||||
|
||||
When a site sends codes via email or text, someone (or something) needs to deliver the code to Skyvern.
|
||||
|
||||
The flow:
|
||||
|
||||
1. Login block enters username and password
|
||||
2. Site sends a 2FA code to the configured email or phone
|
||||
3. You push the code to Skyvern via the **2FA tab** or the API
|
||||
4. Skyvern enters the code and completes the login
|
||||
|
||||
### Pushing a code manually
|
||||
|
||||
Open the **2FA** tab on the Credentials page. The **Push a 2FA Code** form has two fields:
|
||||
|
||||
| Field | What to enter |
|
||||
|-------|--------------|
|
||||
| **Identifier** | The email address or phone number that received the code |
|
||||
| **Verification content** | The full email/SMS body, or just the code itself — Skyvern extracts the digits automatically |
|
||||
|
||||
<Tip>
|
||||
If multiple workflows are running simultaneously, click **Add optional metadata** to link the code to a specific run using the workflow run ID, workflow ID, or task ID.
|
||||
</Tip>
|
||||
|
||||
### Pushing codes via API
|
||||
|
||||
For production, automate code delivery. Set up a forwarding rule that sends 2FA emails/texts to a script, and the script calls:
|
||||
|
||||
```bash
|
||||
curl -X POST "https://api.skyvern.com/v1/credentials/totp" \
|
||||
-H "x-api-key: YOUR_API_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"totp_identifier": "user@example.com",
|
||||
"content": "Your verification code is 847291",
|
||||
"source": "email_forwarder"
|
||||
}'
|
||||
```
|
||||
|
||||
The `source` field is a free-text label for your own tracking (e.g., `"email_forwarder"`, `"twilio_webhook"`).
|
||||
|
||||
This turns email-based 2FA into something nearly as automated as authenticator app — the main difference is latency while the email arrives and gets forwarded.
|
||||
|
||||
## Viewing past codes
|
||||
|
||||
The table below the push form shows all 2FA codes your organization has received: identifier, extracted code, source type, associated workflow run, and timestamps. Filter by identifier, OTP type (numeric code vs. magic link), and number of results per page.
|
||||
|
||||
Use this for auditing and debugging — confirming that a code was received and delivered to the right run.
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
title="Password Credentials"
|
||||
icon="key"
|
||||
href="/cloud/managing-credentials/password-credentials"
|
||||
>
|
||||
Create credentials with 2FA methods attached
|
||||
</Card>
|
||||
<Card
|
||||
title="Credentials Overview"
|
||||
icon="lock"
|
||||
href="/cloud/managing-credentials/credentials-overview"
|
||||
>
|
||||
All credential types, external providers, and security model
|
||||
</Card>
|
||||
</CardGroup>
|
||||
Reference in New Issue
Block a user