@logto/vue 0.1.8

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/lib/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const logtoInjectionKey = "@logto/vue";
+export declare const contextInjectionKey = "@logto/vue:context";

package/lib/consts.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextInjectionKey = exports.logtoInjectionKey = void 0;
+exports.logtoInjectionKey = '@logto/vue';
+exports.contextInjectionKey = '@logto/vue:context';

package/lib/context.d.ts

@@ -0,0 +1,14 @@
+import LogtoClient from '@logto/browser';
+import { ComputedRef, Ref, UnwrapRef } from 'vue';
+export declare type Context = {
+    logtoClient: Ref<UnwrapRef<LogtoClient | undefined>>;
+    isAuthenticated: Ref<boolean>;
+    loadingCount: Ref<number>;
+    error: Ref<Error | undefined>;
+    isLoading: ComputedRef<boolean>;
+    setError: (error: unknown, fallbackErrorMessage?: string | undefined) => void;
+    setIsAuthenticated: (isAuthenticated: boolean) => void;
+    setLoading: (isLoading: boolean) => void;
+};
+export declare const createContext: (client: LogtoClient) => Context;
+export declare const throwContextError: () => never;

package/lib/context.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throwContextError = exports.createContext = void 0;
+const vue_1 = require("vue");
+const createContext = (client) => {
+    const context = (0, vue_1.toRefs)((0, vue_1.reactive)({
+        logtoClient: client,
+        isAuthenticated: client.isAuthenticated,
+        loadingCount: 0,
+        error: undefined,
+    }));
+    const { isAuthenticated, loadingCount, error } = context;
+    const isLoading = (0, vue_1.computed)(() => loadingCount.value > 0);
+    /* eslint-disable @silverhand/fp/no-mutation */
+    const setError = (_error, fallbackErrorMessage) => {
+        if (_error instanceof Error) {
+            error.value = _error;
+        }
+        else if (fallbackErrorMessage) {
+            error.value = new Error(fallbackErrorMessage);
+        }
+    };
+    const setLoading = (isLoading) => {
+        if (isLoading) {
+            loadingCount.value += 1;
+        }
+        else {
+            loadingCount.value = Math.max(0, loadingCount.value - 1);
+        }
+    };
+    const setIsAuthenticated = (_isAuthenticated) => {
+        isAuthenticated.value = _isAuthenticated;
+    };
+    /* eslint-enable @silverhand/fp/no-mutation */
+    return { ...context, isLoading, setError, setLoading, setIsAuthenticated };
+};
+exports.createContext = createContext;
+const throwContextError = () => {
+    throw new Error('Must install Logto plugin first.');
+};
+exports.throwContextError = throwContextError;

package/lib/index.d.ts

@@ -0,0 +1,79 @@
+import { IdTokenClaims, LogtoConfig, UserInfoResponse } from '@logto/browser';
+import { App, Ref } from 'vue';
+export type { LogtoConfig, IdTokenClaims, UserInfoResponse, LogtoClientError, LogtoClientErrorCode, } from '@logto/browser';
+declare type LogtoVuePlugin = {
+    install: (app: App, config: LogtoConfig) => void;
+};
+declare type Logto = {
+    isAuthenticated: Readonly<Ref<boolean>>;
+    isLoading: Readonly<Ref<boolean>>;
+    error: Readonly<Ref<Error | undefined>>;
+    fetchUserInfo: () => Promise<UserInfoResponse | undefined>;
+    getAccessToken: (resource?: string) => Promise<string | undefined>;
+    getIdTokenClaims: () => IdTokenClaims | undefined;
+    signIn: (redirectUri: string) => Promise<void>;
+    signOut: (postLogoutRedirectUri: string) => Promise<void>;
+};
+/**
+ * Creates the Logto Vue plugin
+ *
+ * ```ts
+ * import { createApp } from 'vue';
+ * import { createLogto } from '@logto/vue';
+ *
+ * const app = createApp(App);
+ * const app.use(createLogto, {
+ *   appId: '<your-app-id>',
+ *   endpoint: '<your-oidc-endpoint-domain>',
+ * });
+ *
+ * app.mount('#app');
+ * ```
+ *
+ * Use this in your Vue root component to register the plugin
+ */
+export declare const createLogto: LogtoVuePlugin;
+/**
+ * A Vue composable method that provides the Logto reactive refs and auth methods.
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ *
+ * export default {
+ *  setup() {
+ *    const { isAuthenticated, signIn } = useLogto();
+ *
+ *    return {
+ *      isAuthenticated,
+ *      onClickSignIn: () => {
+ *        signIn('<your-redirect-uri>');
+ *      },
+ *    }
+ *  }
+ * }
+ * ```
+ *
+ * Use this composable in the setup script of your Vue component to make sure the injection works
+ */
+export declare const useLogto: () => Logto;
+/**
+ * A Vue composable method that watches browser navigation and automatically handles the sign-in callback
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ * import { useHandleSignInCallback } from '@logto/vue';
+ *
+ * export default {
+ *   setup() {
+ *     useHandleSignInCallback();
+ *   }
+ * }
+ * ```
+ *
+ * Use this in the setup script of your Callback page to make sure the injection works
+ */
+export declare const useHandleSignInCallback: (returnToPageUrl?: string) => {
+    isLoading: Readonly<Ref<boolean>>;
+    isAuthenticated: Readonly<Ref<boolean>>;
+    error: Readonly<Ref<Error | undefined>>;
+};

package/lib/index.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleSignInCallback = exports.useLogto = exports.createLogto = void 0;
+const browser_1 = __importDefault(require("@logto/browser"));
+const vue_1 = require("vue");
+const consts_1 = require("./consts");
+const context_1 = require("./context");
+const plugin_1 = require("./plugin");
+/**
+ * Creates the Logto Vue plugin
+ *
+ * ```ts
+ * import { createApp } from 'vue';
+ * import { createLogto } from '@logto/vue';
+ *
+ * const app = createApp(App);
+ * const app.use(createLogto, {
+ *   appId: '<your-app-id>',
+ *   endpoint: '<your-oidc-endpoint-domain>',
+ * });
+ *
+ * app.mount('#app');
+ * ```
+ *
+ * Use this in your Vue root component to register the plugin
+ */
+exports.createLogto = {
+    install(app, config) {
+        const client = new browser_1.default(config);
+        const context = (0, context_1.createContext)(client);
+        const pluginMethods = (0, plugin_1.createPluginMethods)(context);
+        const { isAuthenticated, isLoading, error } = context;
+        app.provide(consts_1.contextInjectionKey, context);
+        app.provide(consts_1.logtoInjectionKey, {
+            isAuthenticated: (0, vue_1.readonly)(isAuthenticated),
+            isLoading: (0, vue_1.readonly)(isLoading),
+            error: (0, vue_1.readonly)(error),
+            ...pluginMethods,
+        });
+    },
+};
+/**
+ * A Vue composable method that provides the Logto reactive refs and auth methods.
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ *
+ * export default {
+ *  setup() {
+ *    const { isAuthenticated, signIn } = useLogto();
+ *
+ *    return {
+ *      isAuthenticated,
+ *      onClickSignIn: () => {
+ *        signIn('<your-redirect-uri>');
+ *      },
+ *    }
+ *  }
+ * }
+ * ```
+ *
+ * Use this composable in the setup script of your Vue component to make sure the injection works
+ */
+const useLogto = () => {
+    const logto = (0, vue_1.inject)(consts_1.logtoInjectionKey);
+    if (!logto) {
+        return (0, context_1.throwContextError)();
+    }
+    return logto;
+};
+exports.useLogto = useLogto;
+/**
+ * A Vue composable method that watches browser navigation and automatically handles the sign-in callback
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ * import { useHandleSignInCallback } from '@logto/vue';
+ *
+ * export default {
+ *   setup() {
+ *     useHandleSignInCallback();
+ *   }
+ * }
+ * ```
+ *
+ * Use this in the setup script of your Callback page to make sure the injection works
+ */
+const useHandleSignInCallback = (returnToPageUrl = window.location.origin) => {
+    const context = (0, vue_1.inject)(consts_1.contextInjectionKey);
+    if (!context) {
+        return (0, context_1.throwContextError)();
+    }
+    const currentPageUrl = window.location.href;
+    const { isAuthenticated, isLoading, logtoClient, error } = context;
+    const { handleSignInCallback } = (0, plugin_1.createPluginMethods)(context);
+    (0, vue_1.watchEffect)(() => {
+        if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {
+            void handleSignInCallback(currentPageUrl, returnToPageUrl);
+        }
+    });
+    return {
+        isLoading: (0, vue_1.readonly)(isLoading),
+        isAuthenticated: (0, vue_1.readonly)(isAuthenticated),
+        error: (0, vue_1.readonly)(error),
+    };
+};
+exports.useHandleSignInCallback = useHandleSignInCallback;

package/lib/plugin.d.ts

@@ -0,0 +1,16 @@
+import { Context } from './context';
+export declare const createPluginMethods: (context: Context) => {
+    signIn: (redirectUri: string) => Promise<undefined>;
+    signOut: (postLogoutRedirectUri: string) => Promise<undefined>;
+    fetchUserInfo: () => Promise<import("@logto/browser").UserInfoResponse | undefined>;
+    getAccessToken: (resource?: string | undefined) => Promise<string | undefined>;
+    getIdTokenClaims: () => {
+        iss: string;
+        sub: string;
+        aud: string;
+        exp: number;
+        iat: number;
+        at_hash?: string | undefined;
+    } | undefined;
+    handleSignInCallback: (callbackUri: string, returnToPageUrl: string) => Promise<undefined>;
+};

package/lib/plugin.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPluginMethods = void 0;
+const context_1 = require("./context");
+const createPluginMethods = (context) => {
+    const { logtoClient, setLoading, setError, setIsAuthenticated } = context;
+    const signIn = async (redirectUri) => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            setLoading(true);
+            await logtoClient.value.signIn(redirectUri);
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while signing in.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const signOut = async (postLogoutRedirectUri) => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            setLoading(true);
+            await logtoClient.value.signOut(postLogoutRedirectUri);
+            setIsAuthenticated(false);
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while signing out.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const fetchUserInfo = async () => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            setLoading(true);
+            return await logtoClient.value.fetchUserInfo();
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while fetching user info.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const getAccessToken = async (resource) => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            setLoading(true);
+            return await logtoClient.value.getAccessToken(resource);
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while getting access token.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const getIdTokenClaims = () => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            return logtoClient.value.getIdTokenClaims();
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while getting id token claims.');
+        }
+    };
+    const handleSignInCallback = async (callbackUri, returnToPageUrl) => {
+        if (!logtoClient.value) {
+            return (0, context_1.throwContextError)();
+        }
+        try {
+            setLoading(true);
+            await logtoClient.value.handleSignInCallback(callbackUri);
+            setIsAuthenticated(true);
+            window.location.assign(returnToPageUrl);
+        }
+        catch (error) {
+            setError(error, 'Unexpected error occurred while handling sign in callback.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return {
+        signIn,
+        signOut,
+        fetchUserInfo,
+        getAccessToken,
+        getIdTokenClaims,
+        handleSignInCallback,
+    };
+};
+exports.createPluginMethods = createPluginMethods;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@logto/vue",
+  "version": "0.1.8",
+  "main": "./lib/index.js",
+  "exports": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/logto-io/js.git",
+    "directory": "packages/vue"
+  },
+  "scripts": {
+    "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "preinstall": "npx only-allow pnpm",
+    "precommit": "lint-staged",
+    "build": "rm -rf lib/ && tsc -p tsconfig.build.json",
+    "lint": "eslint --ext .ts src",
+    "test": "jest",
+    "test:coverage": "jest --silent --coverage",
+    "prepack": "pnpm test"
+  },
+  "dependencies": {
+    "@logto/browser": "^0.1.7"
+  },
+  "devDependencies": {
+    "@jest/types": "^27.5.1",
+    "@silverhand/eslint-config": "^0.14.0",
+    "@silverhand/ts-config": "^0.14.0",
+    "@types/jest": "^27.4.1",
+    "eslint": "^8.9.0",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.4",
+    "postcss": "^8.4.6",
+    "prettier": "^2.5.1",
+    "stylelint": "^14.8.2",
+    "ts-jest": "^27.0.4",
+    "typescript": "^4.6.2",
+    "vue": "^3.2.35"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@silverhand",
+    "rules": {
+      "unicorn/prevent-abbreviations": [
+        "error",
+        {
+          "replacements": {
+            "ref": false
+          }
+        }
+      ]
+    }
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "8adf9495676b65649b093f9e8b460a1568e08e0a"
+}