Skip to content

Latest commit

 

History

History
73 lines (46 loc) · 2.33 KB

README.md

File metadata and controls

73 lines (46 loc) · 2.33 KB

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 Pages. You can access the live demo here.

Prerequisites

Before getting started, make sure you have the following:

  • Node.js installed on your machine
  • An OpenID Connect provider that supports the Authorization Code Flow with PKCE

Getting Started

  1. Clone the repository:
git clone https://github.com/cerberauth/openid-connect-examples.git
  1. Install the dependencies:
cd openid-connect-examples/react-spa
npm ci
  1. Configure the OpenID Connect provider:

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.
  1. Update the configuration:

  • 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.

  1. Start the development server:
npm run dev

  1. Open your browser and navigate to http://localhost:5173/.

  2. Click on the "Login" button to initiate the authorization code flow.

  3. After successful authentication, you will be redirected back to the React SPA and the user information will be displayed.

Additional Resources