@aws-amplify/ui-svelte 0.0.0-next-9a4f1cf-20220113211745 → 0.0.0-next-23d2233-20251017111356

package/README.md

@@ -1,38 +1,150 @@
-# create-svelte
+# @aws-amplify/ui-svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Svelte components for Amplify UI
 
-## Creating a project
+## Installation
 
-If you're seeing this, you've probably already done this step. Congrats!
+```bash
+npm install @aws-amplify/ui-svelte aws-amplify
+```
+
+or
 
 ```bash
-# create a new project in the current directory
-npm init svelte@next
+yarn add @aws-amplify/ui-svelte aws-amplify
+```
+
+## Usage
 
-# create a new project in my-app
-npm init svelte@next my-app
+### Basic Usage
+
+```svelte
+<script>
+  import { Amplify } from 'aws-amplify';
+  import { Authenticator } from '@aws-amplify/ui-svelte';
+  import '@aws-amplify/ui/styles.css';
+  import awsExports from './aws-exports';
+
+  Amplify.configure(awsExports);
+</script>
+
+<Authenticator let:user let:signOut>
+  <h1>Hello {user.username}</h1>
+  <button on:click={signOut}>Sign out</button>
+</Authenticator>
 ```
 
-> Note: the `@next` is temporary
+### Using with TypeScript
 
-## Developing
+```svelte
+<script lang="ts">
+  import { Amplify } from 'aws-amplify';
+  import { Authenticator } from '@aws-amplify/ui-svelte';
+  import type { AuthUser } from '@aws-amplify/ui-svelte';
+  import '@aws-amplify/ui/styles.css';
+  import awsExports from './aws-exports';
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+  Amplify.configure(awsExports);
 
-```bash
-npm run dev
+  let user: AuthUser;
+  let signOut: () => void;
+</script>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+<Authenticator let:user let:signOut>
+  <h1>Hello {user.username}</h1>
+  <button on:click={signOut}>Sign out</button>
+</Authenticator>
 ```
 
-## Building
+### Customization
 
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+The Authenticator component provides several props for customization:
 
-```bash
-npm run build
+```svelte
+<Authenticator
+  initialRoute="signIn"
+  socialProviders={['google', 'facebook', 'amazon']}
+  hideSignUp={false}
+>
+  <!-- Your app content -->
+</Authenticator>
+```
+
+### Using the useAuthenticator Store
+
+You can also access the authenticator state directly using the store:
+
+```svelte
+<script>
+  import { useAuthenticatorStore } from '@aws-amplify/ui-svelte';
+
+  const authenticator = useAuthenticatorStore();
+
+  $: ({ user, authStatus, signOut } = $authenticator);
+</script>
+
+{#if authStatus === 'authenticated'}
+  <h1>Welcome {user.username}</h1>
+  <button on:click={signOut}>Sign out</button>
+{:else}
+  <p>Please sign in</p>
+{/if}
+```
+
+## Components
+
+### Authenticator
+
+The main component that provides the complete authentication flow.
+
+**Props:**
+
+- `initialRoute`: Initial route to display ('signIn' | 'signUp')
+- `socialProviders`: Array of social providers to display
+- `hideSignUp`: Whether to hide the sign up tab
+
+**Slot Props:**
+
+- `user`: The authenticated user object
+- `authStatus`: Current authentication status
+- `signOut`: Function to sign out the user
+
+### Primitive Components
+
+The package also exports primitive components that can be used to build custom UI:
+
+- `Button`
+- `TextField`
+- `PasswordField`
+
+## Styling
+
+Amplify UI uses CSS variables for theming. You can customize the appearance by overriding these variables:
+
+```css
+:root {
+  --amplify-colors-brand-primary: #ff6347;
+  --amplify-colors-brand-secondary: #ff7f50;
+}
 ```
 
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+## SvelteKit Support
+
+When using with SvelteKit, make sure to configure SSR appropriately:
+
+```javascript
+// app.html
+<script>
+  if (typeof window !== 'undefined') {
+    window.global = window;
+  }
+</script>
+```
+
+## TypeScript Support
+
+This package includes TypeScript definitions. No additional setup is required.
+
+## License
+
+[Apache-2.0](https://github.com/aws-amplify/amplify-ui/blob/main/LICENSE)

package/dist/components/Authenticator/Authenticator.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { onDestroy, onMount, type Snippet } from 'svelte';
+  import { get } from 'svelte/store';
+  import {
+    type AuthenticatorMachineOptions,
+    type AuthenticatorRoute,
+    authenticatorTextUtil,
+    type AuthFormFields,
+    type AuthMachineState,
+    setUserAgent,
+    type SocialProvider,
+  } from '@aws-amplify/ui';
+  import { type AuthUser } from '@aws-amplify/auth';
+
+  import { useAuth, useAuthenticator } from '../../stores/authenticator.svelte';
+  import { VERSION } from '../../version';
+  import { type Components } from '../../types';
+
+  import { TwoTabItem, TwoTabs } from '../primitives';
+  import {
+    ConfirmResetPassword,
+    ConfirmSignIn,
+    ConfirmSignUp,
+    ConfirmVerifyUser,
+    ForceNewPassword,
+    ForgotPassword,
+    SelectMfaType,
+    SetupEmail,
+    SetupTotp,
+    SignIn,
+    SignUp,
+    VerifyUser,
+  } from '.';
+
+  interface ComponentsProvider extends Components {
+    ConfirmSignIn?: Components;
+    ConfirmSignUp?: Components;
+    ConfirmResetPassword?: Components;
+    ConfirmVerifyUser?: Components;
+    ForceNewPassword?: Components;
+    ForgotPassword?: Components;
+    SelectMfaType?: Components;
+    SetupEmail?: Components;
+    SetupTotp?: Components;
+    SignIn?: Components;
+    SignUp?: Components;
+    VerifyUser?: Components;
+  }
+
+  interface AuthenticatorProps {
+    components?: ComponentsProvider;
+    initialState?: AuthenticatorMachineOptions['initialState'];
+    loginMechanisms?: AuthenticatorMachineOptions['loginMechanisms'];
+    variation?: 'default' | 'modal';
+    services?: AuthenticatorMachineOptions['services'];
+    signUpAttributes?: AuthenticatorMachineOptions['signUpAttributes'];
+    socialProviders?: SocialProvider[];
+    hideSignUp?: boolean;
+    formFields?: AuthFormFields;
+    children?: Snippet<
+      [
+        {
+          user: AuthUser;
+          state: AuthMachineState;
+          signOut: () => void;
+          send: ReturnType<typeof useAuth>['send'];
+        },
+      ]
+    >;
+  }
+
+  const {
+    components,
+    initialState,
+    loginMechanisms,
+    variation = 'default',
+    services,
+    signUpAttributes,
+    socialProviders,
+    hideSignUp,
+    formFields,
+    children,
+  }: AuthenticatorProps = $props();
+
+  let clearUserAgent: () => void;
+
+  const auth = useAuth();
+  const { authenticator } = $derived(useAuthenticator());
+  const isSetup = $derived(authenticator.route === 'setup');
+
+  $effect(() => {
+    if (isSetup) {
+      auth.send({
+        type: 'INIT',
+        data: {
+          initialState,
+          loginMechanisms,
+          socialProviders,
+          signUpAttributes,
+          services,
+          formFields,
+        },
+      });
+    }
+  });
+
+  onMount(() => {
+    clearUserAgent = setUserAgent({
+      componentName: 'Authenticator',
+      packageName: 'svelte',
+      version: VERSION,
+    });
+  });
+
+  onDestroy(() => {
+    clearUserAgent?.();
+  });
+
+  // text util
+  const { getSignInTabText, getSignUpTabText } = authenticatorTextUtil;
+
+  // computed
+  const signInLabel = $derived(getSignInTabText());
+  const createAccountLabel = $derived(getSignUpTabText());
+
+  // methods
+  const hasTabs = $derived(
+    authenticator.route === 'signIn' || authenticator.route === 'signUp'
+  );
+
+  const hasRouteComponent = $derived(
+    (
+      [
+        'confirmResetPassword',
+        'confirmSignIn',
+        'confirmSignUp',
+        'confirmVerifyUser',
+        'forceNewPassword',
+        'forgotPassword',
+        'selectMfaType',
+        'setupEmail',
+        'setupTotp',
+        'signIn',
+        'signUp',
+        'verifyUser',
+      ] as AuthenticatorRoute[]
+    ).includes(authenticator.route)
+  );
+</script>
+
+{#if hasRouteComponent}
+  <div data-amplify-authenticator data-variation={variation}>
+    <div data-amplify-container>
+      {@render components?.Header?.()}
+      <div
+        data-amplify-router
+        data-amplify-router-content={hasTabs ? undefined : ''}
+      >
+        {#if hasTabs && !hideSignUp}
+          <TwoTabs>
+            <TwoTabItem
+              active={authenticator.route === 'signIn'}
+              id="signIn"
+              label={signInLabel}
+              onclick={authenticator.toSignIn}
+            />
+            <TwoTabItem
+              active={authenticator.route === 'signUp'}
+              id="signUp"
+              label={createAccountLabel}
+              onclick={authenticator.toSignUp}
+            />
+          </TwoTabs>
+        {/if}
+        {#if hasTabs}
+          <div data-amplify-router-content>
+            {#if authenticator.route === 'signIn'}
+              <SignIn
+                id="signIn-panel"
+                role="tabpanel"
+                class="amplify-tabs__panel amplify-tabs__panel--active"
+                aria-labelledby="signIn-tab"
+                components={components?.SignIn}
+              />
+            {/if}
+            {#if authenticator.route === 'signUp' && !hideSignUp}
+              <SignUp
+                id="signUp-panel"
+                class="amplify-tabs__panel amplify-tabs__panel--active"
+                role="tabpanel"
+                aria-labelledby="signUp-tab"
+                components={components?.SignUp}
+              />
+            {/if}
+          </div>
+        {/if}
+        {#if authenticator.route === 'confirmSignUp'}
+          <ConfirmSignUp components={components?.ConfirmSignUp} />
+        {:else if authenticator.route === 'forgotPassword'}
+          <ForgotPassword components={components?.ForgotPassword} />
+        {:else if authenticator.route === 'confirmResetPassword'}
+          <ConfirmResetPassword components={components?.ConfirmResetPassword} />
+        {:else if authenticator.route === 'confirmSignIn'}
+          <ConfirmSignIn components={components?.ConfirmSignIn} />
+        {:else if authenticator.route === 'setupTotp'}
+          <SetupTotp components={components?.SetupTotp} />
+        {:else if authenticator.route === 'forceNewPassword'}
+          <ForceNewPassword components={components?.ForceNewPassword} />
+        {:else if authenticator.route === 'verifyUser'}
+          <VerifyUser components={components?.VerifyUser} />
+        {:else if authenticator.route === 'confirmVerifyUser'}
+          <ConfirmVerifyUser components={components?.ConfirmVerifyUser} />
+        {:else if authenticator.route === 'selectMfaType'}
+          <SelectMfaType components={components?.SelectMfaType} />
+        {:else if authenticator.route === 'setupEmail'}
+          <SetupEmail components={components?.SetupEmail} />
+        {/if}
+      </div>
+      {@render components?.Footer?.()}
+    </div>
+  </div>
+{/if}
+{#if authenticator.route === 'authenticated'}
+  {@render children?.({
+    user: authenticator.user,
+    state: get(auth.state),
+    signOut: authenticator.signOut,
+    send: auth.send,
+  })}
+{/if}

package/dist/components/Authenticator/Authenticator.svelte.d.ts

@@ -0,0 +1,41 @@
+import { type Snippet } from 'svelte';
+import { type AuthenticatorMachineOptions, type AuthFormFields, type AuthMachineState, type SocialProvider } from '@aws-amplify/ui';
+import { type AuthUser } from '@aws-amplify/auth';
+import { useAuth } from '../../stores/authenticator.svelte';
+import { type Components } from '../../types';
+interface ComponentsProvider extends Components {
+    ConfirmSignIn?: Components;
+    ConfirmSignUp?: Components;
+    ConfirmResetPassword?: Components;
+    ConfirmVerifyUser?: Components;
+    ForceNewPassword?: Components;
+    ForgotPassword?: Components;
+    SelectMfaType?: Components;
+    SetupEmail?: Components;
+    SetupTotp?: Components;
+    SignIn?: Components;
+    SignUp?: Components;
+    VerifyUser?: Components;
+}
+interface AuthenticatorProps {
+    components?: ComponentsProvider;
+    initialState?: AuthenticatorMachineOptions['initialState'];
+    loginMechanisms?: AuthenticatorMachineOptions['loginMechanisms'];
+    variation?: 'default' | 'modal';
+    services?: AuthenticatorMachineOptions['services'];
+    signUpAttributes?: AuthenticatorMachineOptions['signUpAttributes'];
+    socialProviders?: SocialProvider[];
+    hideSignUp?: boolean;
+    formFields?: AuthFormFields;
+    children?: Snippet<[
+        {
+            user: AuthUser;
+            state: AuthMachineState;
+            signOut: () => void;
+            send: ReturnType<typeof useAuth>['send'];
+        }
+    ]>;
+}
+declare const Authenticator: import("svelte").Component<AuthenticatorProps, {}, "">;
+type Authenticator = ReturnType<typeof Authenticator>;
+export default Authenticator;

package/dist/components/Authenticator/ConfirmResetPassword.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Button from '../controls/Button.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const { getResendCodeText, getResetYourPasswordText, getSubmitText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const resendCodeText = $derived.by(() => getResendCodeText());
+  const confirmResetPasswordHeading = $derived.by(() =>
+    getResetYourPasswordText()
+  );
+  const confirmResetPasswordText = $derived.by(() => getSubmitText());
+
+  // Methods
+  const onConfirmResetPasswordSubmit = (e: Event): void => {
+    e.preventDefault();
+    submit(e);
+  };
+
+  const submit = (e: Event): void => {
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onLostYourCodeClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.resendCode();
+  };
+
+  const onInput = (e: Event) => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  function onBlur(e: Event) {
+    const { name } = e.target as HTMLInputElement;
+    authenticator.updateBlur({ name });
+  }
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-confirmResetpassword
+    oninput={onInput}
+    onblurcapture={onBlur}
+    onsubmit={onConfirmResetPasswordSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading class="amplify-heading" level="h3">
+          {confirmResetPasswordHeading}
+        </Heading>
+      {/if}
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="confirmResetPassword" />
+        {/if}
+      </Wrapper>
+      <Footer class="amplify-flex amplify-authenticator__column">
+        {#if authenticator.error}
+          <Alert>
+            {translate(authenticator.error)}
+          </Alert>
+        {/if}
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          variation="primary"
+          fullWidth={false}
+          type="submit"
+          disabled={authenticator.isPending}
+        >
+          {confirmResetPasswordText}
+        </Button>
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          variation="link"
+          fullWidth={false}
+          size="small"
+          type="button"
+          onclick={onLostYourCodeClicked}
+        >
+          {resendCodeText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </FieldSet>
+  </Form>
+</Wrapper>

package/dist/components/Authenticator/ConfirmResetPassword.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from '../../types';
+interface Props {
+    components?: Components;
+}
+declare const ConfirmResetPassword: import("svelte").Component<Props, {}, "">;
+type ConfirmResetPassword = ReturnType<typeof ConfirmResetPassword>;
+export default ConfirmResetPassword;

package/dist/components/Authenticator/ConfirmSignIn.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Button from '../controls/Button.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const { getBackToSignInText, getConfirmText, getChallengeText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const confirmSignInHeading = $derived.by(() =>
+    getChallengeText(authenticator.challengeName)
+  );
+  const backSignInText = $derived.by(() => getBackToSignInText());
+  const confirmText = $derived.by(() => getConfirmText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onConfirmSignInSubmit = (e: Event): void => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onBackToSignInClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-confirmsignin
+    oninput={onInput}
+    onsubmit={onConfirmSignInSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading level="h3" class="amplify-heading">
+          {confirmSignInHeading}
+        </Heading>
+      {/if}
+
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="confirmSignIn" />
+        {/if}
+      </Wrapper>
+      <Footer class="amplify-flex amplify-authenticator__column">
+        {#if authenticator.error}
+          <Alert>
+            {translate(authenticator.error)}
+          </Alert>
+        {/if}
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          loading={false}
+          variation="primary"
+          disabled={authenticator.isPending}
+        >
+          {confirmText}
+        </Button>
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          size="small"
+          variation="link"
+          type="button"
+          onclick={onBackToSignInClicked}
+        >
+          {backSignInText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </FieldSet>
+  </Form>
+</Wrapper>

package/dist/components/Authenticator/ConfirmSignIn.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from '../../types';
+interface Props {
+    components?: Components;
+}
+declare const ConfirmSignIn: import("svelte").Component<Props, {}, "">;
+type ConfirmSignIn = ReturnType<typeof ConfirmSignIn>;
+export default ConfirmSignIn;