Skip to content

Instantly share code, notes, and snippets.

@wcheek
Created June 21, 2022 00:27
Show Gist options
  • Save wcheek/161cc410c84014f0e266dd7c919efe00 to your computer and use it in GitHub Desktop.
Save wcheek/161cc410c84014f0e266dd7c919efe00 to your computer and use it in GitHub Desktop.
Authentication using AWS Amplify auth, loading external script
<script setup>
import { onMounted } from "vue";
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
onMounted(() => {
const lex = document.createElement("script");
lex.src = "https://d2hzdehb4i1g7i.cloudfront.net/lex-web-ui-loader.min.js";
lex.onload = async function () {
const loaderOpts = {
baseUrl: "https://d2hzdehb4i1g7i.cloudfront.net/",
shouldLoadMinDeps: true,
};
const loader = new window.ChatBotUiLoader.IframeLoader(loaderOpts);
const config = {
lex: { sessionAttributes: { userAgent: navigator.userAgent } },
};
loader
.load(config)
.then(function () {
loader.api.startNewSession();
loader.api.postText("Startup");
})
.catch(function (error) {
console.error(error);
});
};
document.body.appendChild(lex);
});
</script>
<template>
<authenticator>
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment