Add Angular and React examples

README.md

@@ -745,7 +745,54 @@ Errors returned by the library have a `code` property which contains the program
 To avoid typos, you can use the `ErrorCode` enum to refer to the codes.
 
 **Example**
+The `examples` directory contains fully working applications demonstrating authentication and digital signing. 
+
+There is two approaches to handle errors:
 ```ts
+// by Error instance
+const onLogin = async () => {
+  setLoading(true)
+  setAlert(undefined)
+
+  try {
+    await loginWithIdCard()
+    navigate('/sign')
+  } catch (error) {
+    if (error instanceof UserTimeoutError) {
+      setAlert("ID-card authentication timed out, please try again");
+    } else if (error instanceof UserCancelledError) {
+      setAlert("ID-card authentication was cancelled by the user");
+    } else if (error instanceof ExtensionUnavailableError) {
+      setAlert("Web eID browser extension is not available, please install it or enable it to continue");
+    } else if (error instanceof NativeUnavailableError) {
+      setAlert("Web eID native application is not installed, please install it to continue");
+    } else if (error instanceof VersionInvalidError) {
+      setAlert("Web eID native application did not provide a valid version string during handshake, please report a bug");
+    } else if (error instanceof VersionMismatchError) {
+      if (error.requiresUpdate?.extension) {
+        setAlert("Please update the Web eID browser extension");
+      } else if (error.requiresUpdate?.nativeApp) {
+        setAlert("Please update the Web eID native application");
+      } else {
+        setAlert("Please update the Web eID native application and browser extension");
+      }
+    } else if (error instanceof ContextInsecureError) {
+      setAlert("Web eID requires a secure HTTPS connection. Please contact the website administrator");
+    } else if (error instanceof NativeFatalError) {
+      setAlert("Please try again. If the problem persists, contact support");
+    } else if (error instanceof UnknownError) {
+      setAlert(`An unknown error occurred. Please try again and contact support if the problem persists! ${error.message} (${error.code})`);
+    } else {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const errorCode = isKnownWebEidError(error) ? ` (${(error as any).code})` : "";
+      setAlert(`An unknown error occurred. Please try again and contact support if the problem persists! ${errorMessage}${errorCode}`);
+    }
+
+  } finally {
+    setLoading(false)
+  }
+}
+// Or by Error.code
 try {
   const {
       certificate,
@@ -760,7 +807,6 @@ try {
       showError("Signing certificate retrieval timed out, please try again!");
       break;
     }
-
     // other cases
 
     default: {

examples/web-eid-angular-example/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/web-eid-angular-example/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

examples/web-eid-angular-example/.npmrc

@@ -0,0 +1 @@
+@web-eid:registry=https://gitlab.com/api/v4/packages/npm

examples/web-eid-angular-example/README.md

@@ -0,0 +1,78 @@
+# WebEidAngularExample
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.7.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+## Testing with production ID-cards
+
+Configure an HTTPS proxy with a valid SSL certificate trusted by the browser, for example ngrok.
+```shell
+ngrok http 4200
+```
+Obtain the external URL from the Forwarding section (e.g., 087a444b5747.ngrok-free.app) and configure the allowedHosts parameter in angular.json:
+```
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "allowedHosts": ["087a444b5747.ngrok-free.app"]
+          },
+```
+Start the app with 
+```shell
+./node_modules/.bin/ng serve
+```

examples/web-eid-angular-example/angular.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "web-eid-angular-example": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/web-eid-angular-example",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "options": {
+            "allowedHosts": ["localhost"]
+          },
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "web-eid-angular-example:build:production"
+            },
+            "development": {
+              "buildTarget": "web-eid-angular-example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}