From 06cec624117df6cb9d26828bd58ab70a83e925ab Mon Sep 17 00:00:00 2001
From: Jeremy Wright <jeremy@clerk.dev>
Date: Thu, 16 Jan 2025 06:50:01 +0530
Subject: [PATCH 1/3] feat: Add advanced localization

---
 docs/customization/localization.mdx | 50 +++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/docs/customization/localization.mdx b/docs/customization/localization.mdx
index 3b51ede253..a0e848ce65 100644
--- a/docs/customization/localization.mdx
+++ b/docs/customization/localization.mdx
@@ -348,3 +348,53 @@ const localization = {
   },
 }
 ```
+
+## Advanced
+
+### Dynamically update localization
+
+> [!WARNING]
+> This relies on an unstable and experimental function.
+> It is subject to change or removal at any time.
+
+> [!NOTE]
+> This will only work in client side Javascript and will not persist through a refresh.
+
+<Tabs items={["Next.js"]}>
+  <Tab>
+    ```tsx {{ filename: 'page.tsx' }}
+    'use client'
+    // IThis is for example purposes only, import only the languages you need.
+    import * as localization from '@clerk/localizations'
+    import { useClerk, UserButton } from '@clerk/nextjs'
+
+    export default function Page() {
+      const clerk = useClerk()
+
+      const changeLanguage = (lang: keyof typeof localization) => {
+        //@ts-ignore - This isn't included in types.
+        clerk.__unstable__updateProps({
+          options: {
+            localization: localization[lang],
+          },
+        })
+      }
+
+      return (
+        <div>
+          <UserButton />
+          <select
+            onChange={(e) => {
+              changeLanguage(e.target.value as keyof typeof localization)
+            }}
+          >
+            {Object.keys(localization).map((lang, index) => (
+              <option key={index}>{lang}</option>
+            ))}
+          </select>
+        </div>
+      )
+    }
+    ```
+  </Tab>
+</Tabs>

From a9dd6e66062de1df274cfb86269a2a1d1826a7e0 Mon Sep 17 00:00:00 2001
From: Jeremy Wright <jeremy@clerk.dev>
Date: Thu, 16 Jan 2025 09:46:55 +0530
Subject: [PATCH 2/3] feat: Add advanced localization customization

---
 docs/customization/localization.mdx | 77 ++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/docs/customization/localization.mdx b/docs/customization/localization.mdx
index a0e848ce65..555c993ba8 100644
--- a/docs/customization/localization.mdx
+++ b/docs/customization/localization.mdx
@@ -349,7 +349,82 @@ const localization = {
 }
 ```
 
-## Advanced
+## Advanced Usage
+
+### Customization
+
+If you want to customize values of an imported localization, you can use the following:
+
+```ts
+import { enUS } from '@clerk/localizations'
+
+enUS.signIn!.start!.title = 'Howdy! Sign In To {{applicationName}}'
+```
+
+If you want to update multiple values of an imported localization, you can use a function that resembles this:
+
+```ts
+import { enUS } from '@clerk/localizations'
+
+const updateLocalization = (obj: any, path: string, val: string) => {
+  path
+    .split('.')
+    .reduce((a, k, i, { length }) => (i + 1 === length ? (a[k] = val) : (a[k] ??= {})), obj)
+  return obj
+}
+
+const customLocalizations = [
+  ['signIn.start.actionLink__use_passkey', 'Use a passkey from your device instead'],
+  ['signIn.start.subtitle', 'Welcome back!!!'],
+  ['signIn.start.title', 'Howdy Partner! Sign In To {{applicationName}}'],
+]
+
+customLocalizations.forEach(([key, value]) => set(enUS, key, value))
+```
+
+Let's add some type safety and put it all together:
+
+```tsx {{ filename: 'localization.ts' }}
+import { enUS } from '@clerk/localizations'
+import { LocalizationResource } from '@clerk/types'
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${'' extends P ? '' : '.'}${P}`
+    : never
+  : never
+
+type Paths<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+    ? {
+        [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never
+      }[keyof T]
+    : ''
+
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+export const updateLocalization = <T extends object>(obj: T, path: Paths<T>, val: string): T => {
+  ;(path as string)
+    .split('.')
+    .reduce((a, k, i, { length }) => (i + 1 === length ? (a[k] = val) : (a[k] ??= {})), obj as any)
+  return obj
+}
+
+const customLocalizations = new Map<Paths<LocalizationResource>, string>([
+  ['signIn.start.actionLink__use_passkey', 'Use a passkey from your device instead'],
+  ['signIn.start.subtitle', 'Welcome back!!!'],
+  ['signIn.start.title', 'Howdy Partner! Sign In To {{applicationName}}'],
+])
+
+export const localization = (() => {
+  const modified = { ...enUS }
+  customLocalizations.forEach((value, key) => updateLocalization(modified, key, value))
+  return modified
+})()
+
+export default localization
+```
 
 ### Dynamically update localization
 

From 34bb8b2d94301450abf04ed3f26d4d7ee7ef4e8a Mon Sep 17 00:00:00 2001
From: Jeremy Wright <jeremy@clerk.dev>
Date: Thu, 16 Jan 2025 09:56:55 +0530
Subject: [PATCH 3/3] fix: Stop prettier from running on code block

---
 docs/customization/localization.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/customization/localization.mdx b/docs/customization/localization.mdx
index 555c993ba8..dfc3f1dce9 100644
--- a/docs/customization/localization.mdx
+++ b/docs/customization/localization.mdx
@@ -384,7 +384,7 @@ customLocalizations.forEach(([key, value]) => set(enUS, key, value))
 
 Let's add some type safety and put it all together:
 
-```tsx {{ filename: 'localization.ts' }}
+```tsx {{ filename: 'localization.ts', prettier: false }}
 import { enUS } from '@clerk/localizations'
 import { LocalizationResource } from '@clerk/types'
 
@@ -405,7 +405,7 @@ type Paths<T, D extends number = 10> = [D] extends [never]
 type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
 export const updateLocalization = <T extends object>(obj: T, path: Paths<T>, val: string): T => {
-  ;(path as string)
+  (path as string)
     .split('.')
     .reduce((a, k, i, { length }) => (i + 1 === length ? (a[k] = val) : (a[k] ??= {})), obj as any)
   return obj