diff --git a/examples/authz/3rd-party-app/index.html b/examples/authz/3rd-party-app/index.html index 1249852..d2c0901 100644 --- a/examples/authz/3rd-party-app/index.html +++ b/examples/authz/3rd-party-app/index.html @@ -13,14 +13,22 @@

Third Party app!

this is a demo for using Pubky Auth in an unhosted (no backend) app.

+
+ + +
diff --git a/examples/authz/3rd-party-app/package-lock.json b/examples/authz/3rd-party-app/package-lock.json index 98ba42f..fe0ff66 100644 --- a/examples/authz/3rd-party-app/package-lock.json +++ b/examples/authz/3rd-party-app/package-lock.json @@ -8,7 +8,7 @@ "name": "pubky-auth-3rd-party", "version": "0.0.0", "dependencies": { - "@synonymdev/pubky": "file:../../../pubky/pkg", + "@synonymdev/pubky": "^0.1.16", "lit": "^3.2.0", "qrcode": "^1.5.4" }, @@ -16,17 +16,6 @@ "vite": "^5.4.2" } }, - "../../../pubky/pkg": { - "name": "@synonymdev/pubky", - "version": "0.1.14", - "license": "MIT", - "devDependencies": { - "browser-resolve": "^2.0.0", - "esmify": "^2.1.1", - "tape": "^5.8.1", - "tape-run": "^11.0.0" - } - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -617,8 +606,9 @@ ] }, "node_modules/@synonymdev/pubky": { - "resolved": "../../../pubky/pkg", - "link": true + "version": "0.1.16", + "resolved": "https://registry.npmjs.org/@synonymdev/pubky/-/pubky-0.1.16.tgz", + "integrity": "sha512-jtFahEUUDfrTE7vpZx6m/uB4wMEBoqpEtuUoWCf30HH8cmm0Hfrv8v0xmwaSwPfSdcZlIG8beE5XjbX+eLmLUA==" }, "node_modules/@types/estree": { "version": "1.0.5", diff --git a/examples/authz/3rd-party-app/package.json b/examples/authz/3rd-party-app/package.json index 8ccad30..0a99f66 100644 --- a/examples/authz/3rd-party-app/package.json +++ b/examples/authz/3rd-party-app/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@synonymdev/pubky": "file:../../../pubky/pkg", + "@synonymdev/pubky": "^0.1.16", "lit": "^3.2.0", "qrcode": "^1.5.4" }, diff --git a/examples/authz/3rd-party-app/src/pubky-auth-widget.js b/examples/authz/3rd-party-app/src/pubky-auth-widget.js index 56b4f63..628f316 100644 --- a/examples/authz/3rd-party-app/src/pubky-auth-widget.js +++ b/examples/authz/3rd-party-app/src/pubky-auth-widget.js @@ -7,8 +7,11 @@ const DEFAULT_HTTP_RELAY = "https://demo.httprelay.io/link" /** */ export class PubkyAuthWidget extends LitElement { + static get properties() { return { + // === Config === + /** * Relay endpoint for the widget to receive Pubky AuthTokens * @@ -23,6 +26,9 @@ export class PubkyAuthWidget extends LitElement { * Capabilities requested or this application encoded as a string. */ caps: { type: String }, + + // === State === + /** * Widget's state (open or closed) */ @@ -31,6 +37,10 @@ export class PubkyAuthWidget extends LitElement { * Show "copied to clipboard" note */ showCopied: { type: Boolean }, + + // === Internal === + testnet: { type: Boolean }, + pubky: { type: Object } } } @@ -43,11 +53,11 @@ export class PubkyAuthWidget extends LitElement { super() + this.testnet = false; this.open = false; - // TODO: allow using mainnet /** @type {import("@synonymdev/pubky").PubkyClient} */ - this.pubkyClient = window.pubky.PubkyClient.testnet(); + this.pubkyClient = new window.pubky.PubkyClient(); this.caps = this.caps || "" } @@ -55,56 +65,55 @@ export class PubkyAuthWidget extends LitElement { connectedCallback() { super.connectedCallback() + this._generateURL() + } + + switchTestnet() { + this.testnet = !this.testnet; + + console.debug("Switching testnet"); + + if (this.testnet) { + this.pubkyClient = window.pubky.PubkyClient.testnet() + } else { + this.pubkyClient = new window.pubky.PubkyClient(); + } + + console.debug("Pkarr Relays: " + this.pubkyClient.getPkarrRelays()) + + this._generateURL() + } + + setCapabilities(caps) { + this.caps = caps || "" + + this._generateURL(this.caps); + console.debug("Updated capabilities"); + } + + + _generateURL() { let [url, promise] = this.pubkyClient.authRequest(this.relay || DEFAULT_HTTP_RELAY, this.caps); promise.then(pubky => { - if (this.caps?.length > 0) { - alert(`Successfully signed in to ${pubky.z32()} with capabilities: ${this.caps}`) - } else { - alert(`Successfully authenticated ${pubky.z32()} without signing in to their homeserver`) - } + this.pubky = pubky.z32(); }).catch(e => { console.error(e) }) - // let keypair = pubky.Keypair.random(); - // const Homeserver = pubky.PublicKey.from('8pinxxgqs41n4aididenw5apqp1urfmzdztr8jt4abrkdn435ewo') - // this.pubkyClient.signup(keypair, Homeserver).then(() => { - // this.pubkyClient.sendAuthToken(keypair, url) - // }) - this.authUrl = url + + this._updateQr(); } - render() { - return html` -
- -
-
-

Scan or copy Pubky auth URL

-
- -
- -
-
- ` + _updateQr() { + if (this.canvas) { + this._setQr(this.canvas); + } } _setQr(canvas) { + this.canvas = canvas QRCode.toCanvas(canvas, this.authUrl, { margin: 2, scale: 8, @@ -118,6 +127,7 @@ export class PubkyAuthWidget extends LitElement { _switchOpen() { this.open = !this.open + setTimeout(() => { this.pubky = null }, 80) } async _copyToClipboard() { @@ -156,20 +166,42 @@ export class PubkyAuthWidget extends LitElement {
-

Scan or copy Pubky auth URL

-
- -
- + ${this.pubky + ? this.caps.length > 0 + ? html` +

Successfully authorized:

+

${this.pubky}

+

With capabilities

+ ${this.caps.split(",").map(cap => html` +

${cap}

+ `) + } + ` + : html` +

Successfully authenticated to:

+

${this.pubky}

+ ` + : html` +

Scan or copy Pubky auth URL

+
+ +
+ + ` + }
` } + _renderWidgetContentBase() { + } + + static get styles() { return css` * {