Passwordless Login

To initialize the Recharge JavaScript SDK you will need to do it within the root of your theme (wherever the <head /> element is located). Generally this is located in a file called theme.liquid. For this example you will need to initialize your client with a Recharge storefrontAccessToken.

Example

This example will show you how to implement the passwordless login flow. Once complete you will need to store the returned session somewhere so it can be shared with other pages/snippets.

Create a new file within the theme editor called passwordless-login.liquid. Then render that snippet on any page you would like. Note that this file needs to be a snippet not a section or page.

Liquid file where you want to render the login flow.

...
<div>{%- render 'passwordless-login' -%}</div>
...

passwordless-login.liquid

<style>
  .login-page {
    width: 100%;
  }
  #loginForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
  }
</style>

<section class="login-page">
  <passwordless-login></passwordless-login>
</section>

<script>
  class PasswordlessLogin extends HTMLElement {
    selectors = {
      title: '#loginTitle',
      form: '#loginForm',
      email: '#email',
      code: '#code',
    };

    constructor() {
      super();
      this.renderSendCode();
    }

    async sendCode(e) {
      e.preventDefault();
      this.email = document.querySelector(this.selectors.email).value;
      try {
        this.session_token = await recharge.auth.sendPasswordlessCodeAppProxy(this.email);
        this.renderValidateCode();
      } catch (e) {
        this.renderError(e);
      }
    }

    async validateCode(e) {
      e.preventDefault();
      this.code = document.querySelector(this.selectors.code).value;
      try {
        this.session = await recharge.auth.validatePasswordlessCodeAppProxy(this.email, this.session_token, this.code);
        // TODO: do something with session
        this.renderSuccess();
      } catch (e) {
        this.renderError(e);
      }
    }

    renderSendCode() {
      this.innerHTML = '';
      const titleEl = document.createElement('h2');
      titleEl.setAttribute('id', 'loginTitle');
      titleEl.innerHTML = 'Send Code';
      this.appendChild(titleEl);

      const form = document.createElement('form');
      form.setAttribute('id', 'loginForm');

      const label = document.createElement('label');
      label.setAttribute('for', 'email');
      label.innerHTML = 'E-mail';
      form.append(label);

      const input = document.createElement('input');
      input.setAttribute('id', 'email');
      form.append(input);

      const button = document.createElement('button');
      button.setAttribute('type', 'submit');
      button.innerHTML = 'Send Code';
      form.append(button);

      form.addEventListener('submit', this.sendCode.bind(this));

      this.appendChild(form);
    }

    renderValidateCode() {
      this.innerHTML = '';
      const titleEl = document.createElement('h2');
      titleEl.setAttribute('id', 'loginTitle');
      titleEl.innerHTML = 'Validate Code';
      this.appendChild(titleEl);

      const form = document.createElement('form');

      const label = document.createElement('label');
      label.setAttribute('for', 'code');
      label.innerHTML = 'Code';
      form.append(label);

      const input = document.createElement('input');
      input.setAttribute('id', 'code');
      form.append(input);

      const button = document.createElement('button');
      button.setAttribute('type', 'submit');
      button.innerHTML = 'Validate Code';
      form.append(button);

      form.addEventListener('submit', this.validateCode.bind(this));

      this.appendChild(form);
    }

    renderSuccess() {
      this.innerHTML = '';
      const successEl = document.createElement('h2');
      successEl.innerHTML = 'Success';
      this.appendChild(successEl);
    }

    renderError(e) {
      const errorEl = document.createElement('h2');
      errorEl.innerHTML = 'Error';
      this.appendChild(errorEl);

      const errorTextEl = document.createElement('p');
      errorTextEl.innerHTML = e;
      this.appendChild(errorTextEl);
    }
  }

  customElements.define('passwordless-login', PasswordlessLogin);
</script>

Passwordless Login

Example​

Example