- Installs
- 77
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/andrewyng/context-hub --skill login-flows- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads login-flows automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Login Flow Patterns for Playwright
Reusable patterns for automating login flows in end-to-end tests.
Basic Username/Password Login
import { Page } from '@playwright/test';
async function login(page: Page, username: string, password: string) {
await page.goto('/login');
await page.fill('[name="username"]', username);
await page.fill('[name="password"]', password);
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
}
OAuth / SSO Login
For OAuth flows that redirect to an external provider:
async function loginWithOAuth(page: Page) {
await page.goto('/login');
await page.click('text=Sign in with Google');
// Handle the OAuth popup or redirect
await page.fill('input[type="email"]', process.env.TEST_EMAIL!);
await page.click('text=Next');
await page.fill('input[type="password"]', process.env.TEST_PASSWORD!);
await page.click('text=Next');
// Wait for redirect back to app
await page.waitForURL('**/dashboard');
}
Persisting Auth State (storageState)
Avoid logging in before every test by saving and reusing browser state:
// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';
async function globalSetup() {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('/login');
await page.fill('[name="username"]', 'testuser');
await page.fill('[name="password"]', 'testpass');
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
// Save signed-in state
await page.context().storageState({ path: './auth.json' });
await browser.close();
}
export default globalSetup;
Then in playwright.config.ts:
export default defineConfig({
globalSetup: './global-setup.ts',
use: {
storageState: './auth.json',
},
});
MFA / 2FA Handling
For test environments with TOTP-based 2FA:
import { authenticator } from 'otplib';
async function loginWithMFA(page: Page, secret: string) {
await login(page, 'user', 'pass');
// Generate TOTP code
const code = authenticator.generate(secret);
await page.fill('[name="totp"]', code);
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
}
Tips
- Always use
storageStateto avoid repeated logins — it's the single biggest speedup for E2E suites - Use environment variables for credentials, never hardcode them
- For CI, consider a dedicated test user with stable credentials
- Use
page.waitForURL()instead of arbitrarywaitForTimeout()after login
FAQ
What does the login-flows skill do?
Common login automation patterns for web apps using Playwright
How do I install login-flows?
Run npx skills add https://github.com/andrewyng/context-hub --skill login-flows in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/login-flows/ (personal) or .claude/skills/login-flows/ (project).
Which AI agents can use login-flows?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is login-flows safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains login-flows?
It is published by andrewyng in andrewyng/context-hub. It has 77 recorded installs.
More from andrewyng/context-hub
get-api-docs
andrewyng/context-hub
Use this skill to get documentation for third-party APIs, SDKs or libraries before writing code that uses them to ensure you have the latest, most accurate documentation. This is a better way to find documentation than doing web search. This includes when a user asks for tasks like "use the OpenAI API", "call the Stripe API", "use the Anthropic SDK", "query Pinecone", or any other time the user asks you to write code against an external service and you need current API reference. Fetch the docs with chub before answering, rather than relying on your pre-trained knowledge, which may be outdated because of recent changes to these APIs. Be sure to use this skill when the user asks for the latest docs, latest API behavior, or explicitly mentions chub or Context Hub. Ensure chub is available, run chub --help, then follow the instructions there.
electronics-sourcing
andrewyng/context-hub
Guide for AI agents to source electronic components using parts-mcp — tool sequencing, decision patterns, and multi-step workflows
document-extraction
andrewyng/context-hub
Open the skill to read its SKILL.md instructions.
tavily-best-practices
andrewyng/context-hub
Build production-ready Tavily integrations with best practices for web search, content extraction, crawling, and research in agentic workflows, RAG systems, and autonomous agents
document-workflows
andrewyng/context-hub
Use this skill for building end-to-end document processing workflows and pipelines using LandingAI ADE. Trigger when users need to: (1) Process batches of documents in parallel or async, (2) Build classify-then-extract pipelines for mixed document types, (3) Prepare parsed documents for RAG systems with chunking and vector DB ingestion, (4) Load extraction results into databases like Snowflake or export to CSV/DataFrames, (5) Visualize extraction results: draw bounding box overlays on pages, crop chunk images, or highlight/annotate specific words or phrases found in documents, (6) Build Streamlit or web UIs for document processing, (7) Find and highlight specific terms within document sections using word-level grounding (e.g. highlight "L2S" in the Introduction, redact PII, annotate extracted values on the original page). This skill complements the document-extraction skill which covers ADE SDK basics. Use document-extraction to write code that executes parse/extract/split operations w
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work