nuxt-convex-module 0.0.0

package/dist/runtime/polar/vue/components.js

@@ -0,0 +1,115 @@
+import { defineComponent, h, mergeProps, ref, watch } from "vue";
+import { useAction } from "../../vue/composables/use-action.js";
+import { useConvexNamespace } from "../../vue/provide.js";
+export const CustomerPortalLink = defineComponent({
+  name: "CustomerPortalLink",
+  inheritAttrs: false,
+  props: {
+    // Optional in the port: defaults to the auto-provided `api.billing` namespace.
+    polarApi: { type: Object, default: void 0 },
+    returnUrl: { type: String, default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    const polarApi = props.polarApi ?? useConvexNamespace("billing");
+    const generateCustomerPortalUrl = polarApi?.generateCustomerPortalUrl ? useAction(polarApi.generateCustomerPortalUrl) : void 0;
+    const portalUrl = ref();
+    if (import.meta.client && generateCustomerPortalUrl) {
+      watch(
+        () => props.returnUrl,
+        (returnUrl) => {
+          void generateCustomerPortalUrl({ returnUrl }).then((result) => {
+            if (result) {
+              portalUrl.value = result.url;
+            }
+          });
+        },
+        { immediate: true }
+      );
+    }
+    return () => {
+      if (!portalUrl.value) {
+        return null;
+      }
+      return h("a", { ...attrs, href: portalUrl.value, target: "_blank" }, slots.default?.());
+    };
+  }
+});
+export const CheckoutLink = defineComponent({
+  name: "CheckoutLink",
+  inheritAttrs: false,
+  props: {
+    // Optional in the port: defaults to the auto-provided `api.billing` namespace.
+    polarApi: { type: Object, default: void 0 },
+    productIds: { type: Array, required: true },
+    subscriptionId: { type: String, default: void 0 },
+    metadata: { type: Object, default: void 0 },
+    trialInterval: { type: String, default: void 0 },
+    trialIntervalCount: { type: Number, default: void 0 },
+    locale: { type: String, default: void 0 },
+    theme: { type: String, default: "dark" },
+    embed: { type: Boolean, default: true },
+    lazy: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    const polarApi = props.polarApi ?? useConvexNamespace("billing");
+    const generateCheckoutLink = polarApi?.generateCheckoutLink ? useAction(polarApi.generateCheckoutLink) : void 0;
+    const checkoutLink = ref();
+    const isLoading = ref(false);
+    if (import.meta.client && generateCheckoutLink) {
+      watch(
+        () => [props.lazy, props.productIds, props.subscriptionId, props.metadata, props.embed, props.trialInterval, props.trialIntervalCount, props.locale],
+        async () => {
+          if (props.lazy) return;
+          if (props.embed) {
+            const { PolarEmbedCheckout } = await import("@polar-sh/checkout/embed");
+            PolarEmbedCheckout.init();
+          }
+          void generateCheckoutLink({
+            productIds: props.productIds,
+            subscriptionId: props.subscriptionId,
+            metadata: props.metadata,
+            origin: window.location.origin,
+            successUrl: window.location.href,
+            trialInterval: props.trialInterval,
+            trialIntervalCount: props.trialIntervalCount,
+            locale: props.locale
+          }).then(({ url }) => {
+            checkoutLink.value = url;
+          });
+        },
+        { immediate: true }
+      );
+    }
+    const handleClick = generateCheckoutLink ? async (e) => {
+      e.preventDefault();
+      if (isLoading.value) return;
+      isLoading.value = true;
+      try {
+        const { url } = await generateCheckoutLink({
+          productIds: props.productIds,
+          subscriptionId: props.subscriptionId,
+          metadata: props.metadata,
+          origin: window.location.origin,
+          successUrl: window.location.href,
+          trialInterval: props.trialInterval,
+          trialIntervalCount: props.trialIntervalCount,
+          locale: props.locale
+        });
+        if (props.embed) {
+          const { PolarEmbedCheckout } = await import("@polar-sh/checkout/embed");
+          await PolarEmbedCheckout.create(url, { theme: props.theme });
+        } else {
+          window.open(url, "_blank");
+        }
+      } finally {
+        isLoading.value = false;
+      }
+    } : void 0;
+    return () => h("a", mergeProps(attrs, {
+      "href": checkoutLink.value ?? (props.lazy ? "#" : void 0),
+      "onClick": props.lazy ? handleClick : void 0,
+      "data-polar-checkout-theme": props.theme,
+      ...!props.lazy && props.embed ? { "data-polar-checkout": true } : {}
+    }), slots.default?.());
+  }
+});

package/dist/runtime/vue/auth/helpers.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Renders the default slot if the client is authenticated.
+ *
+ * @example
+ * ```vue
+ * <Authenticated>
+ *   <p>You are logged in!</p>
+ * </Authenticated>
+ * ```
+ *
+ * @public
+ */
+export declare const Authenticated: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders the default slot if the client is using authentication but is not authenticated.
+ *
+ * @example
+ * ```vue
+ * <Unauthenticated>
+ *   <p>Please log in.</p>
+ * </Unauthenticated>
+ * ```
+ *
+ * @public
+ */
+export declare const Unauthenticated: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders the default slot if the client isn't using authentication or is in the process
+ * of authenticating.
+ *
+ * @example
+ * ```vue
+ * <AuthLoading>
+ *   <p>Checking authentication...</p>
+ * </AuthLoading>
+ * ```
+ *
+ * @public
+ */
+export declare const AuthLoading: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders the default slot while the client is refreshing the auth token for an
+ * already-authenticated session (the server rejected the current token and
+ * the socket is paused while a new one is fetched). Routine background
+ * token rotation does not trigger this state.
+ *
+ * Whether used inside of `<Authenticated>` or not, the default slot will only be
+ * rendered if the user is authenticated.
+ *
+ * @example
+ * ```vue
+ * <AuthRefreshing>
+ *   <p>Refreshing token...</p>
+ * </AuthRefreshing>
+ * ```
+ *
+ * @public
+ */
+export declare const AuthRefreshing: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/vue/auth/helpers.js

@@ -0,0 +1,50 @@
+import { defineComponent } from "vue";
+import { useConvexAuth } from "./index.js";
+export const Authenticated = defineComponent({
+  name: "Authenticated",
+  setup(_, { slots }) {
+    const { isLoading, isAuthenticated } = useConvexAuth();
+    return () => {
+      if (isLoading.value || !isAuthenticated.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+export const Unauthenticated = defineComponent({
+  name: "Unauthenticated",
+  setup(_, { slots }) {
+    const { isLoading, isAuthenticated } = useConvexAuth();
+    return () => {
+      if (isLoading.value || isAuthenticated.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+export const AuthLoading = defineComponent({
+  name: "AuthLoading",
+  setup(_, { slots }) {
+    const { isLoading } = useConvexAuth();
+    return () => {
+      if (!isLoading.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+export const AuthRefreshing = defineComponent({
+  name: "AuthRefreshing",
+  setup(_, { slots }) {
+    const { isAuthenticated, isRefreshing } = useConvexAuth();
+    return () => {
+      if (!isAuthenticated.value || !isRefreshing.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});

package/dist/runtime/vue/auth/index.d.ts

@@ -0,0 +1,125 @@
+import type { AuthTokenFetcher } from 'convex/browser';
+import { type ComputedRef, type EffectScope, type InjectionKey, type MaybeRef, type MaybeRefOrGetter } from 'vue';
+export type IConvexVueClient = {
+    setAuth(fetchToken: AuthTokenFetcher, onChange: (isAuthenticated: boolean) => void, onRefreshChange?: (isRefreshing: boolean) => void): void;
+    clearAuth(): void;
+};
+/**
+ * Type representing the state of an auth integration with Convex.
+ *
+ * - `isLoading`: the client is still resolving the initial auth state and
+ *   waiting for the server to confirm the current token.
+ * - `isAuthenticated`: the server has confirmed the current token.
+ * - `isRefreshing`: the server rejected a previously-confirmed token and the
+ *   socket is paused while a replacement is fetched. Only ever `true` when
+ *   `isAuthenticated` is also `true`. Routine background token rotation does
+ *   not trigger this state.
+ *
+ * Each field is a `ComputedRef` (the Vue translation of upstream's re-rendered
+ * plain booleans), so the upstream destructuring idiom stays reactive:
+ * `const { isLoading, isAuthenticated } = useConvexAuth()`.
+ *
+ * @public
+ */
+export type ConvexAuthState = {
+    isLoading: ComputedRef<boolean>;
+    isAuthenticated: ComputedRef<boolean>;
+    isRefreshing: ComputedRef<boolean>;
+};
+export declare const ConvexAuthStateKey: InjectionKey<ConvexAuthState>;
+/**
+ * Get the {@link ConvexAuthState} within a Vue component.
+ *
+ * This relies on a Convex auth integration provider being above in the Vue
+ * component tree. See {@link ConvexAuthState} for the meaning of each field.
+ *
+ * @returns The current {@link ConvexAuthState}.
+ *
+ * @public
+ */
+export declare function useConvexAuth(): {
+    isLoading: ComputedRef<boolean>;
+    isAuthenticated: ComputedRef<boolean>;
+    isRefreshing: ComputedRef<boolean>;
+};
+/**
+ * Options for {@link provideConvexAuth} — the Vue translation of the props of
+ * upstream's `ConvexProviderWithAuth` component.
+ */
+export interface ConvexAuthProviderOptions {
+    client: IConvexVueClient;
+    useAuth: () => {
+        isLoading: MaybeRefOrGetter<boolean>;
+        isAuthenticated: MaybeRefOrGetter<boolean>;
+        /**
+         * The token fetcher. May be a `Ref`/`ComputedRef` whose *identity* changes
+         * when re-authentication is needed — the Vue translation of upstream
+         * re-running its `setAuth` effect when the `useAuth` prop returns a new
+         * `fetchAccessToken` function between renders (e.g. Clerk's `useCallback`
+         * deps `[orgId, orgRole]`). A plain function never re-triggers.
+         *
+         * (A getter is deliberately not accepted here: the fetcher is itself a
+         * function, so a getter would be indistinguishable from the value.)
+         */
+        fetchAccessToken: MaybeRef<AuthTokenFetcher>;
+        /**
+         * Alternative re-authentication trigger for providers that hand out a
+         * stable fetcher function: when this value changes, auth state transitions
+         * back to loading, `clearAuth` runs, and `fetchAccessToken` is called
+         * again against the new auth context.
+         */
+        authVersion?: MaybeRefOrGetter<unknown>;
+    };
+}
+/**
+ * A replacement for the plain Convex client provide (upstream's
+ * `ConvexProvider`) which additionally provides {@link ConvexAuthState} to
+ * descendants of the calling component.
+ *
+ * Use this to integrate any auth provider with Convex. The `useAuth` option
+ * should be a Vue composable that returns the provider's authentication state
+ * and a function to fetch a JWT access token.
+ *
+ * If the returned `fetchAccessToken` ref identity (or the optional
+ * `authVersion` value) updates then auth state
+ * will transition to loading and the `fetchAccessToken()` function called again.
+ *
+ * See [Custom Auth Integration](https://docs.convex.dev/auth/advanced/custom-auth) for more information.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useAuth } from '~/composables/useAuth'  // your auth provider
+ *
+ * const { client } = useNuxtApp().$convex
+ * const authState = provideConvexAuth({ client, useAuth })
+ * </script>
+ * ```
+ *
+ * @param options - Auth integration options including the Convex client and
+ *   an `useAuth` factory that returns loading state and a token fetcher.
+ * @returns The reactive auth state.
+ *
+ * @public
+ */
+export declare function provideConvexAuth(options: ConvexAuthProviderOptions): ConvexAuthState;
+/**
+ * Build reactive {@link ConvexAuthState} and wire watchers between the
+ * external auth provider and the Convex client, without calling `provide()` —
+ * the body of upstream's `ConvexProviderWithAuth` component.
+ *
+ * Use this when you need to install the state at the Nuxt app level
+ * (`nuxtApp.vueApp.provide`) rather than from a component's setup function.
+ *
+ * When `scope` is provided, all watchers are created inside that
+ * {@link EffectScope} so callers can dispose them later.
+ */
+export declare function createConvexAuthState(options: ConvexAuthProviderOptions, scope?: EffectScope): ConvexAuthState;
+/**
+ * Create a fresh {@link EffectScope} and build a Convex auth state inside it.
+ * The scope is returned so the caller can `.stop()` it on teardown.
+ */
+export declare function createScopedConvexAuthState(options: ConvexAuthProviderOptions): {
+    state: ConvexAuthState;
+    scope: EffectScope;
+};

package/dist/runtime/vue/auth/index.js

@@ -0,0 +1,97 @@
+import { computed, effectScope, inject, provide, ref, toValue, unref, watch, watchEffect } from "vue";
+export const ConvexAuthStateKey = Symbol("ConvexAuthState");
+export function useConvexAuth() {
+  const authContext = inject(ConvexAuthStateKey);
+  if (authContext === void 0) {
+    throw new Error(
+      "Could not find Convex auth context. Ensure `provideConvexAuth` has been called in an ancestor component or that the Convex auth plugin is installed, or you might have two instances of the `nuxt-convex-module` runtime loaded in your project."
+    );
+  }
+  return authContext;
+}
+export function provideConvexAuth(options) {
+  const authState = createConvexAuthState(options);
+  provide(ConvexAuthStateKey, authState);
+  return authState;
+}
+export function createConvexAuthState(options, scope) {
+  const { client, useAuth } = options;
+  const {
+    isLoading: authProviderLoading,
+    isAuthenticated: authProviderAuthenticated,
+    fetchAccessToken,
+    authVersion
+  } = useAuth();
+  const isConvexAuthenticated = ref(null);
+  const isRefreshing = ref(false);
+  const register = () => {
+    watch(
+      () => [
+        toValue(authProviderLoading),
+        toValue(authProviderAuthenticated),
+        isConvexAuthenticated.value
+      ],
+      ([authProviderLoading2, authProviderAuthenticated2]) => {
+        if (authProviderLoading2 && isConvexAuthenticated.value !== null) {
+          isConvexAuthenticated.value = null;
+          isRefreshing.value = false;
+        }
+        if (!authProviderLoading2 && !authProviderAuthenticated2 && isConvexAuthenticated.value !== false) {
+          isConvexAuthenticated.value = false;
+          isRefreshing.value = false;
+        }
+      },
+      { immediate: true }
+    );
+    watchEffect((onCleanup) => {
+      if (import.meta.server) {
+        return;
+      }
+      let isThisEffectRelevant = true;
+      void toValue(authProviderLoading);
+      void toValue(authVersion);
+      const fetchToken = unref(fetchAccessToken);
+      if (toValue(authProviderAuthenticated)) {
+        client.setAuth(
+          fetchToken,
+          (convexReportsIsAuthenticated) => {
+            if (isThisEffectRelevant) {
+              isConvexAuthenticated.value = convexReportsIsAuthenticated;
+            }
+          },
+          // Upstream names this callback's parameter `isRefreshing` too; that
+          // would shadow the ref here.
+          (refreshing) => {
+            if (isThisEffectRelevant) {
+              isRefreshing.value = refreshing;
+            }
+          }
+        );
+        onCleanup(() => {
+          isThisEffectRelevant = false;
+          client.clearAuth();
+          isConvexAuthenticated.value = null;
+          isRefreshing.value = false;
+        });
+      }
+    });
+  };
+  if (scope) {
+    scope.run(register);
+  } else {
+    register();
+  }
+  const isAuthenticated = computed(
+    () => toValue(authProviderAuthenticated) && (isConvexAuthenticated.value ?? false)
+  );
+  return {
+    isLoading: computed(() => isConvexAuthenticated.value === null),
+    isAuthenticated,
+    isRefreshing: computed(() => isRefreshing.value && isAuthenticated.value)
+  };
+}
+export function createScopedConvexAuthState(options) {
+  const scope = effectScope(true);
+  const state = createConvexAuthState(options, scope);
+  return { state, scope };
+}