Ionic Vue JS AWS Amplify Authentication CRUD Tutorial Part 1, Authentication UI Component

Video

Getting Started

npm install -g @aws-amplify/cli

Workflow for Adding Authentication

amplify init
amplify add auth
amplify push

Adding Authentication UI

npm aws-amplify @aws-amplify/ui-components

Addressing Javascript Issues

// shims-vue.d.ts
declare module 'aws-exports'
// tsconfig.json
"allowJs": true,

Amplify Components UI Issues

// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => tag.startsWith('amplify-')
};
return options;
});
}
};

Adding Amplify Components To Application

<!-- script section of Home.vue -->
<template>
<!-- amplify-ui -->
<amplify-authenticator username-alias="email">
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>HOME</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
<p>LOGGED IN</p>
<p>{{ user?.attributes?.email }}</p>
</ion-content>
<ion-footer class="ion-padding">
<amplify-sign-out></amplify-sign-out>
</ion-footer>
</ion-page>
<!-- [end] amplify-ui -->
</amplify-authenticator>
</template>
// script section of Home.vue
import {
IonContent,
IonPage,
IonTitle,
IonToolbar,
IonHeader,
IonFooter
} from "@ionic/vue";
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { onAuthUIStateChange } from "@aws-amplify/ui-components";
export default defineComponent({
name: "Home",
setup() {
let unsubscribeAuth: any = null;
const curAuthState = ref<any>(null);
const user = ref<any>(null);
onMounted(() => {
unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
curAuthState.value = authState;
user.value = authData;
});
});
onUnmounted(() => {
unsubscribeAuth();
});
return {
user,
};
},
components: {
IonContent,
IonPage,
IonTitle,
IonToolbar,
IonHeader,
IonFooter
},
});
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";/* Core CSS required for Ionic components to work properly */
import "@ionic/vue/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/vue/css/normalize.css";
import "@ionic/vue/css/structure.css";
import "@ionic/vue/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/vue/css/padding.css";
import "@ionic/vue/css/float-elements.css";
import "@ionic/vue/css/text-alignment.css";
import "@ionic/vue/css/text-transformation.css";
import "@ionic/vue/css/flex-utils.css";
import "@ionic/vue/css/display.css";
/* Theme variables */
import "./theme/variables.css";
/* AMPLIFY */
import {
applyPolyfills,
defineCustomElements,
} from "@aws-amplify/ui-components/loader";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);applyPolyfills().then(() => {
defineCustomElements(window);
});
const app = createApp(App)
.use(IonicVue)
.use(router);
app.config.isCustomElement = (tag) => tag.startsWith("amplify-");router.isReady().then(() => {
app.mount("#app");
});
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => tag.startsWith('amplify-')
};
return options;
});
}
};

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store