Larva.io Amazon Cognito WebComponents Vue3

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-vue

main.js

import { createApp } from 'vue'
import Component from './Component.vue'
import { LarvaWebcomponentsCognitoLogin } from '@larva.io/webcomponents-cognito-login-vue'

createApp(Component)
    .use(LarvaWebcomponentsCognitoLogin)
    .mount('#app')

Component.vue

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

import { LarCognitoConfig, LarCognitoLogin } from '@larva.io/webcomponents-cognito-login-vue';

export default {
  name: 'Component',
  components: {
    LarCognitoLogin,
    LarCognitoConfig,
  },
  data: function() {
    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}`);
    }
  }
}