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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };

.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);
+ }
+ };