feat: refactor ui and publish examples

.github/workflows/publish.yml

@@ -0,0 +1,59 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - main
+      - prepare-examples-deployment
+
+env:
+  OIDC_ISSUER: "https://testid.cerberauth.com"
+
+jobs:
+  deploy-nodejs-cloudflare:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ${{ matrix.workingDirectory }}
+
+    strategy:
+      matrix:
+        include:
+          - workingDirectory: ./examples/react-spa
+            projectName: cerberauth-react-spa-oidc
+            directory: ./dist
+          - workingDirectory: ./examples/angular-spa
+            projectName: cerberauth-angular-spa-oidc
+            directory: ./dist/angular-spa/browser
+
+    permissions:
+      contents: read
+      deployments: write
+
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@v4
+
+      - name: Setup node env 🏗
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: '${{ matrix.workingDirectory }}/package-lock.json'
+
+      - name: Install dependencies 👨🏻‍💻
+        run: npm ci
+
+      - name: Run build
+        run: npm run build
+
+      - name: Publish
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ matrix.projectName }}
+          directory: ${{ matrix.directory }}
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,6 +1,6 @@
 # OpenID Connect Examples / Demo
 
-This repository contains a collection of OpenID Connect examples and demos.
+This repository contains a collection of OpenID Connect examples.
 
 ## Examples
 

examples/angular-spa/src/environments/environment.ts

@@ -3,7 +3,7 @@ export const environment = {
   auth: {
     issuer: 'https://testid.cerberauth.com',
     redirectUri: window.location.origin + '/index.html',
-    clientId: '',
+    clientId: '8f39ed37-ca04-464b-9d65-8aece2e46518',
     responseType: 'code',
     scope: 'openid profile email',
 

examples/react-spa/.env

@@ -1,2 +1,2 @@
-VITE_OIDC_ISSUER=""
-VITE_OIDC_CLIENT_ID=""
+VITE_OIDC_ISSUER="https://testid.cerberauth.com"
+VITE_OIDC_CLIENT_ID="c6c0c0ec-09e0-448e-a856-3e596c3bdd9d"

examples/react-spa/README.md

@@ -4,6 +4,10 @@ This project demonstrates how to implement the Authorization Code Flow with PKCE
 
 Disclaimer: This project is for educational purposes only and should not be used in production without proper security review and testing.
 
+## Deployment
+
+This project is deployed on Cloudflare Pages. You can access the live demo [here](https://cerberauth-react-spa-oidc.pages.dev/).
+
 ## Prerequisites
 
 Before getting started, make sure you have the following:
@@ -22,12 +26,14 @@ Before getting started, make sure you have the following:
 2. Install the dependencies:
 
   ```bash
-  cd openid-connect-examples/react-spa-authorization-code-flow
-  npm install
+  cd openid-connect-examples/react-spa
+  npm ci
   ```
 
 3. Configure the OpenID Connect provider:
 
+If you don't have an OpenID Connect provider, you can use [TestID OpenID Connect Provider](https://testid.cerberauth.com/).
+
   - Obtain the client ID and client secret from your OpenID Connect provider.
   - Register the redirect URI for your React SPA in the provider's developer console.
 
@@ -59,6 +65,7 @@ Before getting started, make sure you have the following:
 
 ## Additional Resources
 
+- [oauth4webapi](https://github.com/panva/oauth4webapi)
 - [OpenID Connect](https://openid.net/)
 - [OAuth 2.0 Authorization Code Flow](https://oauth.net/2/grant-types/authorization-code/)
 - [PKCE](https://oauth.net/2/pkce/)

examples/react-spa/src/App.tsx

@@ -1,7 +1,6 @@
 import { Router } from 'wouter'
 
 import { AuthProvider } from './lib/auth/AuthProvider'
-import { Header } from './components/Header'
 import { PageRouter } from './components/PageRouter'
 
 function App() {
@@ -11,13 +10,7 @@ function App() {
       clientId={import.meta.env.VITE_OIDC_CLIENT_ID}
     >
       <Router>
-        <main role="main" className="wrapper">
-          <div className="content">
-            <Header />
-
-            <PageRouter />
-          </div>
-        </main>
+        <PageRouter />
       </Router>
     </AuthProvider>
   )

examples/react-spa/src/components/Button.tsx

@@ -0,0 +1,14 @@
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+}
+
+export const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
+  return (
+    <button
+      className="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

examples/react-spa/src/pages/home.tsx

@@ -1,7 +1,37 @@
+import { Button } from '../components/Button'
+import { useAuth } from '../lib/auth/useAuth'
+
 export function Home() {
+  const { login, logout, isAuthenticated } = useAuth()
+
   return (
-    <div>
-      <h1>Welcome to the home page</h1>
+    <div className="bg-slate-100 min-h-screen">
+      <main role="main" className="flex flex-col items-center justify-center h-5/6 space-y-8 text-center px-4 py-16 lg:pt-32 md:pt-16 sm:pt-8">
+        <h1 className="mt-4 text-2xl font-extrabold tracking-tight text-slate-900 sm:text-5xl xl:max-w-[43.5rem]">
+          React SPA Example using OpenID Connect
+        </h1>
+        <p className="mt-4 max-w-lg text-lg text-slate-700">
+          This example demonstrates how to authenticate users in a React Single Page Application (SPA) using OpenID Connect Protocol.
+        </p>
+        {isAuthenticated ? (
+          <Button onClick={() => logout()}>
+            Logout
+          </Button>
+        ) : (
+          <Button onClick={() => login()}>
+            Login with TestID
+          </Button>
+        )}
+        <p className="mt-4 max-w-lg text-slate-700">
+          If you want to checkout out how to implement OpenID Connect in your React SPA, take a look at the <a className="text-indigo-600" href="https://github.com/cerberauth/openid-connect-examples/tree/main/examples/react-spa">source code</a>.
+        </p>
+      </main>
+
+      <footer className="text-center py-4">
+        <p className="text-sm text-gray-500">
+          Proudly part of <a className="text-indigo-600" href="https://www.cerberauth.com">CerberAuth</a> community.
+        </p>
+      </footer>
     </div>
   )
 }