[NEAR] Using BOS & FastAuth
This article is research of the NEAR Protocol conducted by Catena LAB
written by : 윤태희(Jaden Yoon), 김성언(Enoch), 오하영(Hayoung Oh)
Published by : Catena Lab (Catena LAB)
Reviewed by:오하영(Hayoung Oh), 서학용(robert seo)The article covers the “BOS & FastAuth” service of the NEAR protocol. It provides a comprehensive introduction to the concept, components, features, and advantages of BOS. It also delves into how to build applications using BOS and presents some cases of front-end development using BOS.
TL;DR
BOS
BOS(Blockchain Operating System) is a new blockchain-based protocol that serves as a common layer compatible with various blockchain platforms. BOS provides a decentralized front-end development environment, making blockchain application development transparent and flexible. The advantages of BOS are that it provides a decentralized experience to users, enhances security, improves component reusability, provides compatibility with various blockchains, and provides developers with a friendly and easy development environment.
FastAuth
FastAuth is a powerful feature provided by the NEAR Blockchain Operating System (BOS), offering a superior onboarding experience compared to Web 2.0. Users can easily and quickly create accounts for BOS applications. This allows developers to provide users with easier and faster usage experiences of the component and app, enabling the migration of billions of Web 2 users to the Web 3 environment. FastAuth simplifies onboarding and email recovery, allowing users to create and recover accounts using fingerprint recognition, email addresses, and more. This enables users to experience Web 3 without the hassle of remembering seed phrases or installing third-party wallet apps.
BOS Overview
BOS (Blockchain Operating System) is a new blockchain-based protocol launched by Near Protocol in March 2023, which was developed with the aim of serving as a common layer compatible with all blockchain platforms.
The name BOS was given with the intention of extending the role of convenient interaction between user and machine performed by the existing operating system (OS) to web 3.
BOS components and how they work
BOS provides a decentralized front-end through a gateway, and the ability to build front-end apps using components and interact with various blockchains.
Through this, BOS provides users with security, composability and compatibility. It also builds a decentralized front-end development environment, making blockchain application development more transparent, streamlined and flexible.
Blockchain & Smart contracts
Currently, BOS already supports function calls on other blockchains, such as the EVM chain. In the future, it will be expanded to support Cosmos, Solana and other chains.
Data Platform Layer / Middleware
Middleware makes everything come together. This layer sits between the chain and the component and connects actions on the front-end with actual on-chain actions. Middleware also provides easy access to on-chain data and facilitates search and recovery capabilities with integrated mechanisms required by Web 3.
Decentralized front-end components
The decentralized front-end component acts as a front-end to the app-layer protocol and is stored on the blockchain and runs locally in custom VMs. The code for these components is available on the gateway, and users can fork them to distribute their own versions or combine components to build new apps. A component’s code is verifiable because it is always stored on-chain, and users can safely run the entire stack in their local environment because the component does not access local storage or cookies.
Gateways
One of the core components of BOS, the gateway is a virtual machine that loads and runs front-end code stored on the blockchain. This gateway provides a front-end for protocols built on Layer 1 blockchains and Layer 2 (L2) solutions such as Ethereum and NEAR. The gateway is responsible for providing a decentralized front-end app that users can run in their local environment.
Onboarding
A product and service layer that helps you easily onboard new users to your application. With FastAuth, BOS provides a Web 2-like onboarding experience for those who have previously used Web 2 services. I will explain FastAuth in detail later.
Advantages of BOS
Existing blockchain development environments have several limitations:
- Centralized front-end:
In the existing blockchain development environment, most of the front-end code was hosted and operated on a centralized server. This forced users to completely lose control over their personal data and funds, and to rely on the vulnerabilities and limited access of centralized servers. - Limited security:
Centralized development environments required users to trust private keys and encrypted data to third parties. This can lead to security risks, and reliance on a centralized system can expose you to risks such as data leakage or hacking. - Limited component composability:
Component reuse was difficult in the existing blockchain development environment. Most applications are developed independently, making it difficult or impossible to integrate with other apps. This has become a limiting factor in application development and extensibility. - Limited blockchain compatibility:
Existing blockchain development environments were often dependent on specific blockchains. This has placed limitations on developers developing applications utilizing other blockchains and has become a factor limiting diversity and flexibility. - Complex development process:
In the existing blockchain development environment, the deployment and development process was complex and cumbersome. Deploying smart contracts and building interactions with the front-end was a task that took time and technical effort.
Compared to traditional blockchain development environments, BOS has the following advantages:
- Decentralized Front-end:
BOS is a protocol for developing and deploying decentralized applications, providing users with a decentralized experience. This enhances the security of personal data and funds and provides the advantage of not relying on a centralized system. - Enhancing access and security:
BOS enhances access and security by providing the ability to run blockchain applications locally via Gateways. Users can directly run and verify front-end code, and all app code is stored on-chain to provide a verifiable and secure environment. - Component composability:
BOS provides the ability to compose and reuse the front-end of the app layer protocol through the concept of components. Through this, developers can build applications quickly and efficiently by building and utilizing existing fragmented blockchain services (DeFi, Explorer, dApp, etc.) as components in service units or function units. - Blockchain Compatibility:
BOS is compatible with various blockchains and can call functions on other blockchains. This provides flexibility for developers to develop applications utilizing various blockchains. - Developer Friendly:
BOS provides developers with a friendly and easy development environment. It provides tools and features for rapid deployment and building. So developers can develop an application with less time and effort.
Overview of FastAuth
With the release of the NEAR Blockchain Operating System (BOS), one of its most powerful features, FastAuth, has emerged.
FastAuth makes it easier for BOS users to experience Web 3 onboarding and create accounts for all BOS apps without having to purchase a new password or cryptocurrency. FastAuth gives developers the easiest and fastest access to new components and apps. It encourages developers to create various dApps using BOS.
As a result, FastAuth will play an important role in significantly lowering the Web3 onboarding threshold for new users and opening the door to attract billions of Web2 users to the Web3 space.
How FastAuth works
- Fast Registration: Users can register with biometrics (fingerprint, face ID, OS user/password verification) and email address. Users receive automatically generated and customizable user names based on their email addresses.
- Easy Login and PassKeys: FastAuth allows login using existing password keys (Apple and Google) through FastAuth. Users can also easily log in using biometrics on any device that can be compatible with the encryption key.
- SSO Account Recovery: Users can recover their accounts through the SSO login process with the email used to register. Account recovery is distributed through multilateral calculations and does not give a single administrator administrative access to the full access key.
- Meta Transactions and Zero Balance Accounts: FastAuth allows users to register and create accounts for free.
- Relayers: Relayers help users to use dApps created on top of NEAR without any gas costs. At this point, the gas cost that users have to pay is the structure that dApp developers or others pay, and new users on Near.org can interact with social functions without having to purchase $NEAR.
Advantages of FastAuth
1. Easy Installation and Account Creation Process (Comparison with Metamask)
Metamask Installation and Account Creation Process
FastAuth Installation and Account Creation Process (No need to installation)
FastAuth simplifies the account creation process by eliminating the need for seed phrases and various approval procedures. Users can create an account using only their existing email address.
By minimizing the initial hurdles that Web 2 users face when onboarding to Web 3, FastAuth enables anyone to access Web 3 without any burdens or complications.
2. Easy Account Recovery (Comparison with Metamask)
Metamask’s Account Recovery Process
Metamask requires users to recover their accounts using the seed phrase provided during the initial account creation. If the user fails to properly store or loses the seed phrase, they face the risk of permanently losing access to their account. Additionally, the account recovery process itself can be complex. These factors can make it difficult for users to create and maintain a wallet for cryptocurrency.
FastAuth’s Account Recovery Process
As mentioned earlier, with FastAuth, users can easily recover their accounts using the email address they used during the initial sign-up.
Since there is no need to store and utilize seed phrases for account recovery, anyone can easily access the world of Web 3 without the hassle of cumbersome account recovery processes.
3. Gas Fee Delegation when Using dApps
Most dApps currently in service require users to pay for gas from the beginning. It can be a difficulty in the Web3 onboarding experience. However, NEAR-based dApps can pay the gas bill for the user through FastAuth.
As a result, users can freely utilize dApps without the burden of gas fees and interact with the NEAR-based ecosystem.
Example dApp using BOS
1. MintBase
MintBase is NFT marketplace that operates on NEAR BOS.
Built with BOS, it can be embedded and reused anywhere other developers want it. If you build this marketplace into your game, it will allow players to easily trade in-game NFTs without leaving the game.
Link : https://near.org/mintbase.near/widget/nft-marketplace
2. Pikespeak
Pikespeak is a tool that provides a dashboard for the analysis of on-chain data. It provides real-time data on NEAR Protocol, providing great convenience for users to use data. Developers can fork it to create their own custom chain data.
Link : https://near.org/frichard5.near/widget/NDC-transfers-overview
3. Create a profile using BOS
This time, let’s look at an example of using BOS that you can easily follow using the online IDE.
First, access https://near.org/sandbox, the NEAR online IDE.
Before working on the code, create an account and log in in advance to save the Widget you have worked on to the NEAR blockchain.
When you click CreateAccount at the top, an account is created. Since FastAuth function is provided to help you quickly onboard to BOS through web login, you can create an account quickly without having to memorize password by entering your usual email account and specifying a password. FastAuth will be covered again at the bottom of the article.
Looking at the Sandbox screen, the Component tab is for editing code, the Props tab is for editing props.json, and the Metadata tab is for editing metadata.
The following is the code of the profile creation front-end, which is simply implemented using the built-in components of BOS.
https://near.org/near/widget/ComponentDetailsPage?src=dalja6309.near/widget/MakingPofile
The built-in components used are: Markdown, IPFS Uploader, Typeahead, Tooltip, styled In addition, props variable was used to receive data input, state API was used to declare and update state variable, and context object was used to get specific information from vm instance.
Based on the rendered screen, the top description box was created using markdown text and styled components. The Make profile button uses OverlayTrigger and Tooltip to bring up help when hovering over it. In addition, an event handler function that changes the variable state.isVisible, which is initialized to false, to true is connected to the button, which serves to make the bottom profile creation part visible.
// initiate state variables
State.init({
isVisible: false,
});
// set markdown text
const text = `
#### Create your own profile!
...
`;
// define clickOnchange event to update state variable
const handleClick = () => {
State.update({ isVisible: true });
};
const Box = styled.div`
color: palevioletred;
...
`;
const Button = styled.button`
background: palevioletred;
...
`;
return (
...
{/* styled component */}
<Box>
{/* markdown text component */}
<Markdown text={text} />
{/* tootip component */}
<OverlayTrigger
key={"right"}
placement={"right"}
overlay={
<Tooltip id={`tooltip-right`}>
Insert data and <strong>complete your profile!</strong>
</Tooltip>
}
>
<Button onClick={handleClick}>Make profile</Button>
</OverlayTrigger>
</Box>
<hr />
{state.isVisible && (...)}
...
);In the profile creation part, IpfsImageUpload component is used to open the image upload window when the button is pressed, and the selected image can be uploaded to IPFS (InterPlanetary File System). The name and email at the bottom of the image are declared as props variables, and you can assign the values of those variables to props json in the props tab.
// initiate state variables
State.init({
img: null,
isVisible: false,
});
...
return (
...
{/* Image uploader component */}
<div>
<IpfsImageUpload image={state.img} />
</div>
<div className="mt-2">
{state.img.cid && (
<img
...
src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
alt="uploaded"
/>
)}
</div>
{/* Receiving input using props */}
<h5>name : {props.name}</h5>
<h5>email : {props.email}</h5>
...
);In the case of account, the accountId of the context object is used to obtain the account ID logged into the current VM instance. In the case of interests, the typeahead component is used to select multiple elements of a predefined options array. Lastly, in the case of status message, it is defined as state.message variable, the initial value is set with initiate of State api, and if there is an input value through the input tag at the bottom, the value is updated through State.update.
// initiate state variables
State.init({
img: null,
message: "Have a great day!",
isVisible: false,
});
// get user account from context.accountId
let user_account = context.accountId;
// set options of typeahead
const options = [
"Hackathon",
"Development",
"Smart contract",
"DeFi",
"Blockchain",
];
// define handleChange event to update state variable
const handleChange = ({ target }) => {
State.update({ message: target.value });
};
...
return (
...
{/* get current signed-in user account by using accountId */}
<h5>account : {user_account ? user_account : "user account"}</h5>
{/* typeahead component */}
<div style={{...}}>
<Typeahead
options={options}
multiple
onChange={(value) => {
State.update({ choose: value });
}}
placeholder="Choose your interests"
/>
<h5>
interests:
<span>{JSON.stringify(state.choose)}</span>
</h5>
</div>
{/* use state */}
<div>
<h5>
status message :
<span style={{...}}>{state.message}</span>
</h5>
<label class="text-center" style={{ color: "#3b9ded" }}>
Change the status message
</label>
<input
style={{...}}
onChange={handleChange}
/>
</div>
...
);Front-end development experience using BOS is very similar to the existing JavaScript-based front-end development, so developers who have been exposed to existing JavaScript can use it familiarly. It is expected that BOS will be able to be used by Web 2 developers without barriers to entry, as it supports almost all functions that are actively used in the past, such as state management, library use, and object and type definition. In addition, BOS provides convenient functions that enable direct fetching of information from a VM instance or seamless interaction with the NEAR blockchain, so Web 3-related tasks can be easily handled without using a separate library or external API.
BOS official documentation provides the function of each component with various practical examples, and you can try out the code directly through the built-in sandbox on the documentation page. It is also very convenient to use. These features are expected to improve development speed and efficiency by providing developers with an intuitive experience.
Depending on the implementation, BOS provides the ability to compose existing blockchain services faster and more efficiently. Through this, developers can build blockchain-based services more quickly, and it is expected that various use cases that have not been thought of before will be derived by utilizing the various functions provided by the BOS.
Summary
In this article, we learned about the components, operation, advantages, and features of the new blockchain-based protocol BOS (Blockchain Operating System) released by Near Protocol in March 2023.
Also, we were able to experience the convenience, efficiency, and potential of BOS by doing simple front-end work ourselves using various functions provided by BOS.
In particular, Near’s new FastAuth feature is expected to be adopted by many dApps and developed into various use cases when released as open source in the future due to its seamless user experience and easy recovery process.
