feat: refator ui and readme

examples/react-spa/README.md

@@ -4,6 +4,15 @@ 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 the following platforms:
+
+- [Cloudflare Pages](https://react-spa-authorization-code-flow.pages.dev/)
+- [Vercel](https://react-spa-authorization-code-flow.vercel.app/)
+- [Netlify](https://react-spa-authorization-code-flow.netlify.app/)
+- [Firebase Hosting](https://react-spa-authorization-code-flow.web.app/)
+
 ## Prerequisites
 
 Before getting started, make sure you have the following:
@@ -23,11 +32,13 @@ Before getting started, make sure you have the following:
 
   ```bash
   cd openid-connect-examples/react-spa-authorization-code-flow
-  npm install
+  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 +70,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-gray-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-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>
   )
 }