FOURSEC ENGINEERING
Setting Up FourSec
Graphical Security PIN
Follow these steps to ensure you have our solution up and running. Note that we're currently on an early preview stage. Feel free to report us any discrepancies in setup process.
Overview
FourSec Graphic Security Pin (GSP) is a security solution designed to be both user-friendly and highly secure. Instead of relying solely on traditional PINs or passwords, our GSP leverages graphical elements and gamification to create a security authentication challenge that’s easy for you to remember but difficult for anyone else to guess. GSP can be invoked at any time during user journey on protected websites, such as login, session refresh, withdrawals, placing orders and others.
Architecture
High-level components diagram presented below
Each FourSec deployment should have a front-end and server to server back-end integrations enabled.
Setting up FourSec Management Console account
Before anything else please make sure that you create an account at our Management Console

You can find the link to it here
Once the user is created proceed to login here
Now, proceed to create a company which is essential step in architecture of our Management Console. Navigate in to
Now create an Application. This could be your Development server, or QA machine. Application is a name for an environment where you'd like to see FourSec integration up and running
Now that you have selected your company fill in the data for Application Creation as it it shown below
Expand your application and press button "Generate Token"
Generate a new token and save it to the password manager or any other secret location.

NB: we do not store the token in our DB after generation. Please make sure you have saved it securely.
Please make sure that you have the following values saved ready before proceeding to integration steps:
  • Application ID
  • Token
Front-End Integration
Note: FourSec is currently at early pre-view stage and we only provide integration to Web (Browser-based) apps with desktop dimentions
GSP currently supports only React framework as separate lightweight NPM module

Use the following module for integration of Front-End component
https://www.npmjs.com/package/foursec-challenge

The installation of FE component can be done by either one of the following methods

npm i foursec-challenge

yarn add foursec-challenge
Server Integration (Server-2-Server)
Communication between client’s backend and FourSec API is protected by a token made up using a pair of values:
  • FourSec Application ID
  • FourSec Application Token
See the example of setting up an initial authentication, note that basic auth is used and the final auth. token represents a combination of Application ID and Application Token, joined by colon “:” encoded by base64

import ax from "axios";

const token = Buffer.from(
  `${process.env.FOURSEC_APP_ID}:${process.env.FOURSEC_APP_TOKEN}`
).toString("base64");

const fsApi = ax.create({
  baseURL: process.env.FOURSEC_API_URL,
  headers: {
    Authorization: `Basic ${token}`,
  },
});

export default fsApi;
Note: both of these values should have been created earlier in FourSec Management Console under “Applications” section (Token can't be revealed, if you forgot to save it - then generate a new one)
Integration flow diagram is presented below. Here you can find the typical flow of using fourSec API within your application. Please note that the logic on setting, getting and verification of the authentication challenge is solely on your backend. We used /login flow as an example, but that could be any other flow (register new user, change profile details, submitting an order etc.)
Integration flow diagram
The main API endpoints to call from client’s back-end are the following ones listed in the table below.
For your reference there is also a Swagger page to test and play around the product
While using Swagger please make sure that you authenticate via "Authenticate" button.
Use Application ID as a username and Token as password withing basicAuth screen
We value your feedback
We appreciate your time and we would love to make process as simple as it only could.

For any questions and feedback please don't hesitate to contact us directly using our email info@foursec.io