DEV Community: yasinkuyuk

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 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 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.

DEV Community: yasinkuyuk

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

Introduction

What are the features of the to-do app?

Set up the backend

Create App

Create todo model

Set up the front-end

Initialize a React app

Set up the environment variables

Development

Conclusion

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

Introduction

Altogic Designer

Create App

Create Blog Model

Frontend Development

Create Vue App

Installation of Altogic Client Library

Installation of VueRouter

Installation of Tailwind CSS

Components

Conclusion

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

Introduction

YouTube Development Vide

Altogic Designer

Create App

Create Blog Model

Frontend Development

Create React App

Installation of Altogic Client Library

Installation of React-Router

Installation of Tailwind CSS

Components

Conclusion

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

Introduction

What are the features of the task management tool?

Youtube Showcase Video

Set up the backend

Create an app in Altogic

Create models in Altogic

Set up the Frontend

Install the packages

Set up the environment variables

Let’s start coding!

Create project objects

Create task objects

Manage the states

Compute stats using Altogic

Toggle the done status

Remove a task

Remove a project

Update a task

Get all projects

Get all tasks

TaskContext Full Code

Conclusion

How to build OAuth Provider Authentication with React and Altogic

Introduction

How does the OAuth Provider Authentication work?

Creating App in Altogic

How to Setup OAuth Provider Authentication with Altogic ?

Google

Facebook

Twitter

Discord

Github

Frontend Development

Installation

User Interface Components

Implementation

Building Main Components

Conclusion

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

Introduction

YouTube Promo Video

How does Phone Number Based Authentication work?