diff --git a/docs/advanced-usage/using-proxies.mdx b/docs/advanced-usage/using-proxies.mdx index 7c053bebc5..4e24707c2c 100644 --- a/docs/advanced-usage/using-proxies.mdx +++ b/docs/advanced-usage/using-proxies.mdx @@ -285,38 +285,18 @@ When using a proxy, all requests to the Frontend API will be made through your d To configure your proxy setup using properties in your JavaScript application, pass the `proxyUrl` option to the [`load()`](/docs/references/javascript/clerk/clerk#load) method. - "]}> - ```js {{ filename: 'main.js' }} - import { Clerk } from '@clerk/clerk-js' + ```js {{ filename: 'main.js' }} + import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') + // Initialize Clerk with your Clerk publishable key + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - await clerk.load({ - proxyUrl: 'https://app.dev/__clerk', - }) - ``` + const clerk = new Clerk(clerkPubKey) - ```html {{ filename: 'index.html' }} - - - - - ``` - + await clerk.load({ + proxyUrl: 'https://app.dev/__clerk', + }) + ``` diff --git a/docs/components/authentication/google-one-tap.mdx b/docs/components/authentication/google-one-tap.mdx index cae665f66c..41509e3817 100644 --- a/docs/components/authentication/google-one-tap.mdx +++ b/docs/components/authentication/google-one-tap.mdx @@ -112,46 +112,22 @@ function openGoogleOneTap(params: GoogleOneTapProps): void #### `openGoogleOneTap()` usage -']}> - ```js {{ filename: 'index.js', mark: [[7, 12]] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - const params = { - cancelOnTapOutside: false, - itpSupport: false, - fedCmSupport: false, - } - clerk.openGoogleOneTap(params) - ``` - - ```html {{ filename: 'index.html', mark: [[14, 19]] }} - - - - - ``` - +```js {{ filename: 'main.js', mark: [[9, 14]] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(clerkPubKey) +await clerk.load() + +const params = { + cancelOnTapOutside: false, + itpSupport: false, + fedCmSupport: false, +} +clerk.openGoogleOneTap(params) +``` ### `closeGoogleOneTap()` @@ -163,57 +139,26 @@ function closeGoogleOneTap(): void #### `closeGoogleOneTap()` usage -']}> - ```js {{ filename: 'index.js', mark: [16] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - const params = { - cancelOnTapOutside: false, - itpSupport: false, - fedCmSupport: false, - } - clerk.openGoogleOneTap(params) - - // Do something else - - clerk.closeGoogleOneTap() - ``` - - ```html {{ filename: 'index.html', mark: [26] }} - -
- - - - - - ``` - +```js {{ filename: 'main.js', mark: [18] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(clerkPubKey) +await clerk.load() + +const params = { + cancelOnTapOutside: false, + itpSupport: false, + fedCmSupport: false, +} +clerk.openGoogleOneTap(params) + +// Do something else + +clerk.closeGoogleOneTap() +``` ### `authenticateWithGoogleOneTap()` @@ -236,52 +181,25 @@ function authenticateWithGoogleOneTap( #### `authenticateWithGoogleOneTap()` usage -']}> - ```js {{ filename: 'index.js', mark: [[7, 15]] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - // Optionally, you can set redirect URLs. - const customUrls = { - signInUrl: '/sign-in', - signUpUrl: '/sign-up', - } - // Initiate the authentication flow. - const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' }) - // Set the session as active, and handle any navigation or redirects - await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls) - ``` - - ```html {{ filename: 'index.html', mark: [[14, 22]] }} - - - - - ``` - +```js {{ filename: 'main.js', mark: [[9, 17]] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(clerkPubKey) +await clerk.load() + +// Optionally, you can set redirect URLs. +const customUrls = { + signInUrl: '/sign-in', + signUpUrl: '/sign-up', +} +// Initiate the authentication flow. +const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' }) +// Set the session as active, and handle any navigation or redirects +await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls) +``` ### `handleGoogleOneTapCallback()` diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 4639e09793..b180e73ebb 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -182,48 +182,23 @@ function mountSignIn(node: HTMLDivElement, props?: SignInProps): void #### `mountSignIn()` usage -']}> - ```js {{ filename: 'index.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountSignIn(signInDiv) +``` ### `unmountSignIn()` @@ -244,56 +219,27 @@ function unmountSignIn(node: HTMLDivElement): void #### `unmountSignIn()` usage -']}> - ```js {{ filename: 'index.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'index.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const signInDiv = document.getElementById('sign-in') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountSignIn(signInDiv) - - // ... - - clerk.unmountSignIn(signInDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.unmountSignIn(signInDiv) +``` ### `openSignIn()` @@ -314,37 +260,17 @@ function openSignIn(props?: SignInProps): void #### `openSignIn()` usage -']}> - ```js {{ filename: 'index.js', mark: [7] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - clerk.openSignIn() - ``` - - ```html {{ filename: 'index.html', mark: [15] }} - - - - - ``` - +```js {{ filename: 'main.js', mark: [9] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(clerkPubKey) +await clerk.load() + +clerk.openSignIn() +``` ### `closeSignIn()` @@ -356,45 +282,21 @@ function closeSignIn(): void #### `closeSignIn()` usage -']}> - ```js {{ filename: 'index.js', mark: [11] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'index.js', mark: [13] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.openSignIn() +const clerk = new Clerk(clerkPubKey) +await clerk.load() - // ... +clerk.openSignIn() - clerk.closeSignIn() - ``` +// ... - ```html {{ filename: 'index.html', mark: [19] }} - - - - - ``` - +clerk.closeSignIn() +``` ## Customization diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index a4b407937d..f7f47eef2d 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -175,48 +175,23 @@ function mountSignUp(node: HTMLDivElement, props?: SignUpProps): void #### `mountSignUp()` usage -']}> - ```typescript {{ filename: 'index.ts', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```typescript {{ filename: 'main.ts', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const signUpDiv = document.getElementById('sign-up') - - clerk.mountSignUp(signUpDiv) - ``` - - ```html {{ filename: 'index.js', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountSignUp(signUpDiv) +``` ### `unmountSignUp()` @@ -237,56 +212,27 @@ function unmountSignUp(node: HTMLDivElement): void #### `unmountSignUp()` usage -']}> - ```typescript {{ filename: 'index.ts', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```typescript {{ filename: 'main.ts', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const signUpDiv = document.getElementById('sign-up') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountSignUp(signUpDiv) - - // ... - - clerk.unmountSignUp(signUpDiv) - ``` - - ```html {{ filename: 'index.js', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.unmountSignUp(signUpDiv) +``` ### `openSignUp()` @@ -307,37 +253,17 @@ function openSignUp(props?: SignUpProps): void #### `openSignUp()` usage -']}> - ```js {{ filename: 'index.ts', mark: [7] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - clerk.openSignUp() - ``` - - ```html {{ filename: 'index.html', mark: [15] }} - - - - - ``` - +```js {{ filename: 'main.js', mark: [9] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(clerkPubKey) +await clerk.load() + +clerk.openSignUp() +``` ### `closeSignUp()` @@ -349,45 +275,21 @@ function closeSignUp(): void #### `closeSignUp()` usage -']}> - ```js {{ filename: 'index.ts', mark: [11] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [13] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.openSignUp() +const clerk = new Clerk(clerkPubKey) +await clerk.load() - // ... +clerk.openSignUp() - clerk.closeSignUp() - ``` +// ... - ```html {{ filename: 'index.html', mark: [19] }} - - - - - ``` - +clerk.closeSignUp() +``` ## Customization diff --git a/docs/components/organization/create-organization.mdx b/docs/components/organization/create-organization.mdx index e6634c3e74..3454c910b0 100644 --- a/docs/components/organization/create-organization.mdx +++ b/docs/components/organization/create-organization.mdx @@ -146,48 +146,23 @@ function mountCreateOrganization(node: HTMLDivElement, props?: CreateOrganizatio #### `mountCreateOrganization()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const createOrgDiv = document.getElementById('create-organization') - - clerk.mountCreateOrganization(createOrgDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountCreateOrganization(createOrgDiv) +``` ### unmountCreateOrganization() @@ -208,56 +183,27 @@ function unmountCreateOrganization(node: HTMLDivElement): void #### `unmountCreateOrganization()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const createOrgDiv = document.getElementById('create-organization') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountCreateOrganization(createOrgDiv) - - // ... - - clerk.unmountCreateOrganization(createOrgDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - +const createOrgDiv = document.getElementById('create-organization') - - ``` - +clerk.unmountCreateOrganization(createOrgDiv) +``` ### `openCreateOrganization()` @@ -278,48 +224,23 @@ function openCreateOrganization(props?: CreateOrganizationProps): void #### `openCreateOrganization()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const createOrgDiv = document.getElementById('create-organization') - - clerk.openCreateOrganization(createOrgDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.openCreateOrganization(createOrgDiv) +``` ### `closeCreateOrganization()` @@ -331,56 +252,27 @@ function closeCreateOrganization(): void #### `closeCreateOrganization()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const createOrgDiv = document.getElementById('create-organization') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.openCreateOrganization(createOrgDiv) - - // ... - - clerk.closeCreateOrganization(createOrgDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - +const createOrgDiv = document.getElementById('create-organization') - - ``` - +clerk.closeCreateOrganization(createOrgDiv) +``` ## Customization diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx index 24c8a2eda5..23f333e359 100644 --- a/docs/components/organization/organization-list.mdx +++ b/docs/components/organization/organization-list.mdx @@ -177,48 +177,23 @@ function mountOrganizationList(node: HTMLDivElement, props?: OrganizationListPro ### `mountOrganizationList()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const orgListDiv = document.getElementById('organization-list') - - clerk.mountOrganizationList(orgListDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountOrganizationList(orgListDiv) +``` ## `unmountOrganizationList()` @@ -239,56 +214,27 @@ function unmountOrganizationList(node: HTMLDivElement): void ### `unmountOrganizationList()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - const orgListDiv = document.getElementById('organization-list') +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.mountOrganizationList(orgListDiv) +const clerk = new Clerk(clerkPubKey) +await clerk.load() - // ... - - clerk.unmountOrganizationList(orgListDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.unmountOrganizationList(orgListDiv) +``` ## Force organizations diff --git a/docs/components/organization/organization-profile.mdx b/docs/components/organization/organization-profile.mdx index 620b365ccd..06e8350605 100644 --- a/docs/components/organization/organization-profile.mdx +++ b/docs/components/organization/organization-profile.mdx @@ -143,48 +143,23 @@ function mountOrganizationProfile(node: HTMLDivElement, props?: OrganizationProf #### `mountOrganizationProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const orgProfileDiv = document.getElementById('organization-profile') - - clerk.mountOrganizationProfile(orgProfileDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountOrganizationProfile(orgProfileDiv) +``` ### unmountOrganizationProfile() @@ -205,56 +180,27 @@ function unmountOrganizationProfile(node: HTMLDivElement): void #### `unmountOrganizationProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const orgProfileDiv = document.getElementById('organization-profile') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountOrganizationProfile(orgProfileDiv) - - // ... - - clerk.unmountOrganizationProfile(orgProfileDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.unmountOrganizationProfile(orgProfileDiv) +``` ### `openOrganizationProfile()` @@ -275,48 +221,23 @@ function openOrganizationProfile(props?: OrganizationProfileProps): void #### `openOrganizationProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - const orgProfileDiv = document.getElementById('organization-profile') +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.openOrganizationProfile(orgProfileDiv) - ``` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.openOrganizationProfile(orgProfileDiv) +``` ### `closeOrganizationProfile()` @@ -328,48 +249,23 @@ function closeOrganizationProfile(): void #### `closeOrganizationProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - const orgProfileDiv = document.getElementById('organization-profile') +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.closeOrganizationProfile(orgProfileDiv) - ``` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +const orgProfileDiv = document.getElementById('organization-profile') + +clerk.closeOrganizationProfile(orgProfileDiv) +``` ## Customization diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx index ecc6f7184a..4631c64094 100644 --- a/docs/components/organization/organization-switcher.mdx +++ b/docs/components/organization/organization-switcher.mdx @@ -204,48 +204,23 @@ function mountOrganizationSwitcher(node: HTMLDivElement, props?: OrganizationSwi ### mountOrganizationSwitcher() usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const orgSwitcherDiv = document.getElementById('organization-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountOrganizationSwitcher(orgSwitcherDiv) +``` ## unmountOrganizationSwitcher() @@ -266,56 +241,27 @@ function unmountOrganizationSwitcher(node: HTMLDivElement): void ### unmountOrganizationSwitcher() usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const orgSwitcherDiv = document.getElementById('organization-switcher') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - - // ... - - clerk.unmountOrganizationSwitcher(orgSwitcherDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - +const orgSwitcherDiv = document.getElementById('organization-switcher') - - ``` - +clerk.unmountOrganizationSwitcher(orgSwitcherDiv) +``` ## Customization diff --git a/docs/components/user/user-button.mdx b/docs/components/user/user-button.mdx index 859fa93e73..db405de874 100644 --- a/docs/components/user/user-button.mdx +++ b/docs/components/user/user-button.mdx @@ -284,48 +284,23 @@ function mountUserButton(node: HTMLDivElement, props?: UserButtonProps): void #### `mountUserButton()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountUserButton(userbuttonDiv) +``` ### `unmountUserButton()` @@ -346,56 +321,27 @@ function unmountUserButton(node: HTMLDivElement): void #### `unmountUserButton()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const userButtonDiv = document.getElementById('user-button') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountUserButton(userButtonDiv) - - // ... - - clerk.unmountUserButton(userButtonDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - +const userButtonDiv = document.getElementById('user-button') - - ``` - +clerk.unmountUserButton(userButtonDiv) +``` ## Customization diff --git a/docs/components/user/user-profile.mdx b/docs/components/user/user-profile.mdx index 4f1a37a149..2a5609828e 100644 --- a/docs/components/user/user-profile.mdx +++ b/docs/components/user/user-profile.mdx @@ -139,48 +139,23 @@ function mountUserProfile(node: HTMLDivElement, props?: UserProfileProps): void #### `mountUserProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - document.getElementById('app').innerHTML = ` -
- ` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - const userProfileDiv = document.getElementById('user-profile') - - clerk.mountUserProfile(userProfileDiv) - ``` - - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.mountUserProfile(userProfileDiv) +``` ### `unmountUserProfile()` @@ -201,56 +176,27 @@ function unmountUserProfile(node: HTMLDivElement): void #### `unmountUserProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [17] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() +```js {{ filename: 'main.js', mark: [19] }} +import { Clerk } from '@clerk/clerk-js' - document.getElementById('app').innerHTML = ` -
- ` +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const userProfileDiv = document.getElementById('user-profile') +const clerk = new Clerk(clerkPubKey) +await clerk.load() - clerk.mountUserProfile(userProfileDiv) - - // ... - - clerk.unmountUserProfile(userProfileDiv) - ``` - - ```html {{ filename: 'index.html', mark: [24] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.unmountUserProfile(userProfileDiv) +``` ### `openUserProfile()` @@ -271,48 +217,23 @@ function openUserProfile(props?: UserProfileProps): void #### `openUserProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - const userProfileDiv = document.getElementById('user-profile') +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.openUserProfile(userProfileDiv) - ``` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +clerk.openUserProfile(userProfileDiv) +``` ### `closeUserProfile()` @@ -324,48 +245,23 @@ function closeUserProfile(): void #### `closeUserProfile()` usage -']}> - ```js {{ filename: 'main.js', mark: [13] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` +```js {{ filename: 'main.js', mark: [15] }} +import { Clerk } from '@clerk/clerk-js' - const userProfileDiv = document.getElementById('user-profile') +// Initialize Clerk with your Clerk publishable key +const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.closeUserProfile(userProfileDiv) - ``` +const clerk = new Clerk(clerkPubKey) +await clerk.load() - ```html {{ filename: 'index.html', mark: [20] }} - +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +const userProfileDiv = document.getElementById('user-profile') + +clerk.closeUserProfile(userProfileDiv) +``` ## Customization diff --git a/docs/custom-flows/email-password-mfa.mdx b/docs/custom-flows/email-password-mfa.mdx index 90550768ec..f62557fe21 100644 --- a/docs/custom-flows/email-password-mfa.mdx +++ b/docs/custom-flows/email-password-mfa.mdx @@ -171,251 +171,123 @@ This guide will walk you through how to build a custom email/password sign-in fl - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - - - -
-
+ + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign in

+
+ + + + + +
+
- + - - - - ``` + + + + ``` - ```js {{ filename: 'main.js', collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` + const clerk = new Clerk(pubKey) + await clerk.load() - const userbuttonDiv = document.getElementById('user-button') + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-in form - document.getElementById('sign-in-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const emailAddress = formData.get('email') - const password = formData.get('password') - - try { - // Start the sign-in process - await clerk.client.signIn.create({ - identifier: emailAddress, - password, - }) - - // Hide sign-in form - document.getElementById('sign-in').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } - }) + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-in form + document.getElementById('sign-in-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const emailAddress = formData.get('email') + const password = formData.get('password') - // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const totp = formData.get('totp') - const backupCode = formData.get('backupCode') - - try { - const useBackupCode = backupCode ? true : false - const code = backupCode ? backupCode : totp - - // Attempt the TOTP or backup code verification - const signInAttempt = await clerk.client.signIn.attemptSecondFactor({ - strategy: useBackupCode ? 'backup_code' : 'totp', - code: code, - }) - - // If verification was completed, set the session to active - // and redirect the user - if (signInAttempt.status === 'complete') { - await clerk.setActive({ session: signInAttempt.createdSessionId }) - - location.reload() - } else { - // If the status is not complete, check why. User may need to - // complete further steps. - console.error(signInAttempt) - } - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } + try { + // Start the sign-in process + await clerk.client.signIn.create({ + identifier: emailAddress, + password, }) - } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - - - -
-
- + // Hide sign-in form + document.getElementById('sign-in').setAttribute('hidden', '') + // Show verification form + document.getElementById('verifying').removeAttribute('hidden') + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + + // Handle the verification form + document.getElementById('verifying').addEventListener('submit', async (e) => { + const formData = new FormData(e.target) + const totp = formData.get('totp') + const backupCode = formData.get('backupCode') + + try { + const useBackupCode = backupCode ? true : false + const code = backupCode ? backupCode : totp + + // Attempt the TOTP or backup code verification + const signInAttempt = await clerk.client.signIn.attemptSecondFactor({ + strategy: useBackupCode ? 'backup_code' : 'totp', + code: code, + }) - - - - - - ``` - - + // If verification was completed, set the session to active + // and redirect the user + if (signInAttempt.status === 'complete') { + await clerk.setActive({ session: signInAttempt.createdSessionId }) + + location.reload() + } else { + // If the status is not complete, check why. User may need to + // complete further steps. + console.error(signInAttempt) + } + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + } + ``` + diff --git a/docs/custom-flows/email-password.mdx b/docs/custom-flows/email-password.mdx index 68d9ca6bec..2b751f5fac 100644 --- a/docs/custom-flows/email-password.mdx +++ b/docs/custom-flows/email-password.mdx @@ -157,211 +157,104 @@ This guide will walk you through how to build a custom email/password sign-up an - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - -
-
- - - - - - - ``` - - ```js {{ filename: 'main.js', collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-up form - document.getElementById('sign-up-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const emailAddress = formData.get('email') - const password = formData.get('password') - - try { - // Start the sign-up process using the email and password provided - await clerk.client.signUp.create({ emailAddress, password }) - await clerk.client.signUp.prepareEmailAddressVerification() - // Hide sign-up form - document.getElementById('sign-up').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } - }) + + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign up

+
+ + + + + +
+
- // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const code = formData.get('code') - - try { - // Use the code the user provided to attempt verification - const signUpAttempt = await clerk.client.signUp.attemptEmailAddressVerification({ - code, - }) - - // Now that the user is created, set the session to active. - await clerk.setActive({ session: signUpAttempt.createdSessionId }) - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } - }) + + + + + + ``` + + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-up form + document.getElementById('sign-up-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const emailAddress = formData.get('email') + const password = formData.get('password') + + try { + // Start the sign-up process using the email and password provided + await clerk.client.signUp.create({ emailAddress, password }) + await clerk.client.signUp.prepareEmailAddressVerification() + // Hide sign-up form + document.getElementById('sign-up').setAttribute('hidden', '') + // Show verification form + document.getElementById('verifying').removeAttribute('hidden') + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - -
-
+ }) - + // Handle the verification form + document.getElementById('verifying').addEventListener('submit', async (e) => { + const formData = new FormData(e.target) + const code = formData.get('code') + + try { + // Use the code the user provided to attempt verification + const signUpAttempt = await clerk.client.signUp.attemptEmailAddressVerification({ + code, + }) - - - - - - ``` - - + // Now that the user is created, set the session to active. + await clerk.setActive({ session: signUpAttempt.createdSessionId }) + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + } + ``` + @@ -679,175 +572,86 @@ This guide will walk you through how to build a custom email/password sign-up an - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - - - -
-
- - - - - ``` - - ```js {{ filename: 'main.js', collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-in form - document.getElementById('sign-in-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const emailAddress = formData.get('email') - const password = formData.get('password') - - try { - // Start the sign-in process - const signInAttempt = await clerk.client.signIn.create({ - identifier: emailAddress, - password, - }) - - // If the sign-in is complete, set the user as active - if (signInAttempt.status === 'complete') { - await clerk.setActive({ session: signInAttempt.createdSessionId }) - - location.reload() - } else { - // If the status is not complete, check why. User may need to - // complete further steps. - console.error(JSON.stringify(signInAttempt, null, 2)) - } - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } + + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign in

+
+ + + + + +
+
+ + + + + ``` + + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-in form + document.getElementById('sign-in-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const emailAddress = formData.get('email') + const password = formData.get('password') + + try { + // Start the sign-in process + const signInAttempt = await clerk.client.signIn.create({ + identifier: emailAddress, + password, }) - } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - - - -
-
- - - - - - ``` - - + // If the sign-in is complete, set the user as active + if (signInAttempt.status === 'complete') { + await clerk.setActive({ session: signInAttempt.createdSessionId }) + + location.reload() + } else { + // If the status is not complete, check why. User may need to + // complete further steps. + console.error(JSON.stringify(signInAttempt, null, 2)) + } + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + } + ``` + diff --git a/docs/custom-flows/email-sms-otp.mdx b/docs/custom-flows/email-sms-otp.mdx index 4f62634c30..af644e1dcf 100644 --- a/docs/custom-flows/email-sms-otp.mdx +++ b/docs/custom-flows/email-sms-otp.mdx @@ -135,205 +135,101 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign- - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - -
-
- - - - - - - ``` - - ```js {{ filename: 'main.js', collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-up form - document.getElementById('sign-up-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const phoneNumber = formData.get('phone') - - try { - // Start the sign-up process using the phone number method - await clerk.client.signUp.create({ phoneNumber }) - await clerk.client.signUp.preparePhoneNumberVerification() - // Hide sign-up form - document.getElementById('sign-up').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } - }) + + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign up

+
+ + + +
+
- // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const code = formData.get('code') - - try { - // Verify the phone number - const verify = await clerk.client.signUp.attemptPhoneNumberVerification({ - code, - }) - - // Now that the user is created, set the session to active. - await clerk.setActive({ session: verify.createdSessionId }) - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } - }) + + + + + + ``` + + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-up form + document.getElementById('sign-up-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const phoneNumber = formData.get('phone') + + try { + // Start the sign-up process using the phone number method + await clerk.client.signUp.create({ phoneNumber }) + await clerk.client.signUp.preparePhoneNumberVerification() + // Hide sign-up form + document.getElementById('sign-up').setAttribute('hidden', '') + // Show verification form + document.getElementById('verifying').removeAttribute('hidden') + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - -
-
- - + }) + + // Handle the verification form + document.getElementById('verifying').addEventListener('submit', async (e) => { + const formData = new FormData(e.target) + const code = formData.get('code') + + try { + // Verify the phone number + const verify = await clerk.client.signUp.attemptPhoneNumberVerification({ + code, + }) - - - - - - ``` - - + // Now that the user is created, set the session to active. + await clerk.setActive({ session: verify.createdSessionId }) + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + } + ``` + @@ -541,241 +437,119 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign- - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - -
-
- - - - - - - ``` - - ```js {{ filename: 'main.js', collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-in form - document.getElementById('sign-in-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const phone = formData.get('phone') - - try { - // Start the sign-in process using the user's identifier. - // In this case, it's their phone number. - const { supportedFirstFactors } = await clerk.client.signIn.create({ - identifier: phone, - }) - - // Find the phoneNumberId from all the available first factors for the current sign-in - const firstPhoneFactor = supportedFirstFactors.find((factor) => { - return factor.strategy === 'phone_code' - }) - - const { phoneNumberId } = firstPhoneFactor - - // Prepare first factor verification, specifying - // the phone code strategy. - await clerk.client.signIn.prepareFirstFactor({ - strategy: 'phone_code', - phoneNumberId, - }) - - // Hide sign-in form - document.getElementById('sign-in').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } + + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign in

+
+ + + +
+
+ + + + + + + ``` + + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-in form + document.getElementById('sign-in-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const phone = formData.get('phone') + + try { + // Start the sign-in process using the user's identifier. + // In this case, it's their phone number. + const { supportedFirstFactors } = await clerk.client.signIn.create({ + identifier: phone, }) - // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const code = formData.get('code') - - try { - // Verify the phone number - const verify = await clerk.client.signIn.attemptFirstFactor({ - strategy: 'phone_code', - code, - }) - - // Now that the user is created, set the session to active. - await clerk.setActive({ session: verify.createdSessionId }) - } catch (error) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(error) - } + // Find the phoneNumberId from all the available first factors for the current sign-in + const firstPhoneFactor = supportedFirstFactors.find((factor) => { + return factor.strategy === 'phone_code' }) + + const { phoneNumberId } = firstPhoneFactor + + // Prepare first factor verification, specifying + // the phone code strategy. + await clerk.client.signIn.prepareFirstFactor({ + strategy: 'phone_code', + phoneNumberId, + }) + + // Hide sign-in form + document.getElementById('sign-in').setAttribute('hidden', '') + // Show verification form + document.getElementById('verifying').removeAttribute('hidden') + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign in

-
- - - -
-
- - + }) - - - - - - ``` - - + // Handle the verification form + document.getElementById('verifying').addEventListener('submit', async (e) => { + const formData = new FormData(e.target) + const code = formData.get('code') + + try { + // Verify the phone number + const verify = await clerk.client.signIn.attemptFirstFactor({ + strategy: 'phone_code', + code, + }) + + // Now that the user is created, set the session to active. + await clerk.setActive({ session: verify.createdSessionId }) + } catch (error) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(error) + } + }) + } + ``` + diff --git a/docs/custom-flows/error-handling.mdx b/docs/custom-flows/error-handling.mdx index 81b08db8e2..d402febe8b 100644 --- a/docs/custom-flows/error-handling.mdx +++ b/docs/custom-flows/error-handling.mdx @@ -112,223 +112,110 @@ The following example uses the [email & password sign-in custom flow](/docs/cust - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html' }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - -
-
- - - -

- - - - - ``` - - ```js {{ filename: 'main.js' }} - import Clerk from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Handle the sign-up form - document.getElementById('sign-up-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const emailAddress = formData.get('email') - const password = formData.get('password') - - try { - // Start the sign-up process using the phone number method - await clerk.client.signUp.create({ emailAddress, password }) - await clerk.client.signUp.prepareEmailAddressVerification() - // Hide sign-up form - document.getElementById('sign-up').setAttribute('hidden', '') - // Show verification form - document.getElementById('verifying').removeAttribute('hidden') - } catch (err) { - if (isClerkAPIResponseError(err)) { - const errors = err.errors - document.getElementById('error').textContent = errors[0].longMessage - } - console.error(JSON.stringify(err, null, 2)) - } - }) + + ```html {{ filename: 'index.html' }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign up

+
+ + + + + +
+
- // Handle the verification form - document.getElementById('verifying').addEventListener('submit', async (e) => { - const formData = new FormData(e.target) - const code = formData.get('code') - - try { - // Verify the phone number - const verify = await clerk.client.signUp.attemptEmailAddressVerification({ - code, - }) - - // Now that the user is created, set the session to active. - await clerk.setActive({ session: verify.createdSessionId }) - } catch (err) { - if (isClerkAPIResponseError(err)) { - const errors = err.errors - document.getElementById('error').textContent = errors[0].longMessage - } - console.error(JSON.stringify(err, null, 2)) - } - }) + + +

+ + + + + ``` + + ```js {{ filename: 'main.js' }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Handle the sign-up form + document.getElementById('sign-up-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const emailAddress = formData.get('email') + const password = formData.get('password') + + try { + // Start the sign-up process using the phone number method + await clerk.client.signUp.create({ emailAddress, password }) + await clerk.client.signUp.prepareEmailAddressVerification() + // Hide sign-up form + document.getElementById('sign-up').setAttribute('hidden', '') + // Show verification form + document.getElementById('verifying').removeAttribute('hidden') + } catch (err) { + if (isClerkAPIResponseError(err)) { + const errors = err.errors + document.getElementById('error').textContent = errors[0].longMessage + } + console.error(JSON.stringify(err, null, 2)) } - ``` - - - - - ```html {{ filename: 'index.html' }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - -
-
+ }) - + // Handle the verification form + document.getElementById('verifying').addEventListener('submit', async (e) => { + const formData = new FormData(e.target) + const code = formData.get('code') + + try { + // Verify the phone number + const verify = await clerk.client.signUp.attemptEmailAddressVerification({ + code, + }) -

- - - - - - - ``` - - + // Now that the user is created, set the session to active. + await clerk.setActive({ session: verify.createdSessionId }) + } catch (err) { + if (isClerkAPIResponseError(err)) { + const errors = err.errors + document.getElementById('error').textContent = errors[0].longMessage + } + console.error(JSON.stringify(err, null, 2)) + } + }) + } + ``` + diff --git a/docs/custom-flows/invitations.mdx b/docs/custom-flows/invitations.mdx index 286af10024..12d73336ea 100644 --- a/docs/custom-flows/invitations.mdx +++ b/docs/custom-flows/invitations.mdx @@ -131,186 +131,93 @@ To create a sign-up flow using the invitation token, you need to extract the tok - "]}> - - ```html {{ filename: 'index.html' }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - - - -
-
- - - - - ``` - - ```js {{ filename: 'main.js' }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Mount user button component - document.getElementById('signed-in').innerHTML = ` -
- ` - - const userbuttonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userbuttonDiv) - } else { - // Get the token from the query parameter - const param = '__clerk_ticket' - const token = new URL(window.location.href).searchParams.get(param) - - // Handle the sign-up form - document.getElementById('sign-up-form').addEventListener('submit', async (e) => { - e.preventDefault() - - const formData = new FormData(e.target) - const firstName = formData.get('firstName') - const lastName = formData.get('lastName') - const password = formData.get('password') - - try { - // Start the sign-up process using the ticket method - const signUpAttempt = await clerk.client.signUp.create({ - strategy: 'ticket', - ticket: token, - firstName, - lastName, - password, - }) - - // If sign-up was successful, set the session to active - if (signUpAttempt.status === 'complete') { - await clerk.setActive({ session: signUpAttempt.createdSessionId }) - } else { - // If the status is not complete, check why. User may need to - // complete further steps. - console.error(JSON.stringify(signUpAttempt, null, 2)) - } - } catch (err) { - // See https://clerk.com/docs/custom-flows/error-handling - // for more info on error handling - console.error(JSON.stringify(err, null, 2)) + + ```html {{ filename: 'index.html' }} + + + + + + Clerk + JavaScript App + + +
+ +
+

Sign up

+
+ + + + + + + +
+
+ + + + + ``` + + ```js {{ filename: 'main.js' }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Mount user button component + document.getElementById('signed-in').innerHTML = ` +
+ ` + + const userbuttonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userbuttonDiv) + } else { + // Get the token from the query parameter + const param = '__clerk_ticket' + const token = new URL(window.location.href).searchParams.get(param) + + // Handle the sign-up form + document.getElementById('sign-up-form').addEventListener('submit', async (e) => { + e.preventDefault() + + const formData = new FormData(e.target) + const firstName = formData.get('firstName') + const lastName = formData.get('lastName') + const password = formData.get('password') + + try { + // Start the sign-up process using the ticket method + const signUpAttempt = await clerk.client.signUp.create({ + strategy: 'ticket', + ticket: token, + firstName, + lastName, + password, + }) + + // If sign-up was successful, set the session to active + if (signUpAttempt.status === 'complete') { + await clerk.setActive({ session: signUpAttempt.createdSessionId }) + } else { + // If the status is not complete, check why. User may need to + // complete further steps. + console.error(JSON.stringify(signUpAttempt, null, 2)) } - }) - } - ``` - - - - ```html {{ filename: 'index.html' }} - - - - - - Clerk + JavaScript App - - -
- -
-

Sign up

-
- - - - - - - -
-
- - - - - - - ``` - - + } catch (err) { + // See https://clerk.com/docs/custom-flows/error-handling + // for more info on error handling + console.error(JSON.stringify(err, null, 2)) + } + }) + } + ``` + diff --git a/docs/custom-flows/sign-out.mdx b/docs/custom-flows/sign-out.mdx index 16a61f4498..0d8d4db267 100644 --- a/docs/custom-flows/sign-out.mdx +++ b/docs/custom-flows/sign-out.mdx @@ -38,91 +38,43 @@ The `signOut()` function signs a user out of all sessions in a [multi-session ap - "]}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - - Clerk + JavaScript App - - - -
- - - - - ``` - - ```js {{ filename: 'main.js', collapsible: true }} - import Clerk from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Attach signOut function to the sign-out button - document.getElementById('sign-out').addEventListener('click', async () => { - await clerk.signOut() - // Optional: refresh page after sign-out - window.location.reload() - }) - } - ``` - - - - - ```html {{ filename: 'index.html', collapsible: true }} - - - - - - - Clerk + JavaScript App - - - -
- - - - - - - - - - ``` - - + + ```html {{ filename: 'index.html', collapsible: true }} + + + + + + + Clerk + JavaScript App + + + +
+ + + + + ``` + + ```js {{ filename: 'main.js', collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + // Attach signOut function to the sign-out button + document.getElementById('sign-out').addEventListener('click', async () => { + await clerk.signOut() + // Optional: refresh page after sign-out + window.location.reload() + }) + } + ``` + diff --git a/docs/customization/organization-profile.mdx b/docs/customization/organization-profile.mdx index 9e648c1698..bbc6216f84 100644 --- a/docs/customization/organization-profile.mdx +++ b/docs/customization/organization-profile.mdx @@ -162,114 +162,56 @@ The following example demonstrates two ways that you can render content in the ` ### JavaScript example -To add custom pages to the `` component using the [JavaScript SDK](/docs/references/javascript/overview), you can pass the `customPages` property to the `mountOrganizationProfile()` or `openOrganizationProfile()` method, as shown in the following example: - -']}> - ```js {{ filename: 'main.js' }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` - - const orgProfileDiv = document.getElementById('organization-profile') - - clerk.openOrganizationProfile(orgProfileDiv, { - customPages: [ - { - url: 'custom-page', - label: 'Custom Page', - mountIcon: (el) => { - el.innerHTML = '👋' - }, - unmountIcon: (el) => { - el.innerHTML = '' - }, - mount: (el) => { - el.innerHTML = ` -

Custom Page

-

This is the content of the custom page.

- ` - }, - unmount: (el) => { - el.innerHTML = '' - }, - }, - { - url: '/other-page', - label: 'Other Page', - mountIcon: (el) => { - el.innerHTML = '🌐' - }, - unmountIcon: (el) => { - el.innerHTML = '' - }, - }, - ], - }) - ``` +To add custom pages to the `` component using the [JavaScript SDK](/docs/references/javascript/overview), you can pass the `customPages` property to the `mountOrganizationProfile()` or `openOrganizationProfile()` method, as shown in the following example: + +```js {{ filename: 'main.js' }} +import { Clerk } from '@clerk/clerk-js' - ```html {{ filename: 'index.html' }} - +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +document.getElementById('app').innerHTML = `
+` - - - - - ``` - +const orgProfileDiv = document.getElementById('organization-profile') + +clerk.openOrganizationProfile(orgProfileDiv, { + customPages: [ + { + url: 'custom-page', + label: 'Custom Page', + mountIcon: (el) => { + el.innerHTML = '👋' + }, + unmountIcon: (el) => { + el.innerHTML = '' + }, + mount: (el) => { + el.innerHTML = ` +

Custom Page

+

This is the content of the custom page.

+ ` + }, + unmount: (el) => { + el.innerHTML = '' + }, + }, + { + url: '/other-page', + label: 'Other Page', + mountIcon: (el) => { + el.innerHTML = '🌐' + }, + unmountIcon: (el) => { + el.innerHTML = '' + }, + }, + ], +}) +``` ## Add a custom link to `` diff --git a/docs/customization/user-profile.mdx b/docs/customization/user-profile.mdx index cab1ceafcb..4cd67fe367 100644 --- a/docs/customization/user-profile.mdx +++ b/docs/customization/user-profile.mdx @@ -210,112 +210,54 @@ The following example demonstrates two ways that you can render content in the ` To add custom pages to the `` component using the [JavaScript SDK](/docs/references/javascript/overview), you can pass the `customPages` property to the `mountUserProfile()` or `openUserProfile()` method, as shown in the following example: -']}> - ```js {{ filename: 'main.js' }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - document.getElementById('app').innerHTML = ` -
- ` - - const userProfileDiv = document.getElementById('user-profile') - - clerk.openUserProfile(userProfileDiv, { - customPages: [ - { - url: 'custom-page', - label: 'Custom Page', - mountIcon: (el) => { - el.innerHTML = '👋' - }, - unmountIcon: (el) => { - el.innerHTML = '' - }, - mount: (el) => { - el.innerHTML = ` -

Custom Page

-

This is the content of the custom page.

- ` - }, - unmount: (el) => { - el.innerHTML = '' - }, - }, - { - url: '/other-page', - label: 'Other Page', - mountIcon: (el) => { - el.innerHTML = '🌐' - }, - unmountIcon: (el) => { - el.innerHTML = '' - }, - }, - ], - }) - ``` +```js {{ filename: 'main.js' }} +import { Clerk } from '@clerk/clerk-js' + +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - ```html {{ filename: 'index.html' }} - +const clerk = new Clerk(pubKey) +await clerk.load() + +document.getElementById('app').innerHTML = `
+` + +const userProfileDiv = document.getElementById('user-profile') - - - - - ``` - +clerk.openUserProfile(userProfileDiv, { + customPages: [ + { + url: 'custom-page', + label: 'Custom Page', + mountIcon: (el) => { + el.innerHTML = '👋' + }, + unmountIcon: (el) => { + el.innerHTML = '' + }, + mount: (el) => { + el.innerHTML = ` +

Custom Page

+

This is the content of the custom page.

+ ` + }, + unmount: (el) => { + el.innerHTML = '' + }, + }, + { + url: '/other-page', + label: 'Other Page', + mountIcon: (el) => { + el.innerHTML = '🌐' + }, + unmountIcon: (el) => { + el.innerHTML = '' + }, + }, + ], +}) +``` ## Add a custom link to \ diff --git a/docs/references/javascript/clerk/organization-methods.mdx b/docs/references/javascript/clerk/organization-methods.mdx index cfb90e844e..d52cfb29e2 100644 --- a/docs/references/javascript/clerk/organization-methods.mdx +++ b/docs/references/javascript/clerk/organization-methods.mdx @@ -31,110 +31,61 @@ function getOrganization(organizationId: string): Promise']}> - - - ```js {{ filename: 'main.js', mark: [9, 10] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - if (clerk.organization.id) { - await clerk - .getOrganization(clerk.organization.id) - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` - - const orgSwitcherDiv = document.getElementById('org-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - ```html {{ filename: 'index.html', mark: [19] }} -
- - - - - - ``` - - + + ```js {{ filename: 'main.js', mark: [10, 11] }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + if (clerk.organization.id) { + await clerk + .getOrganization(clerk.organization.id) + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) + } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active + document.getElementById('app').innerHTML = ` +

Select an organization to set it as active

+
+ ` + + const orgSwitcherDiv = document.getElementById('org-switcher') + + clerk.mountOrganizationSwitcher(orgSwitcherDiv) + } + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + ## `createOrganization()` @@ -165,87 +116,48 @@ function createOrganization({ name, slug }: CreateOrganizationParams): Promise']}> - - - ```js {{ filename: 'main.js', mark: [[10, 13]] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - const createOrgButton = document.getElementById('create-org-button') - createOrgButton.addEventListener('click', () => { - clerk - .createOrganization({ name: 'test' }) - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - }) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - - ``` - - - - - ```html {{ filename: 'index.html', mark: [[21, 23]] }} -
-
- - - - - - ``` - - + + ```js {{ filename: 'main.js', mark: [[11, 14]] }} + import { Clerk } from '@clerk/clerk-js' + + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) + await clerk.load() + + if (clerk.user) { + const createOrgButton = document.getElementById('create-org-button') + createOrgButton.addEventListener('click', () => { + clerk + .createOrganization({ name: 'test' }) + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) + }) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + + ``` + diff --git a/docs/references/javascript/organization-invitation.mdx b/docs/references/javascript/organization-invitation.mdx index 54d33bc17a..c13f1e3dce 100644 --- a/docs/references/javascript/organization-invitation.mdx +++ b/docs/references/javascript/organization-invitation.mdx @@ -86,12 +86,12 @@ It assumes: - you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application - you have [enabled the Organizations feature in your Clerk Dashboard](/docs/organizations/overview#enable-organizations-in-your-application) -']}> - ```js {{ filename: 'main.js', mark: [21, 22] }} + ```js {{ filename: 'main.js', mark: [22, 23] }} import { Clerk } from '@clerk/clerk-js' - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') + const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(pubKey) await clerk.load() if (clerk.user) { @@ -135,65 +135,3 @@ It assumes: clerk.mountSignIn(signInDiv) } ``` - - ```html {{ filename: 'index.html', mark: [31, 32] }} -
- - - - - - ``` - diff --git a/docs/references/javascript/organization/domains.mdx b/docs/references/javascript/organization/domains.mdx index 4273c78320..e5d7169e17 100644 --- a/docs/references/javascript/organization/domains.mdx +++ b/docs/references/javascript/organization/domains.mdx @@ -36,93 +36,44 @@ function createDomain(domainName: string): Promise ### Example -']}> - ```js {{ filename: 'main.js', mark: [10, 11] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - await clerk.organization - .createDomain('test-domain.com') - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` - - const orgSwitcherDiv = document.getElementById('org-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } +```js {{ filename: 'main.js', mark: [11, 12] }} +import { Clerk } from '@clerk/clerk-js' + +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + await clerk.organization + .createDomain('test-domain.com') + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active document.getElementById('app').innerHTML = ` -
+

Select an organization to set it as active

+
` - const signInDiv = document.getElementById('sign-in') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountSignIn(signInDiv) + clerk.mountOrganizationSwitcher(orgSwitcherDiv) } - ``` - - ```html {{ filename: 'index.html', mark: [20, 21] }} -
- - - - - - ``` - +} else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) +} +``` ## `getDomains()` @@ -163,93 +114,44 @@ function getDomains(params?: GetDomainsParams): Promise']}> - ```js {{ filename: 'main.js', mark: [10, 11] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - await clerk.organization - .getDomains() - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` - - const orgSwitcherDiv = document.getElementById('org-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } +```js {{ filename: 'main.js', mark: [11, 12] }} +import { Clerk } from '@clerk/clerk-js' + +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + await clerk.organization + .getDomains() + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active document.getElementById('app').innerHTML = ` -
+

Select an organization to set it as active

+
` - const signInDiv = document.getElementById('sign-in') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountSignIn(signInDiv) + clerk.mountOrganizationSwitcher(orgSwitcherDiv) } - ``` - - ```html {{ filename: 'index.html', mark: [20, 21] }} -
- - - - - - ``` - +} else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) +} +``` ## `getDomain()` @@ -276,96 +178,45 @@ function getDomain(params: GetDomainParams): Promise ### Example -']}> - ```js {{ filename: 'main.js', mark: [12, 13] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - const domainId = 'orgdmn_123' - - await clerk.organization - .getDomain({ domainId }) - .then((res) => console.log(`Domains:`, res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` - - const orgSwitcherDiv = document.getElementById('org-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } +```js {{ filename: 'main.js', mark: [13, 14] }} +import { Clerk } from '@clerk/clerk-js' + +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + const domainId = 'orgdmn_123' + + await clerk.organization + .getDomain({ domainId }) + .then((res) => console.log(`Domains:`, res)) + .catch((error) => console.log('An error occurred:', error.errors)) } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active document.getElementById('app').innerHTML = ` -
+

Select an organization to set it as active

+
` - const signInDiv = document.getElementById('sign-in') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountSignIn(signInDiv) + clerk.mountOrganizationSwitcher(orgSwitcherDiv) } - ``` - - ```html {{ filename: 'index.html', mark: [22, 23] }} -
- - - - - - ``` - +} else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) +} +``` [org-domain-ref]: /docs/references/javascript/organization-domain diff --git a/docs/references/javascript/organization/invitations.mdx b/docs/references/javascript/organization/invitations.mdx index 32b83247e7..f77c96e025 100644 --- a/docs/references/javascript/organization/invitations.mdx +++ b/docs/references/javascript/organization/invitations.mdx @@ -51,95 +51,45 @@ function getInvitations( ### Example -']}> - ```js {{ filename: 'main.js', mark: [10, 11] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - await clerk.organization - .getInvitations() - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` - - const orgSwitcherDiv = document.getElementById('org-switcher') - - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } +```js {{ filename: 'main.js', mark: [12, 13] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + await clerk.organization + .getInvitations() + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active document.getElementById('app').innerHTML = ` -
+

Select an organization to set it as active

+
` - const signInDiv = document.getElementById('sign-in') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountSignIn(signInDiv) + clerk.mountOrganizationSwitcher(orgSwitcherDiv) } - ``` - - ```html {{ filename: 'index.html', mark: [20, 21] }} -
- - - - - - ``` - +} else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) +} +``` ## `inviteMember()` @@ -173,101 +123,48 @@ function inviteMember(params: InviteMemberParams): Promise']}> - ```js {{ filename: 'main.js', mark: [13, 14] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - const emailAddress = 'test@test.com' - const role = 'org:member' - - await clerk.organization - .inviteMember({ emailAddress, role }) - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` -

Select an organization to set it as active

-
- ` +```js {{ filename: 'main.js', mark: [15, 16] }} +import { Clerk } from '@clerk/clerk-js' - const orgSwitcherDiv = document.getElementById('org-switcher') +// Initialize Clerk with your Clerk publishable key +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + const emailAddress = 'test@test.com' + const role = 'org:member' + + await clerk.organization + .inviteMember({ emailAddress, role }) + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active document.getElementById('app').innerHTML = ` -
+

Select an organization to set it as active

+
` - const signInDiv = document.getElementById('sign-in') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountSignIn(signInDiv) + clerk.mountOrganizationSwitcher(orgSwitcherDiv) } - ``` - - ```html {{ filename: 'index.html', mark: [23, 24] }} -
- - - - - - ``` - +} else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) +} +``` ## `inviteMembers()` @@ -301,100 +198,47 @@ function inviteMembers(params: InviteMembersParams): Promise']}> - ```js {{ filename: 'main.js', mark: [13, 14] }} - import { Clerk } from '@clerk/clerk-js' - - // Initialize Clerk with your Clerk publishable key - const clerk = new Clerk('{{pub_key}}') - await clerk.load() - - if (clerk.user) { - // Check for an active organization - if (clerk.organization) { - const emailAddresses = ['test@test.com', 'test2@test.com', 'test3@test.com'] - const role = 'org:member' - - await clerk.organization - .inviteMembers({ emailAddresses, role }) - .then((res) => console.log(res)) - .catch((error) => console.log('An error occurred:', error.errors)) - } else { - // If there is no active organization, - // mount Clerk's - // to allow the user to set an organization as active - document.getElementById('app').innerHTML = ` +```js {{ filename: 'main.js', mark: [15, 16] }} +import { Clerk } from '@clerk/clerk-js' + +// Initialize Clerk with your Clerk publishable key +const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + +const clerk = new Clerk(pubKey) +await clerk.load() + +if (clerk.user) { + // Check for an active organization + if (clerk.organization) { + const emailAddresses = ['test@test.com', 'test2@test.com', 'test3@test.com'] + const role = 'org:member' + + await clerk.organization + .inviteMembers({ emailAddresses, role }) + .then((res) => console.log(res)) + .catch((error) => console.log('An error occurred:', error.errors)) + } else { + // If there is no active organization, + // mount Clerk's + // to allow the user to set an organization as active + document.getElementById('app').innerHTML = `

Select an organization to set it as active

` - const orgSwitcherDiv = document.getElementById('org-switcher') + const orgSwitcherDiv = document.getElementById('org-switcher') - clerk.mountOrganizationSwitcher(orgSwitcherDiv) - } - } else { - document.getElementById('app').innerHTML = ` + clerk.mountOrganizationSwitcher(orgSwitcherDiv) + } +} else { + document.getElementById('app').innerHTML = `
` - const signInDiv = document.getElementById('sign-in') + const signInDiv = document.getElementById('sign-in') - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html', mark: [23, 24] }} -
- - - - - - ``` - + clerk.mountSignIn(signInDiv) +} +``` [orginv-ref]: /docs/references/javascript/organization-invitation diff --git a/docs/references/javascript/organization/members.mdx b/docs/references/javascript/organization/members.mdx index 5d2db0cb30..51a7c18dd8 100644 --- a/docs/references/javascript/organization/members.mdx +++ b/docs/references/javascript/organization/members.mdx @@ -142,440 +142,217 @@ function removeMember(userId: string): Promise The following example demonstrates how to use the organization membership methods to manage the members of an organization. To ease the development process, the response or error message of a method will be displayed on the user interface. -']}> - - Use the following tabs to view the code necessary for each file. - - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - - -
- - - -

Memberships List

- - - - - - - - - - - -
User IDIdentifierRole
- -
-

Add member

- - -
- -

Response:

- 

-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js', mark: [13, 41, 58, 75] }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        // Check for an active organization
-        if (clerk.organization) {
-          // Render list of organization memberships
-          async function renderMemberships(organization, isAdmin) {
-            try {
-              const { data } = await organization.getMemberships()
-
-              const memberships = data
-              console.log(`getMemberships:`, memberships)
-
-              memberships.map((membership) => {
-                const membershipTable = document.getElementById('memberships_table')
-                const row = membershipTable.insertRow()
-                row.insertCell().textContent = membership.publicUserData.userId
-                row.insertCell().textContent = membership.publicUserData.identifier
-                row.insertCell().textContent = membership.role
-
-                // Add administrative actions:
-                // Add and remove a member, and update a member's role.
-                if (isAdmin) {
-                  // Show add, update, remove member buttons
-                  document.getElementById('add-member-container').removeAttribute('hidden')
-                  document.getElementById('update-role-head').removeAttribute('hidden')
-                  document.getElementById('remove-member-head').removeAttribute('hidden')
-
-                  // Get the user ID of the member
-                  const userId = membership.publicUserData.userId
-
-                  // Update a member's role
-                  const updateBtn = document.createElement('button')
-                  updateBtn.textContent = 'Change role'
-                  updateBtn.addEventListener('click', async function (e) {
-                    e.preventDefault()
-                    const role = membership.role === 'org:admin' ? 'org:member' : 'org:admin'
-                    await organization
-                      .updateMember({ userId, role })
-                      .then((res) => {
-                        document.getElementById('response').innerHTML = JSON.stringify(res)
-                      })
-                      .catch((error) => {
-                        document.getElementById('error-container').removeAttribute('hidden')
-                        document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-                        console.log('An error occurred:', error.errors)
-                      })
+        /* Style for table cells */
+        td,
+        th {
+          border: 1px solid black; /* Border for each cell */
+          padding: 2px; /* Optional: Add padding to cells */
+        }
+      
+    
+    
+      

+
+      
+
+      
Memberships List

+      
+        
+          
+            
+            
+            
+            
+            
+          
+        
+        
+      
User IDIdentifierRole

+
+      

+        
Add member

+        
+        
+      

+
+      
Response:

+      

+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js', mark: [15, 45, 63, 80], collapsible: true }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(pubKey)
+  await clerk.load()
+
+  if (clerk.user) {
+    // Check for an active organization
+    if (clerk.organization) {
+      // Render list of organization memberships
+      async function renderMemberships(organization, isAdmin) {
+        try {
+          const { data } = await organization.getMemberships()
+
+          const memberships = data
+          console.log(`getMemberships:`, memberships)
+
+          memberships.map((membership) => {
+            const membershipTable = document.getElementById('memberships_table')
+            const row = membershipTable.insertRow()
+            row.insertCell().textContent = membership.publicUserData.userId
+            row.insertCell().textContent = membership.publicUserData.identifier
+            row.insertCell().textContent = membership.role
+
+            // Add administrative actions:
+            // Add and remove a member, and update a member's role.
+            if (isAdmin) {
+              // Show add, update, remove member buttons
+              document.getElementById('add-member-container').removeAttribute('hidden')
+              document.getElementById('update-role-head').removeAttribute('hidden')
+              document.getElementById('remove-member-head').removeAttribute('hidden')
+
+              // Get the user ID of the member
+              const userId = membership.publicUserData.userId
+
+              // Update a member's role
+              const updateBtn = document.createElement('button')
+              updateBtn.textContent = 'Change role'
+              updateBtn.addEventListener('click', async function (e) {
+                e.preventDefault()
+                const role = membership.role === 'org:admin' ? 'org:member' : 'org:admin'
+                await organization
+                  .updateMember({ userId, role })
+                  .then((res) => {
+                    document.getElementById('response').innerHTML = JSON.stringify(res)
+                  })
+                  .catch((error) => {
+                    document.getElementById('error-container').removeAttribute('hidden')
+                    document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+                    console.log('An error occurred:', error.errors)
                   })
-                  row.insertCell().appendChild(updateBtn)
-
-                  // Remove a member
-                  const removeBtn = document.createElement('button')
-                  removeBtn.textContent = 'Remove'
-                  removeBtn.addEventListener('click', async function (e) {
-                    e.preventDefault()
-                    await organization
-                      .removeMember(userId)
-                      .then((res) => {
-                        document.getElementById('response').innerHTML = JSON.stringify(res)
-                      })
-                      .catch((error) => {
-                        document.getElementById('error-container').removeAttribute('hidden')
-                        document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-                        console.log('An error occurred:', error.errors)
-                      })
+              })
+              row.insertCell().appendChild(updateBtn)
+
+              // Remove a member
+              const removeBtn = document.createElement('button')
+              removeBtn.textContent = 'Remove'
+              removeBtn.addEventListener('click', async function (e) {
+                e.preventDefault()
+                await organization
+                  .removeMember(userId)
+                  .then((res) => {
+                    document.getElementById('response').innerHTML = JSON.stringify(res)
                   })
-                  row.insertCell().appendChild(removeBtn)
-
-                  // Add a new member to the organization
-                  document.getElementById('add-member').addEventListener('click', () => {
-                    const userId = document.getElementById('member-user-id').value
-
-                    organization
-                      .addMember({ userId, role: 'org:member' })
-                      .then((res) => {
-                        document.getElementById('response').innerHTML = JSON.stringify(res)
-                      })
-                      .catch((error) => {
-                        document.getElementById('error-container').removeAttribute('hidden')
-                        document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-                        console.log('An error occurred:', error.errors)
-                      })
+                  .catch((error) => {
+                    document.getElementById('error-container').removeAttribute('hidden')
+                    document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+                    console.log('An error occurred:', error.errors)
                   })
-                }
               })
-            } catch (error) {
-              document.getElementById('error-container').removeAttribute('hidden')
-              document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-              console.log('An error occurred:', error.errors)
-            }
-          }
-
-          /**
-           * Checks if a user is an admin of the
-           * currently active organization and
-           * renders the organization's memberships.
-           */
-          async function checkAdminAndRenderMemberships() {
-            const organizationId = clerk.organization.id
-
-            const { data } = await clerk.user.getOrganizationMemberships()
-
-            const organizationMemberships = data
+              row.insertCell().appendChild(removeBtn)
 
-            const currentMembership = organizationMemberships.find(
-              (membership) => membership.organization.id === organizationId,
-            )
-            const currentOrganization = currentMembership.organization
+              // Add a new member to the organization
+              document.getElementById('add-member').addEventListener('click', () => {
+                const userId = document.getElementById('member-user-id').value
 
-            if (!currentOrganization) {
-              return
+                organization
+                  .addMember({ userId, role: 'org:member' })
+                  .then((res) => {
+                    document.getElementById('response').innerHTML = JSON.stringify(res)
+                  })
+                  .catch((error) => {
+                    document.getElementById('error-container').removeAttribute('hidden')
+                    document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+                    console.log('An error occurred:', error.errors)
+                  })
+              })
             }
-            const isAdmin = currentMembership.role === 'org:admin'
+          })
+        } catch (error) {
+          document.getElementById('error-container').removeAttribute('hidden')
+          document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+          console.log('An error occurred:', error.errors)
+        }
+      }
 
-            console.log(`Organization:`, currentOrganization)
+      /**
+       * Checks if a user is an admin of the
+       * currently active organization and
+       * renders the organization's memberships.
+       */
+      async function checkAdminAndRenderMemberships() {
+        const organizationId = clerk.organization.id
 
-            renderMemberships(currentOrganization, isAdmin)
-          }
+        const { data } = await clerk.user.getOrganizationMemberships()
 
-          checkAdminAndRenderMemberships()
-        } else {
-          // If there is no active organization,
-          // mount Clerk's 
-          // to allow the user to set an organization as active
-          document.getElementById('app').innerHTML = `
-            
Select an organization to set it as active

-            

-          `
+        const organizationMemberships = data
 
-          const orgSwitcherDiv = document.getElementById('org-switcher')
+        const currentMembership = organizationMemberships.find(
+          (membership) => membership.organization.id === organizationId,
+        )
+        const currentOrganization = currentMembership.organization
 
-          clerk.mountOrganizationSwitcher(orgSwitcherDiv)
+        if (!currentOrganization) {
+          return
         }
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
+        const isAdmin = currentMembership.role === 'org:admin'
 
-        const signInDiv = document.getElementById('sign-in')
+        console.log(`Organization:`, currentOrganization)
 
-        clerk.mountSignIn(signInDiv)
+        renderMemberships(currentOrganization, isAdmin)
       }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html', mark: [74, 102, 120, 138] }}
-    
-    
-      
-        
-        
-        
-        Clerk + JavaScript App
-        
-      
-      
-        

-
-        
-
-        
Memberships List

-        
-          
-            
-              
-              
-              
-              
-              
-            
-          
-          
-        
User IDIdentifierRole

-
-        

-          
Add member

-          
-          
-        

-
-        
Response:

-        

-
-        
-        
-
-        
-      
-    
-    ```
-  
-
+
+      checkAdminAndRenderMemberships()
+    } else {
+      // If there is no active organization,
+      // mount Clerk's 
+      // to allow the user to set an organization as active
+      document.getElementById('app').innerHTML = `
+        
Select an organization to set it as active

+        

+      `
+
+      const orgSwitcherDiv = document.getElementById('org-switcher')
+
+      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
+    }
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
 
 [pag-ref]: /docs/references/javascript/types/clerk-paginated-response
 
diff --git a/docs/references/javascript/organization/membership-request.mdx b/docs/references/javascript/organization/membership-request.mdx
index ec94efc8b2..8b765d6b01 100644
--- a/docs/references/javascript/organization/membership-request.mdx
+++ b/docs/references/javascript/organization/membership-request.mdx
@@ -54,344 +54,167 @@ function getMembershipRequests(
 
 The following example demonstrates how to use the `getMembershipRequests()` method to render a table of membership requests for the active organization. To ease the development process, the response or error message of a method will be displayed on the user interface.
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-          
-        
-        
-          

-
-          
-
-          
Membership Requests

-          
-            
-              
-                
-                
-                
-                
-              
-            
-            
-          
User IDIdentifierStatus

-
-          
Response:

-          

-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js', mark: [13] }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        // Check for an active organization
-        if (clerk.organization) {
-          // Render list of organization membership requests
-          async function renderMembershipRequests(organization, isAdmin) {
-            try {
-              const { data } = await organization.getMembershipRequests()
-              const membershipRequests = data
-              console.log(`getMembershipRequests:`, membershipRequests)
-
-              membershipRequests.map((membershipRequest) => {
-                const requestsTable = document.getElementById('requests_table')
-                const row = requestsTable.insertRow()
-                row.insertCell().textContent = membershipRequest.publicUserData.userId
-                row.insertCell().textContent = membershipRequest.publicUserData.identifier
-                row.insertCell().textContent = membershipRequest.status
-
-                // Add administrative actions:
-                // Add member (removes request)
-                if (isAdmin) {
-                  // Show add member button
-                  document.getElementById('add-member-head').removeAttribute('hidden')
-
-                  // Get the user ID of the member
-                  const userId = membershipRequest.publicUserData.userId
-
-                  // Add member to organization
-                  const addBtn = document.createElement('button')
-                  addBtn.textContent = 'Add member'
-                  addBtn.addEventListener('click', async function (e) {
-                    e.preventDefault()
-
-                    const role = 'org:member'
-
-                    await organization
-                      .addMember({ userId, role })
-                      .then((res) => {
-                        document.getElementById('response').innerHTML = JSON.stringify(res)
-                      })
-                      .catch((error) => {
-                        document.getElementById('error-container').removeAttribute('hidden')
-                        document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-                        console.log('An error occurred:', error.errors)
-                      })
+
+  ```html {{ filename: 'index.html' }}
+  
+  
+    
+      
+      
+      
+      Clerk + JavaScript App
+      
+    
+    
+      

+
+      
+
+      
Membership Requests

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+      
User IDIdentifierStatus

+
+      
Response:

+      

+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js', mark: [13] }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const clerk = new Clerk('{{pub_key}}')
+  await clerk.load()
+
+  if (clerk.user) {
+    // Check for an active organization
+    if (clerk.organization) {
+      // Render list of organization membership requests
+      async function renderMembershipRequests(organization, isAdmin) {
+        try {
+          const { data } = await organization.getMembershipRequests()
+          const membershipRequests = data
+          console.log(`getMembershipRequests:`, membershipRequests)
+
+          membershipRequests.map((membershipRequest) => {
+            const requestsTable = document.getElementById('requests_table')
+            const row = requestsTable.insertRow()
+            row.insertCell().textContent = membershipRequest.publicUserData.userId
+            row.insertCell().textContent = membershipRequest.publicUserData.identifier
+            row.insertCell().textContent = membershipRequest.status
+
+            // Add administrative actions:
+            // Add member (removes request)
+            if (isAdmin) {
+              // Show add member button
+              document.getElementById('add-member-head').removeAttribute('hidden')
+
+              // Get the user ID of the member
+              const userId = membershipRequest.publicUserData.userId
+
+              // Add member to organization
+              const addBtn = document.createElement('button')
+              addBtn.textContent = 'Add member'
+              addBtn.addEventListener('click', async function (e) {
+                e.preventDefault()
+
+                const role = 'org:member'
+
+                await organization
+                  .addMember({ userId, role })
+                  .then((res) => {
+                    document.getElementById('response').innerHTML = JSON.stringify(res)
+                  })
+                  .catch((error) => {
+                    document.getElementById('error-container').removeAttribute('hidden')
+                    document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+                    console.log('An error occurred:', error.errors)
                   })
-                  row.insertCell().appendChild(addBtn)
-                }
               })
-            } catch (error) {
-              document.getElementById('error-container').removeAttribute('hidden')
-              document.getElementById('error-message').innerHTML = error.errors[0].longMessage
-              console.log('An error occurred:', error.errors)
+              row.insertCell().appendChild(addBtn)
             }
-          }
-
-          /**
-           * Checks if a user is an admin of the
-           * currently active organization and
-           * renders the organization's membership requests.
-           */
-          async function checkAdminAndRenderRequests() {
-            const organizationId = clerk.organization.id
-
-            const organizationMemberships = await clerk.user.getOrganizationMemberships()
-
-            const currentMembership = organizationMemberships.find(
-              (membership) => membership.organization.id === organizationId,
-            )
-            const currentOrganization = currentMembership.organization
-
-            if (!currentOrganization) {
-              return
-            }
-            const isAdmin = currentMembership.role === 'org:admin'
-
-            console.log(`Organization:`, currentOrganization)
+          })
+        } catch (error) {
+          document.getElementById('error-container').removeAttribute('hidden')
+          document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+          console.log('An error occurred:', error.errors)
+        }
+      }
 
-            renderMembershipRequests(currentOrganization, isAdmin)
-          }
+      /**
+       * Checks if a user is an admin of the
+       * currently active organization and
+       * renders the organization's membership requests.
+       */
+      async function checkAdminAndRenderRequests() {
+        const organizationId = clerk.organization.id
 
-          checkAdminAndRenderRequests()
-        } else {
-          // If there is no active organization,
-          // mount Clerk's 
-          // to allow the user to set an organization as active
-          document.getElementById('app').innerHTML = `
-            
Select an organization to set it as active

-            

-          `
+        const organizationMemberships = await clerk.user.getOrganizationMemberships()
 
-          const orgSwitcherDiv = document.getElementById('org-switcher')
+        const currentMembership = organizationMemberships.find(
+          (membership) => membership.organization.id === organizationId,
+        )
+        const currentOrganization = currentMembership.organization
 
-          clerk.mountOrganizationSwitcher(orgSwitcherDiv)
+        if (!currentOrganization) {
+          return
         }
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
+        const isAdmin = currentMembership.role === 'org:admin'
 
-        const signInDiv = document.getElementById('sign-in')
+        console.log(`Organization:`, currentOrganization)
 
-        clerk.mountSignIn(signInDiv)
+        renderMembershipRequests(currentOrganization, isAdmin)
       }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html', mark: [65] }}
-    
-    
-      
-        
-        
-        
-        Clerk + JavaScript App
-        
-      
-      
-        

-
-        
-
-        
Membership Requests

-        
-          
-            
-              
-              
-              
-              
-            
-          
-          
-        
User IDIdentifierStatus

-
-        
Response:

-        

-
-        
-        
-
-        
-      
-    
-    ```
-  
-
+
+      checkAdminAndRenderRequests()
+    } else {
+      // If there is no active organization,
+      // mount Clerk's 
+      // to allow the user to set an organization as active
+      document.getElementById('app').innerHTML = `
+        
Select an organization to set it as active

+        

+      `
+
+      const orgSwitcherDiv = document.getElementById('org-switcher')
+
+      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
+    }
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
diff --git a/docs/references/javascript/organization/organization.mdx b/docs/references/javascript/organization/organization.mdx
index 74d27b56d7..e3cc8ee8c3 100644
--- a/docs/references/javascript/organization/organization.mdx
+++ b/docs/references/javascript/organization/organization.mdx
@@ -130,94 +130,43 @@ function update(params: UpdateOrganizationParams): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [10, 11] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  if (clerk.user) {
-    // Check for an active organization
-    if (clerk.organization) {
-      await clerk.organization
-        .update({ name: 'New Name' })
-        .then((res) => console.log(res))
-        .catch((error) => console.log('An error occurred:', error.errors))
-    } else {
-      // If there is no active organization,
-      // mount Clerk's 
-      // to allow the user to set an organization as active
-      document.getElementById('app').innerHTML = `
-        
Select an organization to set it as active

-        

-      `
-
-      const orgSwitcherDiv = document.getElementById('org-switcher')
-
-      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
-    }
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
+
+// Initialize Clerk with your Clerk publishable key
+const clerk = new Clerk('{{pub_key}}')
+await clerk.load()
+
+if (clerk.user) {
+  // Check for an active organization
+  if (clerk.organization) {
+    await clerk.organization
+      .update({ name: 'New Name' })
+      .then((res) => console.log(res))
+      .catch((error) => console.log('An error occurred:', error.errors))
   } else {
+    // If there is no active organization,
+    // mount Clerk's 
+    // to allow the user to set an organization as active
     document.getElementById('app').innerHTML = `
-      

+      
Select an organization to set it as active

+      

     `
 
-    const signInDiv = document.getElementById('sign-in')
+    const orgSwitcherDiv = document.getElementById('org-switcher')
 
-    clerk.mountSignIn(signInDiv)
+    clerk.mountOrganizationSwitcher(orgSwitcherDiv)
   }
-  ```
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-  ```html {{ filename: 'index.html', mark: [19, 20] }}
-  

-
-  
-  
-
-  
-  ```
-
+  const signInDiv = document.getElementById('sign-in')
+
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `destroy()`
 
@@ -237,94 +186,43 @@ function destroy(): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [10, 11] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  if (clerk.user) {
-    // Check for an active organization
-    if (clerk.organization) {
-      await clerk.organization
-        .destroy()
-        .then((res) => console.log(res))
-        .catch((error) => console.log('An error occurred:', error.errors))
-    } else {
-      // If there is no active organization,
-      // mount Clerk's 
-      // to allow the user to set an organization as active
-      document.getElementById('app').innerHTML = `
-        
Select an organization to set it as active

-        

-      `
+// Initialize Clerk with your Clerk publishable key
+const clerk = new Clerk('{{pub_key}}')
+await clerk.load()
 
-      const orgSwitcherDiv = document.getElementById('org-switcher')
-
-      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
-    }
+if (clerk.user) {
+  // Check for an active organization
+  if (clerk.organization) {
+    await clerk.organization
+      .destroy()
+      .then((res) => console.log(res))
+      .catch((error) => console.log('An error occurred:', error.errors))
   } else {
+    // If there is no active organization,
+    // mount Clerk's 
+    // to allow the user to set an organization as active
     document.getElementById('app').innerHTML = `
-      

+      
Select an organization to set it as active

+      

     `
 
-    const signInDiv = document.getElementById('sign-in')
+    const orgSwitcherDiv = document.getElementById('org-switcher')
 
-    clerk.mountSignIn(signInDiv)
+    clerk.mountOrganizationSwitcher(orgSwitcherDiv)
   }
-  ```
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-  ```html {{ filename: 'index.html', mark: [19, 20] }}
-  

-
-  
-  
-
-  
-  ```
-
+  const signInDiv = document.getElementById('sign-in')
+
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `setLogo()`
 
@@ -351,136 +249,70 @@ function setLogo(params: SetOrganizationLogoParams): Promise
 
 #### Example
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-        
-        
-          

-
-          
-          
-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js', mark: [14, 15] }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        // Check for an active organization
-        if (clerk.organization) {
-          // Update the organization's logo
-          document.getElementById('upload-logo').addEventListener('click', () => {
-            const orgLogo = document.getElementById('org-logo').files[0]
-
-            clerk.organization
-              .setLogo({ file: orgLogo })
-              .then((res) => console.log(res))
-              .catch((error) => console.log('An error occurred:', error.errors))
-          })
-        } else {
-          // If there is no active organization,
-          // mount Clerk's 
-          // to allow the user to set an organization as active
-          document.getElementById('app').innerHTML = `
-            
Select an organization to set it as active

-            

-          `
-
-          const orgSwitcherDiv = document.getElementById('org-switcher')
-
-          clerk.mountOrganizationSwitcher(orgSwitcherDiv)
-        }
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
-
-        const signInDiv = document.getElementById('sign-in')
-
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html', mark: [27, 28] }}
-    

-
-    
-    
-
-    
-    
-
-    
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js', mark: [14, 15] }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const clerk = new Clerk('{{pub_key}}')
+  await clerk.load()
+
+  if (clerk.user) {
+    // Check for an active organization
+    if (clerk.organization) {
+      // Update the organization's logo
+      document.getElementById('upload-logo').addEventListener('click', () => {
+        const orgLogo = document.getElementById('org-logo').files[0]
+
+        clerk.organization
+          .setLogo({ file: orgLogo })
+          .then((res) => console.log(res))
+          .catch((error) => console.log('An error occurred:', error.errors))
       })
-    
-    ```
-  
-
+    } else {
+      // If there is no active organization,
+      // mount Clerk's 
+      // to allow the user to set an organization as active
+      document.getElementById('app').innerHTML = `
+        
Select an organization to set it as active

+        

+      `
+
+      const orgSwitcherDiv = document.getElementById('org-switcher')
+
+      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
+    }
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
 
 ### `getRoles()`
 
@@ -613,94 +445,43 @@ An _experimental_ interface that includes information about a user's permission.
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [10, 11] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  if (clerk.user) {
-    // Check for an active organization
-    if (clerk.organization) {
-      await clerk.organization
-        .getRoles()
-        .then((res) => console.log(res))
-        .catch((error) => console.log('An error occurred:', error.errors))
-    } else {
-      // If there is no active organization,
-      // mount Clerk's 
-      // to allow the user to set an organization as active
-      document.getElementById('app').innerHTML = `
-        
Select an organization to set it as active

-        

-      `
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-      const orgSwitcherDiv = document.getElementById('org-switcher')
+// Initialize Clerk with your Clerk publishable key
+const clerk = new Clerk('{{pub_key}}')
+await clerk.load()
 
-      clerk.mountOrganizationSwitcher(orgSwitcherDiv)
-    }
+if (clerk.user) {
+  // Check for an active organization
+  if (clerk.organization) {
+    await clerk.organization
+      .getRoles()
+      .then((res) => console.log(res))
+      .catch((error) => console.log('An error occurred:', error.errors))
   } else {
+    // If there is no active organization,
+    // mount Clerk's 
+    // to allow the user to set an organization as active
     document.getElementById('app').innerHTML = `
-      

+      
Select an organization to set it as active

+      

     `
 
-    const signInDiv = document.getElementById('sign-in')
+    const orgSwitcherDiv = document.getElementById('org-switcher')
 
-    clerk.mountSignIn(signInDiv)
+    clerk.mountOrganizationSwitcher(orgSwitcherDiv)
   }
-  ```
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-  ```html {{ filename: 'index.html', mark: [19, 20] }}
-  

-
-  
-  
-
-  
-  ```
-
+  const signInDiv = document.getElementById('sign-in')
+
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ## Additional methods
 
diff --git a/docs/references/javascript/session.mdx b/docs/references/javascript/session.mdx
index a07db94a3b..9e4e9b87bf 100644
--- a/docs/references/javascript/session.mdx
+++ b/docs/references/javascript/session.mdx
@@ -179,71 +179,28 @@ function getToken(options?: GetTokenOptions): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  if (clerk.user) {
-    await clerk.session
-      .getToken({ template: 'Test' })
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
-
-    const signInDiv = document.getElementById('sign-in')
-
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
-
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
-
-```js
-try {
-  await Clerk.session.getToken({ template: 'my-template-1' }) // => "eyJhbGciOiJSUzI1NiIsImtpZC..."
-} catch (e) {
-  // handle error
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
+
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+const clerk = new Clerk(pubKey)
+await clerk.load()
+
+if (clerk.user) {
+  await clerk.session
+    .getToken({ template: 'Test' })
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
+
+  const signInDiv = document.getElementById('sign-in')
+
+  clerk.mountSignIn(signInDiv)
 }
 ```
 
diff --git a/docs/references/javascript/user/create-metadata.mdx b/docs/references/javascript/user/create-metadata.mdx
index 4ce35a88b5..5de8c66d96 100644
--- a/docs/references/javascript/user/create-metadata.mdx
+++ b/docs/references/javascript/user/create-metadata.mdx
@@ -31,69 +31,32 @@ function createEmailAddress(params: CreateEmailAddressParams): Promise']}>
-  ```js {{ filename: 'main.js' }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js' }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    const email = 'test@test.com'
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    clerk.user
-      .createEmailAddress({ email })
-      .then((response) => console.log(response))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+if (clerk.user) {
+  const email = 'test@test.com'
 
-    const signInDiv = document.getElementById('sign-in')
+  clerk.user
+    .createEmailAddress({ email })
+    .then((response) => console.log(response))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html' }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ## `createPhoneNumber()`
 
@@ -119,69 +82,32 @@ function createPhoneNumber(params: CreatePhoneNumberParams): Promise']}>
-  ```js {{ filename: 'main.js' }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js' }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    const phoneNumber = '15551234567'
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    clerk.user
-      .createPhoneNumber({ phoneNumber })
-      .then((response) => console.log(response))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+if (clerk.user) {
+  const phoneNumber = '15551234567'
 
-    const signInDiv = document.getElementById('sign-in')
+  clerk.user
+    .createPhoneNumber({ phoneNumber })
+    .then((response) => console.log(response))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html' }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ## `createWeb3Wallet()`
 
@@ -207,69 +133,32 @@ function createWeb3Wallet(params: CreateWeb3WalletParams): Promise
 
 The following example adds `0x0123456789ABCDEF0123456789ABCDEF01234567` as a Web3 wallet for the user. If the user is not signed in, the user will be prompted to sign in.
 
-']}>
-  ```js {{ filename: 'main.js' }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js' }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    const web3Wallet = '0x0123456789ABCDEF0123456789ABCDEF01234567'
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    clerk.user
-      .createWeb3Wallet({ web3Wallet })
-      .then((response) => console.log(response))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+if (clerk.user) {
+  const web3Wallet = '0x0123456789ABCDEF0123456789ABCDEF01234567'
 
-    const signInDiv = document.getElementById('sign-in')
+  clerk.user
+    .createWeb3Wallet({ web3Wallet })
+    .then((response) => console.log(response))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html' }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ## `createExternalAccount()`
 
@@ -316,125 +205,67 @@ Upon return, inspect within the `user.externalAccounts` the entry that correspon
 
 The following example demonstrates how to add a Notion account as an external account for the user. When the user selects the "Add Notion as a social connection" button, the user will be redirected to Notion to connect their account. After connecting their account, they will be redirected to the `/` route of your application, and the status of the connection will be displayed.
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-        
-        
-          

-
-          

-            Notion verification status:
-            
-          

-          
-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js' }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        // Find the external account for the provider
-        const externalAccount = clerk.user.externalAccounts.find((p) => p.provider === 'notion')
-        // If the external account exists, display its status
-        document.getElementById('notion-status').innerHTML = externalAccount.verification.status
-
-        // When the button is clicked, initiate the connection with the provider
-        document.getElementById('add-notion').addEventListener('click', async () => {
-          clerk.user
-            .createExternalAccount({ strategy: 'oauth_notion', redirect_url: '/' })
-            .then((externalAccount) => {
-              window.location.href = externalAccount.verification.externalVerificationRedirectURL
-            })
-            .catch((error) => {
-              console.log('An error occurred:', error.errors)
-            })
+
+  ```html {{ filename: 'index.html' }}
+  
+  
+    
+      
+      
+      
+      Clerk + JavaScript App
+    
+    
+      

+
+      

+        Notion verification status:
+        
+      

+      
+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js' }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(pubKey)
+  await clerk.load()
+
+  if (clerk.user) {
+    // Find the external account for the provider
+    const externalAccount = clerk.user.externalAccounts.find((p) => p.provider === 'notion')
+    // If the external account exists, display its status
+    document.getElementById('notion-status').innerHTML = externalAccount.verification.status
+
+    // When the button is clicked, initiate the connection with the provider
+    document.getElementById('add-notion').addEventListener('click', async () => {
+      clerk.user
+        .createExternalAccount({ strategy: 'oauth_notion', redirect_url: '/' })
+        .then((externalAccount) => {
+          window.location.href = externalAccount.verification.externalVerificationRedirectURL
+        })
+        .catch((error) => {
+          console.log('An error occurred:', error.errors)
         })
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
-
-        const signInDiv = document.getElementById('sign-in')
-
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html' }}
-    

-    

-      Notion verification status:
-      
-    

-    
-
-    
-    
-
-    
-    ```
-  
-
+    })
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
 
 [email-ref]: /docs/references/javascript/email-address
 
diff --git a/docs/references/javascript/user/password-management.mdx b/docs/references/javascript/user/password-management.mdx
index adba4e6860..2a2725bbb8 100644
--- a/docs/references/javascript/user/password-management.mdx
+++ b/docs/references/javascript/user/password-management.mdx
@@ -40,120 +40,63 @@ function updatePassword(params: UpdateUserPasswordParams): Promise
 
 ### Example
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-        
-        
-          

-
-          
Update password

-          
-          
-          

-          
-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js' }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        document.getElementById('update-password-button').addEventListener('click', async function () {
-          const currentPassword = document.getElementById('current-password').value
-
-          const newPassword = document.getElementById('new-password').value
-          clerk.user
-            .updatePassword({ currentPassword, newPassword })
-            .then((response) => console.log(response))
-            .catch((error) => {
-              document.getElementById('error').innerHTML = error.errors[0].longMessage
-              console.log('An error occurred:', error.errors)
-            })
+
+  ```html {{ filename: 'index.html' }}
+  
+  
+    
+      
+      
+      
+      Clerk + JavaScript App
+    
+    
+      

+
+      
Update password

+      
+      
+      

+      
+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js' }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(pubKey)
+  await clerk.load()
+
+  if (clerk.user) {
+    document.getElementById('update-password-button').addEventListener('click', async function () {
+      const currentPassword = document.getElementById('current-password').value
+
+      const newPassword = document.getElementById('new-password').value
+      clerk.user
+        .updatePassword({ currentPassword, newPassword })
+        .then((response) => console.log(response))
+        .catch((error) => {
+          document.getElementById('error').innerHTML = error.errors[0].longMessage
+          console.log('An error occurred:', error.errors)
         })
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
-
-        const signInDiv = document.getElementById('sign-in')
-
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html' }}
-    

-
-    
Update password

-    
-    
-    

-    
-
-    
-    
-
-    
-    ```
-  
-
+    })
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
 
 ## `removePassword()`
 
@@ -174,109 +117,57 @@ function removePassword(params: RemoveUserPasswordParams): Promise
 
 ### Example
 
-']}>
-  
-    For the following example, your HTML file should look like this:
-
-    ```js {{ filename: 'main.js' }}
-    import { Clerk } from '@clerk/clerk-js'
-
-    // Initialize Clerk with your Clerk publishable key
-    const clerk = new Clerk('{{pub_key}}')
-    await clerk.load()
-
-    if (clerk.user) {
-      document.getElementById('remove-password-button').addEventListener('click', async () => {
-        const currentPassword = document.getElementById('current-password').value
-
-        clerk.user
-          .removePassword({ currentPassword })
-          .then((response) => console.log(response))
-          .catch((error) => {
-            document.getElementById('error').innerHTML = error.errors[0].longMessage
-            console.log('An error occurred:', error.errors)
-          })
-      })
-    } else {
-      document.getElementById('app').innerHTML = `
-        

-      `
-
-      const signInDiv = document.getElementById('sign-in')
-
-      clerk.mountSignIn(signInDiv)
-    }
-    ```
-
-    And your HTML file should look like this:
-
-    ```html {{ filename: 'index.html' }}
-    
-    
-      
-        
-        
-        
-        Clerk + JavaScript App
-      
-      
-        

-
-        
-        

-        
-
-        
-      
-    
-    ```
-  
-
-  
-    ```html {{ filename: 'index.html' }}
-    

-
-    
-    

-    
-
-    
-    
-
-    
-    ```
-  
-
+
+  ```html {{ filename: 'index.html' }}
+  
+  
+    
+      
+      
+      
+      Clerk + JavaScript App
+    
+    
+      

+
+      
+      

+      
+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js' }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(pubKey)
+  await clerk.load()
+
+  if (clerk.user) {
+    document.getElementById('remove-password-button').addEventListener('click', async () => {
+      const currentPassword = document.getElementById('current-password').value
+
+      clerk.user
+        .removePassword({ currentPassword })
+        .then((response) => console.log(response))
+        .catch((error) => {
+          document.getElementById('error').innerHTML = error.errors[0].longMessage
+          console.log('An error occurred:', error.errors)
+        })
+    })
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
diff --git a/docs/references/javascript/user/totp.mdx b/docs/references/javascript/user/totp.mdx
index bbbeda7695..ccf2b096a9 100644
--- a/docs/references/javascript/user/totp.mdx
+++ b/docs/references/javascript/user/totp.mdx
@@ -149,244 +149,125 @@ The following example assumes:
 - you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application
 - you have [enabled **Authenticator application** and **Backup codes** as multi-factor strategies in your Clerk Dashboard](/docs/authentication/configuration/sign-up-sign-in-options#authentication-strategies)
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-        
-        
-          

-
-          

+
+        
+
+        
+        
+        
+
+        
 
-        const signInDiv = document.getElementById('sign-in')
+        
Response:

+        

 
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
-    
-  
+        
+      
+    
+    ```
 
-  
-    ```html {{ filename: 'index.html' }}
-    

-
-    
-
-    
-    
-    
-
-    
-
-    
Response:

-    

-
-    
-    
-
-    
+      clerk.mountSignIn(signInDiv)
+    }
     ```
-  
-
+  
diff --git a/docs/references/javascript/user/user.mdx b/docs/references/javascript/user/user.mdx
index 08fcdb58d9..e32470b17d 100644
--- a/docs/references/javascript/user/user.mdx
+++ b/docs/references/javascript/user/user.mdx
@@ -348,65 +348,30 @@ All props below are optional.
 
 In the following example, the user's first name is updated to "Test".
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .update({ firstName: 'Test' })
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .update({ firstName: 'Test' })
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `delete()`
 
@@ -418,65 +383,30 @@ function delete(): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .delete()
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .delete()
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `setProfileImage()`
 
@@ -520,105 +450,58 @@ function setProfileImage(params: SetProfileImageParams): Promise
 
 #### Example
 
-']}>
-  
-    Use the following tabs to view the code necessary for each file.
-
-    
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk + JavaScript App
-        
-        
-          

-
-          
-          
-
-          
-        
-      
-      ```
-
-      ```js {{ filename: 'main.js' }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        // Update the user's profile image
-        document.getElementById('upload-image').addEventListener('click', () => {
-          const profileImage = document.getElementById('profile-image').files[0]
-          console.log(profileImage)
-
-          clerk.user
-            .setProfileImage({ file: profileImage })
-            .then((res) => console.log(res))
-            .catch((error) => console.log('An error occurred:', error.errors))
-        })
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
-
-        const signInDiv = document.getElementById('sign-in')
-
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
-    
-  
-
-  
-    ```html {{ filename: 'index.html' }}
-    

-
-    
-    
-
-    
-    
-
-    
-    ```
-  
-
+
+  ```html {{ filename: 'index.html' }}
+  
+  
+    
+      
+      
+      
+      Clerk + JavaScript App
+    
+    
+      

+
+      
+      
+
+      
+    
+  
+  ```
+
+  ```js {{ filename: 'main.js' }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk publishable key
+  const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(pubKey)
+  await clerk.load()
+
+  if (clerk.user) {
+    // Update the user's profile image
+    document.getElementById('upload-image').addEventListener('click', () => {
+      const profileImage = document.getElementById('profile-image').files[0]
+      console.log(profileImage)
+
+      clerk.user
+        .setProfileImage({ file: profileImage })
+        .then((res) => console.log(res))
+        .catch((error) => console.log('An error occurred:', error.errors))
+    })
+  } else {
+    document.getElementById('app').innerHTML = `
+      

+    `
+
+    const signInDiv = document.getElementById('sign-in')
+
+    clerk.mountSignIn(signInDiv)
+  }
+  ```
+
 
 ### `reload()`
 
@@ -639,37 +522,17 @@ function reload(p?: ClerkResourceReloadParams): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [7] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [9] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  await clerk.user.reload()
-  ```
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-  ```html {{ filename: 'index.html', mark: [15] }}
-  
-  
-
-  
-  ```
-
+await clerk.user.reload()
+```
 
 ### `getSessions()`
 
@@ -687,65 +550,30 @@ function getSessions(): Promise
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .getSessions()
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .getSessions()
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `createPasskey()`
 
@@ -824,65 +652,30 @@ function getOrganizationInvitations(
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .getOrganizationInvitations()
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .getOrganizationInvitations()
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `getOrganizationSuggestions()`
 
@@ -925,65 +718,30 @@ function getOrganizationSuggestions(
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .getOrganizationSuggestions()
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .getOrganizationSuggestions()
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ### `getOrganizationMemberships()`
 
@@ -1019,65 +777,30 @@ function getOrganizationMemberships(
 
 #### Example
 
-']}>
-  ```js {{ filename: 'main.js', mark: [8, 9] }}
-  import { Clerk } from '@clerk/clerk-js'
+```js {{ filename: 'main.js', mark: [10, 11] }}
+import { Clerk } from '@clerk/clerk-js'
 
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
+// Initialize Clerk with your Clerk publishable key
+const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-  if (clerk.user) {
-    await clerk.user
-      .getOrganizationMemberships()
-      .then((res) => console.log(res))
-      .catch((error) => console.log('An error occurred:', error.errors))
-  } else {
-    document.getElementById('app').innerHTML = `
-      

-    `
+const clerk = new Clerk(pubKey)
+await clerk.load()
 
-    const signInDiv = document.getElementById('sign-in')
+if (clerk.user) {
+  await clerk.user
+    .getOrganizationMemberships()
+    .then((res) => console.log(res))
+    .catch((error) => console.log('An error occurred:', error.errors))
+} else {
+  document.getElementById('app').innerHTML = `
+    

+  `
 
-    clerk.mountSignIn(signInDiv)
-  }
-  ```
+  const signInDiv = document.getElementById('sign-in')
 
-  ```html {{ filename: 'index.html', mark: [18, 19] }}
-  

-
-  
-  
-
-  
-  ```
-
+  clerk.mountSignIn(signInDiv)
+}
+```
 
 ## Additional methods
 
diff --git a/docs/users/metadata.mdx b/docs/users/metadata.mdx
index 24b8713a4e..2060078bf9 100644
--- a/docs/users/metadata.mdx
+++ b/docs/users/metadata.mdx
@@ -564,84 +564,34 @@ Updating this value overrides the previous value; it does not merge. To perform
   
 
   
-    "]}>
-      ```js {{ filename: 'main.js' }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      if (clerk.user) {
-        await clerk.user
-          .update({
-            unsafeMetadata: {
-              birthday: '01-01-2000',
-            },
-          })
-          .then((res) => console.log(res))
-          .catch((error) => console.log('An error occurred:', error.errors))
-      } else {
-        document.getElementById('app').innerHTML = `
-          

-        `
-
-        const signInDiv = document.getElementById('sign-in')
-
-        clerk.mountSignIn(signInDiv)
-      }
-      ```
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
 
-      ```html {{ filename: 'index.html' }}
-      
-      
-        
-          
-          
-          
-          Clerk Unsafe Update
-        
-        
-          

-
-          
-          
-
-          
-        
-      
-      ```
-    
+    // Initialize Clerk with your Clerk publishable key
+    const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+    const clerk = new Clerk(pubKey)
+    await clerk.load()
+
+    if (clerk.user) {
+      await clerk.user
+        .update({
+          unsafeMetadata: {
+            birthday: '01-01-2000',
+          },
+        })
+        .then((res) => console.log(res))
+        .catch((error) => console.log('An error occurred:', error.errors))
+    } else {
+      document.getElementById('app').innerHTML = `
+        

+      `
+
+      const signInDiv = document.getElementById('sign-in')
+
+      clerk.mountSignIn(signInDiv)
+    }
+    ```
   
 
 
diff --git a/docs/users/user-impersonation.mdx b/docs/users/user-impersonation.mdx
index bea44b9736..04aff403d0 100644
--- a/docs/users/user-impersonation.mdx
+++ b/docs/users/user-impersonation.mdx
@@ -103,47 +103,23 @@ To detect impersonated sessions in the frontend, the `actor` object contains the
   
     You can use the [`Clerk`](/docs/references/javascript/clerk/clerk) object to get access to the `session` object, which includes the `actor` object.
 
-    "]}>
-      ```js {{ filename: 'main.js' }}
-      import { Clerk } from '@clerk/clerk-js'
-
-      // Initialize Clerk with your Clerk publishable key
-      const clerk = new Clerk('{{pub_key}}')
-      await clerk.load()
-
-      const { session } = clerk
-
-      if (session.actor) {
-        const { actor, user } = session
-
-        console.log(`User ${actor.sub} is signed in as user ${user.id}.`)
-      }
-      ```
-
-      ```html {{ filename: 'index.html' }}
-      
-
-      
-      ```
-    
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
+
+    // Initialize Clerk with your Clerk publishable key
+    const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+    const clerk = new Clerk(pubKey)
+    await clerk.load()
+
+    const { session } = clerk
+
+    if (session.actor) {
+      const { actor, user } = session
+
+      console.log(`User ${actor.sub} is signed in as user ${user.id}.`)
+    }
+    ```