Skip to content

Latest commit

 

History

History
76 lines (50 loc) · 2.49 KB

README.md

File metadata and controls

76 lines (50 loc) · 2.49 KB

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

This project demonstrates how to implement the Authorization Code Flow with PKCE for an Angular 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/angular-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:

  • Update the environment.ts file in the src/environments directory.

  • Add the necessary environment variables to the environment.ts file. For example:

    export const environment = {
  production: false,
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:4200/callback',
  issuer: 'https://testid.cerberauth.com',
  scopes: 'openid profile email',
};

    Replace your-client-id, http://localhost:4200/callback, and https://testid.cerberauth.com with the actual values provided by your OpenID Connect provider.

  1. Start the development server:
npm start

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

  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