@civitai/sdk 0.8.0 → 0.9.0

package/README.md

@@ -131,6 +131,29 @@ and a flag that the viewer signed in before (`returning`). Signing in again is
 a quick round trip, since Civitai remembers the consent. `requestGrants` goes
 back to Civitai for anything not yet granted.
 
+### Without leaving the page
+
+A page that must not be navigated away from, such as one with a chat or an
+editor embedded in it, signs in in a popup instead:
+
+```ts
+import { createSignIn, initialize } from '@civitai/sdk';
+
+const auth = await createSignIn({ clientId, scopes: ['ai:write:budgeted'] });
+button.onclick = async () => {
+  await auth.signInWithPopup(); // from the click itself: browsers only open a popup there
+  const app = await initialize(auth);
+};
+```
+
+Civitai returns the popup to `redirectUri`, the same page by default. That page
+calls `createSignIn()` as on any visit; in the popup it hands the result back to
+the page that opened it and closes. The result travels over a same-origin
+`BroadcastChannel`, not `window.opener`, because signing in through Google cuts
+the opener. A blocked popup rejects with `SignInError` `code: 'popup-blocked'`;
+pass a `signal` to give up, which rejects with `code: 'canceled'`.
+`requestGrants` still leaves the page.
+
 Only scopes with an OAuth equivalent can be asked for: `user:read:self`,
 `models:read:self`, `ai:write:budgeted`, `buzz:read:self`, `posts:write:self`
 and `social:tip:self`. The storage and collection scopes belong to blocks.

package/dist/sign-in/index.d.ts

@@ -3,7 +3,11 @@ import type { GrantOptions, Scope, TokenSessionOptions } from '../session/index.
 export declare const DEFAULT_AUTH_URL = "https://auth.civitai.com";
 export declare class SignInError extends CivitaiError {
     readonly status?: number;
-    constructor(message: string, status?: number, options?: ErrorOptions);
+    /** `canceled`: the viewer gave up on a popup sign-in. `popup-blocked`: the browser refused to open it. */
+    readonly code?: 'canceled' | 'popup-blocked';
+    constructor(message: string, status?: number, options?: ErrorOptions & {
+        code?: 'canceled' | 'popup-blocked';
+    });
 }
 type SignInStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
 export interface SignInOptions {
@@ -34,6 +38,15 @@ export interface SignIn extends TokenSessionOptions {
     signIn(opts?: {
         scopes?: readonly Scope[];
     }): Promise<never>;
+    /**
+     * Signs in in a popup, so the page stays where it is. Call it straight from a click or key press:
+     * browsers only open a popup there. Civitai returns the popup to `redirectUri`, whose page must call
+     * `createSignIn()` with the same client, which hands the result back here and closes the popup.
+     */
+    signInWithPopup(opts?: {
+        scopes?: readonly Scope[];
+        signal?: AbortSignal;
+    }): Promise<void>;
     signOut(): Promise<void>;
 }
 export declare function scopeBitmask(scopes: readonly Scope[]): number;

package/dist/sign-in/index.js

@@ -13,10 +13,13 @@ const OAUTH_BITS = {
 const EXPIRY_MARGIN_MS = 60_000;
 export class SignInError extends CivitaiError {
     status;
+    /** `canceled`: the viewer gave up on a popup sign-in. `popup-blocked`: the browser refused to open it. */
+    code;
     constructor(message, status, options) {
         super(message, options);
         this.name = 'SignInError';
         this.status = status;
+        this.code = options?.code;
     }
 }
 export function scopeBitmask(scopes) {
@@ -62,6 +65,14 @@ function writeJson(storage, key, value) {
         // Private windows can refuse storage; the viewer then signs in again next visit.
     }
 }
+const canceled = () => new SignInError('sign-in was canceled', undefined, { code: 'canceled' });
+function popupFeatures(win) {
+    const width = 520;
+    const height = 720;
+    const left = Math.max(0, Math.round(win.screenX + (win.outerWidth - width) / 2));
+    const top = Math.max(0, Math.round(win.screenY + (win.outerHeight - height) / 2));
+    return `popup,width=${width},height=${height},left=${left},top=${top}`;
+}
 /**
  * Sign-in with Civitai for an app outside civitai.com. Completes the return
  * from Civitai when the page has just come back from it.
@@ -72,6 +83,9 @@ export async function createSignIn(options) {
     const doFetch = options.fetch ?? fetch.bind(globalThis);
     const authUrl = options.authUrl ?? DEFAULT_AUTH_URL;
     const key = `civitai.sign-in.${options.clientId}`;
+    // A same-origin channel, not `popup.opener`: Civitai may pass the popup through Google, whose
+    // opener policy cuts that link for good.
+    const channelName = key;
     const pendingKey = `${key}.pending`;
     const returningKey = `${key}.returning`;
     const requested = scopeBitmask(options.scopes);
@@ -123,15 +137,14 @@ export async function createSignIn(options) {
         });
         return refreshing;
     };
-    const signIn = async ({ scopes } = {}) => {
-        const verifier = randomString();
-        const pending = {
-            state: randomString(),
-            verifier,
-            redirectUri: options.redirectUri ?? `${win.location.origin}${win.location.pathname}`,
-            scope: requested | (scopes ? scopeBitmask(scopes) : 0) | (tokens?.scope ?? 0),
-        };
-        writeJson(storage, pendingKey, pending);
+    const newPending = (scopes, popup) => ({
+        state: randomString(),
+        verifier: randomString(),
+        redirectUri: options.redirectUri ?? `${win.location.origin}${win.location.pathname}`,
+        scope: requested | (scopes ? scopeBitmask(scopes) : 0) | (tokens?.scope ?? 0),
+        ...(popup ? { popup: true } : {}),
+    });
+    const authorizeUrl = async (pending) => {
         const url = new URL('/api/auth/oauth/authorize', authUrl);
         url.search = new URLSearchParams({
             client_id: options.clientId,
@@ -139,33 +152,79 @@ export async function createSignIn(options) {
             response_type: 'code',
             state: pending.state,
             scope: String(pending.scope),
-            code_challenge: await challengeFor(verifier),
+            code_challenge: await challengeFor(pending.verifier),
             code_challenge_method: 'S256',
         }).toString();
-        win.location.assign(url.toString());
+        return url.toString();
+    };
+    const complete = async (pending, params) => {
+        const code = params.get('code');
+        if (!code)
+            throw new SignInError(params.get('error_description') ?? params.get('error') ?? 'sign-in was declined');
+        save(await tokenRequest({ grant_type: 'authorization_code', code, redirect_uri: pending.redirectUri, code_verifier: pending.verifier }, pending.scope));
+    };
+    const signIn = async ({ scopes } = {}) => {
+        const pending = newPending(scopes, false);
+        writeJson(storage, pendingKey, pending);
+        win.location.assign(await authorizeUrl(pending));
         return new Promise(() => { });
     };
+    const signInWithPopup = async ({ scopes, signal } = {}) => {
+        // Written before the popup opens: a popup starts with a copy of this page's sessionStorage.
+        const pending = newPending(scopes, true);
+        writeJson(storage, pendingKey, pending);
+        const popup = win.open('about:blank', key, popupFeatures(win));
+        if (!popup) {
+            writeJson(storage, pendingKey, null);
+            throw new SignInError('the browser blocked the sign-in popup', undefined, { code: 'popup-blocked' });
+        }
+        const channel = new BroadcastChannel(channelName);
+        try {
+            const returned = new Promise((resolve, reject) => {
+                channel.onmessage = (event) => {
+                    const params = new URLSearchParams(typeof event.data?.search === 'string' ? event.data.search : '');
+                    if (params.get('state') === pending.state)
+                        resolve(params);
+                };
+                if (signal?.aborted)
+                    reject(canceled());
+                signal?.addEventListener('abort', () => reject(canceled()), { once: true });
+            });
+            popup.location.replace(await authorizeUrl(pending));
+            await complete(pending, await returned);
+            error = null;
+        }
+        finally {
+            channel.close();
+            if (readJson(storage, pendingKey)?.state === pending.state)
+                writeJson(storage, pendingKey, null);
+            if (!popup.closed)
+                popup.close();
+        }
+    };
     const params = new URLSearchParams(win.location.search);
     const pending = readJson(storage, pendingKey);
     if (pending && params.get('state') === pending.state) {
-        writeJson(storage, pendingKey, null);
-        const code = params.get('code');
         const clean = new URL(win.location.href);
         for (const key of ['code', 'state', 'error', 'error_description'])
             clean.searchParams.delete(key);
-        win.history.replaceState(win.history.state, '', clean.toString());
-        try {
-            if (!code)
-                throw new SignInError(params.get('error_description') ?? params.get('error') ?? 'sign-in was declined');
-            save(await tokenRequest({
-                grant_type: 'authorization_code',
-                code,
-                redirect_uri: pending.redirectUri,
-                code_verifier: pending.verifier,
-            }, pending.scope));
+        if (pending.popup) {
+            // This is the popup: the page that opened it holds the verifier and does the exchange.
+            const channel = new BroadcastChannel(channelName);
+            channel.postMessage({ search: win.location.search });
+            channel.close();
+            win.history.replaceState(win.history.state, '', clean.toString());
+            win.close();
         }
-        catch (err) {
-            error = err instanceof SignInError ? err : new SignInError('sign-in failed', undefined, { cause: err });
+        else {
+            writeJson(storage, pendingKey, null);
+            win.history.replaceState(win.history.state, '', clean.toString());
+            try {
+                await complete(pending, params);
+            }
+            catch (err) {
+                error = err instanceof SignInError ? err : new SignInError('sign-in failed', undefined, { cause: err });
+            }
         }
     }
     return {
@@ -194,6 +253,7 @@ export async function createSignIn(options) {
             return signIn({ scopes });
         },
         signIn,
+        signInWithPopup,
         signOut: async () => {
             const held = tokens;
             save(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/sdk",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The Civitai SDK: an app holds a token and calls the Civitai API and the orchestrator; a block asks its host only to show host UI.",
   "license": "MIT",
   "type": "module",