fix(pages): cleanup oauth provider branded buttons (#10542)

nextauthjs · Apr 14, 2024 · 710df18 · 710df18
1 parent 1d422e6
commit 710df18
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 99 deletions.
diff --git a/packages/core/src/lib/pages/signin.tsx b/packages/core/src/lib/pages/signin.tsx
@@ -20,32 +20,6 @@ const signinErrors: Record<SignInPageErrorParam | "default", string> = {
     "Sign in failed. Check the details you provided are correct.",
   SessionRequired: "Please sign in to access this page.",
 }
-function hexToRgba(hex?: string, alpha = 1) {
-  if (!hex) {
-    return
-  }
-  // Remove the "#" character if it's included
-  hex = hex.replace(/^#/, "")
-
-  // Expand 3-digit hex codes to their 6-digit equivalents
-  if (hex.length === 3) {
-    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
-  }
-
-  // Parse the hex value to separate R, G, and B components
-  const bigint = parseInt(hex, 16)
-  const r = (bigint >> 16) & 255
-  const g = (bigint >> 8) & 255
-  const b = bigint & 255
-
-  // Ensure the alpha value is within the valid range [0, 1]
-  alpha = Math.min(Math.max(alpha, 0), 1)
-
-  // Construct the RGBA string
-  const rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`
-
-  return rgba
-}
 
 function ConditionalUIScript(providerID: string) {
   const startConditionalUIScript = `
@@ -127,17 +101,15 @@ export default function SigninPage(props: {
         )}
         {theme?.logo && <img src={theme.logo} alt="Logo" className="logo" />}
         {providers.map((provider, i) => {
-          let bg, text, logo, logoDark, bgDark, textDark
+          let bg, brandColor, logo
           if (provider.type === "oauth" || provider.type === "oidc") {
             ;({
-              bg = "",
-              text = "",
+              bg = "#fff",
+              brandColor,
               logo = `${providerLogoPath}/${provider.id}.svg`,
-              bgDark = bg,
-              textDark = text,
-              logoDark = `${providerLogoPath}/${provider.id}.svg`,
             } = provider.style ?? {})
           }
+          const color = brandColor ?? bg ?? "#fff"
           return (
             <div key={provider.id} className="provider">
               {provider.type === "oauth" || provider.type === "oidc" ? (
@@ -154,12 +126,10 @@ export default function SigninPage(props: {
                     type="submit"
                     className="button"
                     style={{
-                      "--provider-bg": bg,
-                      "--provider-dark-bg": bgDark,
-                      "--provider-color": text,
-                      "--provider-dark-color": textDark,
-                      "--provider-bg-hover": hexToRgba(bg, 0.8),
-                      "--provider-dark-bg-hover": hexToRgba(bgDark, 0.8),
+                      "--provider-bg": "#fff",
+                      "--provider-bg-hover": `color-mix(in srgb, ${color} 30%, #fff)`,
+                      "--provider-dark-bg": "#161b22",
+                      "--provider-dark-bg-hover": `color-mix(in srgb, ${color} 30%, #000)`,
                     }}
                     tabIndex={0}
                   >
@@ -172,16 +142,16 @@ export default function SigninPage(props: {
                         src={logo}
                       />
                     )}
-                    {logoDark && (
-                      <img
-                        loading="lazy"
-                        height={24}
-                        width={24}
-                        id="provider-logo-dark"
-                        src={logoDark}
-                      />
-                    )}
-                    <span>Sign in with {provider.name}</span>
+                    <span
+                      style={{
+                        filter:
+                          "invert(1) grayscale(1) brightness(1.3) contrast(9000)",
+                        "mix-blend-mode": "luminosity",
+                        opacity: 0.95,
+                      }}
+                    >
+                      Sign in with {provider.name}
+                    </span>
                   </button>
                 </form>
               ) : null}

diff --git a/packages/core/src/lib/pages/styles.css b/packages/core/src/lib/pages/styles.css
@@ -47,28 +47,27 @@
 
   button,
   a.button {
-    color: var(--provider-dark-color, var(--color-primary));
-    background-color: var(--provider-dark-bg, var(--color-background));
+    color: var(--provider-dark-color, var(--color-primary)) !important;
+    background-color: var(--provider-dark-bg,
+        var(--color-background)) !important;
+
     &:hover {
-      background-color: var(
-        --provider-dark-bg-hover,
-        var(--color-background-hover)
-      ) !important;
+      background-color: var(--provider-dark-bg-hover,
+          var(--color-background-hover)) !important;
+    }
+
+    span {
+      color: var(--provider-dark-bg) !important;
     }
-  }
-  #provider-logo {
-    display: none !important;
-  }
-  #provider-logo-dark {
-    width: 25px;
-    display: block !important;
   }
 }
+
 html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
 *,
 *:before,
 *:after {
@@ -136,10 +135,6 @@ input[type] {
   font-size: 1rem;
   border-radius: var(--border-radius);
   color: var(--color-text);
-
-  &:focus {
-    box-shadow: none;
-  }
 }
 
 p {
@@ -166,13 +161,13 @@ button,
 a.button {
   padding: 0.75rem 1rem;
   color: var(--provider-color, var(--color-primary));
-  background-color: var(--provider-bg);
-  font-size: 1.1rem;
-  min-height: 62px;
-  border-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--provider-bg, var(--color-background));
+  border: 1px solid #00000031;
+  font-size: 0.9rem;
+  height: 50px;
   border-radius: var(--border-radius);
-  transition: all 0.1s ease-in-out;
-  font-weight: 500;
+  transition: background-color 250ms ease-in-out;
+  font-weight: 300;
   position: relative;
   display: flex;
   align-items: center;
@@ -182,16 +177,19 @@ a.button {
     background-color: var(--provider-bg-hover, var(--color-background-hover));
     cursor: pointer;
   }
+
   &:active {
     cursor: pointer;
   }
+
+  span {
+    color: #fff;
+  }
+
   #provider-logo {
     width: 25px;
     display: block;
   }
-  #provider-logo-dark {
-    display: none;
-  }
 }
 
 #submitButton {
@@ -200,10 +198,8 @@ a.button {
   width: 100%;
 
   &:hover {
-    background-color: var(
-      --button-hover-bg,
-      var(--color-info-hover)
-    ) !important;
+    background-color: var(--button-hover-bg,
+        var(--color-info-hover)) !important;
   }
 }
 
@@ -228,7 +224,7 @@ a.site {
   padding: 0;
   box-sizing: border-box;
 
-  > div {
+  >div {
     text-align: center;
   }
 }
@@ -284,7 +280,7 @@ a.site {
     }
   }
 
-  > div,
+  >div,
   form {
     display: block;
 
@@ -297,7 +293,7 @@ a.site {
     }
   }
 
-  .provider + .provider {
+  .provider+.provider {
     margin-top: 1rem;
   }
 }
@@ -311,12 +307,22 @@ a.site {
 
 .card {
   background-color: var(--color-background-card);
-  border-radius: 2rem;
+  border-radius: 1rem;
   padding: 1.25rem 2rem;
 
   .header {
     color: var(--color-primary);
   }
+
+  input[type]::placeholder {
+    color: color-mix(in srgb,
+        var(--color-text) 20%,
+        var(--color-button-active-background));
+  }
+
+  input[type] {
+    background: color-mix(in srgb, var(--color-background-card) 95%, black);
+  }
 }
 
 .section-header {
@@ -329,6 +335,7 @@ a.site {
     width: 368px;
   }
 }
+
 @media screen and (max-width: 450px) {
   .card {
     margin: 1rem 0;

diff --git a/packages/core/src/providers/boxyhq-saml.ts b/packages/core/src/providers/boxyhq-saml.ts
@@ -136,6 +136,9 @@ export default function SAMLJackson<P extends BoxyHQSAMLProfile>(
         image: null,
       }
     },
+    style: {
+      brandColor: "#25c2a0",
+    },
     options,
   }
 }
diff --git a/packages/core/src/providers/cognito.ts b/packages/core/src/providers/cognito.ts
@@ -80,7 +80,9 @@ export default function Cognito<P extends CognitoProfile>(
     id: "cognito",
     name: "Cognito",
     type: "oidc",
-    style: { bg: "#fff", text: "#C17B9E" },
+    style: {
+      brandColor: "#C17B9E",
+    },
     options,
   }
 }
diff --git a/packages/core/src/providers/coinbase.ts b/packages/core/src/providers/coinbase.ts
@@ -80,6 +80,9 @@ export default function Coinbase(
         image: profile.data.avatar_url,
       }
     },
+    style: {
+      brandColor: "#0052ff",
+    },
     options,
   }
 }
diff --git a/packages/core/src/providers/dropbox.ts b/packages/core/src/providers/dropbox.ts
@@ -76,6 +76,7 @@ export default function Dropbox(
         image: profile.profile_photo_url,
       }
     },
+    style: { brandColor: "#0061fe" },
     options,
   }
 }
diff --git a/packages/core/src/providers/google.ts b/packages/core/src/providers/google.ts
@@ -142,7 +142,9 @@ export default function Google<P extends GoogleProfile>(
     name: "Google",
     type: "oidc",
     issuer: "https://accounts.google.com",
-    style: { bg: "#fff", text: "#000" },
+    style: {
+      brandColor: "#1a73e8",
+    },
     options,
   }
 }
diff --git a/packages/core/src/providers/keycloak.ts b/packages/core/src/providers/keycloak.ts
@@ -99,7 +99,7 @@ export default function Keycloak<P extends KeycloakProfile>(
     id: "keycloak",
     name: "Keycloak",
     type: "oidc",
-    style: { bg: "#fff", text: "#000" },
+    style: { brandColor: "#428bca" },
     options,
   }
 }
diff --git a/packages/core/src/providers/netlify.ts b/packages/core/src/providers/netlify.ts
@@ -77,6 +77,9 @@ export default function Netlify(
         image: profile.avatar_url,
       }
     },
+    style: {
+      brandColor: "#32e6e2",
+    },
     options: config,
   }
 }
diff --git a/packages/core/src/providers/oauth.ts b/packages/core/src/providers/oauth.ts
@@ -99,11 +99,15 @@ export type AccountCallback = (tokens: TokenSet) => TokenSet | undefined | void
 
 export interface OAuthProviderButtonStyles {
   logo?: string
-  logoDark?: string
-  bg: string
-  bgDark?: string
-  text: string
-  textDark?: string
+  /**
+   * @deprecated
+   */
+  text?: string
+  /**
+   * @deprecated Please use 'brandColor' instead
+   */
+  bg?: string
+  brandColor?: string
 }
 
 /** TODO: Document */

diff --git a/packages/core/src/providers/ory-hydra.ts b/packages/core/src/providers/ory-hydra.ts
@@ -79,11 +79,8 @@ export default function OryHydra<P extends OryHydraProfile>(
     name: "Hydra",
     type: "oidc",
     style: {
-      logoDark: "https://authjs.dev/img/providers/ory-dark.svg",
       bg: "#fff",
       text: "#0F172A",
-      bgDark: "#4F46E5",
-      textDark: "#fff",
     },
     options,
   }

diff --git a/packages/core/src/providers/passage.ts b/packages/core/src/providers/passage.ts
@@ -90,8 +90,7 @@ export default function Passage(
     type: "oidc",
     client: { token_endpoint_auth_method: "client_secret_basic" },
     style: {
-      bg: "#fff",
-      text: "#000",
+      brandColor: "#3d53f6",
     },
     options: config,
   }

diff --git a/packages/core/src/providers/pinterest.ts b/packages/core/src/providers/pinterest.ts
@@ -93,6 +93,9 @@ export default function PinterestProvider<P extends PinterestProfile>(
         email: null,
       }
     },
+    style: {
+      brandColor: "#bd081c",
+    },
     options,
   }
 }
diff --git a/packages/core/src/providers/reddit.ts b/packages/core/src/providers/reddit.ts
@@ -95,8 +95,7 @@ export default function Reddit(
     userinfo: "https://oauth.reddit.com/api/v1/me",
     checks: ["state"],
     style: {
-      bg: "#000",
-      text: "#fff",
+      brandColor: "#FF4500",
     },
     options: config,
   }