@logto/capacitor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Silverhand
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# Logto JS Capacitor SDK
+[![Version](https://img.shields.io/npm/v/@logto/capacitor)](https://www.npmjs.com/package/@logto/capacitor)
+[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
+[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
+
+The Logto JavaScript Capacitor SDK written in TypeScript.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+### Using yarn
+
+```bash
+yarn add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+### Using pnpm
+
+```bash
+pnpm add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+## What is this and how does it work?
+
+See [Integrate Logto in your application](https://docs.logto.io/docs/recipes/integrate-logto/) for more information.
+
+## Resources
+
+[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
+[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/browser/)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

package/lib/index.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var app = require('@capacitor/app');
+var browser = require('@capacitor/browser');
+var preferences = require('@capacitor/preferences');
+var LogtoBaseClient = require('@logto/browser');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var LogtoBaseClient__default = /*#__PURE__*/_interopDefault(LogtoBaseClient);
+
+class CapacitorLogtoClient extends LogtoBaseClient__default.default {
+    constructor(config, capacitorConfig = {}) {
+        const { openOptions } = capacitorConfig;
+        super(config);
+        // Use the Capacitor Browser plugin to open the sign-in and sign-out pages
+        // since the default location assignment method will open the pages in a
+        // system browser. We need to open an in-app browser to be able to handle
+        // the redirects back to the app.
+        // https://capacitorjs.com/docs/apis/browser
+        this.adapter.navigate = async (url) => {
+            return browser.Browser.open({
+                url,
+                windowName: '_self',
+                presentationStyle: 'popover',
+                ...openOptions,
+            });
+        };
+        // Use the Capacitor Preferences plugin to store the tokens, which will
+        // fallback to localStorage for web builds.
+        // https://capacitorjs.com/docs/apis/preferences
+        this.adapter.storage = {
+            getItem: async (key) => {
+                const { value } = await preferences.Preferences.get({ key });
+                return value;
+            },
+            setItem: async (key, value) => {
+                await preferences.Preferences.set({ key, value });
+            },
+            removeItem: async (key) => {
+                await preferences.Preferences.remove({ key });
+            },
+        };
+    }
+    /**
+     * Start the sign-in flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * Remember to configure the correct [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param redirectUri The redirect URI that the user will be redirected to after the sign-in flow is completed.
+     * @param interactionMode The interaction mode to be used for the authorization request. Note it's not
+     * a part of the OIDC standard, but a Logto-specific extension. Defaults to `signIn`.
+     * @throws {@link LogtoClientError} If error happens during the sign-in flow or the user cancels the sign-in.
+     *
+     * @example
+     * ```ts
+     * const client = new CapacitorLogtoClient({
+     *   endpoint: 'https://your.logto.endpoint',
+     *   appId: 'your-app-id',
+     * });
+     *
+     * await client.signIn('io.logto.example://callback'); // throws if error happens
+     * console.log(await client.getIdTokenClaims()); // { sub: '123', ... }
+     * ```
+     *
+     * @remarks
+     * The user will be redirected to that URI after the sign-in flow is completed,
+     * and the client will be able to get the authorization code from the URI.
+     * {@link handleSignInCallback} will be called after the user is redirected.
+     *
+     * @see {@link https://docs.logto.io/docs/recipes/integrate-logto/vanilla-js/#sign-in | Sign in} for more information.
+     * @see {@link InteractionMode}
+     */
+    async signIn(redirectUri, interactionMode) {
+        return new Promise((resolve, reject) => {
+            const run = async () => {
+                const [browserHandle, appHandle] = await Promise.all([
+                    // Handle the case where the user closes the browser during the sign-in.
+                    browser.Browser.addListener('browserFinished', async () => {
+                        await Promise.all([browserHandle.remove(), appHandle.remove()]);
+                        reject(new LogtoBaseClient.LogtoClientError('user_cancelled'));
+                    }),
+                    // Handle the case where the user completes the sign-in and is redirected
+                    // back to the app.
+                    app.App.addListener('appUrlOpen', async ({ url }) => {
+                        if (!url.startsWith(redirectUri)) {
+                            return;
+                        }
+                        await Promise.all([
+                            // One last step of the sign-in flow
+                            this.handleSignInCallback(url),
+                            // Close the browser and remove the listeners
+                            browser.Browser.close(),
+                            browserHandle.remove(),
+                            appHandle.remove(),
+                        ]);
+                        resolve();
+                    }),
+                    // Open the in-app browser to start the sign-in flow
+                    super.signIn(redirectUri, interactionMode),
+                ]);
+            };
+            void run();
+        });
+    }
+    /**
+     * Start the sign-out flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * It will also revoke all the tokens and clean up the storage.
+     *
+     * - If the `postLogoutRedirectUri` is not specified, the user will see a default
+     * page after the sign-out flow is completed, they need to close the browser
+     * manually to return to the app.
+     * - If the `postLogoutRedirectUri` is specified, the user will be redirected to
+     * that URI after the sign-out flow is completed. Remember to configure the correct
+     * [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param postLogoutRedirectUri The URI that the user will be redirected to after the sign-out flow is completed.
+     *
+     * @example
+     * ```ts
+     * await client.signOut('io.logto.example://callback');
+     * ```
+     */
+    async signOut(postLogoutRedirectUri) {
+        return new Promise((resolve) => {
+            const run = async () => {
+                const [handle] = await Promise.all([
+                    postLogoutRedirectUri
+                        ? app.App.addListener('appUrlOpen', async ({ url }) => {
+                            if (postLogoutRedirectUri && !url.startsWith(postLogoutRedirectUri)) {
+                                return;
+                            }
+                            await Promise.all([browser.Browser.close(), handle.remove()]);
+                            resolve();
+                        })
+                        : browser.Browser.addListener('browserFinished', async () => {
+                            await handle.remove();
+                            resolve();
+                        }),
+                    super.signOut(postLogoutRedirectUri),
+                ]);
+            };
+            void run();
+        });
+    }
+}
+
+exports.default = CapacitorLogtoClient;

package/lib/index.d.ts

@@ -0,0 +1,66 @@
+import { type OpenOptions } from '@capacitor/browser';
+import LogtoBaseClient, { type InteractionMode, type LogtoConfig } from '@logto/browser';
+export type CapacitorConfig = {
+    /**
+     * The options to pass to the `open` method of the Capacitor Browser plugin.
+     * @default { windowName: '_self', presentationStyle: 'popover' }
+     */
+    openOptions?: OpenOptions;
+};
+export default class CapacitorLogtoClient extends LogtoBaseClient {
+    constructor(config: LogtoConfig, capacitorConfig?: CapacitorConfig);
+    /**
+     * Start the sign-in flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * Remember to configure the correct [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param redirectUri The redirect URI that the user will be redirected to after the sign-in flow is completed.
+     * @param interactionMode The interaction mode to be used for the authorization request. Note it's not
+     * a part of the OIDC standard, but a Logto-specific extension. Defaults to `signIn`.
+     * @throws {@link LogtoClientError} If error happens during the sign-in flow or the user cancels the sign-in.
+     *
+     * @example
+     * ```ts
+     * const client = new CapacitorLogtoClient({
+     *   endpoint: 'https://your.logto.endpoint',
+     *   appId: 'your-app-id',
+     * });
+     *
+     * await client.signIn('io.logto.example://callback'); // throws if error happens
+     * console.log(await client.getIdTokenClaims()); // { sub: '123', ... }
+     * ```
+     *
+     * @remarks
+     * The user will be redirected to that URI after the sign-in flow is completed,
+     * and the client will be able to get the authorization code from the URI.
+     * {@link handleSignInCallback} will be called after the user is redirected.
+     *
+     * @see {@link https://docs.logto.io/docs/recipes/integrate-logto/vanilla-js/#sign-in | Sign in} for more information.
+     * @see {@link InteractionMode}
+     */
+    signIn(redirectUri: string, interactionMode?: InteractionMode): Promise<void>;
+    /**
+     * Start the sign-out flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * It will also revoke all the tokens and clean up the storage.
+     *
+     * - If the `postLogoutRedirectUri` is not specified, the user will see a default
+     * page after the sign-out flow is completed, they need to close the browser
+     * manually to return to the app.
+     * - If the `postLogoutRedirectUri` is specified, the user will be redirected to
+     * that URI after the sign-out flow is completed. Remember to configure the correct
+     * [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param postLogoutRedirectUri The URI that the user will be redirected to after the sign-out flow is completed.
+     *
+     * @example
+     * ```ts
+     * await client.signOut('io.logto.example://callback');
+     * ```
+     */
+    signOut(postLogoutRedirectUri?: string): Promise<void>;
+}

package/lib/index.js

@@ -0,0 +1,147 @@
+import { App } from '@capacitor/app';
+import { Browser } from '@capacitor/browser';
+import { Preferences } from '@capacitor/preferences';
+import LogtoBaseClient, { LogtoClientError } from '@logto/browser';
+
+class CapacitorLogtoClient extends LogtoBaseClient {
+    constructor(config, capacitorConfig = {}) {
+        const { openOptions } = capacitorConfig;
+        super(config);
+        // Use the Capacitor Browser plugin to open the sign-in and sign-out pages
+        // since the default location assignment method will open the pages in a
+        // system browser. We need to open an in-app browser to be able to handle
+        // the redirects back to the app.
+        // https://capacitorjs.com/docs/apis/browser
+        this.adapter.navigate = async (url) => {
+            return Browser.open({
+                url,
+                windowName: '_self',
+                presentationStyle: 'popover',
+                ...openOptions,
+            });
+        };
+        // Use the Capacitor Preferences plugin to store the tokens, which will
+        // fallback to localStorage for web builds.
+        // https://capacitorjs.com/docs/apis/preferences
+        this.adapter.storage = {
+            getItem: async (key) => {
+                const { value } = await Preferences.get({ key });
+                return value;
+            },
+            setItem: async (key, value) => {
+                await Preferences.set({ key, value });
+            },
+            removeItem: async (key) => {
+                await Preferences.remove({ key });
+            },
+        };
+    }
+    /**
+     * Start the sign-in flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * Remember to configure the correct [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param redirectUri The redirect URI that the user will be redirected to after the sign-in flow is completed.
+     * @param interactionMode The interaction mode to be used for the authorization request. Note it's not
+     * a part of the OIDC standard, but a Logto-specific extension. Defaults to `signIn`.
+     * @throws {@link LogtoClientError} If error happens during the sign-in flow or the user cancels the sign-in.
+     *
+     * @example
+     * ```ts
+     * const client = new CapacitorLogtoClient({
+     *   endpoint: 'https://your.logto.endpoint',
+     *   appId: 'your-app-id',
+     * });
+     *
+     * await client.signIn('io.logto.example://callback'); // throws if error happens
+     * console.log(await client.getIdTokenClaims()); // { sub: '123', ... }
+     * ```
+     *
+     * @remarks
+     * The user will be redirected to that URI after the sign-in flow is completed,
+     * and the client will be able to get the authorization code from the URI.
+     * {@link handleSignInCallback} will be called after the user is redirected.
+     *
+     * @see {@link https://docs.logto.io/docs/recipes/integrate-logto/vanilla-js/#sign-in | Sign in} for more information.
+     * @see {@link InteractionMode}
+     */
+    async signIn(redirectUri, interactionMode) {
+        return new Promise((resolve, reject) => {
+            const run = async () => {
+                const [browserHandle, appHandle] = await Promise.all([
+                    // Handle the case where the user closes the browser during the sign-in.
+                    Browser.addListener('browserFinished', async () => {
+                        await Promise.all([browserHandle.remove(), appHandle.remove()]);
+                        reject(new LogtoClientError('user_cancelled'));
+                    }),
+                    // Handle the case where the user completes the sign-in and is redirected
+                    // back to the app.
+                    App.addListener('appUrlOpen', async ({ url }) => {
+                        if (!url.startsWith(redirectUri)) {
+                            return;
+                        }
+                        await Promise.all([
+                            // One last step of the sign-in flow
+                            this.handleSignInCallback(url),
+                            // Close the browser and remove the listeners
+                            Browser.close(),
+                            browserHandle.remove(),
+                            appHandle.remove(),
+                        ]);
+                        resolve();
+                    }),
+                    // Open the in-app browser to start the sign-in flow
+                    super.signIn(redirectUri, interactionMode),
+                ]);
+            };
+            void run();
+        });
+    }
+    /**
+     * Start the sign-out flow with the specified redirect URI. The URI must be
+     * registered in the Logto Console.
+     *
+     * It will also revoke all the tokens and clean up the storage.
+     *
+     * - If the `postLogoutRedirectUri` is not specified, the user will see a default
+     * page after the sign-out flow is completed, they need to close the browser
+     * manually to return to the app.
+     * - If the `postLogoutRedirectUri` is specified, the user will be redirected to
+     * that URI after the sign-out flow is completed. Remember to configure the correct
+     * [scheme or universal links](https://capacitorjs.com/docs/guides/deep-links)
+     * to ensure the app can be opened from the redirect URI.
+     *
+     * @param postLogoutRedirectUri The URI that the user will be redirected to after the sign-out flow is completed.
+     *
+     * @example
+     * ```ts
+     * await client.signOut('io.logto.example://callback');
+     * ```
+     */
+    async signOut(postLogoutRedirectUri) {
+        return new Promise((resolve) => {
+            const run = async () => {
+                const [handle] = await Promise.all([
+                    postLogoutRedirectUri
+                        ? App.addListener('appUrlOpen', async ({ url }) => {
+                            if (postLogoutRedirectUri && !url.startsWith(postLogoutRedirectUri)) {
+                                return;
+                            }
+                            await Promise.all([Browser.close(), handle.remove()]);
+                            resolve();
+                        })
+                        : Browser.addListener('browserFinished', async () => {
+                            await handle.remove();
+                            resolve();
+                        }),
+                    super.signOut(postLogoutRedirectUri),
+                ]);
+            };
+            void run();
+        });
+    }
+}
+
+export { CapacitorLogtoClient as default };

package/lib/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@logto/capacitor",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    "types": "./lib/index.d.ts",
+    "require": "./lib/index.cjs",
+    "import": "./lib/index.js",
+    "default": "./lib/index.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/logto-io/js.git",
+    "directory": "packages/capacitor"
+  },
+  "dependencies": {
+    "@logto/browser": "^2.1.1"
+  },
+  "devDependencies": {
+    "@capacitor/app": "^5.0.6",
+    "@capacitor/browser": "^5.0.6",
+    "@capacitor/preferences": "^5.0.6",
+    "@silverhand/eslint-config": "^4.0.1",
+    "@silverhand/ts-config": "^4.0.0",
+    "@swc/core": "^1.3.50",
+    "@swc/jest": "^0.2.24",
+    "@types/jest": "^29.5.0",
+    "eslint": "^8.44.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-matcher-specific-error": "^1.0.0",
+    "lint-staged": "^13.0.0",
+    "prettier": "^3.0.0",
+    "text-encoder": "^0.0.4",
+    "typescript": "^5.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@silverhand"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@capacitor/app": "^5.0.6",
+    "@capacitor/browser": "^5.0.6",
+    "@capacitor/preferences": "^5.0.6"
+  },
+  "scripts": {
+    "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "precommit": "lint-staged",
+    "check": "tsc --noEmit",
+    "build": "rm -rf lib/ && tsc -p tsconfig.build.json --noEmit && rollup -c",
+    "lint": "eslint --ext .ts src",
+    "test": "jest",
+    "test:coverage": "jest --silent --coverage"
+  }
+}