This is a code sample application that demonstrates usage of Synchronization API at Bentley iTwin developer platform.

For better understanding of Synchronization and Storage APIs, please refer to this tutorial.

• Git
• TypeScript
• Node: an installation of the latest security patch of Node 22. The Node installation also includes the npm package manager.
• Visual Studio Code: an optional dependency, but the repository structure is optimized for its use.

Please make sure to follow these steps for running this code sample application:

1. Clone this repository.

2. Make sure npm or yarn is installed on your machine.

3. Register a new SPA at My Apps with:

   • Scopes: itwin-platform.
   • Redirect Urls: http://localhost:3000/signin-oidc.

4. Create an empty iModel. Note down context and iModel IDs.

5. .env file is required for setting up enviromental variables used by application. Create .env file at application root and fill out required environmental variables.

   REACT_APP_ITWIN_ID=contextID (REACT_APP_ITWIN_ID is your created iTwin ID)

   REACT_APP_IMODEL_ID=iModelID (REACT_APP_IMODEL_ID is your created iModel ID)

   REACT_APP_CLIENT_ID=clientID (REACT_APP_CLIENT_ID is your registered application's Client ID)

   If you already have a Project pass Project ID in place of the iTwin ID, please refer to this FAQ.

6. Run yarn in command line to install required packages.

7. Run yarn run start to run the application. Navigate to localhost:3000 in your browser.

Code is documented to help user understand how data is being used from each API call, how authorization workflow is implemented, what is the purpose of each component and some other minor details.

We encourage user to understand how OAuth2 authorization workflow is implemented. In this code sample, authentication flow implementation details can be found at src/auth files.

src/components is where most of the application logic is written. Component namings are self-explanatory, refer to each for further explanations of each API call and how the data is used.

If the iModel from .env file is empty, the page displays a gray drop area. When the user drags and drops some file(s), the area will change depending on the file type: either turn red and show a message with allowed file types or turn green and notify that the files are being uploaded to storage.

When files are uploaded to storage, the synchronization process begins. A table containing information about each file is displayed with constant updates until the synchronization process is finished.

During the synchronization process the user is not allowed to drop files in the area. Dragging a file over the drop area will show a warning. If a file is dropped despite the warning, nothing will happen.

When every file is synchronized and the process is fully finished, the page will display the table and will allow to drop more files in the drop area (the area overlay will only be shown when a file is dragged over it).