@auth/core - npm Package Compare versions

Comparing version 0.16.1 to 0.17.0

lib/pages/error.js

@@ -26,3 +26,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
             message: (_jsxs("div", { children: [_jsx("p", { children: "The sign in link is no longer valid." }), _jsx("p", { children: "It may have been used already or it may have expired." })] })),
-            signin: (_jsx("p", { children: _jsx("a", { className: "button", href: signinPageUrl, children: "Sign in" }) })),
+            signin: (_jsx("a", { className: "button", href: signinPageUrl, children: "Sign in" })),
         },
@@ -29,0 +29,0 @@ };

lib/pages/signin.js

@@ -15,2 +15,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 };
+function hexToRgba(hex, 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;
+}
 export default function SigninPage(props) {
@@ -27,3 +48,3 @@ const { csrfToken, providers = [], callbackUrl, theme, email, error: errorType, } = props;
             signinErrors.default);
-    const logos = "https://authjs.dev/img/providers";
+    const providerLogoPath = "https://authjs.dev/img/providers";
     return (_jsxs("div", { className: "signin", children: [theme.brandColor && (_jsx("style", { dangerouslySetInnerHTML: {
@@ -37,15 +58,35 @@ __html: `:root {--brand-color: ${theme.brandColor}}`,
       `,
-                } })), _jsxs("div", { className: "card", children: [error && (_jsx("div", { className: "error", children: _jsx("p", { children: error }) })), providers.map((provider, i) => (_jsxs("div", { className: "provider", children: [provider.type === "oauth" || provider.type === "oidc" ? (_jsxs("form", { action: provider.signinUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), callbackUrl && (_jsx("input", { type: "hidden", name: "callbackUrl", value: callbackUrl })), _jsxs("button", { type: "submit", className: "button", style: {
-                                            "--provider-bg": provider.style?.bg ?? "",
-                                            "--provider-dark-bg": provider.style?.bgDark ?? "",
-                                            "--provider-color": provider.style?.text ?? "",
-                                            "--provider-dark-color": provider.style?.textDark ?? "",
-                                            gap: 8,
-                                        }, children: [provider.style?.logo && (_jsx("img", { loading: "lazy", height: 24, width: 24, id: "provider-logo", src: `${provider.style.logo.startsWith("/") ? logos : ""}${provider.style.logo}` })), provider.style?.logoDark && (_jsx("img", { loading: "lazy", height: 24, width: 24, id: "provider-logo-dark", src: `${provider.style.logo.startsWith("/") ? logos : ""}${provider.style.logoDark}` })), _jsxs("span", { children: ["Sign in with ", provider.name] })] })] })) : null, (provider.type === "email" || provider.type === "credentials") &&
-                                i > 0 &&
-                                providers[i - 1].type !== "email" &&
-                                providers[i - 1].type !== "credentials" && _jsx("hr", {}), provider.type === "email" && (_jsxs("form", { action: provider.signinUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), _jsx("label", { className: "section-header", htmlFor: `input-email-for-${provider.id}-provider`, children: "Email" }), _jsx("input", { id: `input-email-for-${provider.id}-provider`, autoFocus: true, type: "email", name: "email", value: email, placeholder: "[e-mail]", required: true }), _jsxs("button", { type: "submit", children: ["Sign in with ", provider.name] })] })), provider.type === "credentials" && (_jsxs("form", { action: provider.callbackUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), Object.keys(provider.credentials).map((credential) => {
-                                        return (_jsxs("div", { children: [_jsx("label", { className: "section-header", htmlFor: `input-${credential}-for-${provider.id}-provider`, children: provider.credentials[credential].label ?? credential }), _jsx("input", { name: credential, id: `input-${credential}-for-${provider.id}-provider`, type: provider.credentials[credential].type ?? "text", placeholder: provider.credentials[credential].placeholder ?? "", ...provider.credentials[credential] })] }, `input-group-${provider.id}`));
-                                    }), _jsxs("button", { id: "submitButton", type: "submit", children: ["Sign in with ", provider.name] })] })), (provider.type === "email" || provider.type === "credentials") &&
-                                i + 1 < providers.length && _jsx("hr", {})] }, provider.id)))] })] }));
+                } })), _jsxs("div", { className: "card", children: [error && (_jsx("div", { className: "error", children: _jsx("p", { children: error }) })), theme.logo && _jsx("img", { src: theme.logo, alt: "Logo", className: "logo" }), providers.map((provider, i) => {
+                        let bg, text, logo, logoDark, bgDark, textDark;
+                        if (provider.type === "oauth" || provider.type === "oidc") {
+                            ;
+                            ({
+                                bg = "",
+                                text = "",
+                                logo = "",
+                                bgDark = bg,
+                                textDark = text,
+                                logoDark = "",
+                            } = provider.style ?? {});
+                            logo = logo.startsWith("/") ? providerLogoPath + logo : logo;
+                            logoDark = logoDark.startsWith("/")
+                                ? providerLogoPath + logoDark
+                                : logoDark || logo;
+                            logoDark || (logoDark = logo);
+                        }
+                        return (_jsxs("div", { className: "provider", children: [provider.type === "oauth" || provider.type === "oidc" ? (_jsxs("form", { action: provider.signinUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), callbackUrl && (_jsx("input", { type: "hidden", name: "callbackUrl", value: callbackUrl })), _jsxs("button", { 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),
+                                            }, tabIndex: 0, children: [logo && (_jsx("img", { loading: "lazy", height: 24, width: 24, id: "provider-logo", src: logo })), logoDark && (_jsx("img", { loading: "lazy", height: 24, width: 24, id: "provider-logo-dark", src: logoDark })), _jsxs("span", { children: ["Sign in with ", provider.name] })] })] })) : null, (provider.type === "email" || provider.type === "credentials") &&
+                                    i > 0 &&
+                                    providers[i - 1].type !== "email" &&
+                                    providers[i - 1].type !== "credentials" && _jsx("hr", {}), provider.type === "email" && (_jsxs("form", { action: provider.signinUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), _jsx("label", { className: "section-header", htmlFor: `input-email-for-${provider.id}-provider`, children: "Email" }), _jsx("input", { id: `input-email-for-${provider.id}-provider`, autoFocus: true, type: "email", name: "email", value: email, placeholder: "[e-mail]", required: true }), _jsxs("button", { id: "submitButton", type: "submit", tabIndex: 0, children: ["Sign in with ", provider.name] })] })), provider.type === "credentials" && (_jsxs("form", { action: provider.callbackUrl, method: "POST", children: [_jsx("input", { type: "hidden", name: "csrfToken", value: csrfToken }), Object.keys(provider.credentials).map((credential) => {
+                                            return (_jsxs("div", { children: [_jsx("label", { className: "section-header", htmlFor: `input-${credential}-for-${provider.id}-provider`, children: provider.credentials[credential].label ?? credential }), _jsx("input", { name: credential, id: `input-${credential}-for-${provider.id}-provider`, type: provider.credentials[credential].type ?? "text", placeholder: provider.credentials[credential].placeholder ?? "", ...provider.credentials[credential] })] }, `input-group-${provider.id}`));
+                                        }), _jsxs("button", { id: "submitButton", type: "submit", tabIndex: 0, children: ["Sign in with ", provider.name] })] })), (provider.type === "email" || provider.type === "credentials") &&
+                                    i + 1 < providers.length && _jsx("hr", {})] }, provider.id));
+                    })] })] }));
 }

lib/pages/styles.d.ts

@@ -1,3 +0,3 @@
-declare const _default: ":root {\n  --border-width: 1px;\n  --border-radius: 0.5rem;\n  --color-error: #c94b4b;\n  --color-info: #157efb;\n  --color-info-text: #fff;\n}\n\n.__next-auth-theme-auto,\n.__next-auth-theme-light {\n  --color-background: #ececec;\n  --color-background-card: #fff;\n  --color-text: #000;\n  --color-primary: #444;\n  --color-control-border: #bbb;\n  --color-button-active-background: #f9f9f9;\n  --color-button-active-border: #aaa;\n  --color-separator: #ccc;\n}\n\n.__next-auth-theme-dark {\n  --color-background: #161b22;\n  --color-background-card: #0d1117;\n  --color-text: #fff;\n  --color-primary: #ccc;\n  --color-control-border: #555;\n  --color-button-active-background: #060606;\n  --color-button-active-border: #666;\n  --color-separator: #444;\n}\n\n@media (prefers-color-scheme: dark) {\n  .__next-auth-theme-auto {\n    --color-background: #161b22;\n    --color-background-card: #0d1117;\n    --color-text: #fff;\n    --color-primary: #ccc;\n    --color-control-border: #555;\n    --color-button-active-background: #060606;\n    --color-button-active-border: #666;\n    --color-separator: #444;\n  }\n}\n\nbody {\n  background-color: var(--color-background);\n  margin: 0;\n  padding: 0;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n    \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\nh1 {\n  font-weight: 400;\n  margin-bottom: 1.5rem;\n  padding: 0 1rem;\n  color: var(--color-text);\n}\n\np {\n  color: var(--color-text);\n}\n\nform {\n  margin: 0;\n  padding: 0;\n}\n\nlabel {\n  font-weight: 500;\n  text-align: left;\n  margin-bottom: 0.25rem;\n  display: block;\n  color: var(--color-text);\n}\n\ninput[type] {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  border: var(--border-width) solid var(--color-control-border);\n  background: var(--color-background-card);\n  font-size: 1rem;\n  border-radius: var(--border-radius);\n  color: var(--color-text);\n}\n\ninput[type]:focus {\n    box-shadow: none;\n  }\n\np {\n  margin: 0 0 1.5rem 0;\n  padding: 0 1rem;\n  font-size: 1.1rem;\n  line-height: 2rem;\n}\n\na.button {\n  text-decoration: none;\n  line-height: 1rem;\n}\n\na.button:link,\n  a.button:visited {\n    background-color: var(--color-background);\n    color: var(--color-primary);\n  }\n\nbutton span {\n  flex-grow: 1;\n}\n\nbutton,\na.button {\n  margin: 0 0 0.75rem 0;\n  padding: 0.75rem 1rem;\n  color: var(--provider-color, var(--color-primary));\n  background-color: var(--provider-bg, var(--color-background-card));\n  font-size: 1.1rem;\n  min-height: 62px;\n  border-color: rgba(0, 0, 0, 0.1);\n  border-radius: var(--border-radius);\n  transition: all 0.1s ease-in-out;\n  font-weight: 500;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@media (max-width: 450px) {\n\nbutton,\na.button {\n    font-size: 0.9rem\n}\n  }\n\nbutton:hover, a.button:hover {\n    cursor: pointer;\n  }\n\nbutton:active, a.button:active {\n    cursor: pointer;\n  }\n\nbutton #provider-logo, a.button #provider-logo {\n    width: 25px;\n    display: block;\n  }\n\nbutton #provider-logo-dark, a.button #provider-logo-dark {\n    display: none;\n  }\n\n#submitButton {\n  color: var(--button-text-color, var(--color-info-text));\n  background-color: var(--brand-color, var(--color-info));\n  width: 100%;\n}\n\n@media (prefers-color-scheme: dark) {\n  button,\n  a.button {\n    color: var(--provider-dark-color, var(--color-primary));\n    background-color: var(--provider-dark-bg, var(--color-background));\n  }\n  #provider-logo {\n    display: none !important;\n  }\n  #provider-logo-dark {\n    width: 25px;\n    display: block !important;\n  }\n}\n\na.site {\n  color: var(--color-primary);\n  text-decoration: none;\n  font-size: 1rem;\n  line-height: 2rem;\n}\n\na.site:hover {\n    text-decoration: underline;\n  }\n\n.page {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  margin: 0;\n  padding: 0;\n}\n\n.page > div {\n    text-align: center;\n  }\n\n.error a.button {\n    display: inline-block;\n    padding-left: 2rem;\n    padding-right: 2rem;\n    margin-top: 0.5rem;\n  }\n\n.error .message {\n    margin-bottom: 1.5rem;\n  }\n\n.signin input[type=\"text\"] {\n    margin-left: auto;\n    margin-right: auto;\n    display: block;\n  }\n\n.signin hr {\n    display: block;\n    border: 0;\n    border-top: 1px solid var(--color-separator);\n    margin: 2rem auto 1rem auto;\n    overflow: visible;\n  }\n\n.signin hr::before {\n      content: \"or\";\n      background: var(--color-background-card);\n      color: #888;\n      padding: 0 0.4rem;\n      position: relative;\n      top: -0.7rem;\n    }\n\n.signin .error {\n    background: #f5f5f5;\n    font-weight: 500;\n    border-radius: 0.3rem;\n    background: var(--color-error);\n  }\n\n.signin .error p {\n      text-align: left;\n      padding: 0.5rem 1rem;\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      color: var(--color-info-text);\n    }\n\n.signin > div,\n  .signin form {\n    display: block;\n  }\n\n.signin > div input[type], .signin form input[type] {\n      margin-bottom: 0.5rem;\n    }\n\n.signin > div button, .signin form button {\n      width: 100%;\n    }\n\n.signin > div,\n  .signin form {\n\n    max-width: 300px;\n}\n\n.logo {\n  display: inline-block;\n  max-width: 150px;\n  margin-top: 20px;\n  margin-bottom: 25px;\n  max-height: 70px;\n}\n\n@media screen and (min-width: 450px) {\n\n.card {\n    width: 350px\n}\n  }\n\n@media screen and (max-width: 450px) {\n\n.card {\n    width: 200px\n}\n  }\n\n.card {\n  margin: 20px 0 20px 0;\n  background-color: var(--color-background-card);\n  border-radius: 30px;\n  padding: 20px 50px;\n}\n\n.card .header {\n    color: var(--color-primary);\n  }\n\n.section-header {\n  color: var(--color-text);\n}\n";
+declare const _default: ":root {\n  --border-width: 1px;\n  --border-radius: 0.5rem;\n  --color-error: #c94b4b;\n  --color-info: #157efb;\n  --color-info-hover: #0f6ddb;\n  --color-info-text: #fff;\n}\n\n.__next-auth-theme-auto,\n.__next-auth-theme-light {\n  --color-background: #ececec;\n  --color-background-hover: rgba(236, 236, 236, 0.8);\n  --color-background-card: #fff;\n  --color-text: #000;\n  --color-primary: #444;\n  --color-control-border: #bbb;\n  --color-button-active-background: #f9f9f9;\n  --color-button-active-border: #aaa;\n  --color-separator: #ccc;\n}\n\n.__next-auth-theme-dark {\n  --color-background: #161b22;\n  --color-background-hover: rgba(22, 27, 34, 0.8);\n  --color-background-card: #0d1117;\n  --color-text: #fff;\n  --color-primary: #ccc;\n  --color-control-border: #555;\n  --color-button-active-background: #060606;\n  --color-button-active-border: #666;\n  --color-separator: #444;\n}\n\n@media (prefers-color-scheme: dark) {\n  .__next-auth-theme-auto {\n    --color-background: #161b22;\n    --color-background-hover: rgba(22, 27, 34, 0.8);\n    --color-background-card: #0d1117;\n    --color-text: #fff;\n    --color-primary: #ccc;\n    --color-control-border: #555;\n    --color-button-active-background: #060606;\n    --color-button-active-border: #666;\n    --color-separator: #444;\n  }\n\n  button,\n  a.button {\n    color: var(--provider-dark-color, var(--color-primary));\n    background-color: var(--provider-dark-bg, var(--color-background));\n  }\n    button:hover, a.button:hover {\n      background-color: var(\n        --provider-dark-bg-hover,\n        var(--color-background-hover)\n      ) !important;\n    }\n  #provider-logo {\n    display: none !important;\n  }\n  #provider-logo-dark {\n    width: 25px;\n    display: block !important;\n  }\n}\nhtml {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background-color: var(--color-background);\n  margin: 0;\n  padding: 0;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n    \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\nh1 {\n  margin-bottom: 1.5rem;\n  padding: 0 1rem;\n  font-weight: 400;\n  color: var(--color-text);\n}\n\np {\n  margin-bottom: 1.5rem;\n  padding: 0 1rem;\n  color: var(--color-text);\n}\n\nform {\n  margin: 0;\n  padding: 0;\n}\n\nlabel {\n  font-weight: 500;\n  text-align: left;\n  margin-bottom: 0.25rem;\n  display: block;\n  color: var(--color-text);\n}\n\ninput[type] {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  border: var(--border-width) solid var(--color-control-border);\n  background: var(--color-background-card);\n  font-size: 1rem;\n  border-radius: var(--border-radius);\n  color: var(--color-text);\n}\n\ninput[type]:focus {\n    box-shadow: none;\n  }\n\np {\n  font-size: 1.1rem;\n  line-height: 2rem;\n}\n\na.button {\n  text-decoration: none;\n  line-height: 1rem;\n}\n\na.button:link,\n  a.button:visited {\n    background-color: var(--color-background);\n    color: var(--color-primary);\n  }\n\nbutton span {\n  flex-grow: 1;\n}\n\nbutton,\na.button {\n  padding: 0.75rem 1rem;\n  color: var(--provider-color, var(--color-primary));\n  background-color: var(--provider-bg);\n  font-size: 1.1rem;\n  min-height: 62px;\n  border-color: rgba(0, 0, 0, 0.1);\n  border-radius: var(--border-radius);\n  transition: all 0.1s ease-in-out;\n  font-weight: 500;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nbutton:hover, a.button:hover {\n    background-color: var(--provider-bg-hover, var(--color-background-hover));\n    cursor: pointer;\n  }\n\n/* &:focus {\n    outline: none;\n    border: 1px solid;\n    border-color: var(--color-info);\n  } */\n\nbutton:active, a.button:active {\n    cursor: pointer;\n  }\n\nbutton #provider-logo, a.button #provider-logo {\n    width: 25px;\n    display: block;\n  }\n\nbutton #provider-logo-dark, a.button #provider-logo-dark {\n    display: none;\n  }\n\n#submitButton {\n  color: var(--button-text-color, var(--color-info-text));\n  background-color: var(--brand-color, var(--color-info));\n  width: 100%;\n}\n\n#submitButton:hover {\n    background-color: var(\n      --button-hover-bg,\n      var(--colo r-info-hover)\n    ) !important;\n  }\n\na.site {\n  color: var(--color-primary);\n  text-decoration: none;\n  font-size: 1rem;\n  line-height: 2rem;\n}\n\na.site:hover {\n    text-decoration: underline;\n  }\n\n.page {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.page > div {\n    text-align: center;\n  }\n\n.error a.button {\n    padding-left: 2rem;\n    padding-right: 2rem;\n    margin-top: 0.5rem;\n  }\n\n.error .message {\n    margin-bottom: 1.5rem;\n  }\n\n.signin input[type=\"text\"] {\n    margin-left: auto;\n    margin-right: auto;\n    display: block;\n  }\n\n.signin hr {\n    display: block;\n    border: 0;\n    border-top: 1px solid var(--color-separator);\n    margin: 2rem auto 1rem auto;\n    overflow: visible;\n  }\n\n.signin hr::before {\n      content: \"or\";\n      background: var(--color-background-card);\n      color: #888;\n      padding: 0 0.4rem;\n      position: relative;\n      top: -0.7rem;\n    }\n\n.signin .error {\n    background: #f5f5f5;\n    font-weight: 500;\n    border-radius: 0.3rem;\n    background: var(--color-error);\n  }\n\n.signin .error p {\n      text-align: left;\n      padding: 0.5rem 1rem;\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      color: var(--color-info-text);\n    }\n\n.signin > div,\n  .signin form {\n    display: block;\n  }\n\n.signin > div input[type], .signin form input[type] {\n      margin-bottom: 0.5rem;\n    }\n\n.signin > div button, .signin form button {\n      width: 100%;\n    }\n\n.signin .provider + .provider {\n    margin-top: 1rem;\n  }\n\n.logo {\n  display: inline-block;\n  max-width: 150px;\n  margin: 1.25rem 0;\n  max-height: 70px;\n}\n\n.card {\n  background-color: var(--color-background-card);\n  border-radius: 2rem;\n  padding: 1.25rem 2rem;\n}\n\n.card .header {\n    color: var(--color-primary);\n  }\n\n.section-header {\n  color: var(--color-text);\n}\n\n@media screen and (min-width: 450px) {\n  .card {\n    margin: 2rem 0;\n    width: 368px;\n  }\n}\n@media screen and (max-width: 450px) {\n  .card {\n    margin: 1rem 0;\n    width: 343px;\n  }\n}\n";
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

lib/pages/styles.js

@@ -0,1 +1,2 @@
+// Generated by `pnpm css`
 export default `:root {
@@ -6,2 +7,3 @@ --border-width: 1px;
   --color-info: #157efb;
+  --color-info-hover: #0f6ddb;
   --color-info-text: #fff;
@@ -13,2 +15,3 @@ }
   --color-background: #ececec;
+  --color-background-hover: rgba(236, 236, 236, 0.8);
   --color-background-card: #fff;
@@ -25,2 +28,3 @@ --color-text: #000;
   --color-background: #161b22;
+  --color-background-hover: rgba(22, 27, 34, 0.8);
   --color-background-card: #0d1117;
@@ -38,2 +42,3 @@ --color-text: #fff;
     --color-background: #161b22;
+    --color-background-hover: rgba(22, 27, 34, 0.8);
     --color-background-card: #0d1117;
@@ -47,3 +52,32 @@ --color-text: #fff;
   }
+
+  button,
+  a.button {
+    color: var(--provider-dark-color, var(--color-primary));
+    background-color: var(--provider-dark-bg, var(--color-background));
+  }
+    button:hover, a.button:hover {
+      background-color: var(
+        --provider-dark-bg-hover,
+        var(--color-background-hover)
+      ) !important;
+    }
+  #provider-logo {
+    display: none !important;
+  }
+  #provider-logo-dark {
+    width: 25px;
+    display: block !important;
+  }
 }
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
 
@@ -60,5 +94,5 @@ body {
 h1 {
-  font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  font-weight: 400;
   color: var(--color-text);
@@ -68,2 +102,4 @@ }
 p {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
   color: var(--color-text);
@@ -102,4 +138,2 @@ }
 p {
-  margin: 0 0 1.5rem 0;
-  padding: 0 1rem;
   font-size: 1.1rem;
@@ -126,6 +160,5 @@ line-height: 2rem;
 a.button {
-  margin: 0 0 0.75rem 0;
   padding: 0.75rem 1rem;
   color: var(--provider-color, var(--color-primary));
-  background-color: var(--provider-bg, var(--color-background-card));
+  background-color: var(--provider-bg);
   font-size: 1.1rem;
@@ -143,14 +176,13 @@ min-height: 62px;
 
-@media (max-width: 450px) {
-
-button,
-a.button {
-    font-size: 0.9rem
-}
-  }
-
 button:hover, a.button:hover {
+    background-color: var(--provider-bg-hover, var(--color-background-hover));
     cursor: pointer;
   }
 
+/* &:focus {
+    outline: none;
+    border: 1px solid;
+    border-color: var(--color-info);
+  } */
+
 button:active, a.button:active {
@@ -175,16 +207,8 @@ cursor: pointer;
 
-@media (prefers-color-scheme: dark) {
-  button,
-  a.button {
-    color: var(--provider-dark-color, var(--color-primary));
-    background-color: var(--provider-dark-bg, var(--color-background));
+#submitButton:hover {
+    background-color: var(
+      --button-hover-bg,
+      var(--colo r-info-hover)
+    ) !important;
   }
-  #provider-logo {
-    display: none !important;
-  }
-  #provider-logo-dark {
-    width: 25px;
-    display: block !important;
-  }
-}
 
@@ -210,2 +234,3 @@ a.site {
   padding: 0;
+  box-sizing: border-box;
 }
@@ -218,3 +243,2 @@
 .error a.button {
-    display: inline-block;
     padding-left: 2rem;
@@ -280,35 +304,17 @@ padding-right: 2rem;
 
-.signin > div,
-  .signin form {
+.signin .provider + .provider {
+    margin-top: 1rem;
+  }
 
-    max-width: 300px;
-}
-
 .logo {
   display: inline-block;
   max-width: 150px;
-  margin-top: 20px;
-  margin-bottom: 25px;
+  margin: 1.25rem 0;
   max-height: 70px;
 }
 
-@media screen and (min-width: 450px) {
-
 .card {
-    width: 350px
-}
-  }
-
-@media screen and (max-width: 450px) {
-
-.card {
-    width: 200px
-}
-  }
-
-.card {
-  margin: 20px 0 20px 0;
   background-color: var(--color-background-card);
-  border-radius: 30px;
-  padding: 20px 50px;
+  border-radius: 2rem;
+  padding: 1.25rem 2rem;
 }
@@ -323,3 +329,15 @@
 }
+
+@media screen and (min-width: 450px) {
+  .card {
+    margin: 2rem 0;
+    width: 368px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .card {
+    margin: 1rem 0;
+    width: 343px;
+  }
+}
 `;
-// Generated by `pnpm css`

package.json

 {
   "name": "@auth/core",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Authentication for the Web.",
@@ -5,0 +5,0 @@ "keywords": [

providers/apple.d.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://apple.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple.svg" width="24"/>
  * </a>
@@ -10,0 +10,0 @@ * </div>

providers/apple.js

@@ -7,3 +7,3 @@ /**
  * <a href="https://apple.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple.svg" width="24"/>
  * </a>
@@ -78,7 +78,4 @@ * </div>
             logo: "/apple.svg",
-            logoDark: "/apple-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
+            text: "#fff",
+            bg: "#000",
         },
@@ -85,0 +82,0 @@ options,

providers/asgardeo.d.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://wso2.com/asgardeo/" style={{backgroundColor: "#ECEFF1", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo.svg" width="24"/>
  * </a>
@@ -10,0 +10,0 @@ * </div>

providers/asgardeo.js

@@ -7,3 +7,3 @@ /**
  * <a href="https://wso2.com/asgardeo/" style={{backgroundColor: "#ECEFF1", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo.svg" width="24"/>
  * </a>
@@ -92,7 +92,4 @@ * </div>
             logo: "/asgardeo.svg",
-            logoDark: "/asgardeo-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
+            bg: "#000",
+            text: "#fff",
         },
@@ -99,0 +96,0 @@ options: config,

providers/atlassian.js

@@ -65,12 +65,5 @@ /**
         },
-        style: {
-            logo: "/atlassian.svg",
-            logoDark: "/atlassian-dark.svg",
-            bg: "#0052cc",
-            text: "#fff",
-            bgDark: "#fff",
-            textDark: "#0052cc",
-        },
+        style: { logo: "/atlassian.svg", bg: "#fff", text: "#0052cc" },
         options,
     };
 }

providers/auth0.d.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://auth0.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/auth0-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/auth0.svg" width="24"/>
  * </a>
@@ -10,0 +10,0 @@ * </div>

providers/auth0.js

@@ -48,12 +48,5 @@ /**
         type: "oidc",
-        style: {
-            logo: "/auth0.svg",
-            logoDark: "/auth0-dark.svg",
-            bg: "#fff",
-            text: "#EB5424",
-            bgDark: "#EB5424",
-            textDark: "#fff",
-        },
+        style: { logo: "/auth0.svg", text: "#fff", bg: "#EB5424" },
         options: config,
     };
 }

providers/azure-ad-b2c.d.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

providers/azure-ad-b2c.js

@@ -5,3 +5,3 @@ /**
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>
  * </a>
@@ -100,12 +100,5 @@ * </div>
         },
-        style: {
-            logo: "/azure.svg",
-            logoDark: "/azure-dark.svg",
-            bg: "#fff",
-            text: "#0072c6",
-            bgDark: "#0072c6",
-            textDark: "#fff",
-        },
+        style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
         options,
     };
 }

providers/azure-ad.d.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

providers/azure-ad.js

@@ -106,3 +106,3 @@ /**
             params: {
-                scope: 'openid profile email User.Read',
+                scope: "openid profile email User.Read",
             },
@@ -131,12 +131,5 @@ },
         },
-        style: {
-            logo: "/azure.svg",
-            logoDark: "/azure-dark.svg",
-            bg: "#fff",
-            text: "#0072c6",
-            bgDark: "#0072c6",
-            textDark: "#fff",
-        },
+        style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
         options: rest,
     };
 }

providers/battlenet.js

@@ -70,12 +70,5 @@ /**
         },
-        style: {
-            logo: "/battlenet.svg",
-            logoDark: "/battlenet-dark.svg",
-            bg: "#fff",
-            text: "#148eff",
-            bgDark: "#148eff",
-            textDark: "#fff",
-        },
+        style: { logo: "/battlenet.svg", bg: "#148eff", text: "#fff" },
         options,
     };
 }

providers/beyondidentity.d.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://www.beyondidentity.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity.svg" height="48" width="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

providers/beyondidentity.js

@@ -5,3 +5,3 @@ /**
  * <a href="https://www.beyondidentity.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity.svg" height="48" width="48"/>
  * </a>
@@ -73,7 +73,4 @@ * </div>
             logo: "/beyondidentity.svg",
-            logoDark: "/beyondidentity-dark.svg",
-            bg: "#fff",
-            bgDark: "#5077c5",
-            text: "#5077c5",
-            textDark: "#fff",
+            bg: "#5077c5",
+            text: "#fff",
         },
@@ -80,0 +77,0 @@ options: config,

providers/box.js

@@ -67,7 +67,4 @@ /**
             logo: "/box.svg",
-            logoDark: "/box-dark.svg",
-            bg: "#fff",
-            text: "#0075C9",
-            bgDark: "#0075C9",
-            textDark: "#fff",
+            bg: "#0075C9",
+            text: "#fff",
         },
@@ -74,0 +71,0 @@ options,

providers/click-up.js

@@ -80,7 +80,4 @@ /**
             logo: "/click-up.svg",
-            logoDark: "/click-up.svg",
-            bg: "#fff",
-            bgDark: "#24292f",
-            text: "#000",
-            textDark: "#fff",
+            bg: "#24292f",
+            text: "#fff",
         },
@@ -87,0 +84,0 @@ options: config,

providers/cognito.js

@@ -62,12 +62,5 @@ /**
         type: "oidc",
-        style: {
-            logo: "/cognito.svg",
-            logoDark: "/cognito.svg",
-            bg: "#fff",
-            text: "#C17B9E",
-            bgDark: "#fff",
-            textDark: "#C17B9E",
-        },
+        style: { logo: "/cognito.svg", bg: "#fff", text: "#C17B9E" },
         options,
     };
 }

providers/descope.d.ts

@@ -16,3 +16,3 @@ /**
  * [See Load User](https://docs.descope.com/api/openapi/usermanagement/operation/LoadUser/)
-*/
+ */
 export interface DescopeProfile {
@@ -19,0 +19,0 @@ /** The user's unique Descope ID */

providers/descope.js

@@ -84,7 +84,4 @@ /**
             logo: "/descope.svg",
-            logoDark: "/descope.svg",
             bg: "#1C1C23",
             text: "#ffffff",
-            bgDark: "#1C1C23",
-            textDark: "#ffffff",
         },
@@ -91,0 +88,0 @@ options: config,

providers/discord.js

@@ -73,12 +73,5 @@ /**
         },
-        style: {
-            logo: "/discord.svg",
-            logoDark: "/discord-dark.svg",
-            bg: "#fff",
-            text: "#7289DA",
-            bgDark: "#7289DA",
-            textDark: "#fff",
-        },
+        style: { logo: "/discord.svg", bg: "#5865F2", text: "#fff" },
         options,
     };
 }

providers/dribbble.js

@@ -75,10 +75,5 @@ /**
         style: {
-            // Light mode
             logo: "/dribbble.svg",
-            text: "#ea4c89",
-            bg: "#fff",
-            // Dark mode
-            logoDark: "/dribbble-dark.svg",
-            textDark: "#fff",
-            bgDark: "#000",
+            text: "#fff",
+            bg: "#000",
         },
@@ -85,0 +80,0 @@ options,

providers/email.d.ts

@@ -33,3 +33,3 @@ import type { CommonProviderOptions } from "./index.js";
  */
-export interface EmailUserConfig {
+export interface EmailUserConfig extends Record<string, unknown> {
     server?: AllTransportOptions;
@@ -36,0 +36,0 @@ type?: "email";

providers/facebook.js

@@ -80,12 +80,5 @@ /**
         },
-        style: {
-            logo: "/facebook.svg",
-            logoDark: "/facebook-dark.svg",
-            bg: "#fff",
-            text: "#006aff",
-            bgDark: "#006aff",
-            textDark: "#fff",
-        },
+        style: { logo: "/facebook.svg", bg: "#006aff", text: "#fff" },
         options,
     };
 }

providers/foursquare.js

@@ -80,7 +80,4 @@ /**
             logo: "/foursquare.svg",
-            logoDark: "/foursquare-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
+            bg: "#000",
+            text: "#fff",
         },
@@ -87,0 +84,0 @@ options,

providers/freshbooks.js

@@ -67,7 +67,4 @@ /**
             logo: "/freshbooks.svg",
-            logoDark: "/freshbooks-dark.svg",
-            bg: "#fff",
-            text: "#0075dd",
-            bgDark: "#0075dd",
-            textDark: "#fff",
+            bg: "#0075dd",
+            text: "#fff",
         },
@@ -74,0 +71,0 @@ options,

providers/github.d.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://github.com">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github.svg" height="48" width="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

providers/github.js

@@ -5,3 +5,3 @@ /**
  * <a href="https://github.com">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github.svg" height="48" width="48"/>
  * </a>
@@ -107,12 +107,5 @@ * </div>
         },
-        style: {
-            logo: "/github.svg",
-            logoDark: "/github-dark.svg",
-            bg: "#fff",
-            bgDark: "#24292f",
-            text: "#000",
-            textDark: "#fff",
-        },
+        style: { logo: "/github.svg", bg: "#24292f", text: "#fff" },
         options: config,
     };
 }

providers/gitlab.js

@@ -68,12 +68,5 @@ /**
         },
-        style: {
-            logo: "/gitlab.svg",
-            logoDark: "/gitlab-dark.svg",
-            bg: "#fff",
-            text: "#FC6D26",
-            bgDark: "#FC6D26",
-            textDark: "#fff",
-        },
+        style: { logo: "/gitlab.svg", bg: "#FC6D26", text: "#fff" },
         options,
     };
 }

providers/google.js

@@ -112,12 +112,5 @@ /**
         issuer: "https://accounts.google.com",
-        style: {
-            logo: "/google.svg",
-            logoDark: "/google.svg",
-            bgDark: "#fff",
-            bg: "#fff",
-            text: "#000",
-            textDark: "#000",
-        },
+        style: { logo: "/google.svg", bg: "#fff", text: "#000" },
         options,
     };
 }

providers/hubspot.js

@@ -85,12 +85,5 @@ /**
         },
-        style: {
-            logo: "/hubspot.svg",
-            logoDark: "/hubspot-dark.svg",
-            bg: "#fff",
-            text: "#ff7a59",
-            bgDark: "#ff7a59",
-            textDark: "#fff",
-        },
+        style: { logo: "/hubspot.svg", bg: "#ff7a59", text: "#fff" },
         options,
     };
 }

providers/instagram.js

@@ -78,7 +78,4 @@ /**
             logo: "/instagram.svg",
-            logoDark: "/instagram.svg",
             bg: "#fff",
             text: "#000",
-            bgDark: "#fff",
-            textDark: "#000",
         },
@@ -85,0 +82,0 @@ options: config,

providers/keycloak.js

@@ -64,12 +64,5 @@ /**
         type: "oidc",
-        style: {
-            logo: "/keycloak.svg",
-            logoDark: "/keycloak.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#fff",
-            textDark: "#000",
-        },
+        style: { logo: "/keycloak.svg", bg: "#fff", text: "#000" },
         options,
     };
 }

providers/line.js

@@ -67,12 +67,5 @@ /**
         },
-        style: {
-            logo: "/line.svg",
-            logoDark: "/line.svg",
-            bg: "#fff",
-            text: "#00C300",
-            bgDark: "#00C300",
-            textDark: "#fff",
-        },
+        style: { logo: "/line.svg", bg: "#00C300", text: "#fff" },
         options,
     };
 }

providers/linkedin.js

@@ -62,15 +62,8 @@ /**
                 email: profile.email,
-                image: profile.picture
+                image: profile.picture,
             };
         },
-        style: {
-            logo: "/linkedin.svg",
-            logoDark: "/linkedin-dark.svg",
-            bg: "#fff",
-            text: "#069",
-            bgDark: "#069",
-            textDark: "#fff",
-        },
+        style: { logo: "/linkedin.svg", bg: "#069", text: "#fff" },
         options,
     };
 }

providers/mailchimp.js

@@ -67,7 +67,4 @@ /**
             logo: "/mailchimp.svg",
-            logoDark: "/mailchimp-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
+            bg: "#000",
+            text: "#fff",
         },
@@ -74,0 +71,0 @@ options: config,

providers/mattermost.js

@@ -74,12 +74,5 @@ /**
         },
-        style: {
-            logo: "/mattermost.svg",
-            logoDark: "/mattermost-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
-        },
+        style: { logo: "/mattermost.svg", bg: "#000", text: "#fff" },
         options: rest,
     };
 }

providers/notion.js

@@ -99,12 +99,5 @@ /**
         },
-        style: {
-            logo: "/notion.svg",
-            logoDark: "/notion.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#fff",
-            textDark: "#000",
-        },
+        style: { logo: "/notion.svg", bg: "#fff", text: "#000" },
         options,
     };
 }

providers/oauth.d.ts

@@ -35,7 +35,7 @@ import type { Client } from "oauth4webapi";
     logo: string;
-    logoDark: string;
+    logoDark?: string;
     bg: string;
-    bgDark: string;
+    bgDark?: string;
     text: string;
-    textDark: string;
+    textDark?: string;
 }
@@ -42,0 +42,0 @@ /** TODO: Document */

providers/okta.js

@@ -53,12 +53,5 @@ /**
         type: "oidc",
-        style: {
-            logo: "/okta.svg",
-            logoDark: "/okta-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
-        },
+        style: { logo: "/okta.svg", bg: "#000", text: "#fff" },
         options,
     };
 }

providers/passage.js

@@ -66,7 +66,4 @@ /**
             logo: "/passage.svg",
-            logoDark: "/passage.svg",
             bg: "#fff",
-            bgDark: "#fff",
             text: "#000",
-            textDark: "#000",
         },
@@ -73,0 +70,0 @@ options: config,

providers/patreon.js

@@ -69,12 +69,5 @@ /**
         },
-        style: {
-            logo: "/patreon.svg",
-            logoDark: "/patreon.svg",
-            bg: "#fff",
-            text: "#e85b46",
-            bgDark: "#000",
-            textDark: "#e85b46",
-        },
+        style: { logo: "/patreon.svg", bg: "#e85b46", text: "#fff" },
         options,
     };
 }

providers/reddit.js

@@ -85,7 +85,4 @@ /**
             logo: "/reddit.svg",
-            bg: "#fff",
-            text: "#000",
-            logoDark: "/reddit.svg",
-            bgDark: "#000",
-            textDark: "#fff",
+            bg: "#000",
+            text: "#fff",
         },
@@ -92,0 +89,0 @@ options: config,

providers/slack.js

@@ -62,12 +62,5 @@ /**
         issuer: "https://slack.com",
-        style: {
-            logo: "/slack.svg",
-            logoDark: "/slack.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
-        },
+        style: { logo: "/slack.svg", bg: "#000", text: "#fff" },
         options,
     };
 }

providers/spotify.js

@@ -65,12 +65,5 @@ /**
         },
-        style: {
-            logo: "/spotify.svg",
-            logoDark: "/spotify.svg",
-            bg: "#fff",
-            text: "#2ebd59",
-            bgDark: "#fff",
-            textDark: "#2ebd59",
-        },
+        style: { logo: "/spotify.svg", text: "#fff", bg: "#000" },
         options,
     };
 }

providers/tiktok.js

@@ -129,7 +129,4 @@ /**
             logo: "/tiktok.svg",
-            logoDark: "/tiktok-dark.svg",
-            bg: "#fff",
-            bgDark: "#000",
-            text: "#000",
-            textDark: "#fff",
+            bg: "#000",
+            text: "#fff",
         },
@@ -136,0 +133,0 @@ options,

providers/todoist.js

@@ -89,12 +89,5 @@ /**
         },
-        style: {
-            logo: "/todoist.svg",
-            logoDark: "/todoist.svg",
-            bg: "#fff",
-            text: "#E44332",
-            bgDark: "#000",
-            textDark: "#E44332",
-        },
+        style: { logo: "/todoist.svg", text: "#000", bg: "#E44332" },
         options,
     };
 }

providers/trakt.js

@@ -86,12 +86,5 @@ /**
         },
-        style: {
-            logo: "/trakt.svg",
-            logoDark: "/trakt-dark.svg",
-            bg: "#fff",
-            text: "#ED2224",
-            bgDark: "#ED2224",
-            textDark: "#fff",
-        },
+        style: { logo: "/trakt.svg", bg: "#ED2224", text: "#fff" },
         options,
     };
 }

providers/twitch.js

@@ -91,12 +91,5 @@ /**
         },
-        style: {
-            logo: "/twitch.svg",
-            logoDark: "/twitch-dark.svg",
-            bg: "#fff",
-            text: "#65459B",
-            bgDark: "#65459B",
-            textDark: "#fff",
-        },
+        style: { logo: "/twitch.svg", bg: "#65459B", text: "#fff" },
         options: config,
     };
 }

providers/twitter.js

@@ -92,12 +92,5 @@ /**
         },
-        style: {
-            logo: "/twitter.svg",
-            logoDark: "/twitter-dark.svg",
-            bg: "#fff",
-            text: "#1da1f2",
-            bgDark: "#1da1f2",
-            textDark: "#fff",
-        },
+        style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
         options: config,
     };
 }

providers/vk.js

@@ -89,12 +89,5 @@ /**
         },
-        style: {
-            logo: "/vk.svg",
-            logoDark: "/vk-dark.svg",
-            bg: "#fff",
-            text: "#07F",
-            bgDark: "#07F",
-            textDark: "#fff",
-        },
+        style: { logo: "/vk.svg", bg: "#07F", text: "#fff" },
         options,
     };
 }

providers/wikimedia.js

@@ -82,12 +82,5 @@ /**
         },
-        style: {
-            logo: "/wikimedia.svg",
-            logoDark: "/wikimedia-dark.svg",
-            bg: "#fff",
-            text: "#000",
-            bgDark: "#000",
-            textDark: "#fff",
-        },
+        style: { logo: "/wikimedia.svg", bg: "#000", text: "#fff" },
         options,
     };
 }

providers/workos.js

@@ -133,12 +133,5 @@ /**
         },
-        style: {
-            logo: "/workos.svg",
-            logoDark: "/workos-dark.svg",
-            bg: "#fff",
-            text: "#6363f1",
-            bgDark: "#6363f1",
-            textDark: "#fff",
-        },
+        style: { logo: "/workos.svg", bg: "#6363f1", text: "#fff" },
         options,
     };
 }

providers/yandex.js

@@ -68,7 +68,4 @@ /**
             logo: "/yandex.svg",
-            logoDark: "/yandex.svg",
             bg: "#ffcc00",
             text: "#000",
-            bgDark: "#ffcc00",
-            textDark: "#000",
         },
@@ -75,0 +72,0 @@ options,

providers/zitadel.d.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://zitadel.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel-dark.svg" height="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel.svg" height="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

providers/zitadel.js

@@ -5,3 +5,3 @@ /**
  * <a href="https://zitadel.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel-dark.svg" height="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel.svg" height="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

src/lib/pages/styles.ts

@@ -0,1 +1,2 @@
+// Generated by `pnpm css`
 export default `:root {
@@ -6,2 +7,3 @@ --border-width: 1px;
   --color-info: #157efb;
+  --color-info-hover: #0f6ddb;
   --color-info-text: #fff;
@@ -13,2 +15,3 @@ }
   --color-background: #ececec;
+  --color-background-hover: rgba(236, 236, 236, 0.8);
   --color-background-card: #fff;
@@ -25,2 +28,3 @@ --color-text: #000;
   --color-background: #161b22;
+  --color-background-hover: rgba(22, 27, 34, 0.8);
   --color-background-card: #0d1117;
@@ -38,2 +42,3 @@ --color-text: #fff;
     --color-background: #161b22;
+    --color-background-hover: rgba(22, 27, 34, 0.8);
     --color-background-card: #0d1117;
@@ -47,3 +52,32 @@ --color-text: #fff;
   }
+
+  button,
+  a.button {
+    color: var(--provider-dark-color, var(--color-primary));
+    background-color: var(--provider-dark-bg, var(--color-background));
+  }
+    button:hover, a.button:hover {
+      background-color: var(
+        --provider-dark-bg-hover,
+        var(--color-background-hover)
+      ) !important;
+    }
+  #provider-logo {
+    display: none !important;
+  }
+  #provider-logo-dark {
+    width: 25px;
+    display: block !important;
+  }
 }
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
 
@@ -60,5 +94,5 @@ body {
 h1 {
-  font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  font-weight: 400;
   color: var(--color-text);
@@ -68,2 +102,4 @@ }
 p {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
   color: var(--color-text);
@@ -102,4 +138,2 @@ }
 p {
-  margin: 0 0 1.5rem 0;
-  padding: 0 1rem;
   font-size: 1.1rem;
@@ -126,6 +160,5 @@ line-height: 2rem;
 a.button {
-  margin: 0 0 0.75rem 0;
   padding: 0.75rem 1rem;
   color: var(--provider-color, var(--color-primary));
-  background-color: var(--provider-bg, var(--color-background-card));
+  background-color: var(--provider-bg);
   font-size: 1.1rem;
@@ -143,14 +176,13 @@ min-height: 62px;
 
-@media (max-width: 450px) {
-
-button,
-a.button {
-    font-size: 0.9rem
-}
-  }
-
 button:hover, a.button:hover {
+    background-color: var(--provider-bg-hover, var(--color-background-hover));
     cursor: pointer;
   }
 
+/* &:focus {
+    outline: none;
+    border: 1px solid;
+    border-color: var(--color-info);
+  } */
+
 button:active, a.button:active {
@@ -175,16 +207,8 @@ cursor: pointer;
 
-@media (prefers-color-scheme: dark) {
-  button,
-  a.button {
-    color: var(--provider-dark-color, var(--color-primary));
-    background-color: var(--provider-dark-bg, var(--color-background));
+#submitButton:hover {
+    background-color: var(
+      --button-hover-bg,
+      var(--colo r-info-hover)
+    ) !important;
   }
-  #provider-logo {
-    display: none !important;
-  }
-  #provider-logo-dark {
-    width: 25px;
-    display: block !important;
-  }
-}
 
@@ -210,2 +234,3 @@ a.site {
   padding: 0;
+  box-sizing: border-box;
 }
@@ -218,3 +243,2 @@
 .error a.button {
-    display: inline-block;
     padding-left: 2rem;
@@ -280,35 +304,17 @@ padding-right: 2rem;
 
-.signin > div,
-  .signin form {
+.signin .provider + .provider {
+    margin-top: 1rem;
+  }
 
-    max-width: 300px;
-}
-
 .logo {
   display: inline-block;
   max-width: 150px;
-  margin-top: 20px;
-  margin-bottom: 25px;
+  margin: 1.25rem 0;
   max-height: 70px;
 }
 
-@media screen and (min-width: 450px) {
-
 .card {
-    width: 350px
-}
-  }
-
-@media screen and (max-width: 450px) {
-
-.card {
-    width: 200px
-}
-  }
-
-.card {
-  margin: 20px 0 20px 0;
   background-color: var(--color-background-card);
-  border-radius: 30px;
-  padding: 20px 50px;
+  border-radius: 2rem;
+  padding: 1.25rem 2rem;
 }
@@ -323,3 +329,15 @@
 }
+
+@media screen and (min-width: 450px) {
+  .card {
+    margin: 2rem 0;
+    width: 368px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .card {
+    margin: 1rem 0;
+    width: 343px;
+  }
+}
 `
-// Generated by `pnpm css`

src/providers/apple.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://apple.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/apple.svg" width="24"/>
  * </a>
@@ -175,7 +175,4 @@ * </div>
       logo: "/apple.svg",
-      logoDark: "/apple-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      text: "#fff",
+      bg: "#000",
     },
@@ -182,0 +179,0 @@ options,

src/providers/asgardeo.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://wso2.com/asgardeo/" style={{backgroundColor: "#ECEFF1", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/asgardeo.svg" width="24"/>
  * </a>
@@ -117,7 +117,4 @@ * </div>
       logo: "/asgardeo.svg",
-      logoDark: "/asgardeo-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      bg: "#000",
+      text: "#fff",
     },
@@ -124,0 +121,0 @@ options: config,

src/providers/atlassian.ts

@@ -101,12 +101,5 @@ /**
     },
-    style: {
-      logo: "/atlassian.svg",
-      logoDark: "/atlassian-dark.svg",
-      bg: "#0052cc",
-      text: "#fff",
-      bgDark: "#fff",
-      textDark: "#0052cc",
-    },
+    style: { logo: "/atlassian.svg", bg: "#fff", text: "#0052cc" },
     options,
   }
 }

src/providers/auth0.ts

@@ -7,3 +7,3 @@ /**
  * <a href="https://auth0.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/auth0-dark.svg" width="24"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/auth0.svg" width="24"/>
  * </a>
@@ -127,12 +127,5 @@ * </div>
     type: "oidc",
-    style: {
-      logo: "/auth0.svg",
-      logoDark: "/auth0-dark.svg",
-      bg: "#fff",
-      text: "#EB5424",
-      bgDark: "#EB5424",
-      textDark: "#fff",
-    },
+    style: { logo: "/auth0.svg", text: "#fff", bg: "#EB5424" },
     options: config,
   }
 }

src/providers/azure-ad-b2c.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>
  * </a>
@@ -126,12 +126,5 @@ * </div>
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options,
   }
 }

src/providers/azure-ad.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://learn.microsoft.com/en-us/azure/active-directory">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/azure.svg" height="48" width="48"/>
  * </a>
@@ -137,3 +137,3 @@ * </div>
       params: {
-        scope: 'openid profile email User.Read',
+        scope: "openid profile email User.Read",
       },
@@ -166,12 +166,5 @@ },
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options: rest,
   }
 }

src/providers/battlenet.ts

@@ -94,12 +94,5 @@ /**
     },
-    style: {
-      logo: "/battlenet.svg",
-      logoDark: "/battlenet-dark.svg",
-      bg: "#fff",
-      text: "#148eff",
-      bgDark: "#148eff",
-      textDark: "#fff",
-    },
+    style: { logo: "/battlenet.svg", bg: "#148eff", text: "#fff" },
     options,
   }
 }

src/providers/beyondidentity.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://www.beyondidentity.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/beyondidentity.svg" height="48" width="48"/>
  * </a>
@@ -91,7 +91,4 @@ * </div>
       logo: "/beyondidentity.svg",
-      logoDark: "/beyondidentity-dark.svg",
-      bg: "#fff",
-      bgDark: "#5077c5",
-      text: "#5077c5",
-      textDark: "#fff",
+      bg: "#5077c5",
+      text: "#fff",
     },
@@ -98,0 +95,0 @@ options: config,

src/providers/box.ts

@@ -81,7 +81,4 @@ /**
       logo: "/box.svg",
-      logoDark: "/box-dark.svg",
-      bg: "#fff",
-      text: "#0075C9",
-      bgDark: "#0075C9",
-      textDark: "#fff",
+      bg: "#0075C9",
+      text: "#fff",
     },
@@ -88,0 +85,0 @@ options,

src/providers/click-up.ts

@@ -95,7 +95,4 @@ /**
       logo: "/click-up.svg",
-      logoDark: "/click-up.svg",
-      bg: "#fff",
-      bgDark: "#24292f",
-      text: "#000",
-      textDark: "#fff",
+      bg: "#24292f",
+      text: "#fff",
     },
@@ -102,0 +99,0 @@ options: config,

src/providers/cognito.ts

@@ -83,12 +83,5 @@ /**
     type: "oidc",
-    style: {
-      logo: "/cognito.svg",
-      logoDark: "/cognito.svg",
-      bg: "#fff",
-      text: "#C17B9E",
-      bgDark: "#fff",
-      textDark: "#C17B9E",
-    },
+    style: { logo: "/cognito.svg", bg: "#fff", text: "#C17B9E" },
     options,
   }
 }

src/providers/descope.ts

@@ -16,5 +16,5 @@ /**
 
-/** The returned user profile from Descope when using the profile callback. 
+/** The returned user profile from Descope when using the profile callback.
  * [See Load User](https://docs.descope.com/api/openapi/usermanagement/operation/LoadUser/)
-*/
+ */
 export interface DescopeProfile {
@@ -112,7 +112,4 @@ /** The user's unique Descope ID */
       logo: "/descope.svg",
-      logoDark: "/descope.svg",
       bg: "#1C1C23",
       text: "#ffffff",
-      bgDark: "#1C1C23",
-      textDark: "#ffffff",
     },
@@ -119,0 +116,0 @@ options: config,

src/providers/discord.ts

@@ -161,12 +161,5 @@ /**
     },
-    style: {
-      logo: "/discord.svg",
-      logoDark: "/discord-dark.svg",
-      bg: "#fff",
-      text: "#7289DA",
-      bgDark: "#7289DA",
-      textDark: "#fff",
-    },
+    style: { logo: "/discord.svg", bg: "#5865F2", text: "#fff" },
     options,
   }
 }

src/providers/dribbble.ts

@@ -111,10 +111,5 @@ /**
     style: {
-      // Light mode
       logo: "/dribbble.svg",
-      text: "#ea4c89",
-      bg: "#fff",
-      // Dark mode
-      logoDark: "/dribbble-dark.svg",
-      textDark: "#fff",
-      bgDark: "#000",
+      text: "#fff",
+      bg: "#000",
     },
@@ -121,0 +116,0 @@

src/providers/email.ts

@@ -13,3 +13,18 @@ import type { CommonProviderOptions } from "./index.js"
 // TODO: Make use of https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html for the string
-type AllTransportOptions = string | SMTPTransport | SMTPTransport.Options | SMTPPool | SMTPPool.Options | SendmailTransport | SendmailTransport.Options | StreamTransport | StreamTransport.Options | JSONTransport | JSONTransport.Options | SESTransport | SESTransport.Options | Transport<any> | TransportOptions
+type AllTransportOptions =
+  | string
+  | SMTPTransport
+  | SMTPTransport.Options
+  | SMTPPool
+  | SMTPPool.Options
+  | SendmailTransport
+  | SendmailTransport.Options
+  | StreamTransport
+  | StreamTransport.Options
+  | JSONTransport
+  | JSONTransport.Options
+  | SESTransport
+  | SESTransport.Options
+  | Transport<any>
+  | TransportOptions
 
@@ -39,3 +54,3 @@ export interface SendVerificationRequestParams {
  */
-export interface EmailUserConfig {
+export interface EmailUserConfig extends Record<string, unknown> {
   server?: AllTransportOptions
@@ -114,3 +129,2 @@ type?: "email"
 
-
 // TODO: Rename to Token provider
@@ -117,0 +131,0 @@ // when started working on https://github.com/nextauthjs/next-auth/discussions/1465

src/providers/facebook.ts

@@ -106,12 +106,5 @@ /**
     },
-    style: {
-      logo: "/facebook.svg",
-      logoDark: "/facebook-dark.svg",
-      bg: "#fff",
-      text: "#006aff",
-      bgDark: "#006aff",
-      textDark: "#fff",
-    },
+    style: { logo: "/facebook.svg", bg: "#006aff", text: "#fff" },
     options,
   }
 }

src/providers/foursquare.ts

@@ -94,7 +94,4 @@ /**
       logo: "/foursquare.svg",
-      logoDark: "/foursquare-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      bg: "#000",
+      text: "#fff",
     },
@@ -101,0 +98,0 @@ options,

src/providers/freshbooks.ts

@@ -81,7 +81,4 @@ /**
       logo: "/freshbooks.svg",
-      logoDark: "/freshbooks-dark.svg",
-      bg: "#fff",
-      text: "#0075dd",
-      bgDark: "#0075dd",
-      textDark: "#fff",
+      bg: "#0075dd",
+      text: "#fff",
     },
@@ -88,0 +85,0 @@ options,

src/providers/github.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://github.com">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github-dark.svg" height="48" width="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/github.svg" height="48" width="48"/>
  * </a>
@@ -172,12 +172,5 @@ * </div>
     },
-    style: {
-      logo: "/github.svg",
-      logoDark: "/github-dark.svg",
-      bg: "#fff",
-      bgDark: "#24292f",
-      text: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/github.svg", bg: "#24292f", text: "#fff" },
     options: config,
   }
 }

src/providers/gitlab.ts

@@ -127,12 +127,5 @@ /**
     },
-    style: {
-      logo: "/gitlab.svg",
-      logoDark: "/gitlab-dark.svg",
-      bg: "#fff",
-      text: "#FC6D26",
-      bgDark: "#FC6D26",
-      textDark: "#fff",
-    },
+    style: { logo: "/gitlab.svg", bg: "#FC6D26", text: "#fff" },
     options,
   }
 }

src/providers/google.ts

@@ -144,12 +144,5 @@ /**
     issuer: "https://accounts.google.com",
-    style: {
-      logo: "/google.svg",
-      logoDark: "/google.svg",
-      bgDark: "#fff",
-      bg: "#fff",
-      text: "#000",
-      textDark: "#000",
-    },
+    style: { logo: "/google.svg", bg: "#fff", text: "#000" },
     options,
   }
 }

src/providers/hubspot.ts

@@ -109,12 +109,5 @@ /**
     },
-    style: {
-      logo: "/hubspot.svg",
-      logoDark: "/hubspot-dark.svg",
-      bg: "#fff",
-      text: "#ff7a59",
-      bgDark: "#ff7a59",
-      textDark: "#fff",
-    },
+    style: { logo: "/hubspot.svg", bg: "#ff7a59", text: "#fff" },
     options,
   }
 }

src/providers/instagram.ts

@@ -94,7 +94,4 @@ /**
       logo: "/instagram.svg",
-      logoDark: "/instagram.svg",
       bg: "#fff",
       text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
     },
@@ -101,0 +98,0 @@ options: config,

src/providers/keycloak.ts

@@ -102,12 +102,5 @@ /**
     type: "oidc",
-    style: {
-      logo: "/keycloak.svg",
-      logoDark: "/keycloak.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
-    },
+    style: { logo: "/keycloak.svg", bg: "#fff", text: "#000" },
     options,
   }
 }

src/providers/line.ts

@@ -93,12 +93,5 @@ /**
     },
-    style: {
-      logo: "/line.svg",
-      logoDark: "/line.svg",
-      bg: "#fff",
-      text: "#00C300",
-      bgDark: "#00C300",
-      textDark: "#fff",
-    },
+    style: { logo: "/line.svg", bg: "#00C300", text: "#fff" },
     options,
   }
 }

src/providers/linkedin.ts

@@ -15,9 +15,9 @@ /**
 export interface LinkedInProfile extends Record<string, any> {
-  sub: string,
-  name: string,
-  given_name: string,
-  family_name: string,
-  picture: string,
-  locale: string,
-  email: string,
+  sub: string
+  name: string
+  given_name: string
+  family_name: string
+  picture: string
+  locale: string
+  email: string
   email_verified: boolean
@@ -89,15 +89,8 @@ }
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    style: {
-      logo: "/linkedin.svg",
-      logoDark: "/linkedin-dark.svg",
-      bg: "#fff",
-      text: "#069",
-      bgDark: "#069",
-      textDark: "#fff",
-    },
+    style: { logo: "/linkedin.svg", bg: "#069", text: "#fff" },
     options,
   }
 }

src/providers/mailchimp.ts

@@ -81,7 +81,4 @@ /**
       logo: "/mailchimp.svg",
-      logoDark: "/mailchimp-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      bg: "#000",
+      text: "#fff",
     },
@@ -88,0 +85,0 @@ options: config,

src/providers/mattermost.ts

@@ -145,12 +145,5 @@ /**
     },
-    style: {
-      logo: "/mattermost.svg",
-      logoDark: "/mattermost-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/mattermost.svg", bg: "#000", text: "#fff" },
     options: rest,
   }
 }

src/providers/notion.ts

@@ -155,12 +155,5 @@ /**
     },
-    style: {
-      logo: "/notion.svg",
-      logoDark: "/notion.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
-    },
+    style: { logo: "/notion.svg", bg: "#fff", text: "#000" },
     options,
   }
 }

src/providers/oauth.ts

@@ -102,7 +102,7 @@ import type { Client } from "oauth4webapi"
   logo: string
-  logoDark: string
+  logoDark?: string
   bg: string
-  bgDark: string
+  bgDark?: string
   text: string
-  textDark: string
+  textDark?: string
 }
@@ -109,0 +109,0 @@

src/providers/okta.ts

@@ -101,12 +101,5 @@ /**
     type: "oidc",
-    style: {
-      logo: "/okta.svg",
-      logoDark: "/okta-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/okta.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

src/providers/passage.ts

@@ -94,7 +94,4 @@ /**
       logo: "/passage.svg",
-      logoDark: "/passage.svg",
       bg: "#fff",
-      bgDark: "#fff",
       text: "#000",
-      textDark: "#000",
     },
@@ -101,0 +98,0 @@ options: config,

src/providers/patreon.ts

@@ -90,12 +90,5 @@ /**
     },
-    style: {
-      logo: "/patreon.svg",
-      logoDark: "/patreon.svg",
-      bg: "#fff",
-      text: "#e85b46",
-      bgDark: "#000",
-      textDark: "#e85b46",
-    },
+    style: { logo: "/patreon.svg", bg: "#e85b46", text: "#fff" },
     options,
   }
 }

src/providers/reddit.ts

@@ -99,7 +99,4 @@ /**
       logo: "/reddit.svg",
-      bg: "#fff",
-      text: "#000",
-      logoDark: "/reddit.svg",
-      bgDark: "#000",
-      textDark: "#fff",
+      bg: "#000",
+      text: "#fff",
     },
@@ -106,0 +103,0 @@ options: config,

src/providers/slack.ts

@@ -108,12 +108,5 @@ /**
     issuer: "https://slack.com",
-    style: {
-      logo: "/slack.svg",
-      logoDark: "/slack.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/slack.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

src/providers/spotify.ts

@@ -91,12 +91,5 @@ /**
     },
-    style: {
-      logo: "/spotify.svg",
-      logoDark: "/spotify.svg",
-      bg: "#fff",
-      text: "#2ebd59",
-      bgDark: "#fff",
-      textDark: "#2ebd59",
-    },
+    style: { logo: "/spotify.svg", text: "#fff", bg: "#000" },
     options,
   }
 }

src/providers/tiktok.ts

@@ -154,22 +154,22 @@ /**
  *  - [Avaliable Scopes](https://developers.tiktok.com/doc/tiktok-api-scopes/)
- *  
  *
+ *
  * ### Notes
  *
  * :::tip
- * 
+ *
  * Production applications cannot use localhost URLs to sign in with Tiktok. You need add the domain and Callback/Redirect url's to your Tiktok app and have them review and approved by the Tiktok Team.
- * 
+ *
  * :::
  *
  * :::tip
- * 
+ *
  * Email address is not supported by Tiktok.
- * 
+ *
  * :::
  *
  * :::tip
- * 
+ *
  * Client_ID will be the Client Key in the Tiktok Application
- * 
+ *
  * :::
@@ -181,6 +181,6 @@ *
  * :::tip
- * 
+ *
  * The Tiktok provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/tiktok.ts).
  * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/providers/custom-provider#override-default-options).
- * 
+ *
  * :::
@@ -263,7 +263,4 @@ *
       logo: "/tiktok.svg",
-      logoDark: "/tiktok-dark.svg",
-      bg: "#fff",
-      bgDark: "#000",
-      text: "#000",
-      textDark: "#fff",
+      bg: "#000",
+      text: "#fff",
     },
@@ -270,0 +267,0 @@ options,

src/providers/todoist.ts

@@ -114,12 +114,5 @@ /**
     },
-    style: {
-      logo: "/todoist.svg",
-      logoDark: "/todoist.svg",
-      bg: "#fff",
-      text: "#E44332",
-      bgDark: "#000",
-      textDark: "#E44332",
-    },
+    style: { logo: "/todoist.svg", text: "#000", bg: "#E44332" },
     options,
   }
 }

src/providers/trakt.ts

@@ -115,12 +115,5 @@ /**
     },
-    style: {
-      logo: "/trakt.svg",
-      logoDark: "/trakt-dark.svg",
-      bg: "#fff",
-      text: "#ED2224",
-      bgDark: "#ED2224",
-      textDark: "#fff",
-    },
+    style: { logo: "/trakt.svg", bg: "#ED2224", text: "#fff" },
     options,
   }
 }

src/providers/twitch.ts

@@ -116,12 +116,5 @@ /**
     },
-    style: {
-      logo: "/twitch.svg",
-      logoDark: "/twitch-dark.svg",
-      bg: "#fff",
-      text: "#65459B",
-      bgDark: "#65459B",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitch.svg", bg: "#65459B", text: "#fff" },
     options: config,
   }
 }

src/providers/twitter.ts

@@ -200,12 +200,5 @@ /**
     },
-    style: {
-      logo: "/twitter.svg",
-      logoDark: "/twitter-dark.svg",
-      bg: "#fff",
-      text: "#1da1f2",
-      bgDark: "#1da1f2",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
     options: config,
   }
 }

src/providers/vk.ts

@@ -385,12 +385,5 @@ /**
     },
-    style: {
-      logo: "/vk.svg",
-      logoDark: "/vk-dark.svg",
-      bg: "#fff",
-      text: "#07F",
-      bgDark: "#07F",
-      textDark: "#fff",
-    },
+    style: { logo: "/vk.svg", bg: "#07F", text: "#fff" },
     options,
   }
 }

src/providers/wikimedia.ts

@@ -250,12 +250,5 @@ /**
     },
-    style: {
-      logo: "/wikimedia.svg",
-      logoDark: "/wikimedia-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/wikimedia.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

src/providers/workos.ts

@@ -169,12 +169,5 @@ /**
     },
-    style: {
-      logo: "/workos.svg",
-      logoDark: "/workos-dark.svg",
-      bg: "#fff",
-      text: "#6363f1",
-      bgDark: "#6363f1",
-      textDark: "#fff",
-    },
+    style: { logo: "/workos.svg", bg: "#6363f1", text: "#fff" },
     options,
   }
 }

src/providers/yandex.ts

@@ -147,7 +147,4 @@ /**
       logo: "/yandex.svg",
-      logoDark: "/yandex.svg",
       bg: "#ffcc00",
       text: "#000",
-      bgDark: "#ffcc00",
-      textDark: "#000",
     },
@@ -154,0 +151,0 @@ options,

src/providers/zitadel.ts

@@ -5,3 +5,3 @@ /**
  * <a href="https://zitadel.com/">
- *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel-dark.svg" height="48"/>
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/zitadel.svg" height="48"/>
  * </a>
@@ -8,0 +8,0 @@ * </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1347846

decreased by-0.3%

Lines of code

34287

decreased by-0.88%

No dependency changes