@larva.io/webcomponents-cognito-login-vue2 v2.0.8

Larva.io Amazon Cognito WebComponents Vue2

Larva.io Amazon Cognito WebComponents can be used to easily add user sign-in to your mobile and web apps.

License: Attribution-NoDerivatives 4.0 International

Documentation

docs.larva.io

Getting started

npm install --save @larva.io/webcomponents-cognito-login-vue2

main.js

import Vue from 'vue';
import Component from './Component.vue';
import LarvaCognitoWebcomponents from '@larva.io/webcomponents-cognito-login-vue2';

Vue.use(LarvaCognitoWebcomponents);

new Vue({
  el: '#app',
  render: h => h(Component)
});

Component.vue

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <lar-cognito-config
      cognito-region="eu-central-1"
      cognito-pool-id="eu-central-1_xxxxxxx"
      cognito-client-id="xxxxxxxxxxxxxx"
      storage-type="local"
    />
    <lar-cognito-login
      cognito-username-attribute="email"
      @loginError="error"
      @loading="setLoader"
      @loginDone="loginDone()"
      />
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
    }
  },
  methods: {
    setLoader(e) {
      this.loading = !!e.detail;
    },
    error(e) {
      alert(e.detail);
    },
    async loginDone() {
      const Node = document.querySelector('lar-cognito-config');
      const token = await Node.getAccessToken();
      alert(`Login Done. Token: ${token}`);
    }
  }
}
</script>