Building a Secure React + TypeScript + iTwin.js SPA with CRA

Setting up a new React app with create-react-app (CRA) can be challenging due to errors or excessive boilerplate from existing templates. The itwin-auth-spa template simplifies this by generating a minimal, well-structured setup for integrating authentication with iTwin.js.

With this guide, you’ll quickly scaffold a secure React application using TypeScript, CRA, and iTwin.js authentication.

Prerequisites

Before getting started, make sure you have:

• **Node.js** (LTS version recommended)

Step 1: Create a New iTwin.js SPA with Authentication

Run the following command to set up a React app with TypeScript, iTwin.js, and authentication:

npx create-react-app my-itwin-app --template itwin-auth-spa

This command does the following:

• Sets up a React app with TypeScript and iTwin.js authentication enabled.
• Installs the necessary dependencies.
• Provides a minimal starting template to start with iTwin.js Application.

Step 2: Build and Run the App

To build and start the app, run:

npm run build
npm start

Conclusion

By following these steps, you’ve created a secure React + TypeScript SPA with iTwin.js authentication. This setup provides a scalable foundation for integrating authentication while keeping the codebase clean and manageable.