Secure OIDC Client Login Portal with PKCE
detail.loadingPreview
This n8n workflow provides a robust, client-side OpenID Connect (OIDC) authentication solution, complete with PKCE (Proof Key for Code Exchange) support. It dynamically serves login or welcome pages based on a user's authentication status, enabling secure, custom login experiences without complex backend coding.
About This Workflow
Empower your applications with a flexible and secure user authentication system using this n8n OIDC client workflow. Designed to handle the full OIDC Authorization Code Flow with PKCE, it intelligently checks for existing user sessions via cookies. If authenticated, users are greeted with a personalized welcome page. If not, a dynamic login form guides them through the OIDC provider's authentication process. This workflow streamlines identity verification, obtains access tokens, and manages user state, making it ideal for creating secure portals or authentication layers with minimal effort.
Key Features
- OIDC Authorization Code Flow with PKCE: Implements secure OIDC authentication including Proof Key for Code Exchange for enhanced security.
- Dynamic Page Serving: Automatically displays a personalized welcome page for authenticated users or a login form for new/unauthenticated users.
- Cookie-Based Session Management: Parses and utilizes
access_tokencookies to maintain user sessions across requests. - User Information Retrieval: Fetches detailed user profiles from an OIDC
userinfo_endpointusing the obtained access token. - Customizable HTML Responses: Easily modify the
Welcome pageandlogin formnodes to match your brand and user experience requirements.
How To Use
- Import the Workflow: Download and import this JSON snippet into your n8n instance.
- Define OIDC Parameters: A crucial prerequisite (not shown in this snippet but referenced) is a preceding node (e.g., a 'Set' or 'Code' node) that defines your OIDC provider's
auth_endpoint,token_endpoint,userinfo_endpoint,client_id,scope, and a booleanPKCEflag. Ensure these values are accessible to the 'login form' and 'user info' nodes. - Activate Webhook: Enable the 'Webhook' node and copy its test or production URL. This will be the entry point for your OIDC client application.
- Test Authentication Flow: Open the Webhook URL in your browser.
- If you're not authenticated, you'll see the login form which will redirect you to your OIDC provider. Complete the login, and upon return, an
access_tokencookie will be set, and the welcome page will display. - If you already have a valid
access_tokencookie, you will directly see the personalized welcome page.
- If you're not authenticated, you'll see the login form which will redirect you to your OIDC provider. Complete the login, and upon return, an
- Customize HTML: Modify the 'Welcome page' and 'login form' HTML nodes to align with your specific branding and content needs.
Apps Used
Workflow JSON
{
"id": "118ba86c-4fbe-424c-a79b-171020386919",
"name": "Secure OIDC Client Login Portal with PKCE",
"nodes": 29,
"category": "Operations",
"status": "active",
"version": "1.0.0"
}Note: This is a sample preview. The full workflow JSON contains node configurations, credentials placeholders, and execution logic.
Get This Workflow
ID: 118ba86c-4fbe...
About the Author
Crypto_Watcher
Web3 Developer
Automated trading bots and blockchain monitoring workflows.
Statistics
Related Workflows
Discover more workflows you might like
Instant WooCommerce Order Notifications via Telegram
When a new order is placed on your WooCommerce store, instantly receive detailed notifications directly to your Telegram chat. Stay on top of your e-commerce operations with real-time alerts, including order specifics and a direct link to view the order.
On-Demand Microsoft SQL Query Execution
This workflow allows you to manually trigger and execute any SQL query against your Microsoft SQL Server database. Perfect for ad-hoc data lookups, administrative tasks, or quick tests, giving you direct control over your database operations.
Automate Getty Images Editorial Search & CMS Integration
This n8n workflow automates searching for editorial images on Getty Images, extracts key details and embed codes, and prepares them for seamless integration into your Content Management System (CMS), streamlining your content creation process.