React SPA (Single Page App) using Authorization Code Flow with PKCE

This project demonstrates how to implement the Authorization Code Flow with PKCE for a React SPA.

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 Workers. You can access the live demo at react-spa-oidc.cerberauth.workers.dev.

Before getting started, make sure you have the following:

git clone https://github.com/cerberauth/openid-connect-examples.git

cd openid-connect-examples/react-spa
npm ci

If you don't have an OpenID Connect provider, you can use TestID OpenID Connect Provider.

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.

Create a .env.local file in the root directory of your project or copy .env file.
Add the necessary environment variables to the .env.local file. For example:
```
VITE_CLIENT_ID=your-client-id
VITE_REDIRECT_URI=http://localhost:3000/callback
```
Replace your-client-id, and http://localhost:5173/callback with the actual values provided by your OpenID Connect provider.
Save the .env.local file.

npm run dev

Open your browser and navigate to http://localhost:5173/.
Click on the "Login" button to initiate the authorization code flow.
After successful authentication, you will be redirected back to the React SPA and the user information will be displayed.