- Live demo for PKCE flow with refresh token rotation.-
- For non-logged in users, there is a
Login
button for authorization redirect - For 'logged in' users (supposedly with refresh token), there will be
Logout
button to clear token and go back to login. - There is a toggle to count down and refresh token just before expiry (or immediately, if already expired). Without auto-refresh, token refresh takes place on page load.
- Codes and tokens are stored in cookies and LocalStorage by default.
- Experimental automagic token refresh with a toggle.
- Experimental due to React's Effects, there might be multiple invocations of the same requests and may cause the component to re-render few times so there's AbortController to try and cancel other requests.
lib
has the PKCE module.src
has the example website to show how PKCE works, by importinglib
module and executes PKCE token exchange and refresh flows.App.tsx
is the main page that followed the PKCE RTR flowcomponents
has non-business logic components (so far only 1)styles
for CSS (and maybe design tokens) but most stylings are done via atomic classesservices
for neither styles nor components, like hooks or utilites, or test helpers.
- Testing is done with:
vitest
as runner.testing-library
andjsdom
for React rendering, besides default Node env for plain JS such aslib
module.- Ideally integration over unit testing to reduce mocking surfaces and less time than E2E/headless browser setup such as BrowserStack.
Minimal setup to leave implementation room for actual business logic:
fetch
for consistent fetch API between browser and Node environment (for tests).dayjs
for time format.js-cookie
for consistent cookies handling between browser and Node environment (for tests).
- npm i -g pnpm
- pnpm i
OR npm i
would also work, by ignoring the commited pnpm lockfile.
- Development mode with
pnpm dev
- Test with
pnpm test
- Check test coverage with
pnpm coverage
- Library/module build with
pnpm build
whose output can be found indist
folder. - Example website build with
pnpm build:site
whose output can be found insite
folder. - Vite's library mode is enough for the demo's scope, as monorepos would be the proper (and overkill) solution.