chore(astro): Move safe id generation to a shared function

.changeset/lovely-parents-swim.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add a reusable ID generation function

packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

@@ -4,9 +4,9 @@ interface Props {
   component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
 }
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const { component, ...props } = Astro.props
 ---

packages/astro/src/astro-components/unstyled/SignInButton.astro

@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignInProps } from "@clerk/types";
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignInProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

packages/astro/src/astro-components/unstyled/SignOutButton.astro

@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignOutOptions } from '@clerk/types';
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<{ as: Tag; } & SignOutOptions>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

packages/astro/src/astro-components/unstyled/SignUpButton.astro

@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignUpProps } from "@clerk/types";
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignUpProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

packages/astro/src/internal/index.ts

@@ -11,3 +11,5 @@ import { createInjectionScriptRunner } from './create-injection-script-runner';
 const runInjectionScript = createInjectionScriptRunner(createClerkInstance);
 
 export { runInjectionScript };
+
+export { generateSafeId } from './utils/generateSafeId';

packages/astro/src/internal/utils/generateSafeId.ts

@@ -0,0 +1,10 @@
+import { customAlphabet, urlAlphabet } from 'nanoid';
+
+/**
+ * Generates a safe, URL-friendly unique identifier.
+ *
+ * @example
+ * const id = generateSafeId();
+ * console.log(id); // Outputs something like: "f3x2P9Xn1K"
+ */
+export const generateSafeId = (defaultSize = 10) => customAlphabet(urlAlphabet, defaultSize)();