Loginmanager

Often you need to authenicate a user in a pwa. The loginmanager should help you to store the logindata in the localstorage and listen to changes.

The manager provides

• listeners for
  • the username input
  • the password input
• a login function (stores logindata in localstorage)
• a logoutfunction (removes the logindata from localstorage)
• reactive access to the logindata

const {
  user, // access username
  password, // access password
  listenUserInput, // listener for a textfield that emit llChange events
  listenPasswordInput, // listener for a textfield that emit llChange events
  login, // write logindata input to localstorage
  logout // remove logindata from localstorage
} = loginManager();

Installation

just install the module with npm

npm i @livinglogic-components/loginmanager

Usage

Listeners

// get listeners
const {  listenUserInput, listenPasswordInput  } = LoginManager();

// jsx
return (
  <div>
    <LLText 
      label='Benutzerkennung'
      onllChange={listenUserInput()}
    />
    <LLText 
      label='Passwort'
      onllChange={listenPasswordInput()}
    />
  </div>
)

Login/Logout

// get listeners
const {  login, logout  } = LoginManager();

// jsx
return (
  <div>
    <ion-item>
      <ion-button onclick={() => login()}>Login</ion-button>
    </ion-item>
    <ion-item>
      <ion-button onclick={() => logout()}>Ausloggen</ion-button>
    </ion-item>
  </div>
)

Access state

// get listeners
const {  user, password  } = LoginManager();
console.log(user.value); // access reference value
console.log(password.value); // access reference value