Skip to content

Commit a5b046b

Browse files
author
Giannis Katsanos
committed
chore(types,clerk-js): Logo and favicon URLs
Instead of relying on the full serialized image response for display config logo and favicon, get the URLs directly. The Clerk API will include these URLs in the responses.
1 parent dd7fca2 commit a5b046b

3 files changed

Lines changed: 12 additions & 18 deletions

File tree

‎packages/clerk-js/src/core/resources/DisplayConfig.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import type {
2-
DisplayConfigJSON,
3-
DisplayConfigResource,
4-
DisplayThemeJSON,
5-
ImageJSON,
6-
PreferredSignInStrategy,
7-
} from '@clerk/types';
1+
import type { DisplayConfigJSON, DisplayConfigResource, DisplayThemeJSON, PreferredSignInStrategy } from '@clerk/types';
82

93
import { BaseResource } from './internal';
104

@@ -19,10 +13,10 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
1913
applicationName!: string;
2014
backendHost!: string;
2115
branded!: boolean;
22-
faviconImage!: ImageJSON;
2316
homeUrl!: string;
2417
instanceEnvironmentType!: string;
25-
logoImage!: ImageJSON;
18+
logoUrl!: string;
19+
faviconUrl!: string;
2620
preferredSignInStrategy!: PreferredSignInStrategy;
2721
signInUrl!: string;
2822
signUpUrl!: string;
@@ -42,8 +36,8 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
4236
this.applicationName = data.application_name;
4337
this.theme = data.theme;
4438
this.preferredSignInStrategy = data.preferred_sign_in_strategy;
45-
this.logoImage = data.logo_image;
46-
this.faviconImage = data.favicon_image;
39+
this.logoUrl = data.logo_url;
40+
this.faviconUrl = data.favicon_url;
4741
this.backendHost = data.backend_host;
4842
this.homeUrl = data.home_url;
4943
this.signInUrl = data.sign_in_url;

‎packages/clerk-js/src/ui/elements/ApplicationLogo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ type ApplicationLogoProps = PropsOfComponent<typeof Flex>;
2828
export const ApplicationLogo = (props: ApplicationLogoProps) => {
2929
const imageRef = React.useRef<HTMLImageElement>(null);
3030
const [loaded, setLoaded] = React.useState(false);
31-
const { logoImage, applicationName } = useEnvironment().displayConfig;
31+
const { logoUrl, applicationName } = useEnvironment().displayConfig;
3232
const { parsedLayout } = useAppearance();
3333
// TODO: Should we throw an error if logoImageUrl is not a valid url?
34-
const imageSrc = parsedLayout.logoImageUrl || logoImage?.public_url;
34+
const imageSrc = parsedLayout.logoImageUrl || logoUrl;
3535

3636
if (!imageSrc) {
3737
return null;

‎packages/types/src/displayConfig.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DisplayThemeJSON, ImageJSON } from './json';
1+
import { DisplayThemeJSON } from './json';
22
import { ClerkResource } from './resource';
33

44
export type PreferredSignInStrategy = 'password' | 'otp';
@@ -15,10 +15,10 @@ export interface DisplayConfigJSON {
1515
application_name: string;
1616
backend_host: string;
1717
branded: boolean;
18-
favicon_image: ImageJSON;
1918
home_url: string;
2019
instance_environment_type: string;
21-
logo_image: ImageJSON;
20+
logo_url: string;
21+
favicon_url: string;
2222
preferred_sign_in_strategy: PreferredSignInStrategy;
2323
sign_in_url: string;
2424
sign_up_url: string;
@@ -39,10 +39,10 @@ export interface DisplayConfigResource extends ClerkResource {
3939
applicationName: string;
4040
backendHost: string;
4141
branded: boolean;
42-
faviconImage: ImageJSON;
4342
homeUrl: string;
4443
instanceEnvironmentType: string;
45-
logoImage: ImageJSON;
44+
logoUrl: string;
45+
faviconUrl: string;
4646
preferredSignInStrategy: PreferredSignInStrategy;
4747
signInUrl: string;
4848
signUpUrl: string;

0 commit comments

Comments
 (0)