Tech 1172 set up example tests (#21)

- Removed non standard setups to apps
- Added cypress tests to run only when there are new beta versions of civic/auth and/or civic/auth-web3
- Added logout buttons to server apps.
- Added slack notifications when tests fail

.github/workflows/e2e-tests.yml

@@ -0,0 +1,169 @@
+name: Build and run example apps using prod endpoints
+
+on:
+  schedule:
+    - cron: '*/30 * * * *'
+  push:
+  pull_request:
+
+jobs:
+  check-version:
+      runs-on: ubuntu-latest
+      outputs:
+        version_changed: ${{ env.version_changed }}
+      steps:
+        - uses: actions/checkout@v4
+
+        - name: Check Versions
+          id: check-version
+          run: |
+            AUTH_BETA_VERSION=$(npm view @civic/auth@beta version)
+            AUTH_PROD_VERSION=$(npm view @civic/auth version)
+            WEB3_BETA_VERSION=$(npm view @civic/auth-web3@beta version)
+            WEB3_PROD_VERSION=$(npm view @civic/auth-web3 version)
+            
+            echo "Auth Beta version: $AUTH_BETA_VERSION"
+            echo "Auth Production version: $AUTH_PROD_VERSION"
+            echo "Web3 Beta version: $WEB3_BETA_VERSION"
+            echo "Web3 Production version: $WEB3_PROD_VERSION"
+            
+            if [ -f .civic-versions ]; then
+              PREV_VERSIONS=$(cat .civic-versions)
+              PREV_AUTH_BETA=$(echo "$PREV_VERSIONS" | sed -n '1p')
+              PREV_AUTH_PROD=$(echo "$PREV_VERSIONS" | sed -n '2p')
+              PREV_WEB3_BETA=$(echo "$PREV_VERSIONS" | sed -n '3p')
+              PREV_WEB3_PROD=$(echo "$PREV_VERSIONS" | sed -n '4p')
+              
+              if [ "$AUTH_BETA_VERSION" != "$PREV_AUTH_BETA" ] || \
+                [ "$AUTH_PROD_VERSION" != "$PREV_AUTH_PROD" ] || \
+                [ "$WEB3_BETA_VERSION" != "$PREV_WEB3_BETA" ] || \
+                [ "$WEB3_PROD_VERSION" != "$PREV_WEB3_PROD" ]; then
+                echo "version_changed=true" >> $GITHUB_ENV
+                echo "Changed from:"
+                echo "Auth Beta: $PREV_AUTH_BETA -> $AUTH_BETA_VERSION"
+                echo "Auth Prod: $PREV_AUTH_PROD -> $AUTH_PROD_VERSION"
+                echo "Web3 Beta: $PREV_WEB3_BETA -> $WEB3_BETA_VERSION"
+                echo "Web3 Prod: $PREV_WEB3_PROD -> $WEB3_PROD_VERSION"
+              fi
+            fi
+            
+            # Write new versions to file
+            echo "$AUTH_BETA_VERSION" > .civic-versions
+            echo "$AUTH_PROD_VERSION" >> .civic-versions
+            echo "$WEB3_BETA_VERSION" >> .civic-versions
+            echo "$WEB3_PROD_VERSION" >> .civic-versions
+
+  build:
+    needs: check-version
+    if: needs.check-version.outputs.version_changed == 'true'
+    runs-on: ubuntu-latest
+    env:
+      CLIENT_ID: ${{ secrets.CLIENT_ID }}
+      VITE_CLIENT_ID: ${{ secrets.CLIENT_ID }}
+      CYPRESS_CLIENT_ID: ${{ secrets.CLIENT_ID }}
+    defaults:
+      run:
+        working-directory: ./
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Bun (used to run the examples)
+        uses: oven-sh/setup-bun@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Start the nextjs example app
+        uses: JarvusInnovations/[email protected]
+        with:
+          run: yarn dev &
+          working-directory: packages/civic-auth/nextjs
+          wait-on: http://localhost:3000
+          wait-for: 60s
+          log-output-if: true
+
+      - name: Start the reactjs example app
+        uses: JarvusInnovations/[email protected]
+        with:
+          run: yarn dev &
+          working-directory: packages/civic-auth/reactjs
+          wait-on: http://localhost:3006
+          wait-for: 60s
+          log-output-if: true
+
+      - name: Start the express example app
+        uses: JarvusInnovations/[email protected]
+        with:
+          run: yarn dev &
+          working-directory: packages/civic-auth/server/express
+          wait-on: http://localhost:3007
+          wait-for: 60s
+          log-output-if: true
+
+      - name: Start the fastify example app
+        uses: JarvusInnovations/[email protected]
+        with:
+          run: yarn dev &
+          working-directory: packages/civic-auth/server/fastify
+          wait-on: http://localhost:3008
+          wait-for: 60s
+          log-output-if: true
+
+      - name: Start the hono example app
+        working-directory: ./packages/civic-auth/server/hono  
+        run: |
+          bun add @hono/node-server
+          yarn dev & npx wait-on http://localhost:3009
+        timeout-minutes: 1
+
+      - name: Start the wagmi example app
+        uses: JarvusInnovations/[email protected]
+        with:
+          run: yarn dev &
+          working-directory: packages/civic-auth-web3/wagmi
+          wait-on: http://localhost:3010
+          wait-for: 60s
+          log-output-if: true
+
+      - name: Run Cypress example app e2e prod tests
+        id: cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: packages/e2e
+          command: yarn cypress run --browser chrome --record
+          browser: chrome
+          install: true
+          wait-on: 'http://localhost:3000,http://localhost:3006,http://localhost:3007,http://localhost:3008,http://localhost:3009'
+          wait-on-timeout: 60
+          record: true
+        env:
+          NEXT_JS_BASE_URL: 'http://localhost:3000'
+          REACT_BASE_URL: 'http://localhost:3006'
+          EXPRESS_BASE_URL: 'http://localhost:3007'
+          FASTIFY_BASE_URL: 'http://localhost:3008'
+          HONO_BASE_URL: 'http://localhost:3009'
+          WAGMI_BASE_URL: 'http://localhost:3010'
+          CYPRESS_TEST_TAG: '@prod'
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Send Slack Notification on Failure
+        if: failure()
+        uses: slackapi/[email protected]
+        with:
+          payload: |
+              {
+                "channel": "#dev",
+                "text": "Example repo Cypress tests failed in civicteam/civic-auth-examples.\n\nThese tests are run after new beta and prod versions of civic/auth and civic/auth-web3, so there may be an issue with the new version(s). Check the recording of the test failure here https://cloud.cypress.io/projects/cmyigw/runs.\n\n Alternatively, see the full GitHub Actions run details here ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}.",
+              }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

README.md

@@ -13,3 +13,21 @@ The repository includes the following samples:
 
 * **Civic Auth Web3**:
     * [Wagmi](packages/civic-auth-web3/wagmi): reference implementation of a simple Wagmi app integration with Civic Auth Web3 SDK.
+
+* **Start apps**:
+Before running, be sure to set the client id in .env files for each app. You can find 
+examples in the .env.example files
+    from the root:
+    ```yarn install```
+    ```yarn build```
+    ```yarn dev```
+
+* **Running cypress tests**:
+    ```cd packages/e2e```:
+    ```yarn install```
+    ```yarn cypress open --browser chrome```
+
+
+
+
+

package.json

@@ -0,0 +1,27 @@
+{
+    "private": true,
+    "workspaces": [
+    "packages/civic-auth/nextjs/**",
+    "packages/civic-auth/reactjs/**",
+    "packages/civic-auth/server/express/**",
+    "packages/civic-auth/server/fastify/**",
+    "packages/civic-auth/server/hono/**",
+    "packages/civic-auth-web3/wagmi/**"
+  ],
+    "scripts": {
+      "build": "turbo run build",
+      "dev": "turbo run dev"
+    },
+    "packageManager": "[email protected]",
+    "resolutions": {
+        "next": "15.0.3",
+        "react": "19.0.0-rc-66855b96-20241106",
+        "react-dom": "19.0.0-rc-66855b96-20241106",
+        "vite": "6.0.1"
+    },
+    "devDependencies": {
+        "turbo": "latest",
+        "vite": "6.0.1",
+        "@vitejs/plugin-react": "^4.3.4"
+  }
+}

packages/civic-auth-web3/wagmi/.env.example

@@ -1 +1 @@
-VITE_CLIENT_ID=
+VITE_CLIENT_ID=

packages/civic-auth-web3/wagmi/package.json

@@ -1,11 +1,10 @@
 {
   "name": "civic-auth-web3-wagmi-example",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "vite --port 3010",
     "lint": "biome check .",
     "preview": "vite preview"
   },

packages/civic-auth-web3/wagmi/src/App.tsx

@@ -32,8 +32,11 @@ const queryClient = new QueryClient();
 const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <WagmiProvider config={wagmiConfig}>
-        <CivicAuthProvider clientId={CLIENT_ID} >
+      <WagmiProvider config={wagmiConfig as any}>
+      <CivicAuthProvider
+        clientId={CLIENT_ID}
+        nonce={'1234567890'}
+      >
           <AppContent />
         </CivicAuthProvider>
       </WagmiProvider>

packages/civic-auth-web3/wagmi/vite.config.ts

@@ -4,10 +4,8 @@ import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  define: {
-    "process.env": {},
-  },
   server: {
-    port: 3000,
+    port: 3010,
+    host: '0.0.0.0'
   },
 });