This tutorial aims to show VueJS beginners how a simple login app can be built with the help of Skygear. Users will have to either sign in or sign up before a secured page can be accessed, which will be a dinner poll in our demo.
The gif below shows what we’re hoping to achieve:
We’ll use VueJS to build our frontend and let Skygear take care of all the backend things. Yes, you read that right. You don’t have to set up a server nor a database. Skygear will provide all essential functions, including a user authentication feature which sits behind the login UI.
First of all, clone this demo project. Although you’ll be guided through the basic steps of creating this login app, implementation details of non-login parts (e.g. the dinner poll page) will not be covered. Most example code blocks here are slightly trimmed as well. As a result, you are recommended to read this tutorial with the demo’s source code opened side by side. When you need to copy and paste code, use the source code rather than the example code blocks.
For readers who don’t wish to create the login app from scratch, you can play with the demo directly. Continue reading might give you a more thorough view on the demo though.
What is Vue?
Vue is a progressive framework, which means it adapts to your needs. You can plug Vue into just one part of your existing code base and grow it without having to rewrite any existing code. It can be used as a library and a framework depending on your needs.
Vue is a popular choice among developers, described as easy to learn and very approachable by some.
What is Skygear?
Skygear is a powerful open source backend for mobile, web and IoT apps. Backend tasks such as data storage and management, user authentication as well as push notifications can all be left to Skygear, so that you can focus on your frontend.
Despite we are only showcasing our user authentication service here, a lot more features are offered by Skygear. Head over to our website for more information!
Set up the project and configure packages
To kick off quickly, we will use Vue CLI 3 @vue/cli, be sure not to install the old version.
Firstly, create a Vue project called
vue create skygear-vue-login
You’ll be prompted to choose some presets. Choose whatever you like, or simply go for the default if you can’t be bothered or have no idea what those options are.
Time to add some packages. In order to use the user authentication feature, add Skygear after going into the newly created project:
cd skygear-vue-login yarn add skygear
The bootstrap-vue library will be added as well, to save us some time from implementing UI details:
yarn add bootstrap-vue
While the packages are now added, they have to be configurated. Open the project with your preferred text editor and navigate to
You’ll need your Skygear server endpoint and API key, which can be obtained from your Skygear Portal once signed up.
Import Skygear and include the following lines:
Configure Bootstrap Vue
Import Bootstrap Vue and its CSS files, then register Boostrap Vue to your project:
Building the app
Below is a tree diagram visualizing the relations between our components:
Our login app will have two primary pages, 1) the AuthPage which simply is the login UI and 2) the MainPage which is the dinner poll.
We will focus on the AuthPage sub-tree. AuthPage, the parent of SignInForm and SignUpForm, will control its children and manage their switching logic. When a login event is published from the children, it will be passed on to AuthPage‘s parent – App. The App component will then take care of it and trigger the login logic.
src/components/SignInForm.vue file and put in the source code:
Let’s talk about the upper UI part first. Components with
b- prefix are from the bootstrap-vue library. Constructing the SignInForm UI with them saves us time from implementing form features like:
1. Alert users when required fields are not filled.
2. Declare a form’s submit button by marking it with
3. Display error through
To switch to SignInForm, a
swap-form event is triggered by
@click="$emit('swap-form')". Once received by the parent
AuthPage, the switching logic will be triggered.
Values of the input fields are two-way bound with variables
password under the
data () code block. This is done by Vue’s reactive data binding system.
Once the sign in button is clicked, the submit function
onSubmit will be called given the values are not empty. This will trigger the Skygear login handler
loginWithUsername using the
password values. A
Promise will be returned.
If the login credentials can be found on your Skygear database, the
then block will be executed. A
sign-in event will be sent to the parent component. The user will then be logged in and navigated to the dinner poll page.
user object is only printed out for now, but surely you can play with it and customize to your needs.
On the other hand, if no matching credentials can be found, the promise will be rejected. If the error returned is
ResourceNotFound, error message “Incorrect username or password” will be propagated via
invalidFeedback and displayed under the password input field.
src/components/SignUpForm.vue file and put in the source code:
The SignUpForm component is very similar to it brother component SignIn. To switch back to the SignInForm form, the parent is notified by a
swap-form signal once again.
Unlike SignIn form, the error message is placed under the username input field as the possible error here is duplicated username.
then block of the
signUpWithUsername handler is identical to the one in SignInForm. Upon successful registration, the promise will be resolved and a
sign-in event will be emitted to trigger login action.
If the error returned indicates the username provided has already been taken, a duplicated username error will be propagated to the password input field via
Paste the source code into your newly created
AuthPage is the parent component managing
swap-form events emitted by child components are bound with function
swapForm here, which toggles the variable
wantSignIn. Form switching is achieved using
wantSignIn to control the child forms’ visibility.
sign-in signals received will be passed further on to its parent
App.vue where all the login and redirect logic takes place.
Implementation details of
App.vue and dinner poll main page
MainPage.vue will not be covered. Paste the remaining files under the
src/components/ directory from the demo project into yours so that file structure of
src will look like:
|-- src |-- components |-- AuthPage.vue |-- Ballot.vue |-- MainPage.vue |-- ResultsChart.js |-- SignInForm.vue |-- SignUpForm.vue |-- App.vue |-- main.js
Get the app up and running
Serve our app at localhost:
You can now play with our freshly created login app!
Bonus – forgot and reset password
This is a bonus part and the following code has not been included in the demo. Unlike the previous blocks, the code here hasn’t been trimmed. Create a new component based on it, or paste it into the existing component with care to try out Skgear’s forgot password feature.
When the submit button is clicked and the value of variable
forgotPassword handler will be called. Once the promise is resolved, a reset password email will be sent to the specified email address.
We have just created a login app with VueJS and Skygear. Did you notice that you didn’t spend a single second messing with the backend, as Skygear has done all of that for you?
You can even check the user records of signed up users at Skygear’s web data browser. To explore more on features powered by Skygear, try out other tutorials and demos!