English

connector
low-code

How we support an array of diverse connectors

The story of how we support an array of diverse connectors with both good user experience and development experience. With the help of config driven development, we made a low-code connectors platform.

Sijie

Developer

7/12/20234 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

Introduction

Connectors play a critical role in Logto. With their help, Logto enables end-users to use passwordless registration or sign-in and the capabilities of signing in with social accounts. Logto allows users to install or build their own connectors, and there are already more than 20 official connectors. Our connectors are designed to be highly flexible, and allow users to install or even build their own. At the same time, it is easy to develop a new connector. To achieve that, we designed and implemented a solution called “Dynamic Form” that is inspired of Config Driven Development (CDD).

Background

The configuration for Logto's connector is a JSON which, though flexible, can be challenging to edit and validate. In the begining, that is not a big problem, because at that time, most JSON configs are like:

But as we support more and more providers and protocals, things began to change. Take “SAML connector” as an example, there are more than 10 keys in the JSON config, and the type of value are complex, there are strings, numbers, JSONs, select values, and multi-line string for certificate.

So we think is time to bring in a fine-designed form to replace the JSON editor. The Logto Connector is designed to work as a third-party application, so hard-coding forms isn't a feasible solution. The result is a strong need for dynamic forms that are easy to manange, and have good user experience at the same time. The form for SAML connector that we mentioned above looks like:

What is Config Driven Development (CDD)

CDD, or Component Driven Development, presents an alternative approach to constructing applications. In the conventional method, lead architects create designs based on business needs, the application is then developed and deployed, and any modifications are executed either through additional elements or through difficult refactoring.

In contrast, CDD focuses on building independent components right from the beginning, starting at the most fundamental level. An interface, typically JSON, is established to assemble the higher-level user interface. This method, involving the combination of reusable components and a JSON blueprint, empowers developers to conveniently build applications in a more flexible and scalable manner.

The essence of CDD lies in its utilization of modularity to craft a loosely linked set of components, which are then brought together using a standardized interface.

What is a Dynamic Form?

Embracing the Config Driven Development (CDD) approach allows us to create dynamic web forms. These are not ordinary forms with static, unchanging fields; rather, they're dynamic entities with fields that are generated based on a JSON file. The beauty of these dynamic web forms lies in their flexibility – if a change in the form fields is required, all it takes is an update to the JSON configuration. This level of adaptability makes dynamic web forms an ideal solution for Logto Connectors, which require diffrent form configurations that are unknown to Logto.

Designing Schema

We designed the schema to be an array of form items, each item may have name, label, placeholder, and the most important, type. We have 6 types of form item, and defined as an enum:

And the type definition of form item is:

Then the full schema is:

But there is a small problem, the form type "select" requires a list of options, so add this field to FormItem:

Building the form with React-Hook-Form

Now that the schema is set, we can build the form in the front end based on the schema. We'll use React Hook Form to achieve that.

React-Hook-Form is a powerful tool for building efficient, easy-to-use forms in React.

The first thing is to init a form, that's assume that the JSON config is fetched and called formItems, and the data in the form is formData:

Then, implement form control element according to the type, here is a simple demonstration:

Conclusion

The versatility of Config Driven Development (CDD) shines through when applied to dynamic form creation, especially in the case of Logto's connectors. The advantages are twofold:

For developers, it simplifies the process of creating interactive and user-friendly forms. Instead of dealing with intricate coding complexities, developers only need to define a JSON file to get the better-designed, intuitive user interfaces designed by Logto team.
For users, this approach greatly simplifies the process of setting up a connector. It takes the complexity out of integration, making it easier for users to integrate Logto with social sign-in features, as well as email or SMS services.

Recently, articles promoting Low Code are ubiquitous on the internet. This solution was developed from the perspective of actual user needs, and we believe it is a great representation of Low Code.

Want to give it a try? Go to Logto Cloud and pick a connector.

Try Logto Today

Introduction#

Background#

What is Config Driven Development (CDD)#

What is a Dynamic Form?#

Designing Schema#

Building the form with React-Hook-Form#

Conclusion#

Introduction#

Background#

What is Config Driven Development (CDD)#

What is a Dynamic Form?#

Designing Schema#

Building the form with React-Hook-Form#

Conclusion#

Introduction

Background

What is Config Driven Development (CDD)

What is a Dynamic Form?

Designing Schema

Building the form with React-Hook-Form

Conclusion

Introduction

Background

What is Config Driven Development (CDD)

What is a Dynamic Form?

Designing Schema

Building the form with React-Hook-Form

Conclusion