docs: kernel.auth.connections.login (sdk client is named kernel)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: masnwilliams

packages/managed-auth-react/README.md

@@ -29,7 +29,7 @@ export default function LoginPage() {
 }
 ```
 
-`sessionId` and `handoffCode` come from your backend's call to `POST /auth/connections/{id}/login` (or `client.auth.connections.login(id)` via `@onkernel/sdk`). The response includes a `hosted_url`; pass the connection ID and the single-use `code` query parameter from that URL into the component.
+`sessionId` and `handoffCode` come from your backend's call to `POST /auth/connections/{id}/login` (or `kernel.auth.connections.login(id)` via `@onkernel/sdk`). The response includes a `hosted_url`; pass the connection ID and the single-use `code` query parameter from that URL into the component.
 
 ## Styling
 

packages/managed-auth-react/package.json

@@ -13,17 +13,9 @@
   "bugs": {
     "url": "https://github.com/kernel/managed-auth-react/issues"
   },
-  "keywords": [
-    "kernel",
-    "auth",
-    "react",
-    "managed-auth",
-    "authentication"
-  ],
+  "keywords": ["kernel", "auth", "react", "managed-auth", "authentication"],
   "type": "module",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": ["**/*.css"],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -36,11 +28,7 @@
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
+  "files": ["dist", "README.md", "LICENSE"],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",

packages/managed-auth-react/src/appearance/context.tsx

@@ -13,28 +13,19 @@ interface AppearanceContextValue {
   elements: AppearanceElements;
 }
 
-const AppearanceContext = createContext<AppearanceContextValue>({
-  elements: {},
-});
+const AppearanceContext = createContext<AppearanceContextValue>({ elements: {} });
 
 interface AppearanceProviderProps {
   appearance?: Appearance;
   children: ReactNode;
 }
 
-export function AppearanceProvider({
-  appearance,
-  children,
-}: AppearanceProviderProps) {
+export function AppearanceProvider({ appearance, children }: AppearanceProviderProps) {
   const value = useMemo<AppearanceContextValue>(
     () => ({ elements: appearance?.elements ?? {} }),
     [appearance?.elements],
   );
-  return (
-    <AppearanceContext.Provider value={value}>
-      {children}
-    </AppearanceContext.Provider>
-  );
+  return <AppearanceContext.Provider value={value}>{children}</AppearanceContext.Provider>;
 }
 
 function normalizeElement(value: ElementValue | undefined): {

packages/managed-auth-react/src/appearance/pseudoStyles.ts

@@ -143,7 +143,10 @@ export function compilePseudoStyle(style: ElementStyle | undefined): {
   // For belt-and-suspenders, every declaration is emitted with the same
   // class selector and inherits its specificity directly.
   const rules = pseudoBlocks
-    .map(([sel, decls]) => `.${className}${sel}{${styleObjectToCss(decls)}}`)
+    .map(
+      ([sel, decls]) =>
+        `.${className}${sel}{${styleObjectToCss(decls)}}`,
+    )
     .join("");
 
   injectRules(className, rules);

packages/managed-auth-react/src/components/KernelLogo.tsx

@@ -17,11 +17,7 @@ const BRAND_COLORS: Record<Exclude<KernelLogoColor, "auto">, string> = {
   white: "#ffffff",
 };
 
-export function KernelLogo({
-  brandColor,
-  style: callerStyle,
-  ...props
-}: KernelLogoProps) {
+export function KernelLogo({ brandColor, style: callerStyle, ...props }: KernelLogoProps) {
   const slot = useSlot();
   const { style: slotStyle, ...slotPropsRest } = slot(
     "poweredByLogo",

packages/managed-auth-react/src/components/UnifiedAuthForm.tsx

@@ -2,7 +2,9 @@ import { useState, type FormEvent, type ReactNode } from "react";
 import { useSlot } from "../appearance/context";
 import { useLocalization } from "../localization/context";
 import { extractDomainName } from "../lib/profile-name";
-import type { AppearanceLayout } from "../appearance/types";
+import type {
+  AppearanceLayout,
+} from "../appearance/types";
 import type {
   DiscoveredField,
   MFAOption,
@@ -89,8 +91,7 @@ function getAutocomplete(field: DiscoveredField): string | undefined {
     case "totp":
       return "one-time-code";
     default:
-      if (name.includes("user") || name.includes("identifier"))
-        return "username";
+      if (name.includes("user") || name.includes("identifier")) return "username";
       return undefined;
   }
 }
@@ -168,9 +169,7 @@ export function UnifiedAuthForm({
               {option.label}
             </div>
             {option.description && (
-              <div
-                {...slot("signInOptionDescription", "kma-option__description")}
-              >
+              <div {...slot("signInOptionDescription", "kma-option__description")}>
                 {option.description}
               </div>
             )}
@@ -189,7 +188,8 @@ export function UnifiedAuthForm({
   // "switch" MFA options ("Use another method") are fallbacks — always
   // render them last so the primary verification methods come first.
   const sortedMFAOptions = [...mfaOptions].sort(
-    (a, b) => (a.type === "switch" ? 1 : 0) - (b.type === "switch" ? 1 : 0),
+    (a, b) =>
+      (a.type === "switch" ? 1 : 0) - (b.type === "switch" ? 1 : 0),
   );
 
   const renderMFAOptions = () => (
@@ -203,10 +203,7 @@ export function UnifiedAuthForm({
           onClick={() => onMFASelect(option.type)}
           disabled={isLoading}
         >
-          <span
-            {...slot("mfaOptionIcon", "kma-option__icon")}
-            aria-hidden="true"
-          >
+          <span {...slot("mfaOptionIcon", "kma-option__icon")} aria-hidden="true">
             {getMFAIcon(option.type)}
           </span>
           <div className="kma-option__text">
@@ -254,10 +251,7 @@ export function UnifiedAuthForm({
                 autoComplete={getAutocomplete(field)}
                 value={formData[field.name] || ""}
                 onChange={(e) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    [field.name]: e.target.value,
-                  }))
+                  setFormData((prev) => ({ ...prev, [field.name]: e.target.value }))
                 }
                 className="kma-input--with-toggle"
               />
@@ -270,9 +264,7 @@ export function UnifiedAuthForm({
                   }))
                 }
                 tabIndex={-1}
-                aria-label={
-                  showPassword[field.name] ? l.passwordHide : l.passwordShow
-                }
+                aria-label={showPassword[field.name] ? l.passwordHide : l.passwordShow}
                 {...slot("passwordToggle", "kma-password-toggle")}
               >
                 {showPassword[field.name] ? <EyeOffIcon /> : <EyeIcon />}
@@ -288,10 +280,7 @@ export function UnifiedAuthForm({
               autoComplete={getAutocomplete(field)}
               value={formData[field.name] || ""}
               onChange={(e) =>
-                setFormData((prev) => ({
-                  ...prev,
-                  [field.name]: e.target.value,
-                }))
+                setFormData((prev) => ({ ...prev, [field.name]: e.target.value }))
               }
             />
           )}
@@ -342,8 +331,7 @@ export function UnifiedAuthForm({
   );
 
   const sections: ReactNode[] = [];
-  if (hasSignIn)
-    sections.push(<div key="sign-in">{renderSignInOptions()}</div>);
+  if (hasSignIn) sections.push(<div key="sign-in">{renderSignInOptions()}</div>);
   if (hasMFA) sections.push(<div key="mfa">{renderMFAOptions()}</div>);
   if (socialsTop && hasSSO) sections.push(<div key="sso">{renderSSO()}</div>);
   if (hasFields) sections.push(<div key="fields">{renderFields()}</div>);

packages/managed-auth-react/src/components/icons.tsx

@@ -2,10 +2,7 @@ import type { SVGProps } from "react";
 
 type IconProps = SVGProps<SVGSVGElement>;
 
-function Icon({
-  children,
-  ...rest
-}: IconProps & { children: React.ReactNode }) {
+function Icon({ children, ...rest }: IconProps & { children: React.ReactNode }) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -181,7 +178,12 @@ export const RepeatIcon = (p: IconProps) => (
 );
 
 export const SpinnerIcon = (p: IconProps) => (
-  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...p}>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+    {...p}
+  >
     <circle
       cx="12"
       cy="12"

packages/managed-auth-react/src/styles/styles.css

@@ -42,9 +42,8 @@
   --kma-radius-sm: 0.375rem;
   --kma-radius-lg: 0.625rem;
 
-  --kma-font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --kma-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --kma-font-size: 14px;
   --kma-font-size-sm: 12px;
   --kma-font-size-lg: 16px;
@@ -53,8 +52,8 @@
   --kma-font-weight-semibold: 600;
 
   --kma-spacing-unit: 4px;
-  --kma-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --kma-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
   --kma-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --kma-transition-duration: 150ms;
 
@@ -362,8 +361,7 @@
   font: inherit;
   font-weight: var(--kma-font-weight-medium);
   border-radius: var(--kma-radius-sm);
-  transition:
-    background-color var(--kma-transition-duration),
+  transition: background-color var(--kma-transition-duration),
     color var(--kma-transition-duration),
     border-color var(--kma-transition-duration),
     opacity var(--kma-transition-duration),
@@ -381,8 +379,7 @@
 
 .kma-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--kma-color-ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kma-color-ring) 50%, transparent);
 }
 
 .kma-button:disabled {
@@ -561,8 +558,7 @@
   font-size: var(--kma-font-size);
   line-height: 1.4;
   box-shadow: var(--kma-shadow-xs);
-  transition:
-    border-color var(--kma-transition-duration),
+  transition: border-color var(--kma-transition-duration),
     box-shadow var(--kma-transition-duration);
 }
 
@@ -659,7 +655,8 @@
 
 .kma-error-banner {
   background: color-mix(in srgb, var(--kma-color-danger) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--kma-color-danger) 25%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--kma-color-danger) 25%, transparent);
   border-radius: var(--kma-radius-sm);
   padding: 12px 14px;
 }
@@ -899,20 +896,12 @@
 }
 
 .kma-root.kma-theme-dark .kma-external-action__badge--key {
-  background: color-mix(
-    in oklab,
-    oklch(0.414 0.112 45.904) 30%,
-    transparent
-  ); /* amber-900/30 */
+  background: color-mix(in oklab, oklch(0.414 0.112 45.904) 30%, transparent); /* amber-900/30 */
   color: oklch(0.828 0.189 84.429); /* amber-400 */
 }
 
 .kma-root.kma-theme-dark .kma-external-action__badge--fp {
-  background: color-mix(
-    in oklab,
-    oklch(0.379 0.146 265.522) 30%,
-    transparent
-  ); /* blue-900/30 */
+  background: color-mix(in oklab, oklch(0.379 0.146 265.522) 30%, transparent); /* blue-900/30 */
   color: oklch(0.707 0.165 254.624); /* blue-400 */
 }
 
@@ -922,11 +911,7 @@
     color: oklch(0.828 0.189 84.429);
   }
   .kma-root.kma-theme-auto .kma-external-action__badge--fp {
-    background: color-mix(
-      in oklab,
-      oklch(0.379 0.146 265.522) 30%,
-      transparent
-    );
+    background: color-mix(in oklab, oklch(0.379 0.146 265.522) 30%, transparent);
     color: oklch(0.707 0.165 254.624);
   }
 }
@@ -1035,7 +1020,11 @@
 
 @media (prefers-color-scheme: dark) {
   .kma-root.kma-theme-auto .kma-circle-icon--warning {
-    background: color-mix(in oklab, oklch(0.414 0.112 45.904) 30%, transparent);
+    background: color-mix(
+      in oklab,
+      oklch(0.414 0.112 45.904) 30%,
+      transparent
+    );
     color: oklch(0.828 0.189 84.429);
   }
 }