{"_id":"@attestto/login","_rev":"2-dc93ebfe4c0d84eac541dfa67aa04017","name":"@attestto/login","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@attestto/login","version":"0.1.0","keywords":["login","authentication","did","sso","oauth","web-components","decentralized-identity","verifiable-credentials","wallet","passwordless","google-login","microsoft-login","wordpress","joomla","attestto"],"license":"Apache-2.0","_id":"@attestto/login@0.1.0","maintainers":[{"name":"chongkan","email":"e.chongkan@gmail.com"}],"homepage":"https://attestto.org/docs/quickstart/add-did-login/","bugs":{"url":"https://github.com/Attestto-com/attestto-login/issues"},"dist":{"shasum":"02188655dcf6289cb129712555cca6c4d83711a5","tarball":"https://registry.npmjs.org/@attestto/login/-/login-0.1.0.tgz","fileCount":8,"integrity":"sha512-EDgfl3kWGK+/jyx0pOwp8ODyUsWGt3OVEmH4tQuuUAcAmyosXTXtrgNTrL9B8m9Mbw3tnn4bi6TW/C3n5GX4Bg==","signatures":[{"sig":"MEQCIDS3M+E8O73C+Sz3mYz870QYUkG461Ffm2O+HV9iS5NYAiBUtg+A9lvVdIC0zgLIBhmNkRKdxMh27uCb6Z2OhRr+8w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":153032},"main":"dist/attestto-login.js","type":"module","types":"dist/index.d.ts","module":"dist/attestto-login.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/attestto-login.js"}},"gitHead":"c46b503330f606b6d664aee0d76c7f967cfba2ac","scripts":{"dev":"vite","test":"vitest run","build":"vite build && tsc --emitDeclarationOnly","format":"prettier --write 'src/**/*.ts'","typecheck":"tsc --noEmit"},"_npmUser":{"name":"chongkan","email":"e.chongkan@gmail.com"},"repository":{"url":"git+https://github.com/Attestto-com/attestto-login.git","type":"git"},"_npmVersion":"11.9.0","description":"One-line DID login for any website. Web Component with OAuth bridge — Google, Microsoft, or any DID wallet. No framework required.","directories":{},"_nodeVersion":"25.6.1","dependencies":{"lit":"^3.2.0","@attestto/id-wallet-adapter":"^0.4.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","jsdom":"^25.0.0","vitest":"^2.1.0","typescript":"^5.7.0","@vitest/coverage-v8":"^2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/login_0.1.0_1776258413358_0.8045046642965137","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@attestto/login","version":"0.1.1","description":"One-line DID login for any website. Web Component with OAuth bridge — Google, Microsoft, or any DID wallet. No framework required.","license":"Apache-2.0","type":"module","main":"dist/attestto-login.js","module":"dist/attestto-login.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/attestto-login.js","types":"./dist/index.d.ts"}},"keywords":["login","authentication","did","sso","oauth","web-components","decentralized-identity","verifiable-credentials","wallet","passwordless","google-login","microsoft-login","wordpress","joomla","attestto"],"homepage":"https://attestto.org/docs/quickstart/add-did-login/","repository":{"type":"git","url":"git+https://github.com/Attestto-com/attestto-login.git"},"scripts":{"dev":"vite","build":"vite build && tsc --emitDeclarationOnly","test":"vitest run","format":"prettier --write 'src/**/*.ts'","typecheck":"tsc --noEmit"},"dependencies":{"@attestto/id-wallet-adapter":"^0.4.1","lit":"^3.2.0"},"devDependencies":{"typescript":"^5.7.0","vite":"^6.0.0","vitest":"^2.1.0","@vitest/coverage-v8":"^2.1.0","jsdom":"^25.0.0"},"gitHead":"a87f1de0f4959f486e2aaa760c789607efa027e3","_id":"@attestto/login@0.1.1","bugs":{"url":"https://github.com/Attestto-com/attestto-login/issues"},"_nodeVersion":"25.6.1","_npmVersion":"11.9.0","dist":{"integrity":"sha512-FaahK6cD+SYSY1t+WFPNyK/laWrn9LMkNB975Zr7t+8Z9dc45BXXFO2fcCEHwmvZOwalEVrCWYjo0cMR5JGsEQ==","shasum":"49d6cdf880046eaccdf880db6de8f8113001a40b","tarball":"https://registry.npmjs.org/@attestto/login/-/login-0.1.1.tgz","fileCount":8,"unpackedSize":155179,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC8X3IfKt1DcKS2okzkkQBuiGkQsBC94n8xczk7iK+ldwIgBii6aYlmipajp6X5kDD+IJ777sQ3QY+iHet3YFeCctk="}]},"_npmUser":{"name":"chongkan","email":"e.chongkan@gmail.com"},"directories":{},"maintainers":[{"name":"chongkan","email":"e.chongkan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/login_0.1.1_1776271695505_0.5303432466183351"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-15T13:06:53.270Z","modified":"2026-04-15T16:48:15.756Z","0.1.0":"2026-04-15T13:06:53.510Z","0.1.1":"2026-04-15T16:48:15.638Z"},"bugs":{"url":"https://github.com/Attestto-com/attestto-login/issues"},"license":"Apache-2.0","homepage":"https://attestto.org/docs/quickstart/add-did-login/","keywords":["login","authentication","did","sso","oauth","web-components","decentralized-identity","verifiable-credentials","wallet","passwordless","google-login","microsoft-login","wordpress","joomla","attestto"],"repository":{"type":"git","url":"git+https://github.com/Attestto-com/attestto-login.git"},"description":"One-line DID login for any website. Web Component with OAuth bridge — Google, Microsoft, or any DID wallet. No framework required.","maintainers":[{"name":"chongkan","email":"e.chongkan@gmail.com"}],"readme":"# @attestto/login\n\n[](https://www.npmjs.com/package/@attestto/login)\n[](./LICENSE)\n\n\n\n\n\n\n\n\n\n> One-line DID login for any website. Drop a Web Component, get passwordless authentication backed by cryptographic identity. Falls back to Google/Microsoft OAuth and converts tokens into portable Verifiable Credentials.\n\n`@attestto/login` gives your users decentralized identity login with zero friction. No passwords, no OAuth vendor lock-in, no monthly subscription. One HTML element, works in any page. Part of the [Attestto](https://attestto.org) identity infrastructure.\n\n**[Documentation](https://attestto.org/docs/quickstart/add-did-login/)** · **[Playground](https://attestto.org/docs/verify/playground/)** · **[Full API](https://attestto.org/docs/wallets/)**\n\n## Quick start\n\n### Option 1: Copy-paste (any website, WordPress, Joomla, static HTML)\n\n```html\n\n\n```\n\nThat's it. Users see a \"Login with DID\" button. If they have a DID wallet extension installed, they authenticate with cryptographic proof. No passwords.\n\n### Option 2: npm (React, Vue, Svelte, Angular)\n\n```bash\nnpm install @attestto/login\n```\n\n```typescript\nimport '@attestto/login'\n// Now use in your templates\n```\n\n### With OAuth fallback\n\nUsers without a DID wallet can still log in. Their OAuth token gets converted into a Verifiable Credential — next time, they use the credential directly.\n\n```html\n\n```\n\nFirst login uses Google. Every login after uses their DID wallet. Google is cut out of the loop.\n\n## How it works\n\n```\nUser clicks \"Login with DID\"\n → pickWallet() shows wallet selector\n → Wallet presents Verifiable Credential (CHAPI)\n → verifyPresentation() validates the trust chain\n → login-success event fires with user's DID\n\nUser clicks \"Continue with Google\" (fallback)\n → OAuth redirect to your backend\n → Backend verifies Google token\n → Backend issues a Verifiable Credential\n → VC stored in user's wallet\n → Next login uses DID path directly\n```\n\n## Attributes\n\n| Attribute | Type | Default | Description |\n|---|---|---|---|\n| `providers` | string | `\"\"` | Comma-separated OAuth providers: `\"google,microsoft\"` |\n| `issuer-endpoint` | string | `\"\"` | Backend URL for OAuth → VC exchange |\n| `trusted-issuers` | string | `\"\"` | Comma-separated trusted issuer DIDs |\n| `resolver-url` | string | `\"\"` | DID resolver URL for VP verification |\n| `did-label` | string | `\"Login with DID\"` | Primary button label |\n| `theme` | `\"light\"` \\| `\"dark\"` | `\"light\"` | Color scheme |\n| `compact` | boolean | `false` | Button-only mode (no card wrapper) |\n\n## Events\n\nAll events are `composed` — they cross Shadow DOM boundaries.\n\n| Event | Detail | When |\n|---|---|---|\n| `login-success` | `LoginResult` | Authentication succeeded |\n| `login-error` | `{ error, method }` | Authentication failed or cancelled |\n| `oauth-start` | `{ provider }` | User clicked an OAuth button |\n| `wallets-discovered` | `{ count, wallets }` | Wallet discovery completed |\n\n```javascript\nconst login = document.querySelector('attestto-login')\n\nlogin.addEventListener('login-success', (e) => {\n console.log('Authenticated:', e.detail.did)\n console.log('Method:', e.detail.method) // 'did' or 'google'\n\n // Create your session\n fetch('/api/session', {\n method: 'POST',\n body: JSON.stringify({ did: e.detail.did })\n })\n})\n```\n\n## CSS theming\n\nOverride CSS custom properties to match your brand:\n\n```css\nattestto-login {\n --attestto-primary: #594FD3;\n --attestto-primary-hover: #7B72ED;\n --attestto-text: #1a1a2e;\n --attestto-bg: #ffffff;\n --attestto-bg-card: #f8fafc;\n --attestto-border: #e2e8f0;\n --attestto-font: system-ui, sans-serif;\n}\n```\n\nStyle internal elements via CSS parts:\n\n```css\nattestto-login::part(did-button) { border-radius: 20px; }\nattestto-login::part(oauth-button) { font-size: 0.85rem; }\nattestto-login::part(divider) { margin: 1.5rem 0; }\n```\n\n## Advanced: use the wallet adapter directly\n\n`@attestto/login` re-exports the full `@attestto/id-wallet-adapter` API for advanced use cases:\n\n```typescript\nimport {\n discoverWallets,\n pickWallet,\n verifyPresentation,\n requestSignature,\n} from '@attestto/login'\n\n// Build your own login UI with full control\nconst wallets = await discoverWallets()\nconst wallet = await pickWallet()\nconst result = await verifyPresentation(vp, wallet, { resolverUrl, trustedIssuers })\n```\n\n## Backend: OAuth → VC exchange\n\nYour backend handles the OAuth callback and issues a Verifiable Credential. Example with Express:\n\n```typescript\napp.get('/api/auth/issue-vc', async (req, res) => {\n const { provider, redirect } = req.query\n\n // 1. Run OAuth flow with the provider\n const oauthResult = await runOAuth(provider)\n\n // 2. Issue a VC proving the user authenticated\n const vc = await issuer.issue({\n type: 'AuthenticationCredential',\n subjectDid: oauthResult.did || generateDid(),\n claims: {\n provider,\n email: oauthResult.email,\n verifiedAt: new Date().toISOString(),\n },\n })\n\n // 3. Redirect back with the VC for wallet storage\n res.redirect(`${redirect}#vc=${encodeCredential(vc)}`)\n})\n```\n\n## Ecosystem\n\n| Package | Role |\n|---|---|\n| [`@attestto/id-wallet-adapter`](https://www.npmjs.com/package/@attestto/id-wallet-adapter) | Wallet discovery protocol (re-exported) |\n| [`@attestto-com/vc-sdk`](https://www.npmjs.com/package/@attestto-com/vc-sdk) | Issue VCs server-side (OAuth bridge) |\n| [`@attestto/verify`](https://www.npmjs.com/package/@attestto/verify) | Document verification + signing |\n\n## Privacy\n\nNo tracking, no analytics, no telemetry. The component runs entirely client-side. OAuth tokens are exchanged via your own backend — Attestto never sees them. DID login never touches any server. See the [Attestto privacy model](https://attestto.org/docs/verify/).\n\n## License\n\nApache 2.0 — see [LICENSE](./LICENSE)\n\n---\n\n**One line of HTML. Passwordless login. No vendor lock-in.**\n","readmeFilename":"README.md"}