@tanglemedia/svelte-starter-auth

The Auth package is responsible for the the unauthorized screens, like the login, register, forgot password, and the layout that the unauthorized pages will look like.

Most of the componet from the Layout packages behave as wrappers or forms.

Demo

On this section we are going to display how you can use some of the components that the Auth package provides on your svelte app.

AuthLayout

The AuthLayout is responsible for the way/layout that your login, register, forgot password page would look like.

<script lang="ts">
	import { AuthLayout } from '@tanglemedia/svelte-starter-auth';
	import logo from '$lib/assets/logo.png';
	import background from '$lib/assets/background.png';
	import bottomBg from '$lib/assets/bottomBg.png';
	import topOverlayImage from '$lib/assets/top.png';
</script>

<AuthLayout logo={logo} loginBg={background} display="mobile" opacityPercentageBackgroundImage={70} {bottomBg} {topOverlayImage} >
  <slot />
</AuthLayout>

AuthCard

This component behaves as a wrapper card, that has a title and a slot to display anything you want, we recommend displaying forms. The title it displays in title it displays in the card is read from the auth.yml file under 'auth.ui.layout.login.title'. but you can also manually inject the title by just passing 'title' as prop on your AuthCard component.

<script lang="ts">
    import { AuthCard } from '@tanglemedia/svelte-starter-auth';
    import { getConfig } from '@tanglemedia/svelte-starter-core';

</script>

<AuthCard class="max-w-[700px]">
  // Place inside your form or anything you want
</AuthCard>

LoginForm

This component behaves as your standard Login form, it will display a input for email, and password, but you can change those with slots, or even appending new inputs to the top or bottom of the existing forms through the use of slots. You can also use form actions and methods, as well as callback functions and dispatch functions as well.

<script lang="ts">
  import { AuthCard, LoginForm } from '@tanglemedia/svelte-starter-auth';
  import authService from '$lib/services/auth';
  import toast from 'svelte-french-toast';

  const onLoginSubmit = async (formValues: { email: string, password: string }) => {
    try {
      await authService.login(formValues.email, formValues.password);
    } catch (error) {
      throw new Error(error.errors[0].message);
    }
  }
</script>

<LoginForm
  buttonBgColourClass={'bg-black hover:brightness-110 transition-all duration-200'}
  on:error={(e) => {
    toast.error(e.detail.message.replace(/Error: (.*)Error: /, ''), { position: 'top-right' });
  }}
  on:success={(e) => {toast.success(e.detail.message, {position: 'top-right'});}}
  onLogin={async (formValues) => {
    await onLoginSubmit(formValues)
}}/>

Breaking Changes

Migrating from 0.0.18 to 1.0.0

On this update we finally removed the slot name for the content on the AuthLayout component.

Previously:

<AuthLayout logo={logo} loginBg={background} display="mobile" opacityPercentageBackgroundImage={70} {bottomBg} {topOverlayImage} >
  <slot slot="content"/>
</AuthLayout>

New way:

<AuthLayout logo={logo} loginBg={background} display="mobile" opacityPercentageBackgroundImage={70} {bottomBg} {topOverlayImage} >
  <slot/>
</AuthLayout>

For mode demos and to check out all the components, please visit our storybook website