Creating a Quasar Framework application with AWS Amplify services (Part 3/4)
Update 2/14/2022 — Please try https://github.com/mfreeman451 to find my repository for this tutorial.
RECAP: In part 1 of Creating a Quasar Framework application with AWS Amplify services we created our Quasar V1 application using the Quasar CLI, began setting up our AWS Amplify environment and project, and then in part 2 we finished our AWS Amplify provisioning using the CLI and the AWS Amplify Console for our Continuous Deployment site.
In this next segment, we will integrate AWS Amplify Authentication with our Quasar project, configure our VueRouter to add protected routes, and configure AppSync and DynamoDB to support multiple users. Our goal is to create a Quasar PWA that will allow users to create a new account, login to our application, and perform CRUD operations in a simple ‘Todo’ style application.
Adding AWS Amplify Authentication
Next we will add a Quasar boot component (formerly called a plugin) that will add support for Amplify authentication:
$ quasar new boot amplify
Add the following code to src/boot/amplify.js:
This gives us this.$Amplify and this.$AmplifyEventBus on the global Vue instance, accessible by our components. There is also a route guard that protects all routes except /auth .
Next we will configure our routes; modify src/router/routes.js:
Next we will need to modify the quasar.conf.js found in the root of the project tree. Add/modify the boot: object to include the following:
'axios', 'amplify', 'appsync'
We also need to add some of our Quasar components our application will need to quasar.conf.js:
'QInput',
'QDate',
'QTime',
'QPopupProxy',
'QCircularProgress'
Let’s add some pages for our Authentication, Profile, and CRUD pages that will be behind protected routes (only logged in users can access):
$ quasar new p Auth
$ quasar new p Todo
$ quasar new p Profile
$ quasar new p SignUp
$ quasar new p SignInLet’s add our Auth code, add the code below to the src/pages/Auth.vue file:
Let’s build our src/pages/SignIn.vue:
src/pages/SignUp.vue:
and finally, our src/pages/Profile.vue:
Let’s modify our src/layouts/MyLayout.vue. Replace the current code with the code shown below:
Save your changes and then validate them in the application. We should now have a new menu with new links.
We will continue building out the UI components of this simple Todo note application in the next segment, stay tuned to Part 4 of Creating a Quasar Framework application with AWS Amplify services
My name is Michael Freeman, I am a member of the Quasar Framework staff and a full-stack developer working with VueJS, GraphQL, Kafka, and Apache Spark. I also specialize in Network Management Systems.
More information
If you need more information about Quasar, here are a few links that you can check out for your consideration:
