This is a sample app showcasing authentication via OIDC using Descope's hosted authentication flow page. It's written in NextJS.
First, add your Descope Project ID to a .env file in the root folder.
NEXT_PUBLIC_DESCOPE_PROJECT_ID=<your_project_id>
Second, install packages, and run the development server:
npm i
npm run devNow, Open http://localhost:3000 with your browser to see the result.
This entails redirecting to a Descope OIDC authorize endpoint which includes:
- A code challenge and verifier, both cryptographically random strings for challenge-response validation
- Your Descope Project ID
- A callback url. This url is defined in a Route Handler in your project at
/api/auth/callbackand parses the code verifier and token returned via Descope OIDC after successful authentication. Then, it sets theid_token,access_token,refresh_token, andexpires_into cookies before redirecting to the dashboard.
This entails redirecting to /api/auth/logout which then fetches the id_token from the cookies before clearing them. Then it redirects to Descope's OIDC logout endpoint with the id_token as a parameter along with the url to return to after successful log out.
NextJS middleware that handles redirect between /dashboard and / depending on if a valid access_token exists in cookies.