Integrating Asgardeo Identity Provider with Choreo in React

In the article, I will be integrating Asgardeo authentication with the Choreo low code platform, for a React.JS application.

* Asgardeo is an IDaaS empowering developers to build seamless login experiences in minutes as mentioned in the official website.

* Choreo is a simultaneous low-code and code platform for product development.

Let’s first prepare the application in Asgardeo.

1). Register an application from the Asgardeo console.

1. Login to Asgardeo Console.
2. Navigate to Develop tab and go to Applications.
3. Click new Application and choose Single-Page Application.
4. Then provide a name for the application.
5. In the application settings, provide Authorized redirect URL.
   E.g http://localhost:3000/signin
6. Set JWT as the token type.
7. Set up audience under the ID Token section, which is the choreo token endpoint. E.g: “https://sts.choreo.dev/oauth2/token”
8. Then navigate to the Protocol tab and grab your Asgardeo Client ID.
9. Afterwards, grab the well-known endpoint / discovery endpoint under the Info tab.
10. Finally take the baseUrl, from the quick start tab. E.g: https://console.asgardeo.io/t/<Asgardeo>

2). Create the Choreo application.

1. Navigate to the Choreo developer portal.
2. Go to Applications and create an application.
3. Go to Production Keys => OAuth 2.0 Tokens.
4. Click on Generate Credentials. (This step is only required for the first time).
5. Check the Public Client option under Advanced configuration section.
6. Grab the Consumer Key (Client ID).

That’s all on the Asgardeo application setup. Let’s move forward with setting up the identity provider(IDP) with Choreo.

3). Configuring Choreo application.

1. Login to Choreo Console.
2. Navigate to the Settings tab and go to API-Management tab.
3. Click new Application and choose Single-Page Application.
4. Under the identity providers, click on Add Provider.
5. Select Asgardeo as the identity provider.
6. Provide a name for the IDP and the well-known endpoint obtained from the Asgardeo console in the step(1).
7. Click on the Next button and you will see all the endpoints are obtained via the well-known endpoint. Then click on Done.

That’s all on the Choreo application setup. Let’s move forward with building our React.js App. For this, I will download the following sample app for this guide - https://github.com/asgardeo/asgardeo-auth-spa-token-exchange/releases/download/v0.1.5/choreo-token-exchange-react-app.zip .

3). Setup the sample application

Update the Asgardeo auth provider configuration in the src/config.json.

{
    "clientID": "<Client ID taken from Asgardeo>",
    "baseUrl": "https://dev.api.asgardeo.io/t/<tenant>",
    "signInRedirectURL": "https://localhost:3000/signin",
    "signOutRedirectURL": "https://localhost:3000/login",
    "scope": ["openid","email","profile"],
    "stsConfig": {
        "client_id": "<Choreo Client ID>",
        "orgHandle": "<Choreo Tenant>"
    },
    "stsTokenEndpoint": "https://sts.choreo.dev/oauth2/token"
}

* orgHandle parameter is a custom parameter required for Choreo, in order to perform multi tenancy.

In the src/app.tsx, we are using the Asgardeo React SDK (https://www.npmjs.com/package/@asgardeo/auth-react) with the Token exchange plugin(https://www.npmjs.com/package/@asgardeo/token-exchange-plugin) provided by Asgardeo.

npm install @asgardeo/auth-react react-router-dom @asgardeo/token-exchange-plugin --save

The reason we have to use the Token Exchange Plugin of Asgardeo is, Choreo uses token exchange grant under the hood to perform authentication.

Initialize the AuthProvider with the TokenExchangePlugin passed into the plugin parameter.

The reason we have to use the Token Exchange Plugin of Asgardeo is, Choreo uses token exchange grant under the hood to perform authentication.

import { AuthProvider } from "@asgardeo/auth-react";
import { TokenExchangePlugin } from "@asgardeo/token-exchange-plugin";
...
<AuthProvider 
        config={{...authConfig, storage: "webWorker" as Storage.WebWorker}}
        plugin={ TokenExchangePlugin.getInstance() }
    >
    <AppContent />
</AuthProvider>

Also using the useAuthContext hook provided by Asgardeo react SDK, we can perform authentication-related functionalities as follows.

const { state: { isAuthenticated, isLoading }, signIn } = useAuthContext();

Execute the command npm install && npm startto run the application.

Cheers..!! You have Integrated Asgardeo Identity Provider with Choreo using React application 🎉

Secure your web apps using Asgardeo — https://wso2.com/asgardeo/

Get started with the Choreo low code platform — https://wso2.com/choreo/