diff --git a/.changeset/wise-badgers-cover.md b/.changeset/wise-badgers-cover.md
new file mode 100644
index 00000000000..a65b4b606ea
--- /dev/null
+++ b/.changeset/wise-badgers-cover.md
@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduce `logoLinkUrl` prop in `appearance.layout`
+A new `logoLinkUrl` prop has been added to `appearance.layout` and used in `ApplicationLogo` to change the `href` of the link.
+By default, the logo link url will be the Home URL you've set in the Clerk Dashboard.
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
index ba697ad3428..f048de589b9 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
@@ -233,6 +233,7 @@ describe('AppearanceProvider layout flows', () => {
layout: {
helpPageUrl: 'test',
logoImageUrl: 'test',
+ logoLinkUrl: 'test',
privacyPageUrl: 'test',
termsPageUrl: 'test',
logoPlacement: 'inside',
@@ -249,6 +250,7 @@ describe('AppearanceProvider layout flows', () => {
const { result } = renderHook(() => useAppearance(), { wrapper });
expect(result.current.parsedLayout.helpPageUrl).toBe('test');
expect(result.current.parsedLayout.logoImageUrl).toBe('test');
+ expect(result.current.parsedLayout.logoLinkUrl).toBe('test');
expect(result.current.parsedLayout.privacyPageUrl).toBe('test');
expect(result.current.parsedLayout.termsPageUrl).toBe('test');
expect(result.current.parsedLayout.logoPlacement).toBe('inside');
@@ -265,6 +267,7 @@ describe('AppearanceProvider layout flows', () => {
layout: {
helpPageUrl: 'test2',
logoImageUrl: 'test2',
+ logoLinkUrl: 'test2',
privacyPageUrl: 'test2',
termsPageUrl: 'test2',
logoPlacement: 'outside',
@@ -281,6 +284,7 @@ describe('AppearanceProvider layout flows', () => {
const { result } = renderHook(() => useAppearance(), { wrapper });
expect(result.current.parsedLayout.helpPageUrl).toBe('test2');
expect(result.current.parsedLayout.logoImageUrl).toBe('test2');
+ expect(result.current.parsedLayout.logoLinkUrl).toBe('test2');
expect(result.current.parsedLayout.privacyPageUrl).toBe('test2');
expect(result.current.parsedLayout.termsPageUrl).toBe('test2');
expect(result.current.parsedLayout.logoPlacement).toBe('outside');
@@ -297,6 +301,7 @@ describe('AppearanceProvider layout flows', () => {
layout: {
helpPageUrl: 'test',
logoImageUrl: 'test',
+ logoLinkUrl: 'test',
privacyPageUrl: 'test',
termsPageUrl: 'test',
logoPlacement: 'inside',
@@ -309,6 +314,7 @@ describe('AppearanceProvider layout flows', () => {
layout: {
helpPageUrl: 'test2',
logoImageUrl: 'test2',
+ logoLinkUrl: 'test2',
privacyPageUrl: 'test2',
termsPageUrl: 'test2',
logoPlacement: 'outside',
@@ -325,6 +331,7 @@ describe('AppearanceProvider layout flows', () => {
const { result } = renderHook(() => useAppearance(), { wrapper });
expect(result.current.parsedLayout.helpPageUrl).toBe('test2');
expect(result.current.parsedLayout.logoImageUrl).toBe('test2');
+ expect(result.current.parsedLayout.logoLinkUrl).toBe('test2');
expect(result.current.parsedLayout.privacyPageUrl).toBe('test2');
expect(result.current.parsedLayout.termsPageUrl).toBe('test2');
expect(result.current.parsedLayout.logoPlacement).toBe('outside');
diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
index 1dac0b47036..b06aa2b6e90 100644
--- a/packages/clerk-js/src/ui/customizables/parseAppearance.ts
+++ b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -37,6 +37,7 @@ const defaultLayout: ParsedLayout = {
socialButtonsPlacement: 'top',
socialButtonsVariant: 'auto',
logoImageUrl: '',
+ logoLinkUrl: '',
showOptionalFields: true,
helpPageUrl: '',
privacyPageUrl: '',
diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
index f58463c2b85..5106e3b4687 100644
--- a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
+++ b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
@@ -32,6 +32,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
const { parsedLayout } = useAppearance();
const imageSrc = parsedLayout.logoImageUrl || logoImageUrl;
+ const logoUrl = parsedLayout.logoLinkUrl || homeUrl;
if (!imageSrc) {
return null;
@@ -64,7 +65,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
props.sx,
]}
>
- {homeUrl ? {image} : image}
+ {logoUrl ? {image} : image}
);
};
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 18ca64e5d20..9768adf3956 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -567,6 +567,14 @@ export type Layout = {
* @default undefined
*/
logoImageUrl?: string;
+ /**
+ * Controls where the browser will redirect to after the user clicks the application logo,
+ * usually found in the SignIn and SignUp components.
+ * If a URL is provided, it will be used as the `href` of the link.
+ * If a value is not passed in, the components will use the Home URL as set in the Clerk dashboard
+ * @default undefined
+ */
+ logoLinkUrl?: string;
/**
* Controls the variant that will be used for the social buttons.
* By default, the components will use block buttons if you have less than