diff options
author | Pawel Zelawski <pawel.zelawski@outlook.com> | 2025-04-10 14:55:13 +0200 |
---|---|---|
committer | Pawel Zelawski <pawel.zelawski@outlook.com> | 2025-04-10 14:55:13 +0200 |
commit | 4c3a65cc6a3907cbe91593e047ac9af1d2c138c4 (patch) | |
tree | a4f9da4199269ce9ba7d664225bdc0f10bf0cf6d | |
parent | d56c6a52f1dd1e539acd7a9cd45e2d32a2439ce8 (diff) |
docs: add comprehensive documentation for Digi-ID demo app
- Add detailed README.md with:
- Project overview and features
- Project structure explanation
- Getting started guide
- Authentication flow description
- Code examples for backend and frontend implementation
- Environment configuration details
- License and acknowledgments
- Include practical code examples for:
- Backend Digi-ID authentication endpoints
- Frontend authentication flow implementation
- Environment configuration setup
- Document key features:
- Digi-ID authentication protocol
- QR code generation
- Address verification
- Responsive design
- TypeScript support
- Environment configuration
- Add proper links to:
- digiid-ts library repository
- DigiByte project
-rw-r--r-- | README.md | 173 |
1 files changed, 172 insertions, 1 deletions
@@ -1 +1,172 @@ -# digiid-ts-demo
\ No newline at end of file +# Digi-ID TypeScript Integration Demo + +A demonstration application showcasing the integration of the [`digiid-ts`](https://github.com/pawelzelawski/digiid-ts) library for Digi-ID authentication. This project provides a simple, responsive web application with a React frontend and Express backend, demonstrating the complete Digi-ID authentication flow. + +## Features + +- **Digi-ID Authentication**: Complete implementation of the Digi-ID authentication protocol +- **QR Code Generation**: Automatic QR code generation for mobile wallet scanning +- **Address Verification**: Verification of DigiByte addresses and their types +- **Responsive Design**: Mobile-friendly interface with clean, modern styling +- **TypeScript Support**: Full type safety throughout the application +- **Environment Configuration**: Flexible configuration through environment variables + +## Project Structure + +``` +digiid-ts-demo/ +├── src/ +│ ├── client/ # React frontend +│ │ ├── App.tsx # Main application component +│ │ ├── main.tsx # Frontend entry point +│ │ └── index.css # Global styles +│ └── server/ # Express backend +│ ├── main.ts # Server entry point +│ └── utils.ts # Utility functions +├── public/ # Static assets +├── .env # Environment variables +└── package.json # Project dependencies +``` + +## Getting Started + +### Prerequisites + +- Node.js (v16 or higher) +- npm or yarn +- A DigiByte wallet that supports Digi-ID (e.g., DigiByte Go) + +### Installation + +1. Clone the repository: + ```bash + git clone https://github.com/yourusername/digiid-ts-demo.git + cd digiid-ts-demo + ``` + +2. Install dependencies: + ```bash + npm install + ``` + +3. Configure environment variables: + Create a `.env` file in the root directory with the following variables: + ``` + PORT=3001 + PUBLIC_URL=https://your-domain.com + ``` + +### Running the Application + +Start the development server: +```bash +npm run dev +``` + +This will start both the frontend and backend servers concurrently. + +## Authentication Flow + +1. User clicks "Sign in with Digi-ID" button +2. System generates a unique session and QR code +3. User scans QR code with their DigiByte wallet +4. Wallet signs the authentication request +5. System verifies the signature and returns the authenticated address +6. User sees their verified DigiByte address and its type + +## Code Examples + +### Backend Implementation + +Here's how to implement the Digi-ID authentication endpoints: + +```typescript +// Generate Digi-ID URI and QR code +app.get('/api/digiid/start', async (req: Request, res: Response) => { + const sessionId = randomBytes(16).toString('hex'); + const nonce = randomBytes(16).toString('hex'); + const callbackUrl = new URL('/api/digiid/callback', process.env.PUBLIC_URL).toString(); + + const digiIdUri = generateDigiIDUri({ + callbackUrl, + unsecure: !callbackUrl.startsWith('https'), + nonce + }); + + const qrCodeDataUrl = await qrcode.toDataURL(digiIdUri); + res.json({ sessionId, qrCodeDataUrl }); +}); + +// Handle Digi-ID callback +app.post('/api/digiid/callback', async (req: Request, res: Response) => { + const { address, uri, signature } = req.body; + const expectedCallbackUrl = new URL('/api/digiid/callback', process.env.PUBLIC_URL).toString(); + + const isValid = verifyDigiIDCallback({ + address, + uri, + signature, + expectedCallbackUrl, + expectedNonce: sessionStore.get(sessionId)?.nonce + }); + + if (isValid) { + res.status(200).send(); + } else { + res.status(400).send('Invalid signature'); + } +}); +``` + +### Frontend Implementation + +Here's how to integrate Digi-ID authentication in your React application: + +```typescript +// Handle authentication flow +const handleDigiIDAuth = async () => { + try { + const response = await fetch('/api/digiid/start'); + const { sessionId, qrCodeDataUrl } = await response.json(); + + // Start polling for authentication status + const pollStatus = setInterval(async () => { + const statusResponse = await fetch(`/api/digiid/status/${sessionId}`); + const { status, address } = await statusResponse.json(); + + if (status === 'success') { + clearInterval(pollStatus); + setAuthenticatedAddress(address); + } + }, 1000); + + return () => clearInterval(pollStatus); + } catch (error) { + console.error('Authentication failed:', error); + } +}; +``` + +### Environment Configuration + +Example `.env` file configuration: + +```env +# Server configuration +PORT=3001 +PUBLIC_URL=https://your-domain.com +``` + +## Environment Variables + +- `PORT`: Port number for the backend server (default: 3001) +- `PUBLIC_URL`: The public URL of your application (required for callback handling) + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## Acknowledgments + +- [DigiByte](https://www.digibyte.org/) - The underlying blockchain technology +- [digiid-ts](https://github.com/pawelzelawski/digiid-ts) - The TypeScript library for Digi-ID authentication
\ No newline at end of file |