@authrim/sveltekit 0.1.0

package/dist/ui/templates/ReauthTemplate.svelte

@@ -0,0 +1,269 @@
+<!--
+  ReauthTemplate
+  - 再認証UIの枠を提供する
+  - 認証方法選択と実行はSDK側に委譲する
+-->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import type { SocialProvider } from "../../types.js";
+  import Card from "../shared/Card.svelte";
+  import Button from "../shared/Button.svelte";
+  import Alert from "../shared/Alert.svelte";
+
+  // State
+  export let loading = false;
+  export let error = "";
+  export let challengeId = "";
+
+  // Available re-auth methods
+  export let enablePasskey = true;
+  export let enableEmailCode = true;
+  export let enablePassword = false;
+  export let availableProviders: SocialProvider[] = [];
+
+  // Labels (i18n)
+  export let title = "Re-authentication Required";
+  export let subtitle =
+    "For security reasons, you need to confirm your identity";
+  export let passkeyLabel = "Continue with Passkey";
+  export let emailCodeLabel = "Send verification code";
+  export let passwordLabel = "Continue with password";
+  export let confirmLabel = "Continue";
+  export let infoText =
+    "This confirmation is required to ensure the security of your account.";
+
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    "passkey-reauth": { challengeId: string };
+    "email-code-reauth": { challengeId: string };
+    "password-reauth": { challengeId: string };
+    "social-reauth": { challengeId: string; provider: SocialProvider };
+    confirm: { challengeId: string };
+    "dismiss-error": void;
+  }>();
+
+  $: hasMethods =
+    enablePasskey ||
+    enableEmailCode ||
+    enablePassword ||
+    availableProviders.length > 0;
+</script>
+
+<div class="authrim-reauth-template {className}">
+  <Card padding="lg" shadow="lg" class="authrim-reauth-template__card">
+    <!-- Header -->
+    <div class="authrim-reauth-template__header">
+      <div class="authrim-reauth-template__icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.932 9.563 12.348a.749.749 0 00.374 0c5.499-1.416 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <h1 class="authrim-reauth-template__title">{title}</h1>
+      <p class="authrim-reauth-template__subtitle">{subtitle}</p>
+    </div>
+
+    <!-- Error -->
+    {#if error}
+      <Alert
+        variant="error"
+        dismissible
+        on:dismiss={() => dispatch("dismiss-error")}
+      >
+        {error}
+      </Alert>
+    {/if}
+
+    <!-- Auth methods -->
+    <div class="authrim-reauth-template__methods">
+      {#if hasMethods}
+        {#if enablePasskey}
+          <Button
+            variant="primary"
+            size="lg"
+            fullWidth
+            {loading}
+            on:click={() => dispatch("passkey-reauth", { challengeId })}
+          >
+            <svg
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              style="width: 20px; height: 20px;"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 7a5 5 0 113.61 4.804l-1.903 1.903A.75.75 0 019.22 14H8v1a.75.75 0 01-.75.75h-1.5V17a.75.75 0 01-.75.75H3.25a.75.75 0 01-.75-.75v-1.104a.75.75 0 01.22-.53l5.442-5.442A5.03 5.03 0 018 7zm5-3a.75.75 0 000 1.5A1.5 1.5 0 0114.5 7 .75.75 0 0016 7a3 3 0 00-3-3z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            {passkeyLabel}
+          </Button>
+        {/if}
+
+        {#if enableEmailCode}
+          <Button
+            variant={enablePasskey ? "secondary" : "primary"}
+            size="lg"
+            fullWidth
+            disabled={loading}
+            on:click={() => dispatch("email-code-reauth", { challengeId })}
+          >
+            <svg
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              style="width: 20px; height: 20px;"
+              aria-hidden="true"
+            >
+              <path
+                d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.161V6a2 2 0 00-2-2H3z"
+              />
+              <path
+                d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z"
+              />
+            </svg>
+            {emailCodeLabel}
+          </Button>
+        {/if}
+
+        {#if enablePassword}
+          <Button
+            variant="secondary"
+            size="lg"
+            fullWidth
+            disabled={loading}
+            on:click={() => dispatch("password-reauth", { challengeId })}
+          >
+            {passwordLabel}
+          </Button>
+        {/if}
+
+        {#if availableProviders.length > 0}
+          <div class="authrim-reauth-template__divider">
+            <span>or</span>
+          </div>
+          {#each availableProviders as provider (provider)}
+            <Button
+              variant="outline"
+              size="lg"
+              fullWidth
+              disabled={loading}
+              on:click={() =>
+                dispatch("social-reauth", { challengeId, provider })}
+            >
+              Continue with {provider.charAt(0).toUpperCase() +
+                provider.slice(1)}
+            </Button>
+          {/each}
+        {/if}
+      {:else}
+        <!-- Simple confirm button (fallback) -->
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          {loading}
+          disabled={!challengeId}
+          on:click={() => dispatch("confirm", { challengeId })}
+        >
+          {confirmLabel}
+        </Button>
+      {/if}
+    </div>
+
+    <!-- Info text -->
+    <p class="authrim-reauth-template__info">{infoText}</p>
+  </Card>
+</div>
+
+<style>
+  .authrim-reauth-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-reauth-template__card) {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .authrim-reauth-template__header {
+    text-align: center;
+    margin-bottom: var(--authrim-space-6);
+  }
+
+  .authrim-reauth-template__icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto var(--authrim-space-4);
+    padding: var(--authrim-space-4);
+    background: var(--authrim-color-bg-subtle);
+    border-radius: var(--authrim-radius-full);
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-reauth-template__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .authrim-reauth-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-reauth-template__subtitle {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-reauth-template__methods {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-3);
+  }
+
+  .authrim-reauth-template__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-3);
+    color: var(--authrim-color-text-muted);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+  }
+
+  .authrim-reauth-template__divider::before,
+  .authrim-reauth-template__divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--authrim-color-border);
+  }
+
+  .authrim-reauth-template__info {
+    margin: var(--authrim-space-5) 0 0;
+    text-align: center;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-text-muted);
+  }
+</style>

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

@@ -0,0 +1,54 @@
+import type { SocialProvider } 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 ReauthTemplate: $$__sveltets_2_IsomorphicComponent<{
+    loading?: boolean;
+    error?: string;
+    challengeId?: string;
+    enablePasskey?: boolean;
+    enableEmailCode?: boolean;
+    enablePassword?: boolean;
+    availableProviders?: SocialProvider[];
+    title?: string;
+    subtitle?: string;
+    passkeyLabel?: string;
+    emailCodeLabel?: string;
+    passwordLabel?: string;
+    confirmLabel?: string;
+    infoText?: string;
+    class?: string;
+}, {
+    "passkey-reauth": CustomEvent<{
+        challengeId: string;
+    }>;
+    "email-code-reauth": CustomEvent<{
+        challengeId: string;
+    }>;
+    "password-reauth": CustomEvent<{
+        challengeId: string;
+    }>;
+    "social-reauth": CustomEvent<{
+        challengeId: string;
+        provider: SocialProvider;
+    }>;
+    confirm: CustomEvent<{
+        challengeId: string;
+    }>;
+    "dismiss-error": CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ReauthTemplate = InstanceType<typeof ReauthTemplate>;
+export default ReauthTemplate;
+//# sourceMappingURL=ReauthTemplate.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReauthTemplate.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/templates/ReauthTemplate.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0IrD,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,cAAc;;;;;;;yBAjB8mB,cAAc,EAAE;;;;;;;;;;;qBAC7mB,MAAM;;;qBACH,MAAM;;;qBACR,MAAM;;;qBACR,MAAM;kBAAY,cAAc;;;qBACxC,MAAM;;;;;kBAYiE,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/ui/templates/SignUpTemplate.svelte

@@ -0,0 +1,345 @@
+<!--
+  SignUpTemplate Component
+
+  Reference implementation for sign-up screens.
+  Copy and customize for production use.
+
+  @example
+  <SignUpTemplate
+    availableProviders={['google', 'github']}
+    enablePasskey={true}
+    on:passkey-signup={handlePasskeySignup}
+    on:social-signup={handleSocialSignup}
+    on:email-submit={handleEmailSubmit}
+  />
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { SocialProvider } from '../../types.js';
+  import Card from '../shared/Card.svelte';
+  import Button from '../shared/Button.svelte';
+  import Input from '../shared/Input.svelte';
+  import AuthError from '../helpers/AuthError.svelte';
+  import SocialLoginButtons from '../forms/SocialLoginButtons.svelte';
+  import OTPInput from '../helpers/OTPInput.svelte';
+  import ResendCodeButton from '../helpers/ResendCodeButton.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 = 'Create account';
+  export let subtitle = 'Get started with your free account';
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    'passkey-signup': { name: string };
+    'social-signup': { provider: SocialProvider };
+    'email-submit': { email: string; name: string };
+    'code-submit': { code: string };
+    'code-resend': void;
+    'dismiss-error': void;
+  }>();
+
+  let step: 'form' | 'code' = 'form';
+  let name = '';
+  let email = '';
+  let code = '';
+  let resendTime = 0;
+
+  function handlePasskeySignup() {
+    if (name.trim()) {
+      dispatch('passkey-signup', { name: name.trim() });
+    }
+  }
+
+  function handleSocialClick(e: CustomEvent<{ provider: SocialProvider }>) {
+    dispatch('social-signup', e.detail);
+  }
+
+  function handleEmailSubmit() {
+    if (email.trim() && name.trim()) {
+      dispatch('email-submit', { email: email.trim(), name: name.trim() });
+    }
+  }
+
+  function handleCodeComplete(e: CustomEvent<{ value: string }>) {
+    code = e.detail.value;
+    dispatch('code-submit', { code });
+  }
+
+  function handleBack() {
+    step = 'form';
+    code = '';
+  }
+
+  export function setStep(newStep: 'form' | 'code') {
+    step = newStep;
+  }
+
+  export function setResendTime(time: number) {
+    resendTime = time;
+  }
+</script>
+
+<div class="authrim-signup-template {className}">
+  <Card padding="lg" shadow="lg" class="authrim-signup-template__card">
+    {#if step === 'form'}
+      <div class="authrim-signup-template__header">
+        <h1 class="authrim-signup-template__title">{title}</h1>
+        <p class="authrim-signup-template__subtitle">{subtitle}</p>
+      </div>
+
+      {#if error}
+        <AuthError message={error} on:dismiss={() => dispatch('dismiss-error')} />
+      {/if}
+
+      <div class="authrim-signup-template__content">
+        <form on:submit|preventDefault={enablePasskey ? handlePasskeySignup : handleEmailSubmit} class="authrim-signup-template__form">
+          <Input
+            label="Name"
+            placeholder="Your name"
+            bind:value={name}
+            disabled={loading}
+            required
+            fullWidth
+            size="lg"
+          />
+
+          {#if enableEmailCode && !enablePasskey}
+            <Input
+              type="email"
+              label="Email"
+              placeholder="you@example.com"
+              bind:value={email}
+              disabled={loading}
+              required
+              fullWidth
+              size="lg"
+            />
+          {/if}
+
+          {#if enablePasskey}
+            <Button type="submit" fullWidth size="lg" {loading} disabled={!name.trim()}>
+              Create account with Passkey
+            </Button>
+          {:else if enableEmailCode}
+            <Button type="submit" fullWidth size="lg" {loading} disabled={!name.trim() || !email.trim()}>
+              Continue
+            </Button>
+          {/if}
+        </form>
+
+        {#if availableProviders.length > 0}
+          <div class="authrim-signup-template__divider">
+            <span>or sign up with</span>
+          </div>
+
+          <SocialLoginButtons
+            providers={availableProviders}
+            {loading}
+            {loadingProvider}
+            on:click={handleSocialClick}
+          />
+        {/if}
+      </div>
+
+    {:else}
+      <button type="button" class="authrim-signup-template__back" on:click={handleBack}>
+        <svg viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd"/>
+        </svg>
+        Back
+      </button>
+
+      <div class="authrim-signup-template__header">
+        <h1 class="authrim-signup-template__title">Verify your email</h1>
+        <p class="authrim-signup-template__subtitle">
+          We sent a code to <strong>{email}</strong>
+        </p>
+      </div>
+
+      {#if error}
+        <AuthError message={error} on:dismiss={() => dispatch('dismiss-error')} />
+      {/if}
+
+      <div class="authrim-signup-template__code">
+        <OTPInput
+          bind:value={code}
+          disabled={loading}
+          on:complete={handleCodeComplete}
+        />
+
+        <div class="authrim-signup-template__resend">
+          <span>Didn't receive the code?</span>
+          <ResendCodeButton
+            remainingTime={resendTime}
+            {loading}
+            on:click={() => dispatch('code-resend')}
+          />
+        </div>
+
+        <Button
+          fullWidth
+          size="lg"
+          {loading}
+          disabled={code.length < 6}
+          on:click={() => dispatch('code-submit', { code })}
+        >
+          Verify
+        </Button>
+      </div>
+    {/if}
+  </Card>
+
+  {#if step === 'form'}
+    <div class="authrim-signup-template__footer">
+      <slot name="footer">
+        <p>
+          Already have an account?
+          <a href="/login" class="authrim-signup-template__link">Sign in</a>
+        </p>
+      </slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .authrim-signup-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-signup-template__card) {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .authrim-signup-template__header {
+    text-align: center;
+    margin-bottom: var(--authrim-space-6);
+  }
+
+  .authrim-signup-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-signup-template__subtitle {
+    margin: 0;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+    line-height: var(--authrim-leading-relaxed);
+  }
+
+  .authrim-signup-template__subtitle strong {
+    color: var(--authrim-color-text);
+    font-weight: 600;
+  }
+
+  .authrim-signup-template__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-5);
+  }
+
+  .authrim-signup-template__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-4);
+  }
+
+  .authrim-signup-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-signup-template__divider::before,
+  .authrim-signup-template__divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--authrim-color-border);
+  }
+
+  .authrim-signup-template__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    padding: var(--authrim-space-1) var(--authrim-space-2);
+    margin: 0 0 var(--authrim-space-4) calc(-1 * var(--authrim-space-2));
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    cursor: pointer;
+    transition:
+      color var(--authrim-duration-fast) var(--authrim-ease-default),
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-signup-template__back:hover {
+    color: var(--authrim-color-text);
+    background: var(--authrim-color-bg-subtle);
+  }
+
+  .authrim-signup-template__back svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .authrim-signup-template__code {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-5);
+  }
+
+  .authrim-signup-template__resend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-1);
+    flex-wrap: wrap;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-muted);
+  }
+
+  .authrim-signup-template__footer {
+    text-align: center;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-signup-template__footer p {
+    margin: 0;
+  }
+
+  .authrim-signup-template__link {
+    color: var(--authrim-color-primary);
+    font-weight: 500;
+    text-decoration: none;
+    transition: color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-signup-template__link:hover {
+    color: var(--authrim-color-primary-hover);
+    text-decoration: underline;
+  }
+</style>