Create and publish ToDo application using Swifty

Vladimir Porokhov

Introduction

 
In this article, I’ll show you how to create and host simple ToDo application with authentication, profile and task management using Swifty. We will use swifty.todo application written on Vue.js as an example. Our swifty.todo application includes the following features:

  • Authentication with integrated Authentication-as-a-Service
  • User profile management
  • Task management
  • Avatar management

We will use Swifty as a backend for this app and integrated Object Storage to host the frontend part. You do not need any knowledge of Vue or Javascript to complete this guide. The source code of swifty.todo app is here.

What is Swifty?

 
Swifty is a serverless platform that allows you to develop and run backends for your web or mobile applications as fast and easy as possible without having to manage any infrastructure. With Swifty, you do not need to think about your application’s scalability or availability, we do it for you. For more convenience, we also include Maria and Mongo databases, Object Storage, and Authentication-as-a-Service.

If you do not have Swifty account still please create it here.

Setting Up Authorization and Creating Users

 
A typical application that stores data requires a way to create and manage user accounts. Swifty offers built-in Authentication-as-a-Service that provides the basic actions: SignUp, SignIn, and LogOut.

First, create the authentication backend. In the Swifty.Dashboard, open Authentication Services and click Create Auth Database. Name the database todoapp and activate the service. Doing so will create multiple components in Swifty:

  • The function that serves basic authentication calls. In this example, it is todoapp.base.
  • The function that manages user profiles – todoapp.profile
  • The function that allows authentication using Facebook – todoapp.fb
  • The function that links the profile created with todoapp.link with Facebook profile. We won’t use Facebook related functions in this example.
  • MongoDB middleware that stores user IDs, names, and passwords. In this example, it is todoapp_mgo.
  • MongoDB middleware that stores user profiles. In this example, it is todoapp_profiles.
  • It also creates a bunch of variables to connect databases with functions.
  • Authentication middleware that lets the function manage JWT tokens. Currently, only authjwt is supported. The Swifty library has a helper that uses this middleware by generating and signing JWT tokens with the given claims. This middleware will later be used to mark function calls that first need to be authenticated the by Swifty platform itself.

The todoapp.base function written in Go provides basic user management features and is ready for use out of the box. If you need more authentication features or integration with 3rd-party services, you can easily edit the default function (e.g., to integrate it with a mail service). The function uses the SWIFTY_AUTH_NAME variable that stores the name of the AUTHaaS service.

The function needs to have access to the Mongo and authentication middleware. It automatically gets a URL trigger that the application needs to call to manage users. To get the link for the trigger, open Functions in the Swifty.Dashboard, locate the function marked Authentication, open Triggers and copy the REST API URL. Save this link as AUTH_URL. We will need it later.

The function expects the userid and password arguments. Note that the password is hashed with 256-bit salt by slowed-down bcrypt.

User management requests are sent using the POST method:

  • Sign up:
    https://api.swifty.cloud:8686/call/012.../signup&userid=user@yourmail.com&password=xxxxxxxx
  • Sign in:
    https://api.swifty.cloud:8686/call/012.../signin&userid=user@yourmail.com&password=xxxxxxxx
  • Log out:
    https://api.swifty.cloud:8686/call/012.../leave&userid=user@yourmail.com

If sign-in is successful, you get JSON response with a JWT token that lets you access functions. The JWT token is to be provided via the bearer authorization scheme. If an authentication check fails (no header, wrong scheme, or bad signature), the function is not called and the code 401 is returned. If authentication passes, the function receives the token claims via the request.claims field.

The swifty.todo application does the following when you sign up and open the user details page:

  1. Signs up a new user via the provided AUTHaaS.
  2. Gets the JWT token and adds a new record with the user profile to the user database.
  3. Signs in with the new user.
  4. Gets the user profile from the database.

To use profile management, you also need to get a REST API links for todoapp.base and todoapp.profile functions. Please do the following:

  1. Click Functions >todoapp.base
  2. Click Triggers. Copy the newly created URL and save it as AUTH_URL.
  3. Click Functions >todoapp.profile
  4. Click Triggers. Copy the newly created URL and save it as PROFILE_URL.

Managing Profile Pictures

 
Swifty.todo ap allows you to upload user profile pictures. Alongside other files, pictures are kept in Swifty’s built-in object storage and can be managed with any S3 tool via Amazon S3-compatible API.

While you can create your own function using the standard S3 API to upload and download profile pictures, you can also use a standard function that comes with Swifty:

  1. Click Functions > New Function. Switch to From repo (Templates) tab and select default repository https://github.com/swiftycloud/swifty.demo if it is not selected by default. You will see templates available from our public repository on GitHub.
  2. Please select Avatar management (python) function, click Next, enter the name for your function todoapp.avatar and click Create.
  3. Click Triggers > Add Trigger > REST API (URL). Copy the newly created URL and save it as PICTURE_URL.

Create object storage to store avatars:

  1. Click Object Storage > Create Bucket. Use the name todoappimages.
  2. Click Functions >todoapp.avatar > Access > Add. Select Object Storage and the todoappimages bucket.

Also you need to tell your function the name of bucket to use. As for previous function we will add environment variable:

  1. Click Functions >todoapp.avatar > Variables > Create Variable.
  2. Enter the name BUCKET_NAME and the value todoappimages.

Managing Tasks

 
We are creating ToDo app, right? So, we finally need a function to manage tasks. This function allows to create and delete tasks as well as to store them in Mongo database.

  1. Click Functions > New Function. Switch to From repo (Templates) tab and select default repository https://github.com/swiftycloud/swifty.demo if it is not selected by default. You will see templates available from our public repository on GitHub.
  2. Please select TODO application (python) function, click Next, enter the name for your function todoapp.tasks and click Create.
  3. Click Triggers > Add Trigger > REST API (URL). Copy the newly created URL and save it as TASKS_URL.

Create Mongo database to store tasks:

  1. Click Mongo Database > Create Database. Use the name todoapp_tasks.
  2. Click Functions >todoapp.tasks > Access > Add. Select MongoDB and the todoapp_tasks instance.

Also you need to tell your function the name of the database to use.

  1. Click Functions >todoapp.tasks > Variables > Create Variable.
  2. Enter the name TASKS_DB_NAME and the value todoapp_tasks.

Enabling Authentication

 
Now that the authentication backend, functions, and middleware are ready, you need to enable authentication for the user profile and avatar management functions to protect them from unauthorized access. Do the following in the Swifty.Dashboard:

  1. Click Functions and select todoapp.avatar and todoapp.tasks functions.
  2. Click Manage Authentication, select the authentication service todoapp, and click Enable.

Now all functions will only be executed for users with valid JWT tokens.

By marking the function “authenticated” you make sure that Swifty gets the JWT from the call request, checks it and, if the JWT is properly signed, decodes the claims and passes them to the function as a request.claims field.

After all preparations, the Functions screen should look like this:

Publish swifty.todo Application

 
You need node.js installed on your computer to be able to build swifty.todo app created with Vue.js. If you do not have node.js on your computer please install it using official guide. If you use mac there is good guide here.

Please copy the source code of swifty.todo app to your local folder:

# git clone https://github.com/swiftycloud/swifty.todoapp

After that go to swifty.todoapp folder -> src and open config.js file in your favourite code editor (I prefer Atom personally). You need to update variables with your actual links:

export const AUTH_URL = "https://api.swifty.cloud/call/991..."
export const PROFILE_URL = "https://api.swifty.cloud/call/281..."
export const PICTURE_URL = "https://api.swifty.cloud/call/e6a..."
export const TASKS_URL = "https://api.swifty.cloud/call/4b1..."

Please ignore facebook variables at this stage.

Next you need to build your application:

# npm run build
...
DONE  Build complete. The dist directory is ready to be deployed.

You can also test your application locally by starting it:

# npm run serve

and accessing at http://localhost:8080

After that you need to upload your app to Object Storage and publish it. Please go to Object Storage, create todoapp bucket and upload files from the dist directory of your swifty.todoapp folder to the bucket.

The last step is to publish your website. Go to More -> HTTP Server Settings and enable HTTP server. Copy Endpoint link and click Save.

Now everything is ready and you can access your application using Endpoint link.

Create your account, manage your tasks and profile – your application is on air!

If you open the Functions screen of swifty.dashboard, you will see that the authentication auth function has executed at least once to create a new user account. The todoapp_profiles andtodoapp_avatar functions have been executed as well to create and update the user profile. All uploaded profile pictures will be in the todoappimages bucket of the object storage.

Next Steps

 
Now you know all the basics and can start using Swifty. All the functions and the swifty.todo app source code are available on GitHub. Remember that the default functions are working examples that you can change according to your goals.

If you have any question, please send them to us.

Go serverless!

Share this post

Share on facebook
Share on twitter
Share on email
Share on print