Add OIDC Spa Example

.github/workflows/angular.yml

@@ -18,7 +18,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -50,7 +50,7 @@ jobs:
         working-directory: ./frameworks/angular
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/nextjs.yml

@@ -18,7 +18,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -50,7 +50,7 @@ jobs:
         working-directory: ./frameworks/nextjs
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/nuxt-keycloakjs.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./frameworks/nuxt/keycloak-js
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/nuxt-oidc.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./frameworks/nuxt/oidc-client-ts
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/react-oidc.yml

@@ -0,0 +1,82 @@
+name: Deploy React OIDC Example
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_REACT_PROJECT_ID }}
+  VERCEL_TOKEN: ${{ secrets.VERCEL_DEPLOYMENT_TOKEN }}
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "frameworks/reactjs/oidc-client-ts/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "frameworks/reactjs/oidc-client-ts/**"
+
+jobs:
+  deploy-preview:
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Build Project Artifacts
+        run: vercel build --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+  deploy-prod:
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN
+        working-directory: ./frameworks/reactjs/oidc-client-ts

.github/workflows/react.yml → .github/workflows/react-oidcspa.yml

@@ -1,4 +1,4 @@
-name: Deploy React Example
+name: Deploy React OIDC Spa Example
 
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
@@ -9,16 +9,16 @@ on:
     branches:
       - main
     paths:
-      - "frameworks/reactjs/**"
+      - "frameworks/reactjs/oidc-spa/**"
   pull_request:
     branches:
       - main
     paths:
-      - "frameworks/reactjs/**"
+      - "frameworks/reactjs/oidc-spa/**"
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -32,25 +32,25 @@ jobs:
 
       - name: Install dependencies
         run: npm install
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Install Vercel CLI
         run: npm install -g vercel@latest
 
       - name: Pull Vercel Environment Information
         run: vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Build Project Artifacts
         run: vercel build --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Deploy Project Artifacts to Vercel
         run: vercel deploy --prebuilt --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -64,19 +64,19 @@ jobs:
 
       - name: Install dependencies
         run: npm install
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Install Vercel CLI
         run: npm install -g vercel@latest
 
       - name: Pull Vercel Environment Information
         run: vercel pull --yes --environment=production --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Build Project Artifacts
         run: vercel build --prod --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts
 
       - name: Deploy Project Artifacts to Vercel
         run: vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN
-        working-directory: ./frameworks/reactjs
+        working-directory: ./frameworks/reactjs/oidc-client-ts

.github/workflows/remix.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./frameworks/remix
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/sveltekit.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./frameworks/sveltekit
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/vue.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./frameworks/vue
 
   deploy-prod:
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.repository == 'p2-inc/examples'
     runs-on: ubuntu-latest
 
     steps:

README.md

@@ -4,18 +4,19 @@ This is a repo for code examples showing how to integrate Keycloak with various
 
 ## Frameworks
 
-| Framework             |                    Code                    |                             Live                             |                                   Tutorial                                    |
-| --------------------- | :----------------------------------------: | :----------------------------------------------------------: | :---------------------------------------------------------------------------: |
-| React                 |       [🧑‍💻📁](./frameworks/reactjs/)        |      [👩‍💻🚀](https://phasetwo-react-example.vercel.app)       | [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-reactjs/)  |
-| Next.js               |        [🧑‍💻📁](./frameworks/nextjs/)        |      [👩‍💻🚀](https://phasetwo-nextjs-example.vercel.app)      |  [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nextjs/)  |
-| Remix                 |        [🧑‍💻📁](./frameworks/remix/)         |      [👩‍💻🚀](https://phasetwo-remix-example.vercel.app)       |   [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-remix/)   |
-| Vue                   |         [🧑‍💻📁](./frameworks/vue/)          |       [👩‍💻🚀](https://phasetwo-vue-example.vercel.app)        |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-vue/)    |
-| Nuxt (keycloak-js)    |   [🧑‍💻📁](./frameworks/nuxt/keycloak-js/)   | [👩‍💻🚀](https://phasetwo-nuxt-keycloakjs-example.vercel.app/) |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nuxt/)   |
-| Nuxt (oidc-client-ts) | [🧑‍💻📁](./frameworks/nuxt/oidc-client-ts/)  |    [👩‍💻🚀](https://phasetwo-nuxt-oidc-example.vercel.app/)    |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nuxt/)   |
-| Sveltekit             |      [🧑‍💻📁](./frameworks/sveltekit/)       |    [👩‍💻🚀](https://phasetwo-sveltekit-example.vercel.app)     | [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-sveltekit/) |
-| Angular               |       [🧑‍💻📁](./frameworks/angular/)        |     [👩‍💻🚀](https://phasetwo-angular-example.vercel.app)      |  [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-angular/)  |
-| Django                |        [🧑‍💻📁](./frameworks/django/)        |                             👩‍💻⚒️                             |                 [👩‍🏫](https://phasetwo.io/blog/secure-django/)                 |
-| SpringBoot + Angular  | [🧑‍💻📁](./frameworks/spring-boot-keycloak/) |                             👩‍💻⚒️                             |              [👩‍🏫](https://phasetwo.io/blog/secure-spring-boot/)               |
+| Framework              |                    Code                     |                             Live                             |                                   Tutorial                                    |
+| ---------------------- | :-----------------------------------------: | :----------------------------------------------------------: | :---------------------------------------------------------------------------: |
+| React (oidc-client-ts) | [🧑‍💻📁](./frameworks/reactjs/oidc-client-ts) |      [👩‍💻🚀](https://phasetwo-react-example.vercel.app)       | [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-reactjs/)  |
+| React (oidc-spa)       |    [🧑‍💻📁](./frameworks/reactjs/oidc-spa)    |  [👩‍💻🚀](https://phasetwo-react-oidcspa-example.vercel.app/)  |                                    [👩‍🏫](#)                                    |
+| Next.js                |        [🧑‍💻📁](./frameworks/nextjs/)         |      [👩‍💻🚀](https://phasetwo-nextjs-example.vercel.app)      |  [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nextjs/)  |
+| Remix                  |         [🧑‍💻📁](./frameworks/remix/)         |      [👩‍💻🚀](https://phasetwo-remix-example.vercel.app)       |   [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-remix/)   |
+| Vue                    |          [🧑‍💻📁](./frameworks/vue/)          |       [👩‍💻🚀](https://phasetwo-vue-example.vercel.app)        |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-vue/)    |
+| Nuxt (keycloak-js)     |   [🧑‍💻📁](./frameworks/nuxt/keycloak-js/)    | [👩‍💻🚀](https://phasetwo-nuxt-keycloakjs-example.vercel.app/) |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nuxt/)   |
+| Nuxt (oidc-client-ts)  |  [🧑‍💻📁](./frameworks/nuxt/oidc-client-ts/)  |    [👩‍💻🚀](https://phasetwo-nuxt-oidc-example.vercel.app/)    |   [👩‍🏫](https://phasetwo.io/blog/instant-user-managemenet-and-sso-for-nuxt/)   |
+| Sveltekit              |       [🧑‍💻📁](./frameworks/sveltekit/)       |    [👩‍💻🚀](https://phasetwo-sveltekit-example.vercel.app)     | [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-sveltekit/) |
+| Angular                |        [🧑‍💻📁](./frameworks/angular/)        |     [👩‍💻🚀](https://phasetwo-angular-example.vercel.app)      |  [👩‍🏫](https://phasetwo.io/blog/instant-user-management-and-sso-for-angular/)  |
+| Django                 |        [🧑‍💻📁](./frameworks/django/)         |                             👩‍💻⚒️                             |                 [👩‍🏫](https://phasetwo.io/blog/secure-django/)                 |
+| SpringBoot + Angular   | [🧑‍💻📁](./frameworks/spring-boot-keycloak/)  |                             👩‍💻⚒️                             |              [👩‍🏫](https://phasetwo.io/blog/secure-spring-boot/)               |
 
 ## Github Actions