Integrate keycloak with chat-ui for authentication

[ViokingTung]

1、setup keycloak and create openid-connect from keycloak, refer to here

2、add OPENID_CONFIG in your .env.local

OPENID_CONFIG=`{
  "PROVIDER_URL": "http://your.keycloak.domain.com/realms/{realm}",
  "CLIENT_ID": "your_client_id",
  "CLIENT_SECRET": "your_client_secret",
  "SCOPES": "openid profile email"
}`

3、modify some code

#1、make user filed picture become optional
vim https://github.com/huggingface/chat-ui/blob/main/src/routes/login/callback/updateUser.spec.ts#L13
picture: z.string().optional(),

#2、skip iss verification，comment those line, I am not clear with here.
{chat-ui}/{node_modules}/openid-client/lib/client.js#415-424

    // else if (
    //   this.issuer.authorization_response_iss_parameter_supported &&
    //   !('id_token' in params) &&
    //   !('response' in parameters)
    // ) {
    //   throw new RPError({
    //     message: 'iss missing from the response',
    //     params,
    //   });
    // }

4、CSRF（optional）,if your keycloak doamin is different with your chat-ui domain,should do this.

		csrf: {
			// handled in hooks.server.ts, because we can have multiple valid origins
			checkOrigin: false,
		},

if you have more best idea about it,please share,thank you.

[majestichou]

1、setup keycloak and create openid-connect from keycloak, refer to here

2、add OPENID_CONFIG in your .env.local

OPENID_CONFIG=`{
  "PROVIDER_URL": "http://your.keycloak.domain.com/realms/{realm}",
  "CLIENT_ID": "your_client_id",
  "CLIENT_SECRET": "your_client_secret",
  "SCOPES": "openid profile email"
}`

3、modify some code

#1、make user filed picture become optional
vim https://github.com/huggingface/chat-ui/blob/main/src/routes/login/callback/updateUser.spec.ts#L13
picture: z.string().optional(),

#2、skip iss verification，comment those line, I am not clear with here.
{chat-ui}/{node_modules}/openid-client/lib/client.js#415-424

    // else if (
    //   this.issuer.authorization_response_iss_parameter_supported &&
    //   !('id_token' in params) &&
    //   !('response' in parameters)
    // ) {
    //   throw new RPError({
    //     message: 'iss missing from the response',
    //     params,
    //   });
    // }

4、CSRF（optional）,if your keycloak doamin is different with your chat-ui domain,should do this.

		csrf: {
			// handled in hooks.server.ts, because we can have multiple valid origins
			checkOrigin: false,
		},

if you have more best idea about it,please share,thank you.

I tried your solution. After entering the account password, the web-ui stays at the login screen. I checked the browser log with F12 and found an error: callback:
1 Failed to load resource: the server responded with a status of 403 (Forbidden)
what should i do?

[ViokingTung]

1、setup keycloak and create openid-connect from keycloak, refer to here

2、add OPENID_CONFIG in your .env.local

OPENID_CONFIG=`{
  "PROVIDER_URL": "http://your.keycloak.domain.com/realms/{realm}",
  "CLIENT_ID": "your_client_id",
  "CLIENT_SECRET": "your_client_secret",
  "SCOPES": "openid profile email"
}`

3、modify some code

#1、make user filed picture become optional
vim https://github.com/huggingface/chat-ui/blob/main/src/routes/login/callback/updateUser.spec.ts#L13
picture: z.string().optional(),

#2、skip iss verification，comment those line, I am not clear with here.
{chat-ui}/{node_modules}/openid-client/lib/client.js#415-424

    // else if (
    //   this.issuer.authorization_response_iss_parameter_supported &&
    //   !('id_token' in params) &&
    //   !('response' in parameters)
    // ) {
    //   throw new RPError({
    //     message: 'iss missing from the response',
    //     params,
    //   });
    // }

4、CSRF（optional）,if your keycloak doamin is different with your chat-ui domain,should do this.

		csrf: {
			// handled in hooks.server.ts, because we can have multiple valid origins
			checkOrigin: false,
		},

if you have more best idea about it,please share,thank you.

I tried your solution. After entering the account password, the web-ui stays at the login screen. I checked the browser log with F12 and found an error: callback: 1 Failed to load resource: the server responded with a status of 403 (Forbidden) what should i do?

set root url and valid uri and Valid Post Logout Redirect URI to your chat-ui domain in your keycloak`s client setting.

[ViokingTung]

I set root url and valid uri and Valid Post Logout Redirect URI to my chat-ui domain in my keycloak`s client setting. It does not work. I'll describe my process in detail.

the content of docker-compose.yaml is as follows:

services:
  wtagent:
    image: wtagent:v3
    ports:
      - "3000:3000"
    restart: unless-stopped
  textgen:
    image: huggingface/text-generation-inference:1.4
    ports:
      - "8080:80"
    command: ["--model-id", "/data/models/meta-llamaLlama-2-70b-chat-hf"]
    volumes:
     - /home/test/llm-test/serving/data:/data
    deploy:
      resources:
        reservations:
          devices:
          - driver: nvidia
            count: 8
            capabilities: [gpu]
    restart: unless-stopped
  keycloak:
    image: keycloak:v2
    command: start-dev
    environment:
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: admin
    ports:
      - "8081:8080"
    restart: unless-stopped

the content of .env.local wtagent:v3 of is as follows:

# Use .env.local to change these variables
# DO NOT EDIT THIS FILE WITH SENSITIVE DATA

MONGODB_DB_NAME=chat-ui
MONGODB_DIRECT_CONNECTION=false

COOKIE_NAME=hf-chat
HF_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
HF_API_ROOT=https://api-inference.huggingface.co/models
OPENAI_API_KEY=#your openai api key here

HF_ACCESS_TOKEN=#LEGACY! Use HF_TOKEN instead

# used to activate search with web functionality. disabled if none are defined. choose one of the following:
YDC_API_KEY=#your docs.you.com api key here
SERPER_API_KEY=#your serper.dev api key here
SERPAPI_KEY=#your serpapi key here
SERPSTACK_API_KEY=#your serpstack api key here
USE_LOCAL_WEBSEARCH=#set to true to parse google results yourself, overrides other API keys
SEARXNG_QUERY_URL=# where '<query>' will be replaced with query keywords see https://docs.searxng.org/dev/search_api.html eg https://searxng.yourdomain.com/search?q=<query>&engines=duckduckgo,google&format=json

WEBSEARCH_ALLOWLIST=`[]` # if it's defined, allow websites from only this list.
WEBSEARCH_BLOCKLIST=`[]` # if it's defined, block websites from this list.

# Parameters to enable open id login
OPENID_CONFIG=`{
  "PROVIDER_URL": "http://keycloak.domain/realms/wtagent",
  "CLIENT_ID": "wtagent-client",
  "CLIENT_SECRET": "R6Ge6hWmLmGXM5msdJsjmNKtS5XBToQu",
  "SCOPES": "openid profile"
}`

# /!\ legacy openid settings, prefer the config above
#OPENID_CLIENT_ID=
#OPENID_CLIENT_SECRET=
#OPENID_SCOPES="openid profile" # Add "email" for some providers like Google that do not provide preferred_username
#OPENID_PROVIDER_URL=https://huggingface.co # for Google, use https://accounts.google.com
#OPENID_TOLERANCE=
#OPENID_RESOURCE=

# Parameters to enable a global mTLS context for client fetch requests
USE_CLIENT_CERTIFICATE=false
CERT_PATH=#
KEY_PATH=#
CA_PATH=#
CLIENT_KEY_PASSWORD=#
REJECT_UNAUTHORIZED=true

TEXT_EMBEDDING_MODELS = `[
  {
    "name": "Xenova/gte-small",
    "displayName": "Xenova/gte-small",
    "description": "Local embedding model running on the server.",
    "chunkCharLength": 512,
    "endpoints": [
      { "type": "transformersjs" }
    ]
  }
]`

# 'name', 'userMessageToken', 'assistantMessageToken' are required
MODELS=`[
     {
      "name": "meta-llama/Llama-2-70b-chat-hf",
      "endpoints": [{
        "type" : "tgi",
        "url": "http://textgen:80",
        }],
      "preprompt": " ",
      "chatPromptTemplate" : "<s>[INST] <<SYS>>\n{{preprompt}}\n<</SYS>>\n\n{{#each messages}}{{#ifUser}}{{content}} [/INST] {{/ifUser}}{{#ifAssistant}}{{content}} </s><s>[INST] {{/ifAssistant}}{{/each}}",
      "promptExamples": [
        {
          "title": "Write an email from bullet list",
          "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
        }, {
          "title": "Code a snake game",
          "prompt": "Code a basic snake game in python, give explanations for each step."
        }, {
          "title": "Assist in a task",
          "prompt": "How do I make a delicious lemon cheesecake?"
        }
      ],
      "parameters": {
        "temperature": 0.1,
        "top_p": 0.95,
        "repetition_penalty": 1.2,
        "top_k": 50,
        "truncate": 1000,
        "max_new_tokens": 1024,
        "stop" : ["</s>", "</s><s>[INST]"]
      }
    }
]`

OLD_MODELS=`[]`# any removed models, `{ name: string, displayName?: string, id?: string }`
TASK_MODEL= # name of the model used for tasks such as summarizing title, creating query, etc.

PUBLIC_ORIGIN=#https://huggingface.co
PUBLIC_SHARE_PREFIX=#https://hf.co/chat
PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
PUBLIC_PLAUSIBLE_SCRIPT_URL=#/js/script.js / Leave empty to disable
PUBLIC_ANNOUNCEMENT_BANNERS=`[
    {
    "title": "Code Llama 70B is available! 🦙",
    "linkTitle": "try it",
    "linkHref": "https://huggingface.co/chat?model=codellama/CodeLlama-70b-Instruct-hf"
  }
]`

PARQUET_EXPORT_DATASET=
PARQUET_EXPORT_HF_TOKEN=
ADMIN_API_SECRET=# secret to admin API calls, like computing usage stats or exporting parquet data

PARQUET_EXPORT_SECRET=#DEPRECATED, use ADMIN_API_SECRET instead

RATE_LIMIT= # requests per minute
MESSAGES_BEFORE_LOGIN=# how many messages a user can send in a conversation before having to login. set to 0 to force login right away

APP_BASE="" # base path of the app, e.g. /chat, left blank as default
PUBLIC_APP_NAME=ChatUI # name used as title throughout the app
PUBLIC_APP_ASSETS=chatui # used to find logos & favicons in static/$PUBLIC_APP_ASSETS
PUBLIC_APP_COLOR=blue # can be any of tailwind colors: https://tailwindcss.com/docs/customizing-colors#default-color-palette
PUBLIC_APP_DESCRIPTION=# description used throughout the app (if not set, a default one will be used)
PUBLIC_APP_DATA_SHARING=#set to 1 to enable options & text regarding data sharing
PUBLIC_APP_DISCLAIMER=#set to 1 to show a disclaimer on login page
PUBLIC_APP_DISCLAIMER_MESSAGE="Disclaimer: AI is an area of active research with known problems such as biased generation and misinformation. Do not use this application for high-stakes decisions or advice."
LLM_SUMMERIZATION=true

EXPOSE_API=true
# PUBLIC_APP_NAME=HuggingChat
# PUBLIC_APP_ASSETS=huggingchat
# PUBLIC_APP_COLOR=yellow
# PUBLIC_APP_DESCRIPTION="Making the community's best AI chat models available to everyone."
# PUBLIC_APP_DATA_SHARING=1
# PUBLIC_APP_DISCLAIMER=1

ENABLE_ASSISTANTS=false #set to true to enable assistants feature

ALTERNATIVE_REDIRECT_URLS=`[]` #valide alternative redirect URL for OAuth

WEBHOOK_URL_REPORT_ASSISTANT=#provide webhook url to get notified when an assistant gets reported

ALLOWED_USER_EMAILS=`[]` # if it's defined, only these emails will be allowed to use the app
MONGODB_URL=mongodb://localhost:27017

I set root url, Valid redirect URIs and Valid post logout redirect URIs to http://chat-ui.ip:3000/* in wtagent-client. wtagent-client is a client in wtagent realm. I set up a user with the username test and password test in wtagent realm

Then I started three containers with the docker compose up command.

Then I logged in to http://chat-ui.ip:3000 using Chrome. Click the Sign in button. I will be redirected to http://keycloak.ip:8081/realms/wtagent/protocol/openid-connect/auth? client_id=wtagent-client&scope=openid%20profile&response_type=code&redirect_uri=http%3A%2F%2F56.40.1.166%3A3000%2Flogin%2Fcallback&state=eyJkYXRhIjp7ImV4cGlyYXRpb24iOjE3MDkxMjMwMzQzOTEsInJlZGlyZWN0VXJsIjoiaHR0cDovLzU2LjQwLjEuMTY2OjMwMDAvbG9naW4vY2FsbGJhY2sifSwic2lnbmF0dXJlIjoiNGI1ZWMwMTUxZDE0MzQxMTJiYTk1ZTc0MjZjZjE0M2RkMTNhMTU4OGY1ZDJjM2U2MzAwZTIzNWQ0YjQ3YjAwMyJ9. In the Username text box, enter test. In the Password text box, enter test. Then click "Sign in" and then it didn't log in. I'm back to the welcome screen that opens chat-ui and tells me I need to sign in. I looked at the output of the logs of the docker container. There's some misinformation:

wtagent-1   | (node:198) Warning: An error event has already been emitted on the socket. Please use the destroy method on the socket while handling a 'clientError' event.
wtagent-1   | (Use `node --trace-warnings ...` to show where the warning was created)

Then I checked the logs of the wtagent container. The logs are:

root@568f17b5085f:/app# node --trace-warnings ...
node:internal/modules/cjs/loader:1147
  throw err;
  ^

Error: Cannot find module '/app/...'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v20.11.1

What should i do inorder to fix this error?

it seems like docker image 'wtagent:v3' has problem , try to build chat-ui docker image by yourself, please dont share your ip address in comment for safe.

[majestichou]

Without keycloak, I'm accessing localhost:3000 locally, and the conversation service is working fine. So it shouldn't be a problem with wtagent:v3. Maybe I'm having trouble with keycloak. I create a realm and create a user and I set root url and valid uri and Valid Post Logout Redirect URI to my chat-ui domain in my keycloak`s client setting. Apart from that, is there anything else that must be done ?

[majestichou]

@ViokingTung I have something to trouble you. Could you please delete your answer? Because the answer exposed my IP.

[ViokingTung]

modified my comment already

[ViokingTung]

Without keycloak, I'm accessing localhost:3000 locally, and the conversation service is working fine. So it shouldn't be a problem with wtagent:v3. Maybe I'm having trouble with keycloak. I create a realm and create a user and I set root url and valid uri and Valid Post Logout Redirect URI to my chat-ui domain in my keycloak`s client setting. Apart from that, is there anything else that must be done ?

no, this`s all