Usage of Party Ids on Project DABL on a React Typescript Web Application (cloned create-daml-app)

Question

I'm trying to create a Web Application based on create-daml-app and this Web Applications React Typescript will be deployed to Project DABL as well. How can we use the Parties that were been setup on the Project DABL Ledger Settings and be used as a login on the Web Application using React Typescript? Based on the create-daml-app, they are using the link (https://login.projectdabl.com/auth/login?ledgerId=${ledgerId}`) for the login wherein it uses the Project DABL Account.

I know we can download the parties as a json and then be used on the Web Application but can we dynamically used directly the setup that was been done on Project DABL Ledger Settings?

Thanks for future help!

Answer 1

In DABL, the parties you create are mapped to your DABL user account. The first time you join or create a ledger, a party is created in your name automatically, and you have the option of adding more. However, each additional party you add through the console still gets mapped to your particular DABL account.

Interactions with the ledger are authorized by party JWT tokens. The login button & link is essentially a shortcut to allow a user to log in to their DABL account, while automatically supplying the party ID/JWT for that user’s default party back to the deployed web app instance. The web app should store the resulting token and use it when communicating with the API.

If you're creating the additional Alice and Bob parties for the purpose of demoing or testing your application from the viewpoints of different parties, I would add some additional form inputs to the Login component that allow for entering the party ID and JWT directly. These can be copied from the Ledger Settings page in the console. Your React app would simply read the ID/JWT inputs, store them in state, and use them when making API requests in the future. This way you don't need to continually redownload/replace the parties.json file every day.

The Login component for DABL Chat is a good example app you can look at, that handles both the button and this ID/JWT input approach. You can deploy a copy of it onto a new project if you’d like to see how that works, or take a look at the source for a better understanding. Since you’re also using create-daml-app as a template, you will need to do some modifications to add those inputs and hook them into the API calls.

Note that if Alice and Bob are meant to be real production users of the system, then the recommended approach is to have them use the Login with DABL button, so that they join with individual DABL accounts. In this scenario, the parties.json from your Ledger Settings will not even include their JWTs, since you wouldn't have access to credentials belonging to other accounts.

See the DABL documentation on authentication and onboarding for more details.