This article to share how we use Keycloak OIDC authentication with N8N workflow used internally. Please Open It has its own instance of n8n for internal automations : billing, emails etc… Connecting applications to each other is simpler, especially on data management (json manipulations).

@JulienDelRio asks the n8n community for « social login » in n8n.

Let’s answer this question.

Keycloak for the example

For this example, we use Keycloak. No specific feature from Keycloak is used, only keycloak.js library for the login form. Of course, any kind of oidc library will work in the same way. For us, it is easier to understand with this implementation for this use case.

A standard Keycloak (out of the box) from is used. Ensure that your Keycloak instance is accessible from your n8n instance.

Auth code with PKCE, anything else ?

Also for this example, we use authorization code with PKCE for much simplicity in the workflow. After the user logs in, the token is directly retrieved by the web application, there is no operation between authentication server and n8n server to get the token.

Keycloak OIDC authentication with N8N workflow

Global view

The workflow looks like this :

Keycloak OIDC authentication with N8N workflow

The entrypoint is the webhook, after that we need to parse cookies HTTP header and ask for authentication or not.

After the authentication form, a cookie is created with the access token and the page is reloaded, so the process restarts. With the given token, user are retrieved with the /userinfo endpoint and voilà.

Configure the workflow

Set all variables first in the node « set variables » with :

  • authorization_endpoint
  • token_endpoint
  • userinfo_endpoint
  • client_id
  • scope (with at least « openid » scope)
Keycloak OIDC authentication with N8N workflow

You can get those values directly in the « openid endpoint configuration » from your identity provider. In Keycloak, you have it in your « realm settings ».

Keycloak client configuration

A public client with standard flow enabled.

Keycloak OIDC authentication with N8N workflow

Code for cookies parsing

Cookies come « as is » from the webhook :

Keycloak OIDC authentication with N8N workflow

So parsing cookies header need a little Javascript code (split on ‘;’ and ‘=’):

let myCookies = {};
let cookies = [];

cookies = $input.item.json.headers.cookie.split(';')
for (item of cookies ) {

return myCookies;

The result is a structure of cookies, so it is possible to check if « n8n-custom-auth » is set.

First : the user is not logged in

Keycloak OIDC authentication with N8N workflow

The cookie does not exist, send a login page.

Login page

Thanks to with the implementation of PKCE on authorization_code, there is no external dependencies. It also helps to understand how PKCE works.

After authentication, the cookie « n8n-custom-auth » is set. Then the page is reloaded.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <div id="result"></div>
    const authorizeEndpoint = "{{ $('Set variabes : auth, token, userinfo, client id, scope').item.json.auth_endpoint }}";
    const tokenEndpoint = "{{ $('Set variabes : auth, token, userinfo, client id, scope').item.json.token_endpoint }}";
    const clientId = "{{ $('Set variabes : auth, token, userinfo, client id, scope').item.json.client_id }}";
    const scope = "{{ $('Set variabes : auth, token, userinfo, client id, scope').item.json.scope }}";
        if ( {
            var args = new URLSearchParams(;
            var code = args.get("code");

            if (code) {
                var xhr = new XMLHttpRequest();

                xhr.onload = function() {
                    var response = xhr.response;
                    var message;

                    if (xhr.status == 200) {
                        message = "Access Token: " + response.access_token;
                        document.cookie = "n8n-custom-auth="+response.access_token;
                    else {
                        message = "Error: " + response.error_description + " (" + response.error + ")";

                    document.getElementById("result").innerHTML = message;
                xhr.responseType = 'json';
      "POST", tokenEndpoint, true);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.send(new URLSearchParams({
                    client_id: clientId,
                    code_verifier: window.sessionStorage.getItem("code_verifier"),
                    grant_type: "authorization_code",
                    redirect_uri: location.href.replace(, ''),
                    code: code
        async function generateCodeChallenge(codeVerifier) {
            var digest = await crypto.subtle.digest("SHA-256",
                new TextEncoder().encode(codeVerifier));

            return btoa(String.fromCharCode( Uint8Array(digest)))
                .replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')

        function generateRandomString(length) {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for (var i = 0; i < length; i++) {
                text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;

        if (!crypto.subtle) {
            document.writeln('<p>' +
                    '<b>WARNING:</b> The script will fall back to using plain code challenge as crypto is not available.</p>' +
                    '<p>Javascript crypto services require that this site is served in a <a href="">secure context</a>; ' +
                    'either from <b>(*.)localhost</b> or via <b>https</b>. </p>' +
                    '<p> You can add an entry to /etc/hosts like " public-test-client.localhost" and reload the site from there, enable SSL using something like <a href="">letsencypt</a>, or refer to this <a href="">stackoverflow article</a> for more alternatives.</p>' +
                    '<p>If Javascript crypto is available this message will disappear.</p>')
      var codeVerifier = generateRandomString(64);
            const challengeMethod = crypto.subtle ? "S256" : "plain"
                .then(() => {
                    if (challengeMethod === 'S256') {
                        return generateCodeChallenge(codeVerifier)
                    } else {
                        return codeVerifier
                .then(function(codeChallenge) {
                    window.sessionStorage.setItem("code_verifier", codeVerifier);
                    var redirectUri = window.location.href.split('?')[0];
                    var args = new URLSearchParams({
                        response_type: "code",
                        client_id: clientId,
                        code_challenge_method: challengeMethod,
                        code_challenge: codeChallenge,
                        redirect_uri: redirectUri,
                        scope: scope
                window.location = authorizeEndpoint + "?" + args;

Second step : reload and get user info

Keycloak OIDC authentication with N8N workflow

A call to userinfo instead of parsing a jwt token ?

Well… n8n does not have native JWT parsing functions. A library exists with limitations, and of course if a token is revoked there is no way to detect this revocation.

Userinfo is the best way.

A GET request with access_token in Authorization header :

Keycloak OIDC authentication with N8N workflow
    "sub": "17cd81c0-3169-4e87-bd44-7799185d472c",
    "email_verified": false,
    "name": "user user",
    "preferred_username": "user",
    "given_name": "user",
    "family_name": "user",
    "email": ""

token expired ? Back to the login page !

Note that the Keycloak session (with its own cookie) bypasses the login form, so the user does not have to re-enter his credentials.

Keycloak OIDC authentication with N8N workflow

Next ?

With an access_token APIs calls can be done for the current logged in user, this is done in the « userinfo » request.

Keycloak OIDC authentication with N8N workflow

With user information, logs, emails, user details can be used in your flow.

        "sub": "73a6543f-f420-4fa6-9811-209e903c348b",
        "email_verified": true,
        "preferred_username": "",
        "email": ""


Thanks to n8n creators, you can use our workflow directly from the official website :

Get this flow and feel free to use it !


The client used for the demo will work on all n8n webhooks due to a ‘*’ on redirect_uri. The user for testing is « test/test ».

Les derniers articles par Mathieu PASSENAUD (tout voir)