chore(astro): Add unstyled components

.changeset/hungry-pumas-protect.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add unstyled authentication button components for Astro and React integration

packages/astro/package.json

@@ -97,6 +97,8 @@
     "./components/react/*": "./components/react/*",
     "./components/interactive": "./components/interactive/index.ts",
     "./components/interactive/*": "./components/interactive/*",
+    "./components/unstyled": "./components/unstyled/index.ts",
+    "./components/unstyled/*": "./components/unstyled/*",
     "./components/*": "./components/*",
     "./package.json": "./package.json"
   },

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

@@ -0,0 +1,48 @@
+---
+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";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const {
+  as: Tag = 'button',
+  forceRedirectUrl,
+  fallbackRedirectUrl,
+  signUpFallbackRedirectUrl,
+  signUpForceRedirectUrl,
+  mode,
+  ...elementProps
+} = Astro.props
+
+const signInOptions = {
+  forceRedirectUrl,
+  fallbackRedirectUrl,
+  signUpFallbackRedirectUrl,
+  signUpForceRedirectUrl,
+};
+---
+
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+  <slot>Sign in</slot>
+</Tag >
+
+<script is:inline define:vars={{ signInOptions, mode, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener("click", () => {
+    const clerk = window.Clerk
+
+    if (mode === 'modal') {
+      return clerk.openSignIn(signInOptions);
+    }
+
+    return clerk.redirectToSignIn({
+      ...signInOptions,
+      signInFallbackRedirectUrl: signInOptions.fallbackRedirectUrl,
+      signInForceRedirectUrl: signInOptions.forceRedirectUrl,
+    });
+  });
+</script>

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

@@ -0,0 +1,28 @@
+---
+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";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const {
+  as: Tag = 'button',
+  redirectUrl = '/',
+  sessionId,
+  ...elementProps
+} = Astro.props
+---
+
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+  <slot>Sign out</slot>
+</Tag >
+
+<script is:inline define:vars={{ redirectUrl, sessionId, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener("click", () => {
+    window.Clerk.signOut({ redirectUrl, sessionId })
+  });
+</script>

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

@@ -0,0 +1,50 @@
+---
+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";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const {
+  as: Tag = 'button',
+  fallbackRedirectUrl,
+  forceRedirectUrl,
+  signInFallbackRedirectUrl,
+  signInForceRedirectUrl,
+  mode,
+  unsafeMetadata,
+  ...elementProps
+} = Astro.props
+
+const signUpOptions = {
+  fallbackRedirectUrl,
+  forceRedirectUrl,
+  signInFallbackRedirectUrl,
+  signInForceRedirectUrl,
+  unsafeMetadata,
+}
+---
+
+<Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+  <slot>Sign up</slot>
+</Tag >
+
+<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener("click", () => {
+    const clerk = window.Clerk
+
+    if (mode === 'modal') {
+      return clerk.openSignUp(signUpOptions);
+    }
+
+    return clerk.redirectToSignUp({
+      ...signUpOptions,
+      signUpFallbackRedirectUrl: signUpOptions.fallbackRedirectUrl,
+      signUpForceRedirectUrl: signUpOptions.forceRedirectUrl,
+    });
+  });
+</script>

packages/astro/src/astro-components/unstyled/index.ts

@@ -0,0 +1,8 @@
+// The `ts-ignore` comments here are necessary because we're importing this file inside the `astro:components`
+// virtual module's types, which means that `tsc` will try to resolve these imports. Don't mind the editor errors.
+// @ts-ignore
+export { default as SignInButton } from './SignInButton.astro';
+// @ts-ignore
+export { default as SignUpButton } from './SignUpButton.astro';
+// @ts-ignore
+export { default as SignOutButton } from './SignOutButton.astro';

packages/astro/src/client/react/SignInButton.tsx

@@ -0,0 +1,46 @@
+import type { SignInProps } from '@clerk/types';
+import React from 'react';
+
+import type { SignInButtonProps } from './types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
+
+export type { SignInButtonProps };
+
+export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
+  const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
+    props;
+  children = normalizeWithDefaultValue(children, 'Sign in');
+  const child = assertSingleChild(children)('SignInButton');
+
+  const clickHandler = () => {
+    const opts: SignInProps = {
+      forceRedirectUrl,
+      fallbackRedirectUrl,
+      signUpFallbackRedirectUrl,
+      signUpForceRedirectUrl,
+    };
+
+    if (!clerk) {
+      return;
+    }
+
+    if (mode === 'modal') {
+      return clerk.openSignIn(opts);
+    }
+    return clerk.redirectToSignIn({
+      ...opts,
+      signInFallbackRedirectUrl: fallbackRedirectUrl,
+      signInForceRedirectUrl: forceRedirectUrl,
+    });
+  };
+
+  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+    if (child && typeof child === 'object' && 'props' in child) {
+      await safeExecute(child.props.onClick)(e);
+    }
+    return clickHandler();
+  };
+
+  const childProps = { ...rest, onClick: wrappedChildClickHandler };
+  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+}, 'SignInButton');

packages/astro/src/client/react/SignOutButton.tsx

@@ -0,0 +1,28 @@
+import type { SignOutOptions } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type SignOutButtonProps = SignOutOptions & {
+  children?: React.ReactNode;
+};
+
+export const SignOutButton = withClerk(
+  ({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
+    const { redirectUrl = '/', sessionId, ...rest } = props;
+
+    children = normalizeWithDefaultValue(children, 'Sign out');
+    const child = assertSingleChild(children)('SignOutButton');
+
+    const clickHandler = () => clerk?.signOut({ redirectUrl, sessionId });
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      await safeExecute((child as any).props.onClick)(e);
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignOutButton',
+);

packages/astro/src/client/react/SignUpButton.tsx

@@ -0,0 +1,56 @@
+import type { SignUpProps } from '@clerk/types';
+import React from 'react';
+
+import type { SignUpButtonProps } from './types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
+
+export type { SignUpButtonProps };
+
+export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
+  const {
+    fallbackRedirectUrl,
+    forceRedirectUrl,
+    signInFallbackRedirectUrl,
+    signInForceRedirectUrl,
+    mode,
+    unsafeMetadata,
+    ...rest
+  } = props;
+
+  children = normalizeWithDefaultValue(children, 'Sign up');
+  const child = assertSingleChild(children)('SignUpButton');
+
+  const clickHandler = () => {
+    const opts: SignUpProps = {
+      fallbackRedirectUrl,
+      forceRedirectUrl,
+      signInFallbackRedirectUrl,
+      signInForceRedirectUrl,
+      unsafeMetadata,
+    };
+
+    if (!clerk) {
+      return;
+    }
+
+    if (mode === 'modal') {
+      return clerk.openSignUp(opts);
+    }
+
+    return clerk.redirectToSignUp({
+      ...opts,
+      signUpFallbackRedirectUrl: fallbackRedirectUrl,
+      signUpForceRedirectUrl: forceRedirectUrl,
+    });
+  };
+
+  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+    if (child && typeof child === 'object' && 'props' in child) {
+      await safeExecute(child.props.onClick)(e);
+    }
+    return clickHandler();
+  };
+
+  const childProps = { ...rest, onClick: wrappedChildClickHandler };
+  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+}, 'SignUpButton');

packages/astro/src/client/react/index.ts

@@ -1,3 +1,10 @@
+import { SignInButton, type SignInButtonProps } from './SignInButton';
+import { SignOutButton, type SignOutButtonProps } from './SignOutButton';
+import { SignUpButton, type SignUpButtonProps } from './SignUpButton';
+
 export * from './uiComponents';
 export * from './controlComponents';
 export * from './hooks';
+export { SignInButton, SignOutButton, SignUpButton };
+
+export type { SignInButtonProps, SignOutButtonProps, SignUpButtonProps };

packages/astro/src/client/react/types.ts

@@ -0,0 +1,23 @@
+import type { SignInProps, SignUpProps } from '@clerk/types';
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+type ButtonProps = {
+  mode?: 'redirect' | 'modal';
+  children?: React.ReactNode;
+};
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+export type SignInButtonProps = ButtonProps &
+  Pick<
+    SignInProps,
+    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl'
+  >;
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+export type SignUpButtonProps = {
+  unsafeMetadata?: SignUpUnsafeMetadata;
+} & ButtonProps &
+  Pick<
+    SignUpProps,
+    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signInForceRedirectUrl' | 'signInFallbackRedirectUrl'
+  >;

packages/astro/src/client/react/utils.tsx

@@ -37,3 +37,34 @@ export const withClerk = <P extends { clerk: LoadedClerk | undefined | null }>(
 export type WithClerkProp<T = unknown> = T & {
   clerk: LoadedClerk | undefined | null;
 };
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+export const assertSingleChild =
+  (children: React.ReactNode) =>
+  (name: 'SignInButton' | 'SignUpButton' | 'SignOutButton' | 'SignInWithMetamaskButton') => {
+    try {
+      return React.Children.only(children);
+    } catch (e) {
+      return `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
+    }
+  };
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+export const normalizeWithDefaultValue = (children: React.ReactNode | undefined, defaultText: string) => {
+  if (!children) {
+    children = defaultText;
+  }
+  if (typeof children === 'string') {
+    children = <button type='button'>{children}</button>;
+  }
+  return children;
+};
+
+// TODO-SHARED: Duplicate from @clerk/clerk-react
+export const safeExecute =
+  (cb: unknown) =>
+  (...args: any) => {
+    if (cb && typeof cb === 'function') {
+      return cb(...args);
+    }
+  };