@authrim/sveltekit 0.1.0

package/dist/ui/templates/DeviceFlowTemplate.svelte

@@ -0,0 +1,228 @@
+<!--
+  DeviceFlowTemplate
+  - デバイスフロー入力UIを提供する
+  - コード検証・ポーリングはSDK側に委譲する
+-->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import Card from "../shared/Card.svelte";
+  import Button from "../shared/Button.svelte";
+  import Alert from "../shared/Alert.svelte";
+  import UserCodeInput from "../forms/UserCodeInput.svelte";
+  import QRCodeDisplay from "../forms/QRCodeDisplay.svelte";
+
+  // State
+  export let loading = false;
+  export let error = "";
+  export let success = "";
+  /** Pre-filled user code (e.g., from URL params) */
+  export let initialCode = "";
+  /** QR code data URL (generated externally) */
+  export let qrCodeUrl = "";
+  /** The verification URL to show below QR code */
+  export let verificationUrl = "";
+
+  // Labels (i18n)
+  export let title = "Device Authorization";
+  export let instructions =
+    "Enter the code shown on your device to authorize it";
+  export let qrLabel = "Scan QR code";
+  export let orManualLabel = "or enter code manually";
+  export let codeLabel = "User Code";
+  export let codeHint = "Enter the 8-character code (XXXX-XXXX)";
+  export let approveLabel = "Approve";
+  export let denyLabel = "Deny";
+
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    approve: { userCode: string };
+    deny: { userCode: string };
+    "code-change": { value: string };
+    "dismiss-error": void;
+    "dismiss-success": void;
+  }>();
+
+  let codeValue = initialCode;
+
+  function handleCodeChange(e: CustomEvent<{ value: string }>) {
+    codeValue = e.detail.value;
+    dispatch("code-change", e.detail);
+  }
+
+  function handleCodeSubmit(e: CustomEvent<{ value: string }>) {
+    codeValue = e.detail.value;
+  }
+
+  $: isCodeComplete = codeValue.replace(/-/g, "").length === 8;
+</script>
+
+<div class="authrim-device-template {className}">
+  <Card padding="lg" shadow="lg" class="authrim-device-template__card">
+    <!-- Header -->
+    <div class="authrim-device-template__header">
+      <div class="authrim-device-template__icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <h1 class="authrim-device-template__title">{title}</h1>
+      <p class="authrim-device-template__instructions">{instructions}</p>
+    </div>
+
+    <!-- Alerts -->
+    {#if error}
+      <Alert
+        variant="error"
+        dismissible
+        on:dismiss={() => dispatch("dismiss-error")}
+      >
+        {error}
+      </Alert>
+    {/if}
+
+    {#if success}
+      <Alert
+        variant="success"
+        dismissible
+        on:dismiss={() => dispatch("dismiss-success")}
+      >
+        {success}
+      </Alert>
+    {/if}
+
+    <!-- QR Code (if available) -->
+    {#if qrCodeUrl}
+      <QRCodeDisplay
+        data={verificationUrl}
+        imageUrl={qrCodeUrl}
+        label={qrLabel}
+        caption={verificationUrl}
+      />
+
+      <div class="authrim-device-template__divider">
+        <span>{orManualLabel}</span>
+      </div>
+    {/if}
+
+    <!-- Code Input -->
+    <UserCodeInput
+      value={codeValue}
+      label={codeLabel}
+      hint={codeHint}
+      disabled={loading}
+      on:change={handleCodeChange}
+      on:submit={handleCodeSubmit}
+    />
+
+    <!-- Action Buttons -->
+    <div class="authrim-device-template__actions">
+      <Button
+        variant="primary"
+        size="lg"
+        fullWidth
+        {loading}
+        disabled={!isCodeComplete}
+        on:click={() => dispatch("approve", { userCode: codeValue })}
+      >
+        {loading ? "Processing..." : approveLabel}
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="lg"
+        fullWidth
+        disabled={loading || !isCodeComplete}
+        on:click={() => dispatch("deny", { userCode: codeValue })}
+      >
+        {denyLabel}
+      </Button>
+    </div>
+  </Card>
+</div>
+
+<style>
+  .authrim-device-template {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: var(--authrim-space-4);
+    background: linear-gradient(
+      135deg,
+      var(--authrim-color-bg-subtle) 0%,
+      var(--authrim-color-bg) 100%
+    );
+  }
+
+  :global(.authrim-device-template__card) {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .authrim-device-template__header {
+    text-align: center;
+    margin-bottom: var(--authrim-space-6);
+  }
+
+  .authrim-device-template__icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto var(--authrim-space-4);
+    padding: var(--authrim-space-3);
+    background: var(--authrim-color-bg-subtle);
+    border-radius: var(--authrim-radius-full);
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-device-template__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .authrim-device-template__title {
+    margin: 0 0 var(--authrim-space-2);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-2xl);
+    font-weight: 700;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-device-template__instructions {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-device-template__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-3);
+    margin: var(--authrim-space-5) 0;
+    color: var(--authrim-color-text-muted);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+  }
+
+  .authrim-device-template__divider::before,
+  .authrim-device-template__divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--authrim-color-border);
+  }
+
+  .authrim-device-template__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-3);
+    margin-top: var(--authrim-space-5);
+  }
+</style>

package/dist/ui/templates/DeviceFlowTemplate.svelte.d.ts

@@ -0,0 +1,47 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DeviceFlowTemplate: $$__sveltets_2_IsomorphicComponent<{
+    loading?: boolean;
+    error?: string;
+    success?: string;
+    /** Pre-filled user code (e.g., from URL params) */ initialCode?: string;
+    /** QR code data URL (generated externally) */ qrCodeUrl?: string;
+    /** The verification URL to show below QR code */ verificationUrl?: string;
+    title?: string;
+    instructions?: string;
+    qrLabel?: string;
+    orManualLabel?: string;
+    codeLabel?: string;
+    codeHint?: string;
+    approveLabel?: string;
+    denyLabel?: string;
+    class?: string;
+}, {
+    approve: CustomEvent<{
+        userCode: string;
+    }>;
+    deny: CustomEvent<{
+        userCode: string;
+    }>;
+    "code-change": CustomEvent<{
+        value: string;
+    }>;
+    "dismiss-error": CustomEvent<void>;
+    "dismiss-success": CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DeviceFlowTemplate = InstanceType<typeof DeviceFlowTemplate>;
+export default DeviceFlowTemplate;
+//# sourceMappingURL=DeviceFlowTemplate.svelte.d.ts.map

package/dist/ui/templates/DeviceFlowTemplate.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceFlowTemplate.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/templates/DeviceFlowTemplate.svelte.ts"],"names":[],"mappings":"AAkIA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;;;IAlBxB,mDAAmD;IACnD,8CAA8C;IAC9C,iDAAiD;;;;;;;;;;;;kBACxB,MAAM;;;kBACT,MAAM;;;eACA,MAAM;;;;;;kBAaqE,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/ui/templates/LoginTemplate.svelte

@@ -0,0 +1,234 @@
+<!--
+  LoginTemplate Component
+
+  Reference implementation for login screens.
+  Copy and customize for production use.
+
+  @example
+  <LoginTemplate
+    availableProviders={['google', 'github']}
+    enablePasskey={true}
+    enableEmailCode={true}
+    on:passkey-login={handlePasskeyLogin}
+    on:social-login={handleSocialLogin}
+    on:email-submit={handleEmailSubmit}
+    on:code-submit={handleCodeSubmit}
+  />
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { SocialProvider } from '../../types.js';
+  import type { EmailCodeStep } from '../types.js';
+  import Card from '../shared/Card.svelte';
+  import Button from '../shared/Button.svelte';
+  import AuthError from '../helpers/AuthError.svelte';
+  import EmailCodeForm from '../forms/EmailCodeForm.svelte';
+  import SocialLoginButtons from '../forms/SocialLoginButtons.svelte';
+  import PasskeyConditionalInput from '../forms/PasskeyConditionalInput.svelte';
+
+  export let availableProviders: SocialProvider[] = [];
+  export let enablePasskey = true;
+  export let enableEmailCode = true;
+  export let loading = false;
+  export let loadingProvider: SocialProvider | undefined = undefined;
+  export let error = '';
+  export let title = 'Welcome back';
+  export let subtitle = 'Sign in to your account';
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    'passkey-login': void;
+    'social-login': { provider: SocialProvider };
+    'email-submit': { email: string };
+    'code-submit': { code: string };
+    'code-resend': void;
+    'dismiss-error': void;
+  }>();
+
+  let emailStep: EmailCodeStep = 'email';
+  let email = '';
+
+  function handlePasskeySubmit() {
+    dispatch('passkey-login');
+  }
+
+  function handleSocialClick(e: CustomEvent<{ provider: SocialProvider }>) {
+    dispatch('social-login', e.detail);
+  }
+
+  function handleEmailSubmit(e: CustomEvent<{ email: string }>) {
+    email = e.detail.email;
+    dispatch('email-submit', e.detail);
+  }
+
+  function handleCodeSubmit(e: CustomEvent<{ code: string }>) {
+    dispatch('code-submit', e.detail);
+  }
+
+  function handleBack() {
+    emailStep = 'email';
+  }
+
+  export function setEmailStep(step: EmailCodeStep) {
+    emailStep = step;
+  }
+</script>
+
+<div class="authrim-login-template {className}">
+  <Card padding="lg" shadow="lg" class="authrim-login-template__card">
+    <div class="authrim-login-template__header">
+      <h1 class="authrim-login-template__title">{title}</h1>
+      <p class="authrim-login-template__subtitle">{subtitle}</p>
+    </div>
+
+    {#if error}
+      <AuthError message={error} on:dismiss={() => dispatch('dismiss-error')} />
+    {/if}
+
+    <div class="authrim-login-template__content">
+      {#if enablePasskey && emailStep === 'email'}
+        <div class="authrim-login-template__passkey">
+          <PasskeyConditionalInput
+            placeholder="Email or username"
+            disabled={loading}
+          />
+          <Button
+            fullWidth
+            size="lg"
+            {loading}
+            on:click={handlePasskeySubmit}
+          >
+            Continue with Passkey
+          </Button>
+        </div>
+      {/if}
+
+      {#if enableEmailCode}
+        {#if enablePasskey && emailStep === 'email'}
+          <div class="authrim-login-template__divider">
+            <span>or continue with email</span>
+          </div>
+        {/if}
+
+        <EmailCodeForm
+          step={emailStep}
+          {email}
+          {loading}
+          on:submit-email={handleEmailSubmit}
+          on:submit-code={handleCodeSubmit}
+          on:back={handleBack}
+          on:resend={() => dispatch('code-resend')}
+        />
+      {/if}
+
+      {#if availableProviders.length > 0 && emailStep === 'email'}
+        <div class="authrim-login-template__divider">
+          <span>or</span>
+        </div>
+
+        <SocialLoginButtons
+          providers={availableProviders}
+          {loading}
+          {loadingProvider}
+          on:click={handleSocialClick}
+        />
+      {/if}
+    </div>
+
+    <div slot="footer" class="authrim-login-template__footer">
+      <slot name="footer">
+        <p>
+          Don't have an account?
+          <a href="/signup" class="authrim-login-template__link">Sign up</a>
+        </p>
+      </slot>
+    </div>
+  </Card>
+</div>
+
+<style>
+  .authrim-login-template {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: var(--authrim-space-4);
+    background:
+      linear-gradient(135deg, var(--authrim-color-bg-subtle) 0%, var(--authrim-color-bg) 100%);
+  }
+
+  :global(.authrim-login-template__card) {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .authrim-login-template__header {
+    text-align: center;
+    margin-bottom: var(--authrim-space-6);
+  }
+
+  .authrim-login-template__title {
+    margin: 0 0 var(--authrim-space-2);
+    font-size: var(--authrim-text-2xl);
+    font-weight: 700;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-login-template__subtitle {
+    margin: 0;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-login-template__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-5);
+  }
+
+  .authrim-login-template__passkey {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-4);
+  }
+
+  .authrim-login-template__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-3);
+    color: var(--authrim-color-text-muted);
+    font-size: var(--authrim-text-sm);
+  }
+
+  .authrim-login-template__divider::before,
+  .authrim-login-template__divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--authrim-color-border);
+  }
+
+  .authrim-login-template__footer {
+    text-align: center;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-login-template__footer p {
+    margin: 0;
+  }
+
+  .authrim-login-template__link {
+    color: var(--authrim-color-primary);
+    font-weight: 500;
+    text-decoration: none;
+    transition: color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-login-template__link:hover {
+    color: var(--authrim-color-primary-hover);
+    text-decoration: underline;
+  }
+</style>

package/dist/ui/templates/LoginTemplate.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { SocialProvider } from '../../types.js';
+import type { EmailCodeStep } from '../types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LoginTemplate: $$__sveltets_2_IsomorphicComponent<{
+    availableProviders?: SocialProvider[];
+    enablePasskey?: boolean;
+    enableEmailCode?: boolean;
+    loading?: boolean;
+    loadingProvider?: SocialProvider | undefined;
+    error?: string;
+    title?: string;
+    subtitle?: string;
+    class?: string;
+    setEmailStep?: (step: EmailCodeStep) => void;
+}, {
+    'passkey-login': CustomEvent<void>;
+    'social-login': CustomEvent<{
+        provider: SocialProvider;
+    }>;
+    'email-submit': CustomEvent<{
+        email: string;
+    }>;
+    'code-submit': CustomEvent<{
+        code: string;
+    }>;
+    'code-resend': CustomEvent<void>;
+    'dismiss-error': CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    footer: {};
+}, {
+    setEmailStep: (step: EmailCodeStep) => void;
+}, string>;
+type LoginTemplate = InstanceType<typeof LoginTemplate>;
+export default LoginTemplate;
+//# sourceMappingURL=LoginTemplate.svelte.d.ts.map

package/dist/ui/templates/LoginTemplate.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginTemplate.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/templates/LoginTemplate.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAmIjD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,aAAa;yBAtB0R,cAAc,EAAE;;;;sBAA8H,cAAc,GAAG,SAAS;;;;;0BA5Dtb,aAAa;;;;kBA8DZ,cAAc;;;eACjB,MAAM;;;cACR,MAAM;;;;;;;;;yBAhEF,aAAa;UAkF4D,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}