Skip to main content

Develop a custom app with managed auth

Partner Solution

caution

As this feature is at its very early stage, we expect bugs and breaking changes. We will cover this as part of our partnership agreement.

In this guide, we'll show you how you can develop and deploy a custom app for your business so that it can offer a seamless experience for your business users.

Create a role for your application​

tip

We encourage the use of a common language between developers and business to simplify things. If you're a developer, check with your manager to figure out "which business function will be using this application?".

caution

Currently you need to have Administrator access level to manage roles for a workspace. For Kinetics Partners, please reach out to us for bypassing this check when developing for your clients.

To keep things simple, let's create a role for Marketing in this example.

Go to Settings → General / Members → Manage Roles → Create Role, fill out the details and save the changes. After successfully creating a role, take a note of the role ID (in this case it's marketing) because we will need this later.

Create a role
Create a role - after

Assign the role​

Select the member to perform the changes, and click on the role to toggle the assignment.

Assign a role

Start a local development server​

caution

Currently we only support single-spa apps, but we are looking to remove the dependency and making it even easier for developers to plug in their apps.

Next, we will create a microfrontend application by follow the guides at https://single-spa.js.org/docs/ecosystem-react or checking out the example directly at https://github.com/kinetics-dev/kinetics/tree/main/examples/using-single-spa-react-netlify

Using the example,

  1. Start the example by running npm start
  2. Use localtunnel to expose our dev-server lt -p 8080
  3. Follow the localtunnel URL - note that you need to confirm the usage Create a development environment
  4. After that, you should see the single-spa fallback page Single SPA fallback page
  5. Use the values from this page to create our placeholder application

Create a placeholder for the application​

tip

If you haven't deployed the first commit you can use any values for the identifier and URL fields.

Follow the steps in Adding a Custom Micro-frontend App to add this application in Kinetics. Note that we have used the placeholder values from the previous step.

Create an example app

Launch into the app​

Once that's done, find the newly created app and press the "launch" button. Open the devtools by clicking on the top right. In here you should be able to see the "roles" and "JWT" for the current user.

You should now see the app mounted and you can now start developing your app as usual!

Create a role - after
Create a role - after

What's next​

info

From here the solution is completely at your own hand. You can decide what to do with the JWT token which is passed onto your frontend application as a variable.

As a simple guide, all we have done is to provide "managed authentication" therefore skipping the need for you to build login form etc. from scratch over and over again. You should still protect your API with your security considerations.

Here is another example of developing a NestJS backend with Kinetics managed authentication and authorisation. https://github.com/kinetics-dev/kinetics/tree/feature/add-nestjs-kinetics-integration-example/examples/using-nestjs