docs(auth): mention escaping

packages/docs/src/components/toggle.vue

@@ -0,0 +1,96 @@
+<script setup>
+const checked = defineModel({
+  default: false,
+});
+
+function toggle() {
+  checked.value = !checked.value;
+}
+</script>
+
+<template>
+  <div class="switch-wrapper">
+    <div class="switch">
+      <input :id="$.uid" v-model="checked" type="checkbox" class="checkbox">
+      <div class="slider" @click="toggle" />
+    </div>
+
+    <label :id="$.uid" class="label" @click="toggle">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style scoped lang="less">
+.switch-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+  margin: 9px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--vp-custom-block-info-bg);
+  -webkit-transition: .4s;
+  transition: .4s cubic-bezier(0,1,0.5,1);
+  border-radius: 4px;
+  border-radius: 34px;
+
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 4px;
+  bottom: 4px;
+  background-color: var(--vp-c-bg);
+  -webkit-transition: .4s;
+  transition: .4s cubic-bezier(0,1,0.5,1);
+  border-radius: 3px;
+  border-radius: 50%;
+
+}
+
+input:checked + .slider {
+  background-color: var(--vp-c-brand-1);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 4px var(--vp-c-brand-1);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(22px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>

packages/docs/src/self-hosting/users-authentication-key-generator.md

@@ -1,21 +1,44 @@
 <script setup>
 import CredentialInputs from '../components/credential-inputs.vue'
-import { ref, computed } from 'vue'
+import Toggle from '../components/toggle.vue'
+import { ref, computed, watch } from 'vue'
 import bcrypt from 'bcryptjs'
 
 const credentials = ref([
     { email: '', password: '' },
 ])
 
+const shouldEscapeWithDollar = ref(false)
+const shouldEscapeWithBackslash = ref(false)
+
 const envValue = computed(() => {
     return credentials.value
     .filter(({ email, password }) => email && password)
-    .map(({ email, password }) => [
-        email,
-        bcrypt.hashSync(password, 10)
-    ].join(':')).join(',')
+    .map(({ email, password }) => {
+
+        const hashedPassword = bcrypt.hashSync(password, 10)
+        const escapedPassword = shouldEscapeWithDollar.value
+            ? hashedPassword.split('$').join('$$')
+            : shouldEscapeWithBackslash.value
+                ? hashedPassword.split('$').join('\\$')
+                : hashedPassword
+
+        return `${email}:${escapedPassword}`
+
+    }).join(',')
+})
+
+watch(shouldEscapeWithDollar, () => {
+    if (shouldEscapeWithDollar.value) {
+        shouldEscapeWithBackslash.value = false
+    }
 })
 
+watch(shouldEscapeWithBackslash, () => {
+    if (shouldEscapeWithBackslash.value) {
+        shouldEscapeWithDollar.value = false
+    }
+})
 </script>
 
 # User Authentication Key Generator
@@ -27,3 +50,19 @@ This tool generates the value for the `AUTHENTICATION_USERS` environment variabl
 ```txt-vue
 AUTHENTICATION_USERS={{ envValue }}
 ```
+
+<Toggle v-model="shouldEscapeWithDollar">
+    Escape for Docker Compose (use <code>$$</code> instead of <code>$</code>)
+</Toggle>
+
+<Toggle v-model="shouldEscapeWithBackslash">
+    Escape for Docker Run (use <code>\$</code> instead of <code>$</code>)
+</Toggle>
+
+---
+
+> [!INFO] Escaping in Docker Run
+> When using env variables in docker run command with `-e` on bash, the `$` character should be escaped in the password hash. For example, `\$2a\$10\$...`.
+
+> [!INFO] Escaping in Docker Compose
+> When using env variables in docker-compose, the `$` character should be escaped with another `$`. For example, `$$2a$$10$$...`.