Suggestion: Integration Examples

[Abourass]

First off, awesome project! Secondly, it'd be really ideal if there integration examples for how to use this with Routify (and to a further extent, Sapper / SvelteKit). I've been struggling to set up working session management with Routify for a while, and it'd be absolutely lovely if this could be used.

[arlac77]

Can You share your tries so that i can take a look ?

[baradhili]

a sveltekit attempt - apologies its not a MWE it has some local styles and some iconify things..

<script>
  import "$lib/css/style.css"

  import Icon from '@iconify/svelte';
  import userIcon from '@iconify/icons-cil/user';
  import lockLocked from '@iconify/icons-cil/lock-locked';
  import { redirect } from '@sveltejs/kit';
  import { derived } from 'svelte/store';
  import { Session, login } from 'svelte-session-manager';

  let user = '';
    let password = '';

  // use localStorage as backing store
    let session = new Session(localStorage);

  // session may still be valid - in which case we might just want to redirect to our app
  if(session.isValid) {
    redirect(303, '/app');
  }

  export const values = derived(
    session,
    ($session, set) => {
      if (!session.isValid) {
        set([]); // session has expired no more data
      } else {
        fetch('http://test.example.com/api/user', {
          headers: {
            ...session.authorizationHeader
          }
        }).then(async data => set(await data.json()));
      }
      return () => {};
    }
  ,[]);

  // $values contains fetch result as long as session has not expired
  function handleSubmit(e) {
    let loginResult ='';
        const formData = new FormData(e.target);

    const data = {};
    for (let field of formData) {
      const [key, value] = field;
      data[key] = value;
    }
    console.log(data);
    loginResult = login(session, 'http://test.example.com/api/login', 'admin@admin.com', 'password');
    if (loginResult === undefined) { 
       // true when auth was ok or localStorage token is still valid
    } else { //something failed - handle it
      console.log(loginResult);
    }
}
</script>

<svelte:head>
    <title>PICSI</title>
    <meta name="description" content="Poison Information Centre System" />
</svelte:head>

<section>
    <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-5">
            <div class="card-group d-block d-md-flex row">
              <div class="card col-md-7 p-4 mb-0">
                <div class="card-body">
                  <form on:submit|preventDefault={handleSubmit}>
                    <h1>Login</h1>
                    <p class="text-medium-emphasis">Sign In to your account</p>
                    <div class="input-group mb-3"><span class="input-group-text">
                      <span class="icon"><Icon icon={userIcon} /></span>
                        <!-- <svg class="icon">
                          <use xlink:href="/vendors/@coreui/icons/svg/free.svg#cil-user"></use>
                        </svg> -->

                      </span>
                      <input name="user" value="{user}" id="form-user" class="form-control" type="text" placeholder="Username" >
                    </div>
                    <div class="input-group mb-4"><span class="input-group-text">
                      <span class="icon"><Icon icon={lockLocked} /></span>
                        <!-- <svg class="icon">
                          <use xlink:href="/vendors/@coreui/icons/svg/free.svg#cil-lock-locked"></use>
                        </svg> -->
                      </span>
                      <input name="password" value="" class="form-control" type="password" placeholder="Password" >
                    </div>
                    <div class="row">
                      <div class="col-3">
                        <button class="btn btn-primary px-4" type="submit">Login</button>
                      </div>
                      <div class="col-3">
                        <!-- <select class="form-select" aria-label="language">
                          <option selected>en</option>
                          <option value="en">en</option>
                          <option value="es">es</option>
                          <option value="fr">fr</option>
                        </select> -->
                      </div>
                      <div class="col-6 text-end">
                        <button class="btn btn-link px-0" type="button">Forgot password?</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>