A Next.js proof-of-concept demonstrating ID Austria authentication integration using OpenID Connect (OIDC)
This application demonstrates how to integrate ID Austria authentication into a web application using the OpenID Connect (OIDC) protocol. ID Austria is Austria's official digital identity solution that allows Austrian citizens to authenticate securely using their digital identity.
- 🔐 Secure Authentication: OIDC integration with ID Austria's official endpoints
- 🛡️ JWT Verification: Token validation using JWKS from ID Austria
- 🎨 Modern UI: Built with Next.js 14, Tailwind CSS, and shadcn/ui components
This demo implements the OpenID Connect (OIDC) authentication flow for ID Austria as described in their integration guide. The flow consists of the following steps:
- Initiation: User clicks "ID Austria" button
- Authorization: Redirect to ID Austria authorization endpoint
- Authentication: User authenticates with test identity credentials
- Callback: ID Austria redirects back to
/cbwith authorization code - Token Exchange: App exchanges code for access and ID tokens
- Verification: JWT token verified using JWKS from ID Austria
- Access: User can navigate and inspect JWT token claims
For more info on OIDC heckout the OpenID Connect documentation.
- Node.js 18+ and npm
- IDA Service Provider, register here.
# Install dependencies
npm install
# Set up environment variables (see Configuration section)
cp .env.example .env
# Edit .env with your actual ID Austria credentials
# Start development server (requires sudo on macOS/Linux for port 443)
sudo npm run devThe application will be available at https://localhost:443
For local development (npm run dev), copy .env.example to .env and configure your ID Austria credentials.
The .env.example file contains all required environment variables with detailed explanations:
- OIDC Client Configuration: Your registered service provider credentials
- Server-side OAuth Settings: Token exchange and client secret
- JWT Verification: Public key endpoints and validation parameters
Dependent on your deployment target you might also need a .dev.vars, see OpenNext.js Cloudflare integration.
This application uses ID Austria's test environment. For testing, use the predefined test identities provided in the official documentation.
id-austria-demo/
├── public/
│ └── images/ # ID Austria logos and branding assets
│ ├── id-austria-logo.svg
│ └── sp-logo.png
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── cb/ # OAuth callback handler
│ │ │ └── page.tsx
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Main demo page
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── demo-page.tsx
│ │ ├── jwt-navigator.tsx
│ │ └── login-form.tsx
│ ├── hooks/ # Custom React hooks
│ │ └── use-toast.ts
│ ├── lib/ # Utility libraries
│ │ └── utils.ts
│ ├── mdx/ # MDX content pages
│ │ └── HowTo.mdx
│ ├── styles/ # Global styles
│ │ └── globals.css
│ ├── types/ # TypeScript definitions
│ │ └── json.d.ts
│ └── util/ # Utility functions
│ ├── jwt-util.ts # JWT verification logic
│ └── jwt-util.spec.ts
├── .dev.vars.example # Environment template for local dev
├── next.config.mjs # Next.js configuration
├── open-next.config.ts # OpenNext.js Cloudflare config
├── tailwind.config.ts # Tailwind CSS configuration
└── vitest.config.ts # Vitest test configuration
To integrate with ID Austria in production, you need to register as a service provider:
- Public/Government Providers: Register through IDA SP Registration System
- Private Providers: Available for commercial service integration
- Protocols Supported: OpenID Connect (OIDC) and SAML2
- OIDC Integration Guide (Legacy)
- Test System (Legacy)
- Private Service Provider Registration (Legacy)
- Predefined Test Identities (Legacy)
This is a proof-of-concept demonstration, no guarantees given and not suitable for use in production.
Please refer to ID Austria's official documentation for production implementation guidelines.
Built with ❤️ for the Austrian digital identity ecosystem.