https://github.com/curityio/spa-using-token-handler

API driven OpenID Connect SPA security, using only the most secure cookies in the browser
https://github.com/curityio/spa-using-token-handler

code-example oauth2 openid-connect react spa token-handler

Last synced: 5 days ago
JSON representation

API driven OpenID Connect SPA security, using only the most secure cookies in the browser

• Host: GitHub
• URL: https://github.com/curityio/spa-using-token-handler
• Owner: curityio
• License: apache-2.0
• Created: 2021-08-03T09:04:04.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-20T14:18:56.000Z (2 months ago)
• Last Synced: 2025-01-08T14:32:50.293Z (13 days ago)
• Topics: code-example, oauth2, openid-connect, react, spa, token-handler
• Language: TypeScript
• Homepage: https://curity.io/resources/learn/token-handler-overview/
• Size: 1.68 MB
• Stars: 64
• Watchers: 5
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SPA using the Token Handler Pattern

[![Quality](https://img.shields.io/badge/quality-test-yellow)](https://curity.io/resources/code-examples/status/)

[![Availability](https://img.shields.io/badge/availability-source-blue)](https://curity.io/resources/code-examples/status/)

A Single Page Application (SPA) that implements OpenID Connect using recommended browser security.\

The SPA uses a `Backend for Frontend (BFF)` approach, in line with [best practices for browser based apps](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps).\

A modern evolution of Backend for Frontend is used, called the [Token Handler Pattern](https://curity.io/resources/learn/the-token-handler-pattern/).

![Logical Components](/doc/images/logical-components.png)

## Architecture Benefits

This provides the best separation of web and API concerns, to maintain all of the benefits of an SPA architecture:

- `Strongest Browser Security`, with only SameSite=strict cookies

- `Great User Experience` due to the separation of Web and API concerns

- `Productive Developer Experience` with only simple security code needed in the SPA

- `Deploy Anywhere`, such as to a Content Delivery Network

## Run the End-to-end Flow

The SPA can be quickly run in an end-to-end flow on a development computer by following these guides:

- [Standard SPA using an Authorization Code Flow (PKCE) and a Client Secret](/doc/Standard.md)

- [Financial-grade SPA using Mutual TLS, PAR and JARM](/doc/Financial.md)

## Website Documentation

- See the [Token Handler Design Overview](https://curity.io/resources/learn/token-handler-overview/) for further documentation on this design pattern.

## More Information

Please visit [curity.io](https://curity.io/) for more information about the Curity Identity Server.