cognito-vue-bootstrap

This application illustrates how to use the Amazon Amplify with vue.js, it includes signup, signin, signout, recover password and account verification using email or sms codes. It uses bootstrap-vue for layout.

overview

This example application currently illustrates the following:

• Sign Up for an account
• Verify your account by entering verification code which has been sent to you via emailed or SMS
• Dashboard which requires authentication to access
• Change Password
• Recover Password using verification code which has been sent to you via emailed or SMS
• Sign In to the application
• Sign Out of the application

Demo version is located at https://cognito-vue-bootstrapv2.wolfe.id.au/

Build Setup

Before you start have a read over What is Amazon Cognito?

To setup this project you first need to configure an aws mobile project using the following snapshot CognitoVue.

For more information on this process see Exporting and Importing AWS Mobile Hub Projects

Once you have imported the project you will have created:

• An S3 bucket with Cloudfront for your web application.
• A Cognito pool to store your users
• An analytics project to capture metrics on your users login / failure ect.

Click on the integrate button in your aws mobile project, the download and extract the cloud config zip file, find aws-exports.js inside, and replace this file in src/ directory.

I use yarn to build and run this project.

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn serve

# build for production with minification
yarn build

Sync all the files from your dist directory up to the S3 hosting bucket within your AWS Mobile project using the following command.

aws --region ap-southeast-2 s3 sync dist/ s3://cognitovuebootstrap-hosting-mobilehub-XXXXXXXXXX/ --delete --acl public-read

hosting configuration notes

To host a website on a custom URL using AWS mobile I have found some changes to the current setup. Navigating to the buckets and CDN configuration is done via the Hosting And Streaming panel in the mobile project UI.

• disable website hosting on the hosting S3 bucket
• add an Error Page which sends any 404 (not found) errors to /index.html in cloudfront
• enable redirect http -> https on the origin
• configure a route53 domain for your website
• configure a AWS Certificate Manager (ACM) certificate for your domain
• add an A record in route53 of type alias pointing to your Cloudfront distribution, then update the origin domain name to match the FQDN.

For a more detailed explanation on how things work, checkout:

• AWS Amplify Documentation
• AWS Amplify Modularization
• docs for vue-cli
• docs for vue-router
• docs for vuex

License

This project is released under the Apache License, Version 2.0.