​
Pre-requisites

Below are a few pre-requisites that you need to do before moving forward:

1. Create Linked Account

In order to enable your customer to connect to third party app, you first need to create a Linked account for them using a unique identifier.

Know more about Linked Accounts and how you can create one in the guide here.

We recommend you create a linked account at the same time as your customer signs up within your app.

2. Generate Session Token

Generate a Session Token for your Linked Account.

The session token gets expired in 24 hours. Please make sure you generate a new token in every new session or within 24 hours.

​
Steps to Implement

Cobalt Embedded flow is a frontend SDK that allows you to embed Cobalt auth flow into your React application.

It’s a simple process involving steps like Generate Session Token > Install and Initialise Frontend SDK and Render the Component.

1

Install

Install @cobaltio/react-cobalt-js and @cobaltio/cobalt-js via the terminal.

npm install --save @cobaltio/react-cobalt-js @cobaltio/cobalt-js
2

Initialise

Import Provider & Config

import { Provider, Config } from "@cobaltio/react-cobalt-js";
3

Render Cobalt Connect

Perform the on click action to render the react component of Cobalt connect

  • Config component needs to be wrapped inside the Provider component.
  • Pass the Cobalt session token (that you generated using the Cobalt backend SDK) to the provider.
<Provider sessionToken={ cobaltToken }>
    {
        // ideally you'd render the Config component inside a modal.
        // the component only gets rendered when `slug` is passed.
        <Config
            id="SOME_UNIQUE_CONFIG_ID" // Optional
            slug="APP_SLUG" // application type / slug
            // dynamic labels payload (optional)
            labels={{ /* PAYLOAD */ }}
            // you can override the component's container style if you want
            style={{
                borderRadius: 8,
                maxWidth: 450,
            }}
        />
    }
</Provider>

Learn more about Cobalt’s React SDK and how to initialize it here.

For example implementation, you can check out the App.js file in the example directory.

By completing these steps, you have successfully implemented Cobalt’s React Frontend SDK for authentication with apps.

Hosted FlowBuild your own Frontend