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 dev
Now, 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/callback
and parses the code verifier and token returned via Descope OIDC after successful authentication. Then, it sets theid_token
,access_token
,refresh_token
, andexpires_in
to 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.