How to pass credentials to Chat Trigger embedded in a web page

Questions
1

Hello:
I’m using the Chat Trigger embedded in my webpage, using this script:

<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'https://gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat'
	});
</script>

which worked fine until I enabled the Basic Auth to avoid the workflow being triggered from other places that my own webpage. So how can I invoke the script passing the credentials to authenticate the chat?

Thanks for your help
Greg

2

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:
3

hi @greg_luis

Welcome to the community! We have an authentication section on our docs that may help: Chat Trigger node documentation | n8n Docs

Hope this helps!

4

@greg_luis: to avoid the workflow being triggered from other places you can also setup CORS in the chat node and specify your website url like https://www.yourdomain.com

Did you find a solution regarding Basic Auth?

My understanding regarding documentation was to setup bearer token like this:

	createChat({
		webhookUrl: '<your URL>',
        webhookConfig: {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer <my-token>'
            }
        },

in the n8n chat node I’ve setup the Credential for Basic Auth
with user ‘Authorization’ and password ‘Bearer my-token’

but I in the console, I receive a POST 401 (Unauthorized) and the SyntaxError: Unexpected token ‘A’, “Authorizat”… is not valid JSON

Is there something, I missed or does someone has a hint what’s wrong with this approach?

5

The Most simplest solution would be (Not secured):
To pass credentials to the Chat Trigger widget, modify your script to include authentication parameters:

<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

  createChat({
    webhookUrl: 'https://gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat',
    auth: {
      // For basic auth:
      username: 'your_username',
      password: 'your_password'
      
      // OR for header-based auth:
      // httpHeaderName: 'Authorization',
      // httpHeaderValue: 'Basic ' + btoa('username:password')
    }
  });
</script>

Use either the username/password method or the HTTP header method based on your authentication setup.

→ -> → -> → Safest Solution:
The safest approach is to use a server-side proxy to avoid exposing credentials in client-side code:

  1. Create a simple server-side proxy endpoint on your web server:
// Example Express.js proxy route
app.post('/chat-proxy', (req, res) => {
  // Forward request to n8n with credentials added server-side
  fetch('https://gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat', {
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' + Buffer.from('username:password').toString('base64'),
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(req.body)
  })
  .then(response => response.json())
  .then(data => res.json(data))
  .catch(error => res.status(500).json({ error: 'Proxy error' }));
});
  1. Update your client-side code to use this proxy:
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  
  createChat({
    webhookUrl: '/chat-proxy'
  });
</script>

This keeps authentication credentials completely server-side and out of your client-side code.

1 Like
6

Thanks a lot.

Unfortunately I still receive a syntax error with the simple solution, also if I do not change anything in my html-file that calls createChat() function.

My calling html runs fine with the chat-node configured with CORS and Authentication None. When I only change the chat-node configuration to basic auth and do not change anything in the html, I receive a 401 (which is ok), but also a syntax error from the chat.bundle.es.js

That seems a little but confusing to me. Maybe it is related to the missing auth, but to rule out an error with the jsdelivr.net js: does this work on your side with your described “simpel solution”?

image

Thanks and best!

7

The syntax error suggests the Chat widget may be expecting a specific response format when authentication fails.

First could you please, check the exact version you’re using:

<script type="module">
  import { version, createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat@latest/dist/chat.bundle.es.js';
  console.log('Chat widget version:', version);
  
  // Use the latest version explicitly
  createChat({
    webhookUrl: 'https://gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat',
    auth: {
      method: 'basic',
      username: 'your_username',
      password: 'your_password'
    }
  });
</script>
8 
import { version, createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat@latest/dist/chat.bundle.es.js';

returns: The requested module ‘https://cdn.jsdelivr.net/npm/@n8n/chat@latest/dist/chat.bundle.es.js’ does not provide an export named ‘version’

but it looks like latest is linked to 0.27.1

9

The error occurs because the n8n Chat widget (v0.27.1) doesn’t export a version variable. Simply remove that from your import statement:

<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat@latest/dist/chat.bundle.es.js';
  
  createChat({
    webhookUrl: 'https://gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat',
    auth: {
      username: 'your_username',
      password: 'your_password'
    }
  });
</script>
10

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.