diff --git a/examples/authz/3rd-party-app/index.html b/examples/authz/3rd-party-app/index.html index 0a4a5da..abfe35a 100644 --- a/examples/authz/3rd-party-app/index.html +++ b/examples/authz/3rd-party-app/index.html @@ -9,7 +9,8 @@ - + +

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/src/pubky-auth-widget.js b/examples/authz/3rd-party-app/src/pubky-auth-widget.js index 29f291f..a01a1bb 100644 --- a/examples/authz/3rd-party-app/src/pubky-auth-widget.js +++ b/examples/authz/3rd-party-app/src/pubky-auth-widget.js @@ -2,14 +2,26 @@ import { LitElement, css, html } from 'lit' import { createRef, ref } from 'lit/directives/ref.js'; import QRCode from 'qrcode' +const DEFAULT_HTTP_RELAY = "https://demo.httprelay.io/link" + /** - * An example element. - * - * @csspart button - The button */ export class PubkyAuthWidget extends LitElement { static get properties() { return { + /** + * Relay endpoint for the widget to receive Pubky AuthTokens + * + * Internally, a random channel ID will be generated and a + * GET request made for `${realy url}/${channelID}` + * + * If no relay is passed, the widget will use a default relay: + * https://demo.httprelay.io/link + */ + relay: { type: String }, + /** + * Widget's state (open or closed) + */ open: { type: Boolean }, } } @@ -17,10 +29,32 @@ export class PubkyAuthWidget extends LitElement { canvasRef = createRef(); constructor() { + // TODO: show error if the PubkyClient is not available! super() this.open = false; - this.authUrl = "pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5"; + } + connectedCallback() { + super.connectedCallback() + + // Verify it is a valid URL + const callbackUrl = this.relay ? + new URL( + // Remove trailing '/' + this.relay.endsWith("/") + ? this.relay.slice(0, this.relay.length - 1) + : this.relay + ) + : DEFAULT_HTTP_RELAY + + const channel = Math.random().toString(32).slice(2); + callbackUrl.pathname = callbackUrl.pathname + "/" + channel + + this.authUrl = `pubky:auth?cb=${callbackUrl.toString()}`; + + fetch(callbackUrl) + .catch(console.log) + .then(this._onCallback) } render() { @@ -36,18 +70,16 @@ export class PubkyAuthWidget extends LitElement {
- + ` } _setQr(canvas) { - console.log(canvas, this.authUrl); - QRCode.toCanvas(canvas, this.authUrl, { margin: 2, scale: 8, @@ -63,6 +95,25 @@ export class PubkyAuthWidget extends LitElement { this.open = !this.open } + async _onCallback(response) { + try { + // Check if the response is ok (status code 200-299) + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + // Convert the response to an ArrayBuffer + const arrayBuffer = await response.arrayBuffer(); + + // Create a Uint8Array from the ArrayBuffer + const uint8Array = new Uint8Array(arrayBuffer); + + console.log({ uint8Array }) + } catch (error) { + console.error('Failed to fetch and convert the API response:', error); + } + } + static get styles() { return css` * { @@ -111,7 +162,7 @@ export class PubkyAuthWidget extends LitElement { will-change: height,width; transition-property: height, width; - transition-duration: 200ms; + transition-duration: 80ms; transition-timing-function: ease-in; } @@ -162,6 +213,7 @@ export class PubkyAuthWidget extends LitElement { .card.url { padding: .625rem; justify-content: space-between; + max-width:100%; } .url p {