asgardeo · pavinduLakshan · Jan 1, 2025 · Jan 6, 2025 · Jan 14, 2025 · Jan 14, 2025
@@ -14,7 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "react": [ "./node_modules/@types/react" ]
+    }
   },
   "include": [
     "./src"

@@ -1,4 +1,3 @@
 PORT=3000
 HOST="localhost"
-DISABLE_DEV_SERVER_HOST_CHECK=false
 HTTPS=true
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -22,7 +22,6 @@ COPY --chown=${USER}:${USER_GROUP} . .
 
 # Set environment variables
 ENV HOST="0.0.0.0"
-ENV DISABLE_DEV_SERVER_HOST_CHECK=true
 ENV HTTPS=false
 
 # Install dependencies

@@ -5,7 +5,7 @@ This sample is developed to demonstrate the basic usage of the Asgardeo Auth Rea
 ## Getting Started
 
 ### Prerequisites
--   `Node.js` (version 10 or above).
+-   `Node.js` (version 18 or above).
 
 ### Register an Application
 
@@ -53,6 +53,18 @@ follow the steps below.
     - Update the Authorized Redirect URL.
     - Update the Allowed Origins.
 
+## Update application certificates
+
+Vite uses self signed certificates to run this sample app on HTTPS. To update the certificate,
+
+1. Navigate to `public/cert`.
+2. Delete exisiting `.pem` files.
+3. Run the following command to regenerate certificate.
+
+```bash
+openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost-key.pem -out localhost-cert.pem
+```
+
 ## Contribute
 
 Please read [Contributing to the Code Base](http://wso2.github.io/) for details on our code of conduct, and the process for submitting pull requests to us.

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
@@ -0,0 +1,31 @@
+<!--
+ * Copyright (c) 2025, WSO2 LLC. (https://wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ -->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Asgardeo React Sample App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -17,6 +17,7 @@
         "Typescript",
         "Authenticate"
     ],
+    "type": "module",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/asgardeo/asgardeo-auth-react-sdk.git"
@@ -29,48 +30,30 @@
     "license": "Apache-2.0",
     "private": false,
     "scripts": {
-        "start": "webpack-dev-server --mode development --hot --open",
-        "prebuild": "yarn install",
-        "build": "webpack"
+        "start": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
     },
     "dependencies": {
         "@asgardeo/auth-react": "^5.2.3",
-        "@babel/runtime-corejs3": "^7.20.6",
-        "@textea/json-viewer": "^2.14.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.3.0"
+        "react-router-dom": "^6.3.0",
+        "@textea/json-viewer": "^2.14.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.19.3",
-        "@babel/core": "^7.20.5",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-decorators": "^7.20.5",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
+        "@eslint/js": "^9.17.0",
+        "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
-        "babel-loader": "^9.1.0",
-        "babel-polyfill": "^6.26.0",
-        "chalk": "^5.2.0",
-        "core-js": "^3.26.1",
-        "css-loader": "^6.7.3",
-        "dev-server-ports": "^2.0.0",
-        "dotenv": "^16.0.3",
-        "html-loader": "^4.2.0",
-        "html-webpack-plugin": "^5.5.0",
-        "source-map-loader": "^4.0.1",
-        "style-loader": "^3.3.1",
-        "typescript": "^4.9.4",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.11.1"
-    },
-    "overrides": {
-        "webpack-dev-server": {
-            "html-entities": "2.4.0"
-        }
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
+        "globals": "^15.14.0",
+        "typescript": "~5.6.2",
+        "typescript-eslint": "^8.18.2",
+        "vite": "^6.0.5"
     }
 }
@@ -0,0 +1,20 @@
+-----BEGIN CERTIFICATE-----
+MIIDSzCCAjOgAwIBAgIUYHtB60RMbQn2eOmpj6UN++WSnWIwDQYJKoZIhvcNAQEL
+BQAwNTELMAkGA1UEBhMCVVMxEzARBgNVBAgMClNvbWUtU3RhdGUxETAPBgNVBAoM
+CGFzZ2FyZGVvMB4XDTI1MDEwMTA0MDY1NFoXDTI2MDEwMTA0MDY1NFowNTELMAkG
+A1UEBhMCVVMxEzARBgNVBAgMClNvbWUtU3RhdGUxETAPBgNVBAoMCGFzZ2FyZGVv
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhCfe55ZtTaxAW4vGGqsu
+2cAWyqQNOe5cYU5oF6JaaZSFThN4cUQmeQbtVWxPWadaQil7wECL5LCAI8fWpEmU
+DlY6NHlSCPrzalc4nh5L43hUaXq0Nizt5UvvUEKUEWZ3YXajw7/3zafwvCJci695
+u1BtkPkSD8Dn1AdislpEiDZFn7N4/GhkH4I9yvhKePXnR6nFDYeEZwKHumoOk03H
+jjJwl3+vcraF8LbiVecXNYwGwIGZQNmxBVgo8UgRdMv0Mm9YHtKfYZ19znfVuAXF
+xcz+pEwvZEK2MkJnPvbqZ8m5HjE5V9vO1rEb978M6pjs7LBGNJ5VEGIJrwqJiuCy
++wIDAQABo1MwUTAdBgNVHQ4EFgQUFCCkGoc8zPpvVuX2pXX6jfXVQKMwHwYDVR0j
+BBgwFoAUFCCkGoc8zPpvVuX2pXX6jfXVQKMwDwYDVR0TAQH/BAUwAwEB/zANBgkq
+hkiG9w0BAQsFAAOCAQEADDja6KoHF5B9mL8lJMJXMG5BQOisiK5KK/LAKl66U6VU
+TxAFsW0yQkIphcQ7vqeJXxzvfztPn0hE0ZkQNxmPpkZ7kIIc5sXZhEnJkwBqz8Ox
+HfmISGVC9ycNEPpaggQECgi3QixzP180dtvdRZJQ9BPjmHOLNALZAK5Ibsp3BCXl
+tfXmoos8/gj0CkHivCUhMpt5NqGicsUuzI/Jo5gTHYt3iDgLUtCPiW2s1cgdFyfv
+om156aDv9LGEHuhKbQNodkrdY608VT1Dk28q8/M9B4qy6Wu3fhycWqhJCsBfVt8j
+OJ2r1i2D5AcFpsRihJuOjgN3EETFASzIzRZ3YulaJA==
+-----END CERTIFICATE-----
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEugIBADANBgkqhkiG9w0BAQEFAASCBKQwggSgAgEAAoIBAQCEJ97nlm1NrEBb
+i8Yaqy7ZwBbKpA057lxhTmgXolpplIVOE3hxRCZ5Bu1VbE9Zp1pCKXvAQIvksIAj
+x9akSZQOVjo0eVII+vNqVzieHkvjeFRperQ2LO3lS+9QQpQRZndhdqPDv/fNp/C8
+IlyLr3m7UG2Q+RIPwOfUB2KyWkSINkWfs3j8aGQfgj3K+Ep49edHqcUNh4RnAoe6
+ag6TTceOMnCXf69ytoXwtuJV5xc1jAbAgZlA2bEFWCjxSBF0y/Qyb1ge0p9hnX3O
+d9W4BcXFzP6kTC9kQrYyQmc+9upnybkeMTlX287WsRv3vwzqmOzssEY0nlUQYgmv
+ComK4LL7AgMBAAECggEAPgs56yAEUOL9k/0bFIophLFaAejjDL+LP2PAGtht+gNw
+Uidx9Ds6lLdb1S70UfLvvQAcyTWEd+klP6cibh7dE54H1XrfuLeYb+RjAFjY6AIm
+Hx8sXALb7TqpL9USDtk8UtWQLOaDQFoH+0tmh23qiLZJujY09JBsRm7xNyqJ4ihr
+8jrVQ13XX0EYTnvs9Ms5xJbMHK2UT/Z+zJaDhmE9KtgVtZmJwLdUEl0LbgNOtoGe
+1hIbEdwncdnrPjHHgN2lF7tUzGTCN9X9ZLkmdrNYdFdtUXYXJ467QC536XgF682H
+F6o3wRFf/SffPlYKmzBMEiP/pdlbAz5XJAwKnJROgQKBgQC4Iwgj8JN2h+HgI58Z
+Uinwc6QkjeG++eHdtsefqQ329+owoSLHjt2m8AqQ1jafP2NkSZVap7ZAnsS47bso
+1eTykjb7vtfy08+UkZ6C5o700i28AxgKO4zBXOux87ksJcpVv4kWUdm5GLf3WMvY
+7nlwdz2aJrKptlKWoq1BbBvLhQKBgQC3u3KxDQEJTnhdhio8mCbEgiUr/CwWHuSi
+iJUeqpNjUuCKZg+y0iHqxSgkrTqL+1kMPDTr5PWzHPI/OPVdWYBRMKhZHZpvnGE8
+wFKB8iGff4muHvqQNhuB9IrTcoOBhVSQdL6jy317unJRKo30ExAdyVD5+9+uTxD1
+5AA8/8KMfwJ/fpeXAR5kQxkoMPBMcRwLuUPHlVn12VXx8nu2wg13jFLkrooZXxjZ
+Seu9V9Xtt43cxxXPmIO0yLhehsTp5ykmPZ5ILssFq+vyyjFSyKu5nJbi2l9GJ8LJ
+Aibf43er1q4kbM9BcBbVmGtmDqb9fiZ1VtyjfVcdfY/bN7SfaFrqwQKBgCDqbxCz
+ELV3Hm864wQ6Ce/4lOo9YjSQUkugBn8Y9hC8P0fsIvHZXYQu0BNKCYwceoaLnruI
+KFBvZiLXdHXF3AwvmGlmuU03ieAVYHKxSz7E3YiZOjBt0R3GDrz07gRdO5opoCG+
+CfwJmgNaiVXpuGBtuZkfe6JBvfsfXr+O3m7HAoGAc1a+mnxxvZZuGL2v+nHB1lkn
+sVX6ZRV7kk2m+vngVuwpUr28lXF62rAFGtn0oh9Or7vRrMx9rQsS4emwqY1uWQTc
+/q12IIS47BZVME6NrqYqlVkuB12t/dmVvlYTuyeiI8wted2fUB+r+BJlKSpxjcZv
+DfxEL9jaMlZjTklVXeA=
+-----END PRIVATE KEY-----