N8n forms node , how to provide authentication to it?

Help me Build my Workflow
1

i want to add authentication to the n8n form trigger, (not the basic auth but token based auth)
i tried two approaches described below involving nginx and cookies restricting the path itself . but both of them didnt work ,
is there a way to add authentication to the n8n forms so that i can give that to multiple users in a secure manner ???

.
.
.
.

things that i have tried ,

  1. i set a cookie with a seperate workflow called custom-auth=“secret”

  2. then i used nginx to forward all calls for the path form-test and form
    to the auth workflow

  3. my form appears correctly if the cookie is correct and if it is incorrect it gives nginx error (this part works correctly)

  4. but when i click submit after adding value to the form it keeps on loading and gets stuck .

this is the nginx for for auth

    # Protect /form-test/ and /form/ with authentication API
    location ~ ^/(form-test|form)/ {
        auth_request /auth_check;
        auth_request_set $auth_status $upstream_status;
        error_page 401 403 404 500 502 503 504 = @auth_failed;

        proxy_pass http://localhost:5434;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Internal location for authentication check
    location /auth_check {
        internal;
        proxy_pass https://p2n8n.gseven.in/webhook/n8ngsevenformauth;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Handle authentication failures
    location @auth_failed {
        return 403 "Forbidden";
    }
}

the second approach i tried was to

  1. bind the cookie value to the hidden field inside the form itself so i can then validate it there itself , i tried doing this again with nginx ,

what i did was tried to add the below code to all html files being sent from nginx

 # Enable sub_filter module
    sub_filter_once on;

    # Script injection for /form-test/ and /form/ paths
    location ~* ^/(form-test|form)/ {
        proxy_pass http://localhost:5434;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        gzip off;
        
        # WebSocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # Disable buffering
        proxy_buffering off;
        chunked_transfer_encoding off;
        
        # Increase timeouts
        proxy_connect_timeout 600s;
        proxy_send_timeout 600s;
        proxy_read_timeout 600s;

        # Inject script before closing body tag for HTML files
      sub_filter '</body>' '
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                function getCookie(name) {
                    var value = "; " + document.cookie;
                    var parts = value.split("; " + name + "=");
                    if (parts.length === 2) {
                        return parts.pop().split(";").shift();
                    }
                    return null;
                }

                var cookieValue = getCookie("n8ngsevenformauth");
                var hiddenInputs = document.querySelectorAll("input[name=\"n8ngsevenformauth\"], input[placeholder=\"n8ngsevenformauth\"], input[value=\"n8ngsevenformauth\"]");

                if (cookieValue) {
                    hiddenInputs.forEach(function(input) {
                        input.value = cookieValue;
                    });
                }
            });
        </script>
        </body>';
        
        # Only apply sub_filter to HTML responses
        sub_filter_types text/html;
    }

this adds a script file to the end of the htmlfile , which will then get the cookie and set it to the hidden field of the form and it can then be validated , but this also didnt work , the script never got added

this also didnt work , the script just didnt get added to the form at all

2

solved n8n node form authentication with token ,

  1. working through cookie

what i did was mount the file called
/usr/local/lib/node_modules/n8n/templates/form-trigger.handlebars

inside docker

  • ./n8n/forms/form-trigger.handlebars:/usr/local/lib/node_modules/n8n/templates/form-trigger.handlebars

edited this file to add custom javascript , the custom javascript adds the token from cookie / local storage to a predefined hidden field in the form

         <script>
    document.addEventListener('DOMContentLoaded', () => {
        const cookieValue = document.cookie.split('; ').find(c => c.startsWith('n8ngsevenformauth='))?.split('=')[1];
        if (cookieValue) {
            document.querySelectorAll('input[value="n8ngsevenformauth"], input[placeholder="n8ngsevenformauth"]')
                .forEach(input => input.value = cookieValue);
        }
    });
</script>

and then parsed this token as validation before continuing with form

no i just have to create a simple html page that will set the token to cookie or localstorage and them i am done ,