Creating Auth Web Component

Last updated on February 1, 2021

As you all know, I write a detailed blog post on building components but with JavaScript on every week. You will learn here about creating Auth form web component using Vanilla JavaScript.

Introduction

Every web application Authentication plays a vital role to collect user credentials. So I thought of creating this piece as a web component with Javascript.

To get easily build and ship this web component I have used third party web component package from the famous framework called Ionic 5.

Ionic 5 is a mobile application framework but helps us to build the application in record time and additionally, it provides built-in Web Components.

Please follow along with me to build authentication form web component.

Creating Auth Web Component

I took the simple idea for this component is to have Tab based layout. And it offers 2 dedicated tab login and register respectively.

Login tab accepts email and password fields as inputs.

And Register tab accepts email, password and confirm password fields as inputs.

When we perform certain action on either Login or Register form, we get the respective input fields information from onRegister and onLogincustom events.

To refer creating custom events in JavaScript, Go Check out here.

Login Form

To build the login form, we use the below mark-up,

<ion-card>      
      <ion-card-content>
        <ion-item>
          <ion-label position="floating">Email</ion-label>
          <ion-input class="email-input" type="email" clear-input value=""></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input class="password-input" type="password" clear-input value=""></ion-input>
        </ion-item>
        <br />
        <ion-button class="login-cta" expand="block">Login</ion-button>
      </ion-card-content>
</ion-card>

We define the Shadown DOMas opened mode to allow us to modify CSS styling from outside of our web component.

this._shadowRoot = this.attachShadow({ mode: 'open' });

We wire up the login button event handler to Login Button HTML element. And there we expose custom event onLogin.

this.$loginCTA = this._shadowRoot.querySelector('.login-cta');
this.$loginCTA.addEventListener('click', this.onLogin.bind(this));


onLogin() {    
  this.dispatchEvent(new CustomEvent('onLogin',
    { detail: { email: this.$emailInput.value, password: this.$passwordInput.value } 
  }));
}

Then finally, we should define LoginComponent with customElements.define('vj-login', LoginComponent);

Register Form

We follow the same process of building login form in order to build Registerweb component.

<ion-card>      
      <ion-card-content>
        <ion-item>
          <ion-label position="floating">Email</ion-label>
          <ion-input class="email-input" type="email" clear-input value=""></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input class="password-input" type="password" clear-input value=""></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Confirm Password</ion-label>
          <ion-input class="confirm-password-input" type="password" clear-input value=""></ion-input>
        </ion-item>
        <br />
        <ion-button class="register-cta" expand="block" >Register</ion-button>
      </ion-card-content>
</ion-card>

Wiring up register button event handler and exposing onRegistercustom event.

this.$registerCTA = this._shadowRoot.querySelector('.register-cta');
this.$registerCTA.addEventListener('click', this.onRegister.bind(this));

onRegister() {
  this.dispatchEvent(new CustomEvent('onRegister', {
    detail: {
      email: this.$emailInput.value, password: this.$passwordInput.value,
      confirmPassword: this.$confirmPasswordInput.value  }
  }));
}

Finally, defining our Registerweb component, customElements.define('vj-register', RegisterComponent);

Final Auth Component