@logto/vue 0.1.14 → 0.1.17

package/README.md

@@ -0,0 +1,109 @@
+# Logto Vue SDK
+[![Version](https://img.shields.io/npm/v/@logto/vue)](https://www.npmjs.com/package/@logto/vue)
+[![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 Vue SDK written in TypeScript. Check out our [integration guide](https://docs.logto.io/integrate-sdk/vue) or [docs](https://docs.logto.io/sdk/vue) for more information.
+
+We also provide [集成指南](https://docs.logto.io/zh-cn/integrate-sdk/vue) and [文档](https://docs.logto.io/zh-cn/sdk/vue) in Simplified Chinese.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @logto/vue
+```
+
+### Using yarn
+
+```bash
+yarn add @logto/vue
+```
+
+### Using pnpm
+
+```bash
+pnpm install @logto/vue
+```
+
+### Using CDN
+
+```bash
+<script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" />
+```
+
+## Get Started
+
+A sample project with the following code snippets can be found at [Vue Sample](https://github.com/logto-io/js/tree/master/packages/vue-sample)
+
+Check out the source code and try it yourself. (We use [pnpm](https://pnpm.io/) for package management)
+
+```bash
+pnpm i && pnpm start
+```
+
+### Import Logto Vue plugin
+
+```ts
+import { createLogto, LogtoConfig } from '@logto/vue';
+
+const config: LogtoConfig = {
+  appId: '<your-application-id>',
+  endpoint: '<your-logto-endpoint>'
+};
+
+const app = createApp(App);
+
+app.use(createLogto, config);
+app.mount("#app");
+```
+
+### Setup your sign-in
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signIn } = useLogto();
+const onClickSignIn = () => signIn(redirectUrl);
+```
+
+```html
+<button @click="onClickSignIn">Sign In</button>
+```
+
+### Retrieve Auth Status
+
+```ts
+import { useLogto } from '@logto/vue';
+
+const { isAuthenticated } = useLogto();
+```
+
+```html
+<div v-if="!isAuthenticated">
+  <!-- E.g. navigate to the sign in page -->
+</div>
+<div v-else>
+  <!-- Do things when user is authenticated -->
+</div>
+```
+
+### Sign out
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signOut } = useLogto();
+const onClickSignOut = () => signOut('http://localhost:1234');
+```
+
+```html
+<button @click="onClickSignOut">Sign Out</button>
+```
+
+## 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/docs/sdk/swift/)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

package/lib/index.d.ts

@@ -73,7 +73,7 @@ export declare const useLogto: () => Logto;
  *
  * Use this in the setup script of your Callback page to make sure the injection works
  */
-export declare const useHandleSignInCallback: (returnToPageUrl?: string) => {
+export declare const useHandleSignInCallback: (callback?: (() => void) | undefined) => {
     isLoading: Readonly<Ref<boolean>>;
     isAuthenticated: Readonly<Ref<boolean>>;
     error: Readonly<Ref<Error | undefined>>;

package/lib/index.js

@@ -92,17 +92,17 @@ exports.useLogto = useLogto;
  *
  * Use this in the setup script of your Callback page to make sure the injection works
  */
-const useHandleSignInCallback = (returnToPageUrl = window.location.origin) => {
+const useHandleSignInCallback = (callback) => {
     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)(() => {
+        const currentPageUrl = window.location.href;
         if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {
-            void handleSignInCallback(currentPageUrl, returnToPageUrl);
+            void handleSignInCallback(currentPageUrl, callback);
         }
     });
     return {

package/lib/plugin.d.ts

@@ -11,6 +11,10 @@ export declare const createPluginMethods: (context: Context) => {
         exp: number;
         iat: number;
         at_hash?: string | undefined;
+        name?: string | undefined;
+        username?: string | undefined;
+        avatar?: string | undefined;
+        role_names?: string[] | undefined;
     } | undefined;
-    handleSignInCallback: (callbackUri: string, returnToPageUrl: string) => Promise<undefined>;
+    handleSignInCallback: (callbackUri: string, callbackFunction?: (() => void) | undefined) => Promise<undefined>;
 };

package/lib/plugin.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPluginMethods = void 0;
 const context_1 = require("./context");
 const createPluginMethods = (context) => {
-    const { logtoClient, setLoading, setError } = context;
+    const { logtoClient, setLoading, setError, setIsAuthenticated } = context;
     const signIn = async (redirectUri) => {
         if (!logtoClient.value) {
             return (0, context_1.throwContextError)();
@@ -78,17 +78,15 @@ const createPluginMethods = (context) => {
             setError(error, 'Unexpected error occurred while getting id token claims.');
         }
     };
-    const handleSignInCallback = async (callbackUri, returnToPageUrl) => {
+    const handleSignInCallback = async (callbackUri, callbackFunction) => {
         if (!logtoClient.value) {
             return (0, context_1.throwContextError)();
         }
         try {
             setLoading(true);
             await logtoClient.value.handleSignInCallback(callbackUri);
-            // We deliberately do NOT set isAuthenticated to true here, because the app state may change immediately
-            // even before navigating to the return page URL, which might cause rendering problems.
-            // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
-            window.location.assign(returnToPageUrl);
+            setIsAuthenticated(true);
+            callbackFunction?.();
         }
         catch (error) {
             setError(error, 'Unexpected error occurred while handling sign in callback.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logto/vue",
-  "version": "0.1.14",
+  "version": "0.1.17",
   "main": "./lib/index.js",
   "exports": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -15,7 +15,6 @@
   },
   "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",
@@ -24,7 +23,7 @@
     "prepack": "pnpm test"
   },
   "dependencies": {
-    "@logto/browser": "^0.1.14"
+    "@logto/browser": "^0.1.17"
   },
   "devDependencies": {
     "@jest/types": "^27.5.1",
@@ -61,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d05c6bd23dc35d7217031edccc01db2bae33b7b"
+  "gitHead": "57e93385829eceb3c1b2ffb92b90901aa174a59a"
 }