From d626380f209ccca9d57ef9a77c109ac6b139f8c6 Mon Sep 17 00:00:00 2001 From: Emmanuel Gautier Date: Fri, 12 Jul 2024 00:18:30 +0200 Subject: [PATCH] feat: refactor ui and publish examples --- .github/workflows/deploy.yml | 80 +++++++++++++++++++ README.md | 2 +- .../src/environments/environment.ts | 8 +- examples/react-spa/.env | 2 +- examples/react-spa/README.md | 11 ++- examples/react-spa/src/App.tsx | 9 +-- examples/react-spa/src/components/Button.tsx | 14 ++++ examples/react-spa/src/components/Header.tsx | 33 -------- examples/react-spa/src/pages/home.tsx | 34 +++++++- 9 files changed, 144 insertions(+), 49 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 examples/react-spa/src/components/Button.tsx delete mode 100644 examples/react-spa/src/components/Header.tsx diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..639ab2d --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,80 @@ +name: Deploy + +on: + push: + branches: + - main + +env: + OIDC_ISSUER: "https://testid.cerberauth.com" + +jobs: + deploy-react-spa: + runs-on: ubuntu-latest + + 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' + + - name: Install dependencies 👨🏻‍💻 + run: npm ci + + - name: Run build + run: npm run build + env: + VITE_OIDC_ISSUER: ${{ env.OIDC_ISSUER }} + VITE_OIDC_CLIENT_ID: ${{ secrets.REACT_SPA_OIDC_CLIENT_ID }} + + - name: Publish + uses: cloudflare/pages-action@1 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + projectName: cerberauth-react-spa-oidc + directory: ./dist + gitHubToken: ${{ secrets.GITHUB_TOKEN }} + + deploy-angular-spa: + runs-on: ubuntu-latest + + 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' + + - name: Install dependencies 👨🏻‍💻 + run: npm ci + + - name: Run build + run: npm run build + env: + VITE_OIDC_ISSUER: ${{ env.OIDC_ISSUER }} + VITE_OIDC_CLIENT_ID: ${{ secrets.ANGULAR_SPA_OIDC_CLIENT_ID }} + + - name: Publish + uses: cloudflare/pages-action@1 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + projectName: cerberauth-angular-spa-oidc + directory: ./dist/angular-spa/browser + gitHubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/README.md b/README.md index 1da01de..485f302 100644 --- a/README.md +++ b/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 diff --git a/examples/angular-spa/src/environments/environment.ts b/examples/angular-spa/src/environments/environment.ts index c54336e..4680d39 100644 --- a/examples/angular-spa/src/environments/environment.ts +++ b/examples/angular-spa/src/environments/environment.ts @@ -1,9 +1,13 @@ +if (!process.env['OIDC_CLIENT_ID']) { + throw new Error('OIDC_CLIENT_ID is not set'); +} + export const environment = { production: true, auth: { - issuer: 'https://testid.cerberauth.com', + issuer: process.env['OIDC_ISSUER'] || 'https://testid.cerberauth.com', redirectUri: window.location.origin + '/index.html', - clientId: '', + clientId: process.env['OIDC_CLIENT_ID'], responseType: 'code', scope: 'openid profile email', diff --git a/examples/react-spa/.env b/examples/react-spa/.env index d9242a1..54ff335 100644 --- a/examples/react-spa/.env +++ b/examples/react-spa/.env @@ -1,2 +1,2 @@ -VITE_OIDC_ISSUER="" +VITE_OIDC_ISSUER="https://testid.cerberauth.com" VITE_OIDC_CLIENT_ID="" diff --git a/examples/react-spa/README.md b/examples/react-spa/README.md index 8018b6c..b7ffecb 100644 --- a/examples/react-spa/README.md +++ b/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/) diff --git a/examples/react-spa/src/App.tsx b/examples/react-spa/src/App.tsx index 0761d57..b5cd2c2 100644 --- a/examples/react-spa/src/App.tsx +++ b/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} > -
-
-
- - -
-
+ ) diff --git a/examples/react-spa/src/components/Button.tsx b/examples/react-spa/src/components/Button.tsx new file mode 100644 index 0000000..4a2521c --- /dev/null +++ b/examples/react-spa/src/components/Button.tsx @@ -0,0 +1,14 @@ +export interface ButtonProps extends React.ButtonHTMLAttributes { + children: React.ReactNode +} + +export const Button: React.FC = ({ children, ...props }) => { + return ( + + ) +} diff --git a/examples/react-spa/src/components/Header.tsx b/examples/react-spa/src/components/Header.tsx deleted file mode 100644 index 22936eb..0000000 --- a/examples/react-spa/src/components/Header.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import { useAuth } from '../lib/auth/useAuth' - -export const Header: React.FC = () => { - const { isAuthenticated, login, logout, user } = useAuth() - - return ( -
-
-

My App

-
-
- {isAuthenticated ? ( - <> - {user?.picture && ( - Profile - )} - - - ) : ( - <> - - {/* */} - - )} -
-
- ); -}; diff --git a/examples/react-spa/src/pages/home.tsx b/examples/react-spa/src/pages/home.tsx index 93fa80b..6abc711 100644 --- a/examples/react-spa/src/pages/home.tsx +++ b/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 ( -
-

Welcome to the home page

+
+
+

+ React SPA Example using OpenID Connect +

+

+ This example demonstrates how to authenticate users in a React Single Page Application (SPA) using OpenID Connect Protocol. +

+ {isAuthenticated ? ( + + ) : ( + + )} +

+ If you want to checkout out how to implement OpenID Connect in your React SPA, take a look at the source code. +

+
+ +
) }