fix(login): fix issue where logo is not shown on custom auth providers

sanity-io · Oct 18, 2023 · 364d617 · 364d617
1 parent 3e33c26
commit 364d617
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/sanity/src/core/form/inputs/index.ts b/packages/sanity/src/core/form/inputs/index.ts
@@ -1,5 +1,4 @@
 export type {PortableTextEditorElement} from './PortableText/Compositor'
-export type {RenderBlockActionsCallback, RenderBlockActionsProps} from '../types/_transitional'
 export * from './files/types'
 export * from './PortableText/PortableTextInput'
 export {PortableTextInput as BlockEditor} from './PortableText/PortableTextInput'

diff --git a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
@@ -4,7 +4,7 @@ import React, {useEffect, useState} from 'react'
 import type {Observable} from 'rxjs'
 import type {AuthConfig} from '../../../config'
 import {createHookFromObservableFactory} from '../../../util'
-import {providerLogos} from './providerLogos'
+import {CustomLogo, providerLogos} from './providerLogos'
 import type {LoginComponentProps} from './types'
 
 interface GetProvidersOptions extends AuthConfig {
@@ -156,7 +156,7 @@ export function createLoginComponent({
               // eslint-disable-next-line react/no-array-index-key
               key={`${provider.url}_${index}`}
               as="a"
-              icon={providerLogos[provider.name]}
+              icon={providerLogos[provider.name] || <CustomLogo provider={provider} />}
               href={createHrefForProvider({
                 loginMethod,
                 projectId,

diff --git a/packages/sanity/src/core/store/_legacy/authStore/providerLogos.tsx b/packages/sanity/src/core/store/_legacy/authStore/providerLogos.tsx
@@ -11,6 +11,12 @@ const GithubRoot = styled.svg(({theme}: {theme: Theme}) => {
   `
 })
 
+const CustomImage = styled.img`
+  height: 19px;
+  width: 19px;
+  object-fit: contain;
+`
+
 const GithubLogo = () => (
   <GithubRoot
     // data-sanity-icon="google-logo"
@@ -50,17 +56,16 @@ const GoogleLogo = () => (
   </svg>
 )
 
-function CustomLogo(props: {provider: AuthProvider}) {
+export function CustomLogo(props: {provider: AuthProvider}) {
   const {provider} = props
 
-  return (
-    provider.logo ? <img src={provider.logo} alt={`Logo for ${provider.name}`} /> : undefined
-  ) as any
+  return provider.logo ? (
+    <CustomImage src={provider.logo} alt={`Logo for ${provider.name}`} />
+  ) : undefined
 }
 
 export const providerLogos: Record<string, React.ComponentType<{provider: AuthProvider}>> = {
   google: GoogleLogo,
   github: GithubLogo,
-  custom: CustomLogo,
   // sanity: () => <SanityMonogram data-sanity-icon="" />,
 }