Make demos more stable (#1281)

* Make demos more stable

* Update readmes

* Update headers

* Point people towards the frictionless demo

demos/client-example-server/README.md

@@ -5,11 +5,38 @@ is based
 on [an article written by Agustin Fernandez](https://www.asapdevelopers.com/build-a-react-native-login-app-with-node-js-backend/)
 and is adapted to use a Mongo In-Memory Database. This backend server integrates with the client-example React app.
 
-## How to run locally
+## Quickstart
+
+### Test Your Site Key and Secret Key
+
+#### 1. Build & Deploy
+
+From the root of this repository, run the following commands:
+
+```bash
+cp demos/client-example-server/env.production demos/client-example-server/.env.production && \
+npm i && \
+npm run start:server
+```
+
+Make sure you replace the following placeholders in the `.env.production` file with your own site key and secret key.
+You can obtain these by logging into the [Prosopo portal](https://portal.prosopo.io).
+
+```typescript
+PROSOPO_SITE_KEY=<YOUR SITE KEY HERE>
+PROSOPO_SITE_PRIVATE_KEY=<YOUR SECRET KEY HERE>
+```
+
+Run this example API in conjunction with
+the [client-example](https://github.com/prosopo/captcha/tree/main/demos/client-example) React app.
+
+## 🚧 Developing the Client Example Server
+
+You can run in development mode to make changes to the client-example-server by following these instructions:
 
 ### 1. Build & Deploy
 
-From the roof of this repository, run the following commands:
+From the root of this repository, run the following commands:
 
 ```bash
 cp demos/client-example-server/env.development demos/client-example-server/.env.development && \

demos/client-example-server/env.production

@@ -0,0 +1,2 @@
+PROSOPO_SITE_KEY=<YOUR SITE KEY HERE>
+PROSOPO_SITE_PRIVATE_KEY=<YOUR SECRET KEY HERE>

demos/client-example-server/src/app.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { ProsopoEnvError, getLoggerDefault } from '@prosopo/common'
+import { at } from '@prosopo/util'
 import { getServerConfig } from '@prosopo/server'
 import connectionFactory from './utils/connection.js'
 import cors from 'cors'
@@ -80,11 +81,11 @@ async function main() {
 
     const config = getServerConfig()
 
-    console.log('config', config)
+    console.log('Config', config)
 
     app.use(routesFactory(mongoose, config, verifyEndpoint, verifyType))
 
-    app.listen(process.env.PROSOPO_SERVER_PORT)
+    app.listen(config.serverUrl ? parseInt(at(config.serverUrl.split(':'), 2)) : 9228)
 }
 
 main()

demos/client-example-server/src/controllers/auth.ts

@@ -46,16 +46,26 @@ const verify = async (
 ) => {
     if (verifyType === 'api') {
         // verify using the API endpoint
-        console.log('verifying using the API endpoint')
+        console.log('Verifying using the API endpoint', verifyEndpoint)
 
         const response = await fetch(verifyEndpoint, {
             method: 'POST',
             body: JSON.stringify({ [ApiParams.token]: token, [ApiParams.secret]: secret }),
         })
-        return (await response.json()).verified
+        console.log('Status:', response.status, 'Status Text:', response.statusText)
+
+        const verified = (await response.json()).verified
+
+        console.log(`Verified: ${verified}`)
+
+        return verified
     } else {
         // verify using the TypeScript library
-        console.log('verifying using the TypeScript library')
+        console.log('Verifying using the TypeScript library')
+
+        const verified = await prosopoServer.isVerified(token)
+
+        console.log(`Verified: ${verified}`)
 
         return await prosopoServer.isVerified(token)
     }

demos/client-example/README.md

@@ -2,9 +2,37 @@
 
 This project is a _minimal_ example demonstrating how to include Prosopo Procaptcha in a client React app.
 
-## How to run locally
+## Quickstart
 
-### 1. Build & Deploy
+#### 1. Build & Deploy
+
+Run these commands from the root of the [captcha](https://github.com/prosopo/captcha) repo:
+
+```bash
+cp demos/client-example/env.production demos/client-example/.env.production && \
+npm i && \
+npm run start:demo
+```
+
+Make sure you replace the following placeholder in the `.env.production` file with your own site key. You can obtain
+this by logging into the [Prosopo portal](https://portal.prosopo.io).
+
+```typescript
+PROSOPO_SITE_KEY=<YOUR SITE KEY HERE>
+```
+
+#### 2. Visit the App
+
+The app is now running in development mode. Open [http://localhost:9230/frictionless](http://localhost:9230) to view it in the
+browser. You also need
+to [start the backend server](https://github.com/prosopo/captcha/blob/main/demos/client-example-server/README.md) to
+test the verification process.
+
+## 🚧 Developing the Client Example
+
+You can run in development mode to make changes to the client-example by following these instructions:
+
+#### 1. Build & Deploy
 
 Run these commands from the root of the [captcha](https://github.com/prosopo/captcha) repo:
 
@@ -18,7 +46,7 @@ npm run setup:all && \
 npm run start:demo
 ```
 
-### 2. Visit the App
+#### 2. Visit the App
 
-The app is now running in development mode. Open [http://localhost:9230](http://localhost:9230) to view it in the
+The app is now running in development mode. Open [http://localhost:9230/frictionless](http://localhost:9230) to view it in the
 browser.

demos/client-example/env.production

@@ -0,0 +1 @@
+PROSOPO_SITE_KEY=<YOUR SITE KEY HERE>

demos/client-example/package.json

@@ -23,8 +23,7 @@
         "electron": "25.8.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.22.3",
-        "web-vitals": "^2.1.4"
+        "react-router-dom": "^6.22.3"
     },
     "overrides": {
         "@polkadot/extension-inject": {

demos/client-example/src/App.tsx

@@ -12,18 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Alert, Box, Button, FormControl, FormGroup, Stack, TextField, Typography } from '@mui/material'
-import {
-    ApiParams,
-    EnvironmentTypes,
-    EnvironmentTypesSchema,
-    ProcaptchaConfigSchema,
-    ProcaptchaToken,
-} from '@prosopo/types'
+import { ApiParams, ProcaptchaToken } from '@prosopo/types'
 import { ExtensionAccountSelect } from './components/ExtensionAccountSelect.js'
 import { Procaptcha } from '@prosopo/procaptcha-react'
 import { ProcaptchaFrictionless } from '@prosopo/procaptcha-frictionless'
-import { getServerUrl } from '@prosopo/server'
 import { useState } from 'react'
+import config from './config.js'
 
 const corsHeaders = {
     'Access-Control-Allow-Origin': '*', // Required for CORS support to work
@@ -47,19 +41,6 @@ function App(props: AppProps) {
     // the result of the captcha process. Submit this to your backend server to verify the user is human on the backend
     const [procaptchaToken, setProcaptchaToken] = useState<ProcaptchaToken | undefined>(undefined)
 
-    const config = ProcaptchaConfigSchema.parse({
-        userAccountAddress: account,
-        account: {
-            address: process.env.PROSOPO_SITE_KEY || '',
-        },
-        web2: process.env.PROSOPO_WEB2 === 'true',
-        dappName: 'client-example',
-        defaultEnvironment:
-            (process.env.PROSOPO_DEFAULT_ENVIRONMENT as EnvironmentTypes) || EnvironmentTypesSchema.enum.development,
-        serverUrl: getServerUrl(),
-        mongoAtlasUri: process.env.PROSOPO_MONGO_EVENTS_URI || '',
-        devOnlyWatchEvents: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
-    })
     console.log(config)
 
     const label = isLogin ? 'Login' : 'Sign up'

demos/client-example/src/config.ts

@@ -11,31 +11,18 @@
 // 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.
-// ../.env | .env.local | .env.development >>
-// PROSOPO_API_BASE_URL=http://localhost
-// PROSOPO_SITE_KEY=5FzjruAqyhRGV81pMb4yznNS7t52hNB8u2VC2N1P22j5QLY9
+import { ProsopoClientConfigOutput, ProsopoClientConfigSchema } from '@prosopo/types'
+import { getServerUrl } from '@prosopo/server'
 
-import { EnvironmentTypesSchema, NetworkNamesSchema } from '@prosopo/types'
-import { ProsopoClientConfigInput } from '@prosopo/types'
-
-const getWeb2 = (): boolean | undefined => {
-    return process.env.PROSOPO_WEB2 === 'true' ? true : process.env.PROSOPO_WEB2 === 'false' ? false : undefined
-}
-
-const config: ProsopoClientConfigInput = {
+const config: ProsopoClientConfigOutput = ProsopoClientConfigSchema.parse({
     account: {
-        address: process.env.PROSOPO_SITE_KEY || '',
+        address: process.env.PROSOPO_SITE_KEY,
     },
-    userAccountAddress: '',
-    web2: getWeb2(),
-    defaultEnvironment: process.env.PROSOPO_DEFAULT_ENVIRONMENT
-        ? EnvironmentTypesSchema.parse(process.env.PROSOPO_DEFAULT_ENVIRONMENT)
-        : EnvironmentTypesSchema.enum.development,
-    defaultNetwork: process.env.PROSOPO_DEFAULT_NETWORK
-        ? NetworkNamesSchema.parse(process.env.PROSOPO_DEFAULT_NETWORK)
-        : NetworkNamesSchema.enum.development,
+    web2: process.env.PROSOPO_WEB2 !== 'false',
+    defaultEnvironment: process.env.PROSOPO_DEFAULT_ENVIRONMENT,
+    defaultNetwork: process.env.PROSOPO_DEFAULT_NETWORK,
     dappName: 'client-example',
-    serverUrl: process.env.PROSOPO_SERVER_URL || '',
-}
+    serverUrl: getServerUrl(),
+})
 
 export default config

demos/client-example/src/index.tsx

@@ -17,7 +17,6 @@ import FrictionlessRoot from './routes/frictionless.js'
 import ImageCaptchaRoot from './routes/root.js'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import reportWebVitals from './reportWebVitals.js'
 
 const router = createBrowserRouter([
     {
@@ -38,8 +37,3 @@ root.render(
         <RouterProvider router={router} />
     </React.Fragment>
 )
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()