@drmhse/authos-vue 0.2.3 → 0.2.4

package/README.md

@@ -250,6 +250,37 @@ Individual OAuth provider button. Requires `org` and `service` in plugin options
 </OAuthButton>
 ```
 
+### Callback
+
+Required for OAuth flows. Handles the redirect from the identity provider by parsing tokens from the URL fragment and setting the session.
+
+```vue
+<script setup>
+import { Callback } from '@drmhse/authos-vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+function handleSuccess() {
+  router.push('/');
+}
+
+function handleError(error) {
+  console.error('Login failed:', error);
+}
+</script>
+
+<template>
+  <Callback @success="handleSuccess" @error="handleError" />
+</template>
+```
+
+**Events:**
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `@success` | - | Fired after session is successfully set |
+| `@error` | `Error` | Fired on error |
+
 ## Composables
 
 ### useAuthOS

package/dist/index.d.mts

@@ -755,4 +755,37 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
     showPasswordSignIn: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider$1 as SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
+interface CallbackSlotProps {
+    error: string | null;
+}
+declare const Callback: vue.DefineComponent<vue.ExtractPropTypes<{
+    onSuccess: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onError: {
+        type: PropType<(error: Error) => void>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    onSuccess: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onError: {
+        type: PropType<(error: Error) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    onSuccess: () => void;
+    onError: (error: Error) => void;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, Callback, type CallbackSlotProps, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider$1 as SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };

package/dist/index.d.ts

@@ -755,4 +755,37 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
     showPasswordSignIn: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider$1 as SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
+interface CallbackSlotProps {
+    error: string | null;
+}
+declare const Callback: vue.DefineComponent<vue.ExtractPropTypes<{
+    onSuccess: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onError: {
+        type: PropType<(error: Error) => void>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    onSuccess: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onError: {
+        type: PropType<(error: Error) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    onSuccess: () => void;
+    onError: (error: Error) => void;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, Callback, type CallbackSlotProps, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider$1 as SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };

package/dist/index.js

@@ -1568,6 +1568,77 @@ var PasskeySignIn = vue.defineComponent({
     };
   }
 });
+var Callback = vue.defineComponent({
+  name: "Callback",
+  props: {
+    onSuccess: {
+      type: Function,
+      default: void 0
+    },
+    onError: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["success", "error"],
+  setup(props, { slots, emit }) {
+    const { client } = useAuthOS();
+    const error = vue.ref(null);
+    vue.onMounted(async () => {
+      if (!client) {
+        error.value = "AuthOS client not initialized";
+        return;
+      }
+      const hash = window.location.hash.substring(1);
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get("access_token");
+      const refreshToken = params.get("refresh_token");
+      const errorParam = params.get("error");
+      const errorDescription = params.get("error_description");
+      if (errorParam) {
+        const msg = errorDescription || errorParam;
+        error.value = msg;
+        const e = new Error(msg);
+        emit("error", e);
+        props.onError?.(e);
+        return;
+      }
+      if (accessToken) {
+        try {
+          await client.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken || void 0
+          });
+          emit("success");
+          props.onSuccess?.();
+        } catch (err) {
+          const message = err.message || "Failed to set session";
+          error.value = message;
+          const e = err instanceof Error ? err : new Error(message);
+          emit("error", e);
+          props.onError?.(e);
+        }
+      } else {
+        const message = "No authentication tokens found in callback URL.";
+        error.value = message;
+        const e = new Error(message);
+        emit("error", e);
+        props.onError?.(e);
+      }
+    });
+    return () => {
+      const slotProps = {
+        error: error.value
+      };
+      if (slots.default) {
+        return slots.default(slotProps);
+      }
+      return vue.h("div", { "data-authos-callback": "" }, [
+        error.value ? vue.h("div", { "data-authos-error": "" }, error.value) : vue.h("div", { "data-authos-loading": "" }, "Completing sign in...")
+      ]);
+    };
+  }
+});
 
 Object.defineProperty(exports, "AuthErrorCodes", {
   enumerable: true,
@@ -1587,6 +1658,7 @@ Object.defineProperty(exports, "SsoApiError", {
 });
 exports.AUTH_OS_INJECTION_KEY = AUTH_OS_INJECTION_KEY;
 exports.AuthOSProvider = AuthOSProvider;
+exports.Callback = Callback;
 exports.MagicLinkSignIn = MagicLinkSignIn;
 exports.OAuthButton = OAuthButton;
 exports.OrganizationSwitcher = OrganizationSwitcher;

package/dist/index.mjs

@@ -1539,5 +1539,76 @@ var PasskeySignIn = defineComponent({
     };
   }
 });
+var Callback = defineComponent({
+  name: "Callback",
+  props: {
+    onSuccess: {
+      type: Function,
+      default: void 0
+    },
+    onError: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["success", "error"],
+  setup(props, { slots, emit }) {
+    const { client } = useAuthOS();
+    const error = ref(null);
+    onMounted(async () => {
+      if (!client) {
+        error.value = "AuthOS client not initialized";
+        return;
+      }
+      const hash = window.location.hash.substring(1);
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get("access_token");
+      const refreshToken = params.get("refresh_token");
+      const errorParam = params.get("error");
+      const errorDescription = params.get("error_description");
+      if (errorParam) {
+        const msg = errorDescription || errorParam;
+        error.value = msg;
+        const e = new Error(msg);
+        emit("error", e);
+        props.onError?.(e);
+        return;
+      }
+      if (accessToken) {
+        try {
+          await client.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken || void 0
+          });
+          emit("success");
+          props.onSuccess?.();
+        } catch (err) {
+          const message = err.message || "Failed to set session";
+          error.value = message;
+          const e = err instanceof Error ? err : new Error(message);
+          emit("error", e);
+          props.onError?.(e);
+        }
+      } else {
+        const message = "No authentication tokens found in callback URL.";
+        error.value = message;
+        const e = new Error(message);
+        emit("error", e);
+        props.onError?.(e);
+      }
+    });
+    return () => {
+      const slotProps = {
+        error: error.value
+      };
+      if (slots.default) {
+        return slots.default(slotProps);
+      }
+      return h("div", { "data-authos-callback": "" }, [
+        error.value ? h("div", { "data-authos-error": "" }, error.value) : h("div", { "data-authos-loading": "" }, "Completing sign in...")
+      ]);
+    };
+  }
+});
 
-export { AuthOSProvider, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, createAuthOS, useAllPermissions, useAnyPermission, useOrganization, usePermission, useUser };
+export { AuthOSProvider, Callback, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, createAuthOS, useAllPermissions, useAnyPermission, useOrganization, usePermission, useUser };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-vue",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Vue and Nuxt adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup",