DEV Community: Altogic

Introducing Serverless Functions

Deniz — Mon, 31 Oct 2022 12:12:33 +0000

We are excited to announce the release of serverless functions. 🚀🔥

With serverless (full-code) functions, you can write simple, single-purpose functions (e.g., custom code) that are attached to events emitted from your Altogic backend application.

Introducing serverless (full-code) functions | Altogic - Backend as a service platform

We are excited to announce the release of serverless (full-code) functions. With full-code functions, you write simple, single-purpose functions (e.g., custom code) that are attached to events emitted from your backend application.

altogic.com

Now, you can create both no-code services or full-code functions to handle the backend needs of your apps.

We provide the best of both worlds, the speed to develop functions with no-code, and the flexibility to handle complex requirements with full-code.

It is quite easy to deploy your functions. After installing Altogic CLI, you first need to log in to your Altogic Account.

Your session information will be locally stored so that you do not need to log in again until you log out from your active session.

Once logged in, you can create your full-code function. It will first ask you to select the application you want to create the function for. Following app selection, you need to provide a name to your function and select the runtime environment.

The create function command will create a folder in your current directory using the name of your function and it will also create an altogic.json file to keep the configuration parameters.

You can use your code editor to write the code for your function.

After completing the code of your function, you can easily deploy it to your application environment.

When you run the deploy command, Altogic creates a new image and applies this image to your app's execution environment.

It may take a couple of minutes to build and deploy your function. You can run altogic get builds and altogic get deployments to get the status of your builds and deployments, respectively.

After writing and successfully deploying your function to your execution environment, you need to link your function to an endpoint, message queue, and/or scheduled task. You can use Altogic Designer to configure your endpoint, message queue, and cron job handlers.

You can also test your functions locally. The start command will launch a local HTTP server and provide you the endpoint of the function. The start command has hot-reloading capabilities. It will watch for any changes to your files and restart the HTTP server.

You can use Altogic Tester or any other API testing tool (e.g., Postman) to test your serverless functions. In your function code, you can log messages using console.log method. Upon execution of your deployed function, these log messages are also returned in response body.

We are quite excited to see what you will be building with Altogic serverless functions. If you have questions about Altogic serverless functions or want to share what you have built, please post a message in our community forum or discord channel.

Announcing General Availability of Altogic🚀

Deniz — Thu, 01 Sep 2022 13:21:02 +0000

After nearly a year of improving our product during our public beta phase, we have great pleasure in announcing that Altogic is now Generally Available.

It has taken us over a year to get to where we are today, with a tremendous amount of work being contributed by our team to build the Altogic platform and developer community.

As of today, with the announcement of general availability, we are also launching our environment-based pricing plans.

New execution clusters worldwide

We are launching 10 new execution clusters all over the world. Now you can deploy your apps in US Central (Iowa), US East (South Carolina), US West (Oregon), Montreal, São Paulo, London, Frankfurt, Mumbai, Singapore and Sydney to minimize latencies for your target users.

Launching the new website

During the 'Public Beta' phase, we received valuable feedback, and with the 'General Availability,' we have renewed and rebuilt a brand new website. It is now more developer friendly, including code snippets, easy-to-access links, a help center, and last but not the least has the dark mode.

New documentation sites

To substantially ease developers' onboarding and development experience in Altogic, we are now serving more resources; optimized, updated, cleaner, and easy-to-use product guides, client library guide, and API reference documentation. These contain instructions, quick start guides, best practices, code examples, and more.

New resources for developers: Showcase Apps & Blog

We are launching the showcase site to highlight specific aspects of the platform and usage scenarios in Altogic and to encourage the developers to submit their apps that are developed with Altogic. With the showcase app, you can access the demo apps, their full front-end source code and technical blogs.

To disseminate know-how, help our audience, come up with different ideas and add value to the developer community, we are also launching our brand new blog site where we will be posting technical articles, how-to guides and new feature updates.

Launch of our pricing plans

With the General Availability, we are launching our environment based pricing plans. We will continue to have a Free plan where you will be able to develop and prototype your applications. Our free plan does not have any limitations on the functionality front. You will be able to use all platform features, yet the free plan will have specific usage quotas. For more information on our pricing plans please visit the Pricing section on our new website.

Exciting times are ahead of us and we are looking forward to hearing about your Altogic experiences. Thank you so much for your time and support without which we wouldn’t have done this.

Quickstart: How to build To-Do App using React & Altogic?

yasinkuyuk — Thu, 16 Jun 2022 10:44:35 +0000

Introduction

This article will cover how to code simple CRUD operations in a to-do app using React, and Altogic, a Backend-as-a-Service platform using its client library.

You can check out the demo.

What are the features of the to-do app?

Create a to-do
Update to-do status
Delete a to-do
List all to-do’s

Set up the backend

Create App

We can create an app with the Altogic Designer fast. To create an app via the Designer:

Log in to Altogic with your credentials.
Select New app.
In the App Name field, enter a name for the app.
And click Next.

Choose Blank App template, and click on Next.
Click Create on the “Confirm & create” tab.

Here, you can customize your subdomain, but not necessarily to do, Altogic automatically creates one for you, your envUrl. You don’t need to worry if you lost your envUrl; you can get it from the Environments view of Designer.

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

To get the clientKey we need to enter the app which we have created before and;

Click on App Settings at the left-bottom of the Designer.
And click on the Client library keys section.

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Create todo model

Click on Models on the left sidebar.
Click New on the right of the screen and select model.
Set model name as todo
Ensure that Enable timestamps are selected to store the creation date of the blog post.
Click Next.

Altogic provides basic CRUD endpoints and services with the related model by default when you create a new model. Since we use Altogic Client Library, we won’t use these endpoints.

We created our first model, ”todo”. We have to define the model properties name, dateTime for the due date, and status. Since we created the todo **model, we should define the **name property as Text, dateTime as Date-time, and the status as Boolean.

Click on the todo model on the Models page.
Click on New Field on the right-top of the page.
Select Text Field→ Text.
Set model name name.
Ensure that the Required field is selected.
Click Create.

Click on New Field on the right-top of the page.
Select Boolean.
Set model name status.
Ensure that the Required field is selected.
Set default value expression false.

Click on New Field on the right-top of the page.
Select Date-time.
Set model name dateTime.
Ensure that the Required field is selected.
Set default value expression DATEADD(NOW(),5).

We completed the database design and the model definition on Altogic without any coding and complex configuration. Let’s move on to the front-end development.

Set up the front-end

Initialize a React app

We can use create-react-app command to initialize a React app:

npx create-react-app quickstart-todo

Then, install the Altogic package.

cd quickstart-todo
npm install altogic

Set up the environment variables

Environment variables are used to secure your secret keys, reuse them in different places and reduce production mistakes. Create a .env file in the root directory of your application, open the file in your editor and paste the following.

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey values you retrieved while setting up your backend.

Next, create a file to create the Altogic Client instance.

mkdir helpers
cd helpers
touch altogic.js

This creates an altogic.js file in the helpers directory. Open the file in your editor and paste the following.

Here, you need to enter the envUrl and clientKey.

Now, install Tailwind CSS and create tailwind.config.js

cd ../
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

Add the following directives to your index.css file.

Development

Since Altogic reduces the complexity of the backend development process, we will code our to-do app with just one main component: App.js

Feature & Function Matching:

Create a to-do → altogic.db.model("todo").create(todoInstance)
Update status of the to-do → altogic.db.model("todo").object(todoId).update({FIELD_NAME:newValue})
List all to-do’s → altogic.db.model("todo").get()
Delete a to-do → altogic.db.model("todo").object(todoId).delete()

We’ve covered all Altogic Client Library Functions that we used in our app. Let’s code it together!

Conclusion

This article covered how to implement simple CRUD operations using React and Altogic Client Library. Thanks to Altogic, we can build most of the functionality with just a few lines of code.

You can check out the GitHub repository for the rest of the code. You can also clone it and build your app on top of it.

Quickstart: How to build Blog App using Vue & Altogic?

yasinkuyuk — Fri, 10 Jun 2022 09:21:32 +0000

Introduction

This article will cover building a Quickstart Blog App using Vue and Altogic, a backend-as-a-service platform using its client library.

The application will cover the following features:

Create blog post
List all blog posts
View single blog post on a separate page

You can reach out the demo here.

Altogic Designer

Create App

We can create an app with the Altogic Designer really fast. To create an app via the Designer:

Log in to Altogic with your credentials.
Select New app.
In the App name field, enter a name for the app.
And click Next.

Choose Blank App template, and click on Next.
Click Create on the “Confirm & create” tab.

Here, you can customize your subdomain, but not necessarily to do, Altogic automatically creates one for you, which will be your envUrl. You don’t need to worry if you lost your envUrl; you can get it from the Environments view of Designer.

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

In order to get the clientKey we need to enter the app which we have created before and;

Click on App Settings at the left-bottom of the designer.
And click on Client library keys section.

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Additionally, since we won’t use any authentication feature, we have to be able to send requests without session. We have to remove the enforcement of the sessions from the client.

Click on the related client key.
Untick the Enforce session checkbox

Create Blog Model

Click on Models on the left sidebar.
Click New on the right of the screen and select Model.
Set model name as blogs
Ensure that Enable timestamps is selected to store the creation date of the blog post.
Click Next.

Altogic provides basic CRUD endpoints and services with the related model by default when you create a new model. Since we use Altogic Client Library, we won’t use these endpoints.

We created our first model ”blogs”. All we have to do is define model properties title and content. Since we created the blogs model, we should define the content property as rich text and the title as text.

Click on the blogs model on the Models page
Click on New Field on the right-top of the page.
Select Text Field→ Text.
Set model name title.
Ensure that the Required field is selected.
Click Create.

Click on New Field on the right-top of the page.
Select Text Field→ Rich Text.
Set model name content.
Click Create

We completed the database design and the model definition on Altogic without any coding and complex configuration. Let’s move on to the development of the frontend.

Frontend Development

Create Vue App

First we need to create a Vue app. Ensure that VueCLI is installed before the installation.

Open your terminal and paste the following script. The script will create altogic-vue-blog-app-tutorial Vue app.

vue create altogic-vue-blog-app-tutorial

It is time to install the necessary dependencies!

Installation of Altogic Client Library

Install the Altogic Client Library to our project by using NPM or Yarn by running the following command:

npm install altogic

Create a .env file in the root directory of your application to set environment variables of the app:

touch .env

Paste the following script to your .env file and replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey you copied before, then return to your terminal.

Next, create a file to use the Altogic services and client.

Go back to your root directory and follow the commands below:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js will be created in the /src/helpers directory. Open the file in your editor and paste the following.

Installation of VueRouter

Since we need different pages for each blog posts and another route for listing all blog posts, we have to implement a route structure to our app. We will use vue-router in our app.

Open the root directory in the terminal and run the following script:

npm install vue-router

Installation of Tailwind CSS

We will use Tailwind CSS for styling the project. Run the following commands in the root directory.

npm install -D tailwindcss postcss autoprefixer

Below command will create tailwind.config.js file:

npx tailwindcss init -p

Open the tailwind.config.js in editor and copy/paste following script to configure template paths:

Create a index.css file in src directory and add the following directives:

Open your main.js file and add the following script to the header of the file:

Components

Before moving on to the development of the components, you can delete the HelloWorld.vue component under the src folder came by default.

We will develop two single components:

BlogList: List all blog posts and create a blog post
SingleBlog: View single blog post details

We will create BlogList.vue and SingleBlog.vue files in the /src/components directory. Open the root directory in your project and paste the following script line by line.

cd src/components
touch SingleBlog.vue BlogList.vue

BlogList

We will list all the blog posts in this component. There is a form structure on the top of this component to create a new blog post.

Altogic Client Library provides us to create, get, update, delete, list any instance on the database by elementary functions. We will use create and get functions in our app:

altogic.db.model(<MODEL_NAME>).get(): Retrieves all instances from the related table
altogic.db.model(<MODEL_NAME>).object(<CREATED_INSTANCE>).create() Creates an instance on the database with the input data

We call the altogic.db.model("blogs").get() function inside the mounted() to fetch the blogs from the database when the component is rendered.

SingleBlog

SingleBlog component is the component where you can view a blog’s details such as blog content and creation date.

Each blog post has its own page in the /blog/:id route where id is the blog’s unique ID. We can reach the ID by this.$route.params.id inside the Vue component.

We retrieve the blog data with altogic.db.model("blogs").object(id).get() function in the mounted() hook.

Router & Routes

Now we have to define our routes to our app. Create a router.js file inside src directory.

We will need two different route type in our app:

Listing blog posts view
Single blog post view

We will specify our routes with related components in router.js file

Now, it only remains the passing the router object defined in router.js file to the app object rendered in main.js file and defining the router views to our App component.

Open your main.js file and paste the following code snippet:

Open your App.vue file and copy & paste the following code snippet:

Now, you can run your project by typing npm run serve on the root directory of the project!

Conclusion

In this tutorial, we developed a full-stack Vue blog app using Altogic and Tailwind CSS. Backend development intimidates the frontend developers in the early stages. However, it took only 2 lines of code to build a backend app with the help of Altogic Client Library. You can reach out the source code of this app here.

Quickstart: How to build Blog App using React & Altogic?

yasinkuyuk — Thu, 09 Jun 2022 08:37:43 +0000

Introduction

This article will cover building a Quickstart Blog App using React and Altogic, a backend-as-a-service platform using its client library.

The application will cover the following features:

Create blog post
List all blog posts
View single blog post on a separate page

You can reach out the demo here.

YouTube Development Vide

Altogic Designer

Create App

We can create an app with the Altogic Designer really fast. To create an app via the Designer:

Log in to Altogic with your credentials.
Select New app.
In the App name field, enter a name for the app.
And click Next.

Choose Blank App template, and click on Next.
Click Create on the “Confirm & create” tab.

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

In order to get the clientKey we need to enter the app which we have created before and;

Click on App Settings at the left-bottom of the designer.
And click on Client library keys section.

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Additionally, since we won’t use any authentication user, we have to be able to send requests without session. We should remove the enforcement of the sessions from the client.

Click on the related client key.
Untick the Enforce session checkbox

Create Blog Model

Click on Models on the left sidebar.
Click New on the right of the screen and select Model.
Set model name as blogs
Ensure that Enable timestamps is selected to store the creation date of the blog post.
Click Next.

Altogic provides basic CRUD endpoints and services with the related model by default when you create a new model. Since we use Altogic Client Library, we won’t use these endpoints.

We created our first model ”blogs". All we have to do is define model properties title and content. Since we created the blogs **model, we should define the **content property as rich text and the title as text.

Click on the blogs model on the Models page
Click on New Field on the right-top of the page.
Select Text Field → Text.
Set model name title.
Ensure that the Required field is selected.
Click Create.

Click on New Field on the right-top of the page.
Select Text Field → Rich Text.
Set model name content.
Click Create

We completed the database design and the model definition on Altogic without any coding and complex configuration. Let’s move on to the development of the frontend.

Frontend Development

Create React App

First we need to create a React app. Open your terminal and paste the following script. The script will create altogic-react-blog-app-tutorial React app.

npx create-react-app altogic-react-blog-app-tutorial

It is time to install the necessary dependencies!

Installation of Altogic Client Library

Install the Altogic client library to our project by using NPM or Yarn by running the following command:

npm install altogic

Create a .env file in the root directory of your application to set environment variables of the app:

touch .env

Paste the following script to your .env file and replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey you copied before, then return to your terminal.

Next, create a file to handle the Altogic services and client.

Go back to your root directory and follow the commands below:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js will be created in the /src/helpers directory. Open the file in your editor and paste the following.

Installation of React-Router

Since we need different pages for each blog posts and another route for listing all blog posts, we have to implement a route structure for our app. We will use react-router-dom in our app.

Open the root directory in the terminal and run the following script:

npm install react-router-dom@6

Installation of Tailwind CSS

We will use Tailwind CSS for styling the project. Run the following commands in the root directory.

npm install -D tailwindcss postcss autoprefixer

Below command will create tailwind.config.js file:

npx tailwindcss init -p

Open the tailwind.config.js in editor and copy/paste the following script to configure template paths:

Open index.css file in src directory and add the following directives:

Components

We will develop two single components:

BlogList: List all blog posts and create a blog post
SingleBlog: View single blog post details

We will create BlogList.js and SingleBlog.js files in the /src/components directory. Open the root directory in your project and paste the following script line by line.

cd src
mkdir components
cd components
touch SingleBlog.js BlogList.js

BlogList

We will list all the blog posts in this component. There is a form structure on the top of this component to create a new blog post.

Altogic Client Library provides us to create, get, update, delete, list any instance on the database by elementary functions. We will use create and get functions in our app:

*altogic.db.model(<MODEL_NAME>).get(): Retrieves all instances from the related table

altogic.db.model(<MODEL_NAME>).object(<CREATED_INSTANCE>).create() Creates an instance on the database with the input data

We call the altogic.db.model("blogs").get() function inside the useEffect() to fetch the blogs from the database when the component is rendered.

SingleBlog

SingleBlog component is the component where you can view a single blog’s details such as blog content and creation date.

Each blog post has its own page in the /blog/:id route where id is the blog’s unique ID. We can reach the ID with the help of the useParams() hook inside the React component.

We retrieve the blog data with altogic.db.model("blogs").object(id).get() function in the useEffect() hook.

App

Since we use react-router-dom for routing we have to use the BrowserRouter component in our index.js file. Open the index.js and paste the following script:

Now, it only remains the customize the main App component. We have to define the routes in the App component with rendered components and route params. Paste the following code snippet to your App.js file:

Conclusion

In this tutorial, we developed a full-stack React blog app using Altogic and Tailwind CSS. Backend development intimidates the frontend developers in the early stages. However, it took only 2 lines of code to build a backend app with the help of Altogic Client Library. You can reach out the source code of this app here.

How to code a complete task management tool with Next.js and Altogic?

yasinkuyuk — Tue, 24 May 2022 12:22:01 +0000

Introduction

This article will cover how to code a complete task management tool using Next.js, and Altogic, a Backend-as-a-Service platform using its client library.
You can check out the source code and demo app.

What are the features of the task management tool?

Create projects.
Create tasks.
Update tasks.
Remove tasks.
Remove projects.
Get all tasks.
Get all projects.
Toggle the done status.
Compute stats using Altogic.

Youtube Showcase Video

Set up the backend

Create an app in Altogic

First things first: To use Altogic, we need to create an app in Altogic. We can create an app in Designer easily. All you need to do is enter a name for your app.

How to create an application in Altogic Designer.
We need envUrl and clientKey to access our environment via Altogic Client Library. envUrl is specific to each environment, and Altogic initially creates one environment for you when you create your app. Here is how to get the envUrl from environment details page.

We can get the clientKey by clicking on the App Settings button in the left-bottom corner of the Designer and clicking on the Client library keys section.

Here, Altogic already created one for us, but we can create more client library keys and configure the permissions for different keys.

Create models in Altogic

Models define the data structure and data validation rules of your applications. A model is composed of basic, advanced, and sub-model fields. As an analogy, you can think of models as tables and fields as columns in relational databases or models as documents and fields as document properties in non-relational databases.

We need to create two models called todos and projects to keep information of them in the database.
To create a model via the Designer, you have two options. You can either create a model from scratch or a sample JSON document. In either case, first, you need to navigate to the Models view in designer and select +New.

After, you can pick a Model.

Now, you need to add some fields to your model.
To create a field via the Designer, you need to Navigate to Models view and select the model you would like to add the new field. You will be directed to the model details view.

In the model details view, select New field.
From the dropdown menu, select the Boolean that you would like to create.
In the field name, type the name.
Select Create You need to add the following fields:
name, which is a Text.
userId, which is an Object reference to the users model. After, you can create the todos model in the same way. And add the following fields:
title, which is a Text.
description, which is a Rich Text.
dueDate, which is a Date-time.
priority, which is a Option list with values “1,2,3”
userId, which is an Object reference to the users model.
status, which is a Boolean.
projectId, which is an Object reference **to the **projects model.
tags, which is a Basic values list of type Text.

Set up the Frontend

Install the packages

Before you start to use the npx command, make sure you have NodeJS installed in your development environment. Also, installing VSCode and some extensions might be better for faster development.
💡 You can visit https://nodejs.org/en/download/ to download.
To get started, open the terminal and create a new Next.js project.
npx create-next-app@latest
Next.js will ask you to name the project. Name it whatever you want; I will use “altogic-task-mgmt-app” for this example. Move to the folder just created and install the Altogic Client Library.
cd altogic-task-mgmt-app
npm i altogic
Open the project in VSCode.
Install tailwind CSS and create tailwind.config.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add the paths to all of your template files in your tailwind.config.js file.

Add the following directives to your globals.css file.

Install Font Awesome to use the icons.
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm i @fortawesome/free-brands-svg-icons
Install **@headlesui/react **for styling.
npm i @headlessui/react

Update the next.config.js file to allow the Next.js Image component to load images from Altogic’s storage. “c1-na.altogic.com” value is retrieved from the envUrl which starts with c1-na.altogic.com in my case.

Set up the environment variables

Environment variables are used to secure your secret keys, reuse them in different places and reduce production mistakes. Create a .env.local file in the root directory of your application, open the file in your editor and paste the following. You can check more about environment variables in Next.js here.

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey values you retrieved while setting up your backend.
Next, create a file to create the Altogic Client Library instance.
mkdir helpers
cd helpers
touch altogic.js
This creates a altogic.js file in the helpers directory. Open the file in your editor and paste the following.

Here, you need to enter the envUrl and clientKey. Optionally you can paste signInRedirect to redirect your users to the specified sign-in page in some cases. This works in a way that if users try to perform a session-required action while their session has been destroyed, Altogic redirects them to the signInRedirect route.

Let’s start coding!

Now we can start integrating the backend into the frontend. For this, we will create a context for managing the tasks and projects. Inside the context, there will be following and more functionalities.

Create project objects

Our data models are defined as every task has a project. To create a task, first, we need to create a project. Here is the code for that.

Create task objects

Later, we can create a task in the database.

Manage the states

In the first useEffect, we fetch all the projects and tasks from the database. It runs every time when user changes, in other words when they sign in and sign out.
In the second useEffect, we clear the filters we applied before, compute the stats from the database, and set the selectedTodos array accordingly. This runs when currentProject or todos changes.
In the third useEffect, we set the current project when projects change.

Compute stats using Altogic

In apps like task management apps, we need to show some statistics to the user. Altogic makes it much easier to compute complex statistics in the backend. For this we will use altogic.db.model(“todos”).group(“priority”).compute({name:“count”,type:“count”}) function. This function groups the todos objects by priority and counts them by their group and returns the count of each group in a field named “count”.
You can check out the documentation for more information.

Toggle the done status

Now we have created projects and tasks, we should implement a function to update the status of the tasks.
We will use update method of the ObjectManager in Altogic Client Library.

Remove a task

To remove a task, we will use the delete method of the ObjectManager in Altogic Client Library.

Remove a project

When we remove a project, we need to remove all the tasks in it as well.
To remove a task, we will use the delete method of the ObjectManager and the delete method of the QueryBuilder in Altogic Client Library.

Update a task

Users might want to update the title, description, due date, or priority fields of a task.
To update a task, we will use the update method of the ObjectManager in Altogic Client Library.

Get all projects

Get all project objects from the database using the get method of QueryBuilder in Altogic Client Library.

Get all tasks

Get all task objects from the database using the get method of QueryBuilder in Altogic Client Library.

TaskContext Full Code

In the above, we have connected our frontend application with Altogic. There are more functions for sorting, toggling modals, etc. and you can check them from our repository.

Conclusion

This article covered how to implement a task management app using Next.js, and Altogic Client Library. Thanks to Altogic, we can build most of the functionality with just a few lines of code.
You can check out the GitHub repository for other functionalities and the rest of the code. You can also clone it and build your app on top of it.

How to implement Two-Factor Authentication using Next.js, Twilio and Altogic

Mert Yerekapan — Fri, 13 May 2022 12:43:23 +0000

Introduction

This article will cover two-factor authentication basics using Next.js, Twilio, and Altogic, a Backend-as-a-Service platform using its client library. This authentication method allows users to add one more security layer to their application. Many people enable their two-factor authentication settings to increase their security using their phone numbers or authentication apps for security purposes.

You can check out the source code and demo app.

How is the two-factor authentication flow?

Users who already have an account need to set their phone number to enable two-factor authentication.
An SMS with a code is sent to the specified phone number by Altogic and Twilio.
Users verify their phone number by entering the code sent to their phone number.
Users can enable or disable the two-factor authentication setting from their profile.
When users try to sign in, if two-factor authentication is enabled, a code is sent to the specified phone number by Altogic and Twilio.
Users verify their identity by entering the code on the input on the screen.
If two-factor authentication is not enabled, they can sign in without this process.

Youtube Showcase Video

Set up the Project

This project builds on top of the complete e-mail authentication app we created previously. You can follow the tutorial to build the same app or clone the project from here and continue with the rest of the tutorial.

Twilio Integration

You need to sign up for Twilio with a free/paid trial. You need to get the Account SID and Auth Token for integration with Altogic Client Library.

If you use the free trial, you will need to take the Twilio phone number to send SMS messages to the users.

Create an Account on Twilio
Open Console
Click “Get a trial phone number” on the left-top of the Console
Copy Account SID, Auth Token, and My Twilio phone number values to the clipboard

Now, we’ve copied the configuration credentials to the clipboard. You must specify the verified phone numbers in trial accounts, which we defined as “ to number” in Altogic.

Click on the Explore Products in the left sidebar.
Be sure that Messaging and Phone Numbers products are selected.

Now you can navigate to the Verified Caller IDs page by Sidebar → Phone Numbers → Manage → Verified Caller IDs.

You should add your phone number as a Verified Caller from here.

And finally, you have to give geo permission to your phone numbers region. You can go to this page by Sidebar → Messaging → Settings → Geo permissions.

Create the models

When we create our application, a user model is created by default. We need to add a boolean field to this user model to let users enable and disable the two-factor authentication.

To create a field via the Designer, you need to Navigate to Models view and select the model you would like to add the new field. You will be directed to the model details view.

In the model details view, select New field.
From the dropdown menu, select the Boolean that you would like to create.
In the field name, type “twoFactorAuth” and set a default value of false
Select Create

We need to create a new model called phoneVerificationCode to handle the verification code we send to users’ phone numbers. This data type will be a Transient data type meaning it is not stored in the database. We are defining it as Transient because we don’t need it after completing the verification.

To create a model via the Designer, you have two options. You can either create a model from scratch or a sample JSON document. In either case, first, you need to navigate to the Models view in designer and select +New.

After, you can pick a Model.

And create the phoneVerificationCode model. Afterward, we need to add three fields:

code field, which is an Integer.
userId field, which is an Object reference to the users model.
phoneNumber field, which is a Text field.

Create the endpoints

Endpoints are the communication channels to access the services provided in your applications, and through endpoints, you expose your application services and data to the outside world.

To create an endpoint via the Designer, you need to navigate the Endpoints view in designer and select New->Endpoint.

After clicking, you need to enter a relevant endpoint name and optionally pick a group, pick a method, specify the path and assign a service that handles the requests to the endpoint.

We can also click on the “Session required” checkbox, which enforces a need for a session when a request is made to the endpoint.

In this example, our method is “POST,” and our path is “/users/set-phone” meaning that if we send a POST request to this path, the service we define will run. We created a service by clicking “Add new service” and by naming our service, we will be created an empty service. We will design the service next.

We will create three more endpoints to verify the code while changing the phone, signing in, and implementing the particular sign-in functionality.

Create the verify code during changing phone endpoint:

Create the verify code during the sign-in endpoint:

Create the sign-in endpoint for implementing the particular 2-FA logic:

Now that we created our endpoints and services, we can start designing the services, which is the most fun part of using Altogic!

Design the Services

Building the flow of service involves three main activities.

Adding the right node from the nodes library to the service flow area.
Customizing the added node parameters using the node properties panel.
Linking the output link point of a node to the input link point of another node using relations.

First, we will implement the “Set phone number service.” We have the start node, which is used to start the execution of the endpoint handling service. It runs only once at the start of the service to trigger nodes connected to its output link point. We define a query string parameter of type text named “phoneNumber” as input for this endpoint.

Then, we check if the phone number sent is a valid phone number with the ISMOBILEPHONE() function.

If no, return an error response.

If yes, create an object of phoneVerificationCode model. For code, we generate a random number with RANDBETWEEN() function and insert the other fields from either the input or the session.

Cache the object we created so we can access it later for verifying the code. I want the code to expire after one minute, so I set the timeout value to 1 minute.

Send the SMS message to the specified phone number with the code. Here we use the Twilio credentials we obtained.

Then we return the success response. This is the final look of our service:

Next, we will implement the “Verify code in change phone service.” This service is used to verify the code when users want to change their phone numbers.

We have the start node, which is used to start the execution of the endpoint handling service. It runs only once at the start of the service to trigger nodes connected to its output link point. We define the request body structure as a single model of “phoneVerificationCode” as input for this endpoint.

Get the cached object with the phone number to check the code.

Return an error response if the cached object does not exist anymore. It means that the code is expired and no longer valid.

Check if the cached code is equal to the code sent in the “phoneVerificationCode” object.

Update the user's phone number and set the “phoneVerified” to true using the “Update Object Fields by Id” node. We need to set the updated object model to “users” and object id to the userId, and we do that by giving the userId we obtain from phoneVerificationCode object.

Then we return the success response. This is the final look of our service:

Next, we will implement the “Verify code in sign-in service.” This service is used to verify the code when users try to sign in when their two-factor authentication is enabled.

Get the cached object with the phone number to check the code.

Return an error response if the cached object does not exist anymore. It means that the code is expired and no longer valid.

Check if the cached code is equal to the code sent in the “phoneVerificationCode” object.

Return error if code is not equal to the one sent in the input.

Get the user using the “Get Single Object by Query” node. We need to set the retrieved object model to users, and our query should be this.phone==inputObject.phoneNumber to get the user with the specified phone.

If there is no user, return an error response.

If there is a user, create a user session.

Then we return the success response. This is the final look of our service:

Next, we will implement the “Sign in service.” This service is used to implement the sign-in feature. Because we want to use two-factor authentication, we can’t use the function in the client library, and we have to design it ourselves. But don’t worry, designing complex business logic in Altogic is relatively easy! :)

We have the start node, which is used to start the execution of the endpoint handling service. It runs only once at the start of the service to trigger nodes connected to its output link point. We define a query string parameter of type email named “email” and type text called “password” as input for this endpoint.

Get the user using the “Get Single Object by Query” node. We need to set the retrieved object model to users, and our query should be this.email==params.body.email to get the user with the specified email.

Return an error if there is no user with the specified email.

Use the “If-Else Condition” node to check if the emailVerified field of the user is true or not.

If the email is not verified, return an error response.

Compare the password sent with the password in the database with ECOMPARE() function. This function compares the password text in the input with the password in the database but does not expose the encrypted password. No one, including the developer, can see the user's passwords.

Return an error response if passwords do not match.

Check if the two-factor authentication of the user is enabled.

If two-factor authentication of the user is not enabled, create the user session and return it with the user data.

If enabled, create an object of phoneVerificationCode model. For code, we generate a random number with RANDBETWEEN() function and insert the other fields from the input.

Cache the object we created so we can access it later for verifying the code. I want the code to expire after one minute, so I set the timeout value to 1 minute.

Send the SMS message to the specified phone number with the code. Here we use the Twilio credentials we obtained.

Then we return the success response. This is the final look of our service:

To learn more about building the service flows, check out the documentation.

Let’s Start Coding!

Set/Change phone functionality

To enable two-factor authentication, users need to set up their phone numbers. This functionality is the same as changing the phone functionality so that we will use the same screen with some minor conditional UI changes.

We have already created the endpoint and designed the service. We need to send a request to the endpoint using Altogic Client Library using EndpointManager and the post method like altogic.endpoint.post()

SMS verify during change phone functionality

Code above runs the service for setting/changing the phone number and sending the SMS for verification code. Now, users need a screen to enter the SMS code. We have already created the endpoint and designed the service for this case. We need to send a request to that particular endpoint.

Here is the code for that:

Toggle Two Factor Authentication functionality

Users should be able to switch on and off two-factor authentication if they want to. For this, we are implementing a basic switch. We are updating the twoFactorAuth boolean field.

Sign in functionality

When users want to sign in, we will use the service we designed because we need to check if two-factor authentication is enabled and if yes, we need to send an SMS with a code. We replace the client library function with sending a request to the endpoint.

SMS verify during sign-in functionality

Code above runs the service for signing in and sending the SMS for verification code. Now, users need a screen to enter the SMS code. We have already created the endpoint and designed the service for this case. We need to send a request to that particular endpoint with code, phone number, and userId.

Here is the code for that:

Conclusion

This article covered adding the two-factor authentication method to our email authentication app using Next.js, Twilio, and Altogic Client Library. Thanks to Altogic, we can build this functionality with just a few lines of code.

You can check out the GitHub repository for other functionalities and the rest of the code. You can also clone it and build your app on top of it.

Backend Basics: RESTful API (API, REST, Methods, JSON, Examples)

Erkin Yılmaz — Tue, 10 May 2022 10:39:03 +0000

As you probably know, a typical modern application consists of 2 main parts: Frontend and Backend.

If you want to create a web or mobile app, you need to have at least a basic understanding of REST API which is commonly used on backend development.

Todays technology enables developers to create complex backend apps using these simple concepts in no time by using BaaS platforms like Altogic.

RESTful API

Let’s break it down and understand the REST & API terms.

Italian Restaurant Metaphor

Let’s say you are trying to find nearby Italian restaurants on your favorite restaurant review app. You open up your mobile app, type “Italian” into a search field, hit enter, and you see a list of restaurants near your location.

A REST API works similarly. You request something, and you get a list of results back from the service you are requesting.

What is API?

An API is an Application Programming Interface. It is a set of rules that allow applications to talk to each other. The developer creates the API on the server and allows the client to talk to it.

In our Italian restaurant example, the server is the application running in the cloud, and the client is the mobile app you use to search for Italian restaurants.

What is REST?

REST determines what the API looks like. It stands for “Representational State Transfer,” and it is a set of rules that developers follow when they create their API. In the above example, the search functionality is an API resource exposed by REST.

Methods

In RESTful API, the client and server communicate using the HTTP protocol. The client sends a request to the server, and the server processes this request and sends back a response in return.

Here is the HTTP methods that are commonly used in RESTful APIs:

1. GET

This request is used to get a resource from a server. If you perform a GET request, the server looks for the data you requested and sends it back to you. In other words, a GET request performs a READ operation. This is the default request method.

2. POST

This request is used to create a new resource or perform an action on a server. If you perform a POST request, the server creates a new entry in the database or performs an action and tells you whether the creation is successful or returns the action results according to your service design.

3. PUT / PATCH

Primarily used for updating a resource on a server. For example, if you perform a PUT/PATCH request, the server updates an entry in the database and tells you whether the update is successful. In other words, a PUT/PATCH request performs an UPDATE operation.

4. DELETE

This request is used to delete a resource from a server. If you perform a DELETE request, the server deletes an entry in the database and tells you whether the deletion is successful. In other words, a DELETE request performs a DELETE operation.

Okay, I got it. Can you show me an example usage of RESTful API in an app?

As I told you, todays technology enables developers to create complex backend apps with these simple concepts in no time by using BaaS platforms.

Let’s see an example with Altogic where we use RESTful API to create our backend app:

1.Create your database models

2.Define your business logic (services)

3.Create your RESTful Endpoints and associate them with your services

In this case, when a POST request is sent to the path “/posts/{postId}/comments” (3rd photo), it will trigger the “Add comment to a post service” (2nd photo) which creates a comment object under “comments” model on our database (1st photo) with the input given.

This is the logic behind your backend apps. You can create complex backend apps and connect them to your frontend using Altogic client library with ease.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write.

It is mainly used to store data in document databases and transport data between different applications, primarily between a server and web applications.

JSON is also frequently used in RESTFul APIs to provide data in request and response body. Below is an example JSON document summarizing a menu of a restaurant.

JSON supports the following two data structures;

Collection of name/value pairs
An ordered list of values − It includes arrays, lists, or sequences, etc.

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value. So in the below example, the name is “firstName”, and the value is “John”.

Example: “firstName”: “John”

You need to put text values between double-quotes. For numbers, boolean values, or null values, you do not need double quotes.

Example: “age”: 24

In JSON, values must be one of the following data types:

String — Strings in JSON must be written in double quotes
Number — Numbers in JSON must be an integer or a floating-point
Object (JSON object) — Values in JSON can be objects. However, objects as values in JSON must follow the same rules as JSON objects.
Array — Values in JSON can be arrays. Array values are provided between []
Boolean — Either true or false value
Null — Empty value or no value

Example usage in Altogic Tester

You can send a POST request to the path “/posts” to trigger the “Create posts object” service which will create a posts object under posts model on the database with the input sent in JSON format:

Thanks for reading! Follow Altogic for more content like this and sample full-stack apps with full resources and tutorials.

How to build OAuth Provider Authentication with React and Altogic

yasinkuyuk — Thu, 05 May 2022 10:59:59 +0000

Introduction

This article will cover OAuth Provider Authentication basics using React and Altogic, a backend-as-a-service platform using its client library. You can checkout the Github repository and the demo application.

So, what is OAuth provider authentication?

The term OAuth stands for Open Authorization with 3rd party application such as social providers. Users can sign in to the application using their Google, Facebook, Twitter, Discord, Github accounts.

Provider redirects us to the specific route in the application with authorization token. It is critical to emphasize that the shared content is authorization token, not your password data.

How does the OAuth Provider Authentication work?

Users select the OAuth provider from the frontend application
After clicking the provider’s button, user is redirected related authorization page of the provider
Users type their credentials on the providers sign in page
The provider redirects user to the frontend application’s specific route called as Development-Callback URL
The frontend application fetches and handles the response comes from the provider

Creating App in Altogic

We can create an app with the Altogic Designer** really fast. To create an app via the Designer:

Log in to Altogic with your credentials.
Select New app.
In the App name field, enter a name for the app.
And click Create.

Here, you can customize your subdomain, but not necessarily to do, Altogic automatically creates one for you, which will be your envUrl. You don’t need to worry if you lost your envUrl; you can get it from the Environments view of Designer.

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

In order to get the clientKey we need to enter the app which we have created before and;

Click on App Settings at the left-bottom of the designer.
And click on Client library keys section.

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

How to Setup OAuth Provider Authentication with Altogic ?

Altogic currently supports 5 different OAuth providers:

We can configure any of these providers and combine them. In this tutorial, we will learn the entire key points to configure the OAuth providers with our app.

The Redirect URL is the link to which your front-end application is redirected after the user signs in with the provider. Firstly, we will configure our frontend application’s Redirect URL *with **Altogic.*

Click on App Settings at the left-bottom of the Designer.
And click on Authentication section.
Type your Redirect URL to the input field.

The remaining part is the configuration of the oAuth providers’ client with our app. We have to create an account with the providers we will use. As we indicate early, Altogic currently supports 5 different oAuth providers such as, Google, Twitter, Facebook, LinkedIn, and Github. We can view their configuration details at the bottom of this page. Before moving on to the self-configuration of each provider, there are 4 core concepts to explain:

Client ID: The ID of the application on the provider side
Client Secret: The secret client key of the application on the provider side
Development-Callback URL: The Redirect URL that we will pass to the application on the provider side
Client Sign In URL: The URL of the providers sign in page linked with our app. Since we have been using the Altogic Client Library, we won’t need this URL to redirect to the providers sign in page

We covered the fundamental concepts of the OAuth provider authentication. Let’s move on to the providers’ self configuration on their consoles.

Google

Sign in to your Google Developer account
Click on Create Project
After creating the project select OAuth Consent Screen on the left sidebar
Select user type as External and click on Create button
Fill in the necessary blanks such as App Domain, Test Users , etc.

After setting up the OAuth Consent Screen, select **Credentials **on the left sidebar
Click on Create Credentials → OAuth Client ID
Select application type as Web Application
Paste your Development-Callback URL to the Authorized Redirect URIs
Your Client ID and Client Secret will be shown in the pop-up after creating the OAuth Client ID or in the right-top of the Credentials tab
Paste Client ID and Client Secret **to the related fields on **Altogic Designer

You can watch video tutorial of the Configuration of Google OAuth provider:

Facebook

Sign in to your Facebook Developers account
Click on Create App on the right-top of the home page
Select Consumer
Set up Facebook Login to your app
Select App Review → Permission and Features on the left sidebar
Get advanced access for the public_profile
Select Facebook Login → Settings on the left sidebar
Paste your Development-Callback URL **to the **Valid OAuth Redirect URIs
Select Settings → Basic on the left sidebar
Copy&paste the App ID and App Secret **to the related fields on **Altogic Designer.

You can watch video tutorial of the Configuration of Facebook OAuth provider:

Twitter

Sign in to your Twitter Developer Portal
Click on Create Project in the middle of the home page
Enter the necessary information related(App name, description, etc.)
After creating your project, click Edit button on Authentication Settings tab
Make sure 3-legged OAuth and Request email addresses from users is selected
Paste your Development-Callback URL to the Callback URLs field
Type your Website, Terms of Service, Privacy Policy URLs
Change tab to the Keys and Tokens **and **Regenerate Keys
Copy&paste the API Key and Key Secret to the related fields on Altogic Designer. (Consumer key and consumer secret)

You can watch video tutorial of the Configuration of Twitter OAuth provider:

Discord

Sign in to your Discord Developers account
Click on New Application on the right bottom of the home page
Give your application a name and click on Create
Select OAuth2 on the left sidebar
Click on Add Redirect button
Paste your Development-Callback URL in here
Copy&paste the Client ID and Client Secret to the related fields on Altogic Designer.

You can watch video tutorial of the Configuration of Discord OAuth provider:

Github

Sign in to your Github account.
Open your profile dropdown on the right-top of the page and click Settings
Click on Developer Settings at the bottom of the Settings page
Select OAuth Apps and click on Register a new application

Homepage URL: Our frontend application’s index URL
Authorization callback URL: Auth redirect URL that Altogic creates for us

After creating our OAuth app on Github, there will be Client ID and Client Secrets presented in the General tab. Copy&paste them to the related fields on Altogic Designer.

You can watch video tutorial of the Configuration of Github OAuth provider:

Frontend Development

Installation

Before installing the application, be sure you have already installed NodeJS in your development environment.

To install

💡 You can visit: https://nodejs.org/en/download/ to download.

To get started, open the terminal and create a new React project

// creates a react app with the name of 'altogic-oauth-provider-authentication-tutorial'
npx create-react-app altogic-oauth-provider-authentication-tutorial

The above command creates a React project in the altogic-oauth-provider-authentication-tutorialdirectory.

cd altogic-oauth-provider-authentication-tutorial
touch .env

Create a .env file in the root directory of your application, open the file in your editor and paste the following.

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey you copied before, then return to your terminal.

Install the Altogic client library to our project by using NPM or Yarn by running the following command:

// Installation of Altogic Client Library with NPM
npm i altogic

Next, create a file to handle the Altogic services and client.

Go back to your root directory and follow the commands below:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js will be created in the src/helpers directory. Open the file in your editor and paste the following.

The third parameter of createClient function signInRedirect handles the redirection to the Sign In page automatically when you have invalid session tokens or signed out. This is a beneficial feature for managing sessions in scenarios when you sign out from your mobile phone.

User Interface Components

We will use Tailwind CSS and Headless UI library for styling the project. Run the following commands in the root directory to install the library.

npm install -D tailwindcss postcss autoprefixer
npm install @headlessui/react

Below command will create tailwind.config.js file:

npx tailwindcss init -p

Open the tailwind.config.js in editor and copy/paste following script to configure template paths:

Open index.css file in src directory and add the following directives:

And we will use Font Awesome Icons in our project. You should install the Font Awesome Library to have well-looking components.

Add SVG Core:

npm i --save @fortawesome/fontawesome-svg-core
Add Icon Packages:

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
Add React Component

npm i --save @fortawesome/react-fontawesome@latest

We installed the necessary dependencies to our project for styling. Now, it is time to install react-router for routing our Single Page Application(SPA).

npm i react-router-dom

We completed the installation part of the project. We will use custom button components to style our application. Open your terminal on your root directory and type following commands one by one:

cd src
mkdir components
cd components
mkdir Buttons
cd Buttons
touch PrimaryButton.js SecondaryButton.js

Above commands will create PrimaryButton and SecondaryButton files under /src/components/Buttonsdirectory. Now, you can copy&paste the following scripts to the related files:

Implementation

Building Main Components

The next step is to create the core components that we’ll need for our application,

ProviderSelector A component that can be used for redirection to the provider both sign in and sign up
AuthRedirect A component that the user is redirected to after the provider’s authorization
App The main application component. It renders all the views with their properties.

Switch to the root directory of your react application and run following commands:

cd src
mkdir pages
cd pages
touch AuthRedirect.js ProviderSelector.js

This creates a pages directory with the components in the src directory. Your folder structure should look similar to the screenshot:

Since the user must be redirected to the related providers authorization page, we will develop the ProviderSelector component.

Altogic Client Library has just one simple method to handle both sign up and sign in cases to simplify the authentication process. A user instance is created in the database right after the first sign in/up action with the application. Therefore; I don’t have to design multiple use cases as a developer. Thus, we will handle sign in and sign up functionalities within just one component. We will be adding two different routes such as /signin and /signup, however same component will be rendered inside them with different texts.

We will design 5 buttons for each provider: Google, Facebook, Twitter, Github, Discord. When the user clicks the related button, it triggers the signin(provider) function defined inside the component. We will call Altogic Client Library altogic.auth.signInWithProvider(provider) method to redirect the user to the related authorization page.

As we early noticed in the article, users will be redirected to the frontend of the application with specific routing. We have to catch the return response of the redirection URL and take necessary actions on the application such as setting isAuth state in the context.

Now, we will develop a viewless AuthRedirect component to handle access_token from the provider and check whether the user is authenticated or somehow not.

BONUS: Extra Features/Components

To focus on the main purpose of the article, we won’t go over with the development of the below components in this article. However, you can reach the source code of the extra feature components from Github repository for full-featured app.

Profile A component that the users can view, upload and remove their profile pictures
Sessions A component that the users can view and sign out from their active sessions. Built with SessionTable and SessionItem sub-components.
Footer ,Header ,ProfileDropdown Navigation bar and footer badge
NotFound A component to catch the routes not presented in application routes
Notification A component that notifies the user about requests/responses
RequiresAuth A wrapper component that checks whether the user is authenticated before rendering a component; otherwise, it redirects the user to the signup/login page.
RequiresNotAuth A wrapper component that checks whether the user is not authenticated before rendering a component; otherwise, it redirects the user back to the profile page(for example Sign In page).
ModalContext , ModalProvider Provides context structure to communicate between components to show notifications to the user

You can see the list of related Altogic functions with above features:

Authentication Context

Here we came to the one of the core component and structure of app, AuthenticationContext created using useContext() hook. Context is used to generate shared data accessible across the component hierarchy without passing props to each component. For example, isAuth state stores the boolean value of is user authenticated or not. Almost every component must use the isAuth state to handle its internal functionalities. I could pass props to each component like parent to child. However it is not flexible and easy to use. I built an AuthenticationContext to handle and manage all the data and functionalities related with authentication.

I defined all my Altogic functions and related states in AuthenticationContext to distribute it to the child components.

Finally, we have completed the implementation of the core components of our application. It only remains the development of the App component left. You can reach the source code of the additional side components from the Github repository.

We defined the routes in the App component. Routes are protected with RequiresAuth and RequiresNotAuth restriction components.

Open the terminal in the root directory and paste the following command to run your application:

npm run start

Conclusion

In this tutorial, we walked through how to configure OAuth Provider Authentication in React app using Altogic and Tailwind CSS. We all covered detailed configuration of Google, Facebook, Twitter, Discord and Github providers in our Altogic app. If you build your backend application with coding in pure programming languages & frameworks; the configuration process will take your time and effort. However, with the significant help of the **Altogic, **we implement only 10 lines of code snippet inside the ProviderSelector, AuthRedirect components.

Check out the Github repository for the source code of the application for further details.

How to implement Magic Link Authentication with Next.js and Altogic

Mert Yerekapan — Thu, 05 May 2022 05:16:57 +0000

How to implement Magic Link Authentication with Next.js and Altogic

Introduction

This article will cover magic-link authentication basics using Next.js and Altogic, a backend-as-a-service platform using its client library. This authentication method allows users to sign in to the application without remembering their password.

To reduce UX friction and avoid remembering multiple passwords, some small/medium and even large organizations are moving out from the password-based authentication flow to magic authentication, depending on their risk appetite.

You can check out the source code and demo app.

Benefits

With the magic link authentication method, the user does not have to remember another password or enter it to access their account. So we can clearly understand that magic link authentication highly simplifies the login burden for users and provides a better user experience.

Disadvantages

For that authentication method, the primary condition is that the link needs to be safe and can not be able to manipulated from outside of the application. And the links should have to be used for just a few minutes and only once. So except for these conditions, a passwordless authentication seems safer than one with a password.

💡 If you know any other disadvantages that you discover or faced before, please write in the comments section, we would love to discuss and learn.

How is the magic link authentication flow in Altogic?

Users who already have an account enter their email and click the “Send magic link” button.
An email with the magic link is sent to the specified email address by Altogic.
Users click on the link in the sent email.
Altogic redirects users to specified “Redirect URL” with an access token in the query string parameter.
This access token is used to get a session token, and users are directed to their profile page.

Youtube Promo Video

You can check out the video below to see a live demonstration of our app.

Set up the project

Let’s start coding!

We already have the backend and frontend of the email authentication now. We can start implementing the magic link functionality.

Set up the magic link page

We need a page where we get the email input from the user.

Using the “altogic.auth.sendMagicLinkEmail(email)” we can send magic link mail to the specified email.

Here is the source code of the /auth/send-magic-link page:

In the end, your screen should look like this:

Magic Link Email

You can also change all of the message templates from the App settings → Authentication → Message templates view of Altogic Designer and use any HTML template you want.

Here is how to do that:

Now that we sent the email, users need to click on the link to sign in.

Redirect URL route

When users click on the link, Altogic redirects to our specified Redirect URL, which is /auth-redirect in this case.

Here in getServerSideProps, we check the query string parameters, and according to each action, we perform some actions. Here is an important part!

getAuthGrant() function either takes a session token as a parameter or uses the one in the URL.

Here, we run this code only on the server-side, so we must give the session token as the parameter.

What happens if we click on the link again?

Magic links are one-time links. If users click on the link a second time or after it expires, they get an error. This feature makes the magic link authentication method more secure.

As we can see from the URL, the access token is already used or invalid.

💡 You can directly insert the error message from the link for convenience.

Conclusion

This article added the magic link authentication method to our email authentication app using Next.js and Altogic Client Library. Thanks to Altogic, we can build this functionality with just a few lines of code.

You can check out the GitHub repository for other functionalities and the rest of the code. You can also clone it and build your app on top of it.

How to build Phone Number-Based Authentication with React, Altogic and Twilio

yasinkuyuk — Thu, 28 Apr 2022 18:50:00 +0000

Introduction

This article will cover phone number-based authentication basics using React and Altogic, a backend-as-a-service platform using it’s client library. You can checkout the Github repository.

So, what is phone number-based authentication?

Users can sign up for the application by providing their phone number and password only. This authentication method does not require users to specify their email addresses. Thus, users can log in to the application using their phone number and the password they set when signing up.

With phone number authentication, the application will send an SMS code to the user through Twilio. After users receive the SMS message from the provider, they can use this code to verify their phone number.

It is also possible to set up the authentication system through other providers such as MessageBird and Vonage.

In the rest of the article, I’ll explain how phone authentication works and set up phone number authentication to a Web application using the Altogic Client Library and React as a frontend.

YouTube Promo Video

How does Phone Number Based Authentication work?

Authentication with the Phone Number consists of a few steps:

Users can enter their phone number and password on the Sign Up page.
Then the system will send an SMS to the given phone number with Twilio.
After the user enters the verification code in the SMS, the system completes the phone number verification.
Users will be able to sign in 2 ways:
- Sign in with credentials: Password and phone number
- Sign in with One-Time Passwords(OTP), where OTP is sent as an SMS message

OTP: The automatically generated password authenticates the user for a single session.

Developers can either configure the validity period of the verification code or the user session duration.

How to Setup Phone Number Based Authentication with Altogic?

Creating App in Altogic

To enable phone number authentication, we need to create an app in Altogic.

We can create an app with the Altogic Designer really fast. To create an app via the Designer:

Log in to Altogic with your credentials.
Select New app.
In the App name field, enter a name for the app.
And click Create.

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

In order to get the clientKey we need to enter the app which we have created before and;

Click on App Settings at the left-bottom of the designer.
And click on Client library keys section.

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Really cool! Now everything is ready at the backend, time to continue Twilio Integration.

Twilio Integration

You need to sign up for Twilio with a free/paid trial. You need to get the Account SID and Auth Token for integration with Altogic Client Library.

If you will use the free trial, you will need to take Twilio phone number to send SMS messages to the users.

Create an Account in Twilio
Open Console
Click Get a trial phone number on the left-top of the Console
Copy Account SID, Auth Token and My Twilio phone number values to the clipboard

Now, we’ve copied the configuration credentials to the clipboard. In trial accounts, you have to specify the verified phone numbers, which we defined as “to number” in Altogic.

Click on the Explore Products in the left sidebar
1. Be sure that **Messaging **and **Phone Numbers **products are selected.

Now you can navigate to the Verified Caller IDs page by Sidebar → Phone Numbers → Manage → Verified Caller IDs.

You should add your phone number as a Verified Caller from here.

And finally, you have to give geo permission to your phone numbers region. You can go to this page by Sidebar → Messaging → Settings → Geo permissions.

💡 After configuring the Twilio account, you have to enable the phone number and password based sign up from Designer → App Settings → Authentication → Mobile Phone Authentication → Enable phone number and password based sign up in Altogic client library.
Paste the Twilio Account SID,Twilio Authentication Token and Twilio Phone Number to the related fields.

Frontend Development

Installation

Before installing the application, be sure you have already installed NodeJS in your development environment.

To install

💡 You can visit: https://nodejs.org/en/download/ to download.

To get started, open the terminal and create a new React project

// creates a react app with the name of `altogic-react-phone-authentication-tutorial`
npx create-react-app altogic-react-phone-authentication-tutorial

The above command creates a React project in the altogic-react-phone-authentication-tutorialdirectory.

cd altogic-react-phone-authentication-tutorial
touch .env

Create a .env file in the root directory of your application, open the file in your editor and paste the following.

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey you copied before, then return to your terminal.

Install the Altogic Client Library to our project by using NPM or Yarn by running the following command:

// Installation of Altogic Client Library with NPM
npm i altogic

Next, create a file to handle the Altogic services and client.

Go back to your root directory and follow the commands below:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js will be created in the src/helpers directory. Open the file in your editor and paste the following.

Building Main React Components

The next step is to create the components that we’ll need for our application,

SignIn — A form component that allows the user to sign in.
SignUp — A form component that allows the user to sign up.
Verification — A form component that verifies phone number.
Home — A component that displays whether or not authentication was successful.
RequiresAuth A wrapper component that checks whether the user is authenticated before rendering a component; otherwise, it redirects the user to the signup/login page.
RequiresNotAuth — A wrapper component that checks whether the user is not authenticated before rendering a component; otherwise, it redirects the user back to the profile page(for example Sign In page).
App — The main application component. It renders all the views with their properties.
Sessions — A table component that allows user to manage and view their sessions.
Profile — A component that users can view and manage profile data.

switch to the root directory of your react application and run following commands:

cd src
mkdir pages
cd pages
touch SignIn.js SignUp.js Verification.js Home.js Sessions.js Profile.js

Going back to src directory again, and creating ‘components’ directory. We will create ‘Routes’ directory under ‘components’ directory:

cd ..
mkdir components
cd components
mkdir Routes
cd Routes
touch RequiresAuth.js RequiresNotAuth.js

This creates a pages directory with the components in the src directory. Your folder structure should look similar to the screenshot

We’ll be using React Context API to manage the user and session data, and pass them to the components rendered based on whether the user is authenticated or not. We’ll also be using React Router to handle routing.

Go back to your root directory and open the terminal:

cd src
mkdir context
cd context
touch AuthenticationContext.js ModalContext.js CounterContext.js

To install React Router run the following command.

npm install react-router-dom

We will use Tailwind CSS and Headless UI library for styling the project. Run the following commands in the root directory to install the library.

npm install -D tailwindcss postcss autoprefixer
npm install @headlessui/react

Below command will create tailwind.config.js file:

npx tailwindcss init -p

Open the tailwind.config.js in editor and copy/paste following script to configure template paths:

Open index.css file in src directory and add the following directives:

And we will use Font Awesome Icons in our project. You should install the Font Awesome Library to have well-looking components.

Add SVG Core:

    npm i --save @fortawesome/fontawesome-svg-core

Add Icon Packages:

    npm i --save @fortawesome/free-solid-svg-icons
    npm i --save @fortawesome/free-regular-svg-icons
    npm i --save @fortawesome/free-brands-svg-icons

Add React Component

    npm i --save @fortawesome/react-fontawesome@latest

Since we built a phone number-based authentication app, we will need a phone number input field. We will use react-phone-number-input library to increase UX.

npm i react-phone-number-input

Finally all dependencies have been installed on our local machine. We can start our application by typing npm run start on the root directory. Let’s start coding!

Implementation

First of all, we will need some interface views and components such as;

Verification Phone number verification page
ResetPassword and ResetPasswordCode Sends users an SMS to reset their password
NotVerified Informs users that their phone number is not verified yet, and resends verification code
Counter Simple countdown timer for verification codes validity
Footer, Header, ProfileDropdown Navigation bar and footer badge
Notification Informs users about the responses
SessionTable and SessionItem for listing sessions
ChangeCredentials Tab structure to change view for ChangePhone and ChangePassword
PrimaryButton and SecondaryButton Custom buttons

Open your root directory and copy&paste lines one by one to create files.

cd src/components
touch Counter.js Footer.js Header.js Notification.js ProfileDropdown.js SessionItem.js SessionTable.js

mkdir Buttons
mkdir Profile

cd Buttons
touch PrimaryButton.js SecondaryButton.js

cd ../Profile
touch ChangeCredentials.js ChangePhone.js ChangePassword.js

We will need two parent components that instruct routing rules to their child component. Rules mean,

Authenticated users are not able to view Sign Up and Sign In pages.
Unauthenticated users are not able to view Profile and Sessions pages.

Since we have restricted rules, We have designed special particular components that restrict the child components: RequiresNotAuth and RequiresAuth

RequiresNotAuth.js

App.js This will be main component of our application. All routes and views will be rendered in App component.

As you can see in the App.js component, we have three different Provider&Context structure:

AuthenticationProvider: Stores functions, states that are related with authentication, such as calling Altogic Client Library functions
ModalProvider: Manages push notification flow in the app
CounterProvider: Stores and handles the deadline of the verification code’s expiry date

Just for now, I am skipping the implementation of AuthenticationContext, we will have further been discussing “How to build context provider structure and how it works?”.

Since we built a phone number based authentication app; we need SignIn and SignUp components to handle form actions. I’ve excluded all the functions ,which works asynchronously because of the Altogic connections, to the Authentication Context to manage and access it easily from other components.

Let’s start coding the SignUp component first. We have a form structure to receive necessary data from the user. There is a button to handle the registration process at the bottom of the form structure. When you click this button, the signup() function is triggered, defined in the 23rd line. Here, we call context.signup() function defined in AuthenticationContext. Thus, Altogic functions stay together and stored in the context.

We’ve entirely coded the sign up form. Now, we need a sign in form to sign users in.

We’ve developed signin() function -in line 24-, that will be triggered after the user clicks the button. Like with the SignUp component, context.signin() will be triggered inside the component’s own function.

We have finished the implementation of the Sign Up and Sign In page. Since the users have to verify their phone number, we need to built a Verification component, which will take verification code as single parameter. When you click to the button, verify() defined inside the function, will be executed. In this function, we execute context.verifyPhoneNumber() function to verify our phone number with Altogic.

The common point of the three component SignIn, SignUp and Verification is; they three have buttons, functions and forms inside the component. Also, they also importing AuthenticationContext as context. I want to explain the simplified workflow of communications between components and contexts:

User clicks the button Sign In, Sign Up, Verify
Clicking triggers signin(), signup(), verify() function inside component
context.signIn() function is called by handleClick()function

Authentication Context

Finally, we came to the Context API part. Before moving on to the coding section, I think going over the Altogic Client Library functions will be very helpful.

altogic.auth.signUpWithPhone(phoneNumber, password, name) → Takes 3 parameters (Name field is optional)
altogic.auth.signInWithPhone(phoneNumber, password) → Return user and session response if the credentials are correct
altogic.auth.signOut(token) → Kill the given token and sign out from the related session
altogic.auth.signOutAll() → Sign out from all session related with your account
altogic.auth.resendVerificationCode(phoneNumber) → Resend verification code to verify your phone number
altogic.auth.changePassword(newPassword, oldPassword) → Change password
altogic.auth.getAllSessions() → Get list of all active sessions with your account
altogic.auth.sendResetPwdCode(phoneNumber) → Send a verification code to your phone number if you forgot your password
altogic.auth.resetPwdWithCode(phoneNumber,code,password) → Reset your password
altogic.auth.changePhone(password, phoneNumber) → Change phone number function takes phone number and password as arguement
altogic.auth.verifyPhone(phoneNumber, code) → Verify phone number with your verification code that comes to your phone number

Here we came to the one of the core component and structure of app, AuthenticationContext created using useContext() hook. Context is used to generate shared data accessible across the component hierarchy without passing props to each component. For example, isAuth state stores the boolean value of is user authenticated or not. Almost every component must use the isAuth state to handle it’s internal functionalities. I could pass props to each component like parent to child. However it is not flexible and easy to use. I built an AuthenticationContext to handle and manage all the data and functionalities related with authentication.

I defined all my Altogic functions and related states in AuthenticationContext to distribute it to the child components.

BONUS: EXTRA FEATURES

You can find extra features in the shared repository. Also you can find more and more functions, database queries, etc. In fact all your needs to build a backend app.

Upload profile photo
Remove profile photo
Update credentials(phone number and password)
List all sessions
Sign out from other sessions
Sign out from all sessions

You can see the list of related Altogic functions with above features:

Conclusion

In this tutorial, we walked through how to secure and verify your users in a React app using Altogic, Twilio and Tailwind CSS. Phone number-based authentication is one of the standard authentication method in the sector. Additionally, as a full-stack developer, I have to say that building the backend of the phone number-based authentication apps becomes so confusing to handle with coding the backend and integrating the 3rd party SMS providers simultaneously. Altogic provides terrific services and functions to create a backend app for phone number authentication. As we experienced in the article, it took just a few lines of code to build a backend app.

This super powerful and easy-to-implement app should be a baseline for your phone number-based projects, and you would develop on it. You should check out the repository for the application we built on GitHub for further details.

Complete Email Authentication with Next.js and Altogic

Mert Yerekapan — Mon, 25 Apr 2022 13:05:36 +0000

Introduction

This article will cover email-based authentication basics using Next.js and Altogic, a backend-as-a-service platform using its client library. This authentication method requires users to specify their email and passwords during sign-up. After signing up, users can log in to the application using their email and password. You can check the source code and demo app.
By default, email verification is enabled in your App settings → Authentication view of Altogic Designer. If you would like to change this, you can disable “Confirm email addresses” in the Authentication view of Altogic Designer.

How is the email authentication flow in Altogic?

Users sign up with their email and password.
A verification email is sent to the specified email address by Altogic.
Users confirm their email by clicking on the link in the sent email.
Altogic checks the token in clicked link and if valid changes the user’s email address to verified and returns an access token in the query string parameter of the redirect URL.
This access token is used to get a session token and users are directed to their profile page.

Youtube Promo Video

You can check out the video below to see a live demonstration of our app.

Set up the backend

Create an app in Altogic

First things first: To use Altogic, we need to create an app in Altogic. We can create an app in Designer easily. All you need to do is enter a name for your app.

We need envUrl and clientKey to access our environment via Altogic Client Library. envUrl is specific to each environment, and Altogic initially creates one environment for you when you create your app. Here is how to get the envUrl from environment details page.

We can get the clientKey by clicking on the App Settings button in the left-bottom corner of the Designer and clicking on the Client library keys section.

Users model

By default, Altogic creates a user model for you. You can customize it by adding different fields. Some of them are pretty advanced and customized, which is very handy.

Set up the Frontend

Install the packages

Before you start to use the npx command, make sure you have NodeJS installed in your development environment. Also, installing VSCode and some extensions might be better for faster development.
💡 You can visit https://nodejs.org/en/download/ to download.
To get started, open the terminal and create a new Next.js project.

npx create-next-app@latest

Next.js will ask you to name the project. Name it whatever you want; I will use “altogic-email-authentication” for this example. Move to the folder just created and install the Altogic Client Library.

cd altogic-email-authentication
npm i altogic

Open the project in VSCode.
Install tailwind CSS and create tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

Add the following directives to your globals.css file.

Install Font Awesome to use the icons.

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm i @fortawesome/free-brands-svg-icons

Install cookies-next to set cookies for server-side rendering easily.

npm i cookies-next

Install @headlesui/react for styling.

npm i @headlessui/react

Update the next.config.js file to allow the Next.js Image component to load images from Altogic’s storage. "c1-na.altogic.com" value is retrieved from the envUrl which starts with c1-na.altogic.com in my case.

Set up the environment variables

Environment variables are used to secure your secret keys, reuse them in different places and reduce production mistakes. Create a .env.localfile in the root directory of your application, open the file in your editor and paste the following. You can check more about environment variables in Next.js here.

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey values you retrieved while setting up your backend.
Next, create a file to create the Altogic Client Library instance.

mkdir helpers
cd helpers
touch client.js

This creates a client.js file in the helpers directory. Open the file in your editor and paste the following.

Here, you need to enter the envUrl and clientKey. Optionally you can paste signInRedirect to redirect your users to the specified sign-in page in some cases. This works in a way that if users try to perform a session-required action while their session has been destroyed, Altogic redirects them to the signInRedirect route.

Building our components

The next step is to create the components we’ll need for our application. You can also clone our example repository and use the components right away.
First, create a components folder with the mkdir components command. Let me walk you through the components we use for our app.

Sign-in.js and Sign-up.js file in auth directory. Those are the form components we use to sign-up and sign in our users.
EmailConfirmResend.js and PasswordReset.js file in auth-redirect directory. Those are the components we will show our users when redirected to the our-domain.com/auth-redirect route.
AltogicBadge.js, Header.js and Layout.js file in layout directory. Those are the components we use for our layout throughout the app.
SessionListItem.js ,SessionList.js , ProfilePhoto.js, NameSection.js , ChangePassword.js and ChangeEmail.js file in profile directory. Those are the components we use on the profile page.
Button.js , Notification.js and ErrorMessage.js file in ui directory. Those are the components we use many times to build our UI.

In the end, your components folder should look like this:

Let’s start coding!

We have the backend and frontend setup ready. We can start integrating them now.

Some UI components we use often

It is best to separate the logic of some of the components we use frequently and put them into a different folder to reuse.
Button:

Error:

Sign up functionality with Altogic

Altogic Client Library has a built-in function for creating new users with an email and password. You can check about it more here.
altogic.auth.signUpWithEmail takes three inputs:

email (mandatory)
password (mandatory)
name (optional) The code snippet handles the form input using the signUpWithEmail function.

Our sign-up screen should look like this:

This function will create a user object in your database with the provided email, password, and optionally name field. Altogic will send an email to the user’s email address.

Redirect URL route

In Altogic, you can redirect your users to a predefined route for some actions.

When the user is successfully authenticated using an oAuth provider or a magic link, they will be redirected here.
When the email confirmation link is clicked, they are redirected to this route.
When a user changes their email, if the email confirmation setting of the app is enabled, an email is sent to them. After the user clicks it, they will be redirected to this route.
When a user recovers their password, they are redirected to this route.

You can check and edit this route from Designer like below.

Here in getServerSideProps, we check the query string parameters and according to each action, we perform some actions. Here is an important part!

getAuthGrant() function either takes a session token as a parameter or uses the one in the URL.

In the example below, Altogic sent the user an email confirmation mail. When clicked, it redirects to our specified Redirect URL, which is auth-redirect.
There are three query parameters:

status=200 indicates that Altogic managed to send me a valid token for my operation.
access_token gives us the token value I am going to use.
action=email-confirm indicates for which action I am going to use this token. In this case, it is confirming my email.

Here, we run this code only on the server-side, so we must give the session token as the parameter.

Sign in functionality with Altogic

Altogic Client Library also has a built-in function for signing in users. You can check about it more here. The code snippet handles the form input using the signInWithEmail function.

altogic.auth.signInWithEmail takes two inputs:

email (mandatory)
password (mandatory)

As you can see in the code above, we are sending a POST request to /api/login route. We are doing this to set the cookie for server-side rendering (SSR). If you are not going to use SSR, you can delete these lines.

Why do we need cookies for SSR?

One of the key features of Next.js is server-side rendering. Meaning that some of the code will run only on the server and not on the client side. But session and user information is stored on the client-side. How do we understand if we have a user authenticated when a request is made to the server? For this purpose, we need to set a cookie on the server-side when we sign in and delete it when we sign out. This way, we can check if the user is authenticated on the server-side and then perform the actions we want.
Here is the code you need to add to your api/login folder:

On any page, we can check if there is a user signed in or not. This part is needed both for route protection and fetching data special to the user with SSR.

Our sign-in screen should look like this:

How to check if there is a user authenticated via SSR?

getServerSideProps function runs every time the user makes a request. It runs only on the server, and its content is not exposed to the client. We check if a user is authenticated and redirect them to their profile or sign-in page accordingly.

Signout users

Here is the page you can redirect your users to log them out. It simply invalidates the session, clears the context, and sends a POST request to our-domain/api/logout to clear the cookies.

When we sign out, we need to delete the cookie we set on the server-side because the token value in the cookie is no longer valid.
Here is the code you need to add to your api/logout file:

Storing user information in context

The UserContext creates a context and sets the user and session property null by default. To learn more about context and how to effectively use them, read React’s documentation on context.

More features

Our example application covers more features like uploading a profile picture, managing sessions, password recovery, password change, and email change. You can check all of them in the repository. Here, I just want to show you how easily you can implement them with client library functions.

Conclusion

In this article, we built a simple yet capable email authentication app using Next.js and Altogic Client Library. Generally, building authentication is one of the most challenging parts of app development. Thanks to Altogic, we can build this functionality with just a few lines of code.
You can check out the GitHub repository for other functionalities and the rest of the code. You can also clone it and build your app on top of it.