From f80eeda0e2a73e8c87031edad08a3f57d86a908a Mon Sep 17 00:00:00 2001 From: Ankur Chauhan Date: Tue, 18 Nov 2025 16:15:54 +0100 Subject: [PATCH 1/9] refactor css and rename snippet files to kebab-case --- main/docs.json | 67 +- main/docs/css/styles.css | 969 +++++++++++++----- .../onboarding/self-service-m2m.mdx | 260 +++-- main/snippets/AuthDocsPipeline.mdx | 89 -- ...{AuthCodeBlock.jsx => auth-code-block.jsx} | 0 ...{AuthCodeGroup.jsx => auth-code-group.jsx} | 0 main/snippets/auth-docs-pipeline.mdx | 67 ++ main/snippets/{BgImage.jsx => bg-image.jsx} | 0 main/snippets/home.jsx | 88 +- .../{InlineImage.mdx => inline-image.mdx} | 0 ...tartButtons.jsx => quickstart-buttons.jsx} | 0 ...QuickstartPage.mdx => quickstart-page.mdx} | 0 .../{RelatedPages.mdx => related-pages.mdx} | 0 .../{SdkLibraries.mdx => sdk-libraries.mdx} | 0 ...sWithCards.jsx => sections-with-cards.jsx} | 98 +- main/snippets/{useCases.mdx => use-cases.mdx} | 0 16 files changed, 1086 insertions(+), 552 deletions(-) delete mode 100644 main/snippets/AuthDocsPipeline.mdx rename main/snippets/{AuthCodeBlock.jsx => auth-code-block.jsx} (100%) rename main/snippets/{AuthCodeGroup.jsx => auth-code-group.jsx} (100%) create mode 100644 main/snippets/auth-docs-pipeline.mdx rename main/snippets/{BgImage.jsx => bg-image.jsx} (100%) rename main/snippets/{InlineImage.mdx => inline-image.mdx} (100%) rename main/snippets/{QuickstartButtons.jsx => quickstart-buttons.jsx} (100%) rename main/snippets/{QuickstartPage.mdx => quickstart-page.mdx} (100%) rename main/snippets/{RelatedPages.mdx => related-pages.mdx} (100%) rename main/snippets/sdks/{SdkLibraries.mdx => sdk-libraries.mdx} (100%) rename main/snippets/{SectionsWithCards.jsx => sections-with-cards.jsx} (86%) rename main/snippets/{useCases.mdx => use-cases.mdx} (100%) diff --git a/main/docs.json b/main/docs.json index bc4d4eef8..e2384139f 100644 --- a/main/docs.json +++ b/main/docs.json @@ -12,22 +12,17 @@ } }, "colors": { - "primary": "#000", - "dark": "#fff", - "light": "#fff" + "primary": "#2f2f2f", + "light": "#B3A7FF", + "dark": "#343434" }, "contextual": { - "options": [ - "copy", - "view", - "chatgpt", - "claude" - ] + "options": ["copy", "view", "chatgpt", "claude"] }, "fonts": { - "heading": { - "family": "Aeonik", - "source": "https://mintlify-assets.b-cdn.net/Aeonik/Aeonik-Regular.woff2", + "body": { + "family": "Inter", + "source": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", "format": "woff2" } }, @@ -43,9 +38,7 @@ "tabs": [ { "tab": "Home", - "pages": [ - "docs/index" - ] + "pages": ["docs/index"] }, { "tab": "Documentation", @@ -2383,9 +2376,7 @@ "groups": [ { "group": " ", - "pages": [ - "docs/quickstarts" - ] + "pages": ["docs/quickstarts"] }, { "group": "Single Page App", @@ -2460,18 +2451,14 @@ }, { "tab": "API Reference", - "pages": [ - "docs/api" - ] + "pages": ["docs/api"] }, { "tab": "SDKs", "groups": [ { "group": " ", - "pages": [ - "docs/libraries" - ] + "pages": ["docs/libraries"] } ] }, @@ -2486,9 +2473,7 @@ "tabs": [ { "tab": "Home", - "pages": [ - "docs/fr-ca/index" - ] + "pages": ["docs/fr-ca/index"] }, { "tab": "Documentation", @@ -4785,9 +4770,7 @@ "groups": [ { "group": " ", - "pages": [ - "docs/fr-ca/quickstarts" - ] + "pages": ["docs/fr-ca/quickstarts"] }, { "group": "Application à page unique", @@ -4859,18 +4842,14 @@ }, { "tab": "API Reference", - "pages": [ - "docs/api" - ] + "pages": ["docs/api"] }, { "tab": "SDKs", "groups": [ { "group": " ", - "pages": [ - "docs/fr-ca/libraries" - ] + "pages": ["docs/fr-ca/libraries"] } ] }, @@ -4885,9 +4864,7 @@ "tabs": [ { "tab": "Home", - "pages": [ - "docs/ja-jp/index" - ] + "pages": ["docs/ja-jp/index"] }, { "tab": "Documentation", @@ -7185,9 +7162,7 @@ "groups": [ { "group": " ", - "pages": [ - "docs/ja-jp/quickstarts" - ] + "pages": ["docs/ja-jp/quickstarts"] }, { "group": "シングルページアプリ", @@ -7259,18 +7234,14 @@ }, { "tab": "API Reference", - "pages": [ - "docs/api" - ] + "pages": ["docs/api"] }, { "tab": "SDKs", "groups": [ { "group": " ", - "pages": [ - "docs/ja-jp/libraries" - ] + "pages": ["docs/ja-jp/libraries"] } ] }, diff --git a/main/docs/css/styles.css b/main/docs/css/styles.css index 95dd43684..f358bef0f 100644 --- a/main/docs/css/styles.css +++ b/main/docs/css/styles.css @@ -1,31 +1,157 @@ +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +/* ========================================================================== + Hero Background + ========================================================================== */ span.fixed.inset-0.pointer-events-none { background-repeat: no-repeat; background-size: cover; - background-position: left -400px !important; + background-position: left -400px; +} + +/* ========================================================================== + Typography + ========================================================================== */ +.mdx-content h1, +.mdx-content h2, +.mdx-content h3, +.mdx-content h4, +.mdx-content h5, +.mdx-content h6, +#content-container h1, +#content-container h2, +#content-container h3, +#content-container h4, +#content-container h5, +#content-container h6 { + line-height: 1.2; + letter-spacing: -0.02em; + font-weight: 600; +} + +/* Enhanced heading hierarchy with better spacing */ +.mdx-content h1, +#content-container h1 { + font-size: 1.75rem; + line-height: 1.15; + letter-spacing: -0.03em; +} + +.mdx-content h2, +#content-container h2 { + font-size: 1.125rem; + line-height: 1.2; + letter-spacing: -0.025em; +} + +.mdx-content h3, +#content-container h3 { + font-size: 1rem; + line-height: 1.3; + letter-spacing: -0.02em; + margin-bottom: 0.75rem; +} + +.mdx-content h4, +#content-container h4 { + font-size: 0.95rem; + line-height: 1.4; + margin-bottom: 0.5rem; +} + +.mdx-content h5, +#content-container h5:not(.callout h5) { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 500; + color: var(--muted); + margin-bottom: 2rem; +} + +.mdx-content h6, +#content-container h6:not(.callout h6) { + font-size: 1rem; + line-height: 1.5; + font-weight: 700; +} + +.prose { + font-size: 1.125rem; + line-height: 1.625; + letter-spacing: 0; + font-weight: 400; +} + +span[data-as="p"] { + font-size: 0.95rem; + line-height: 1.625; + font-weight: 400; + color: var(--text); + margin-bottom: 1rem; } -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 120% !important; - letter-spacing: -0.02em !important; - /* font-family: Aeonik; */ - font-weight: 600 !important; +#content-area div.mdx-content .prose > span[data-as="p"], +#content-area div.mdx-content.prose > span[data-as="p"] { + margin-top: 0; + margin-bottom: 1rem; } +li { + font-size: 0.95rem; + line-height: 1.625; + font-weight: 400; + color: var(--text); +} + +/* ========================================================================== + Table Styles + ========================================================================== */ .table { width: 100%; table-layout: fixed; border-collapse: collapse; + border-radius: 12px; + box-shadow: inset 0 -0.5px 2px 0 oklch(from var(--shadow) l c h / 0.06), + 0 0 0 1px var(--border-secondary), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06); + overflow: hidden; + padding-bottom: 4px; +} + +.table thead { + background-color: oklch(from var(--border) l c h / 0.15); } .table th, .table td { + font-size: 0.875rem; text-align: left; word-wrap: break-word; + padding: 8px 12px; +} + +.table th { + border-bottom: 1px solid var(--border-secondary); +} + +.table tr { + border-bottom: 1px solid var(--border-secondary); +} + +.table td { + background-color: var(--bg); + font-size: 0.875rem; +} + +.table td:hover { + background-color: oklch(from var(--border) l c h / 0.05); } .table th:first-child, @@ -37,48 +163,71 @@ h6 { .table th:not(:first-child), .table td:not(:first-child) { width: calc(70% / (var(--cols) - 1)); + border-top-right-radius: 10px; } -ol ol { - list-style-type: decimal !important; +/* Nested lists */ +.mdx-content ol ol, +.prose ol ol { + list-style-type: decimal; } +/* ========================================================================== + CSS Variables - Design Tokens + ========================================================================== */ :root { - --tooltip-link-color: #b3a7ff; - --bg: #fff; - --text: #262626; - --muted: #6b7280; - --border: #e5e7eb; - --accent: #2563eb; - + /* Colors */ + --tooltip-link-color: oklch(50.99% 0.2119 287.99); + --bg: oklch(100% 0 0); + --text: oklch(26.86% 0 0); + --text-secondary: oklch(45.12% 0.0123 264.12); + --text-tertiary: oklch(61.18% 0.0175 262.96); + --muted: oklch(55.1% 0.0234 264.36); + --border: oklch(92.76% 0.0058 264.53); + --border-secondary: oklch(95% 0.0087 260.89); + --accent: oklch(54.61% 0.2152 262.88); + + /* Component Colors */ --section-icon-bg: #eef2ff; - --card-bg: #fff; - --card-shadow: rgba(0, 0, 0, 0.08); + --card-bg: oklch(100% 0 0); + --shadow: oklch(0% 0 0); + --card-shadow: oklch(from var(--shadow) l c h / calc(alpha - 0.08)); - --input-bg: #fff; - --input-border: #d1d5db; - --input-placeholder: #9ca3af; - --dash-color: #e9eaec; + /* Form Elements */ + --input-bg: oklch(100% 0 0); + --input-border: oklch(87.17% 0.0093 258.34); + --input-placeholder: oklch(71.37% 0.0192 261.32); + --dash-color: oklch(93.68% 0.0029 264.54); } .dark { + /* Dark Mode Colors */ --tooltip-link-color: #6742d5; --bg: #0f1115; --text: #e5e7eb; + --text-secondary: #9ca3af; + --text-tertiary: #6b7280; --muted: #a3a3a3; --border: #262a33; + --border-secondary: #373e4e; --accent: #60a5fa; + /* Dark Mode Component Colors */ --section-icon-bg: #1b1f2a; --card-bg: #151923; + --shadow: #000000; --card-shadow: rgba(255, 255, 255, 0.06); + /* Dark Mode Form Elements */ --input-bg: #141825; --input-border: #2a3140; --input-placeholder: #6b7280; --dash-color: rgba(255, 255, 255, 0.14); } +/* ========================================================================== + Pipeline Component + ========================================================================== */ .pipeline-wrapper { position: relative; width: 100%; @@ -87,6 +236,13 @@ ol ol { margin-bottom: 100px; } +@media (max-width: 768px) { + .pipeline-wrapper { + max-width: 100%; + margin-bottom: 50px; + } +} + .pipeline-img { position: absolute; inset: 0; @@ -103,6 +259,7 @@ ol ol { pointer-events: none; transition: background 0.15s ease; } + .dark .pipeline-dim-circle { background: rgba(0, 0, 0, 0.5); } @@ -112,7 +269,7 @@ ol ol { aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; - border-bottom: none !important; + border-bottom: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } @@ -120,82 +277,96 @@ ol ol { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } + .dark .pipeline-hotspot:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } +.pipeline-hotspot:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* ========================================================================== + Frame Component + ========================================================================== */ .frame { margin: 20px 0; } +/* ========================================================================== + Link Styles + ========================================================================== */ .prose - :where(a):not( - :where([class~="not-prose"], [class~="not-prose"] *, [class~="card"], .quickstart_button), + a:not(.not-prose):not(.card):not(.quickstart_button):not( [aria-label="Navigate to header"] ) { - border-bottom: 1px solid #000; - font-weight: 500; + color: var(--text); + border: none; + text-decoration: none; + text-underline-offset: 4px; + font-weight: 400; + transition: text-underline-offset 0.15s ease-out, opacity 0.15s ease-out; + border-radius: 4px; +} + +.prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):hover { + text-decoration: underline; + color: var(--text); + transition: text-underline-offset 0.15s ease-out, opacity 0.15s ease-out; +} + +.prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):focus-visible { + transition: opacity 0.15s ease-out; } .dark .prose - :where(a):not( - :where([class~="not-prose"], [class~="not-prose"] *, [class~="card"], .quickstart_button), + a:not(.not-prose):not(.card):not(.quickstart_button):not( [aria-label="Navigate to header"] ) { - border-bottom: 1px solid #fff; + color: var(--text); } -.prose - :where(a):not( - :where( - [class~="not-prose"], - [class~="not-prose"] *, - [class~="card"], - .quickstart_button, - h2 .absolute a, - h3 .absolute a, - h4 .absolute a, - h5 .absolute a, - h6 .absolute a - ) - ), -.prose - :where(a:hover):not( - :where( - [class~="not-prose"], - [class~="not-prose"] *, - [class~="card"], - .quickstart_button, - h2 .absolute a, - h3 .absolute a, - h4 .absolute a, - h5 .absolute a, - h6 .absolute a - ) - ), .dark .prose - :where(a:hover):not( - :where( - [class~="not-prose"], - [class~="not-prose"] *, - [class~="card"], - .quickstart_button, - h2 .absolute a, - h3 .absolute a, - h4 .absolute a, - h5 .absolute a, - h6 .absolute a - ) - ) { - border-bottom-width: 2px; + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):hover { + color: var(--tooltip-link-color); + border-bottom-color: var(--tooltip-link-color); } -a strong { - font-weight: 700 !important; +/* Remove underline from heading anchor links */ +.mdx-content h2:hover, +.mdx-content h3:hover, +.mdx-content h4:hover, +.mdx-content h5:hover, +.mdx-content h6:hover { + border-bottom: none; } +/* Bold links */ +.prose a strong { + font-weight: 600; +} + +/* ========================================================================== + Scrollbar Styles - Cross-browser support + ========================================================================== */ +#navigation-items { + /* Firefox */ + scrollbar-width: thin; + scrollbar-color: rgba(136, 136, 136, 0.68) transparent; +} + +/* Webkit browsers (Chrome, Safari, Edge) */ #navigation-items::-webkit-scrollbar { width: 4px; } @@ -205,87 +376,106 @@ a strong { } #navigation-items::-webkit-scrollbar-thumb { - background: #888888ae; + background: rgba(136, 136, 136, 0.68); border-radius: 4px; } -#navigation-items { - scrollbar-width: thin; /* options: auto | thin | none */ - scrollbar-color: #888 transparent; -} - +/* ========================================================================== + Content Container Overrides + ========================================================================== */ #content-container h5, #content-container h6 { font-weight: 700; } -#content-container h5:not(.callout h5), -#content-container h6:not(.callout h6) { - margin-top: 36px !important; -} - +/* ========================================================================== + Banner Styles + ========================================================================== */ .sdk_banner_container { background: linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); - background-image: url("/images/library/header_bg.svg"), linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); + background-image: url("/images/library/header_bg.svg"), + linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } +@media (max-width: 768px) { + .sdk_banner_container, + .quickstart_banner_container { + background-size: contain; + background-position: center; + } +} + .quickstart_banner_container { - background: linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); + background: linear-gradient( + 333.17deg, + rgb(62, 198, 235) -1.51%, + rgb(99, 93, 255) 101.22% + ); background-image: url("/images/library/header-bg.svg"), - linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); + linear-gradient( + 333.17deg, + rgb(62, 198, 235) -1.51%, + rgb(99, 93, 255) 101.22% + ); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } +/* ========================================================================== + Navbar Styles - Glassmorphism effect + ========================================================================== */ +#navbar { + position: sticky; + top: 0; + border: 1px solid var(--border-secondary); +} + #navbar > div:nth-child(2) { - background-color: transparent !important; + background-color: oklch(from var(--bg) l c h / 0.6); + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background-color 0.2s ease, backdrop-filter 0.2s ease; } /* Opaque state - solid background */ #navbar[data-is-opaque="true"] > div:nth-child(2) { - background-color: rgb(255, 255, 255, 0.95) !important; + background-color: rgba(255, 255, 255, 0.95); + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } -/* Dark mode opaque state */ .dark #navbar[data-is-opaque="true"] > div:nth-child(2) { - background-color: rgba(15, 17, 21, 0.75) !important; + background-color: rgba(15, 17, 21, 0.75); } /* Transparent state - just blur */ #navbar[data-is-opaque="false"] > div:nth-child(2) { - background-color: rgba(255, 255, 255, 0.6) !important; + background-color: rgba(255, 255, 255, 0.6); + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } -/* Dark mode transparent state */ .dark #navbar[data-is-opaque="false"] > div:nth-child(2) { - background-color: transparent !important; + background-color: transparent; + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } -/* Replace navigation border elements with dashed lines */ +/* ========================================================================== + Sidebar Separators - Using dashed lines + ========================================================================== */ #navigation-items .px-1.py-3, .sidebar-group .px-1.py-3, .sidebar-groups .px-1.py-3 { - /* Clear existing padding and convert to dashed line */ - padding: 0 !important; - height: 2px; + padding: 0; + height: 0.5px; width: 100%; - background: repeating-linear-gradient( - to right, - var(--dash-color, #ccc) 0px, - var(--dash-color, #ccc) 8px, - transparent 8px, - transparent 16px - ) !important; - margin: 20px 0 !important; + background: var(--border-secondary); + margin: 8px 0 16px 0; } #navigation-items .px-1.py-3 > *, @@ -294,6 +484,101 @@ a strong { display: none; } +.sidebar-title { + font-size: 0.825rem; + font-weight: 500; +} + +.sidebar-group-header { + font-size: 0.825rem; + letter-spacing: 0; + font-weight: 500; + color: var(--text-tertiary); +} + +#sidebar-group > li > a { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 12px; + padding-right: 12px; + border-radius: 12px; + margin: 0; + font-size: 0.95rem; + line-height: 1.3; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > a > svg { + width: 24px; + height: 24px; + transition: all 0.15s ease-out; +} + +#sidebar-group > li > button { + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + border: none; + border-radius: 12px; + margin: 0; + font-size: 0.95rem; + line-height: 1.4; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > button > svg { + width: 28px; + height: 28px; + transition: all 0.15s ease-out; +} + +#sidebar-group > li > ul { + margin-left: 24px; +} + +#sidebar-group > li > ul > li::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: -8px; + height: 100%; + width: 0.5px; + background: var(--border-secondary); +} + +#sidebar-group > li > ul > li > a { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 12px !important; + padding-right: 12px; + border: none; + border-radius: 12px; + margin: 0; + font-size: 0.9rem; + line-height: 1.4; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > ul > li > a > svg { + width: 28px; + height: 28px; + transition: all 0.15s ease-out; +} + /* [data-callout-type="note"] [data-component-part="callout-icon"] svg { display: none; } @@ -307,88 +592,156 @@ a strong { top: -4px; } */ +/* ========================================================================== + Card Styles + ========================================================================== */ + +.mdx-content .card { + background-color: var(--card-bg); + border: none; + box-shadow: 0 0 0 1px var(--border-secondary), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06); +} + +.mdx-content .card:hover { + background-color: oklch(from var(--bg) l c h / 0.6); + border: none; + box-shadow: 0 0 0 1px oklch(from var(--border) l c h / 0.5), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06), + 0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06); +} + +/* ========================================================================== + Glossary Styles + ========================================================================== */ .glossary_h2 { - margin-bottom: 0 !important; + margin-bottom: 0; } .glossary_h3 { - margin-top: 30px !important; + margin-top: 30px; } .glossary_list li { - list-style-type: none !important; - padding-left: 0 !important; + list-style-type: none; + padding-left: 0; } .glossary_list li:before { content: none; } +/* ========================================================================== + Label/Badge Component + ========================================================================== */ .label { display: inline-block; padding: 2px 10px; - font-size: 12px; + font-size: 0.75rem; font-weight: 600; text-transform: uppercase; border-radius: 4px; - letter-spacing: 1px; + letter-spacing: 0.05em; background: transparent; } .label-danger { - border: 1px solid #e74c3c; /* red */ - color: #e74c3c; + border: 1px solid #dc2626; + color: #dc2626; } .label-primary { - border: 1px solid #3498db; /* blue */ - color: #3498db; + border: 1px solid #3b82f6; + color: #3b82f6; } +/* ========================================================================== + Breadcrumbs + ========================================================================== */ .breadcrumb-list { display: flex; flex-wrap: wrap; } +@media (max-width: 640px) { + .breadcrumb-list { + font-size: 0.875rem; + } +} + .breadcrumb-item { white-space: nowrap; } +.breadcrumb-item > a { + font-size: 0.875rem; + font-weight: 600; +} + +/* ========================================================================== + Border Cleanup + ========================================================================== */ .z-10.absolute.w-full.h-full.border-b.border-gray-100, #sidebar-content, .dark #sidebar-content { - border-color: transparent !important; + border-color: transparent; } -/* TOC LEFT LINE REMOVED */ +/* ========================================================================== + Table of Contents - Remove left border + ========================================================================== */ #table-of-contents-content li a { - border-left-width: 0 !important; } +.toc-item { + font-size: 0.875rem; +} + +/* ========================================================================== + CTA Button Styles + ========================================================================== */ #topbar-cta-button a span { - background-color: #000 !important; + background-color: #000; } .dark #topbar-cta-button a span { - background-color: #fff !important; - color: #000 !important; + background-color: #fff; + color: #000; } #topbar-cta-button a svg { display: none; } +/* ========================================================================== + Navbar Links + ========================================================================== */ .navbar-link a, .dark .navbar-link a { background-color: #fff; - border: 1px solid #cecdca !important; + border: 1px solid #cecdca; padding-top: 7px; padding-bottom: 7px; + transition: background-color 0.15s ease; +} + +.navbar-link a:focus-visible, +.dark .navbar-link a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; } .dark .navbar-link a { - background-color: rgb(255 255 255 / 0.1); - border-color: #454545 !important; + background-color: rgba(255, 255, 255, 0.1); + border-color: #454545; } .dark .navbar-link a:hover { @@ -397,33 +750,43 @@ a strong { .navbar-link a:hover .absolute.inset-0.bg-primary-dark.rounded-full, .dark #topbar-cta-button a:hover span { - opacity: 1 !important; + opacity: 1; } +/* ========================================================================== + Navbar Link Order - Reorganize navigation items + ========================================================================== */ .topbar-right-container ul.flex.items-center > li { order: 10; -} /* baseline */ +} + .topbar-right-container ul.flex.items-center > li:nth-child(1) { - order: 1; -} /* Log In */ + order: 1; /* Log In */ +} + .topbar-right-container ul.flex.items-center > li:nth-child(3) { - order: 2; -} /* Sign Up (mobile) */ + order: 2; /* Sign Up (mobile) */ +} + .topbar-right-container ul.flex.items-center > li:nth-child(4) { - order: 2; -} /* Sign Up (desktop) */ + order: 2; /* Sign Up (desktop) */ +} + .topbar-right-container ul.flex.items-center > li:nth-child(2) { - order: 3; -} /* Contact Sales */ + order: 3; /* Contact Sales */ +} ul.flex.items-center > li > a[href*="/u/login"] { - order: 1; /* Log In */ - background-color: transparent !important; - border-color: transparent !important; + order: 1; + background-color: transparent; + border-color: transparent; } +/* ========================================================================== + Code Snippet Feedback Button - Using icon + ========================================================================== */ #code-snippet-feedback-button svg { - display: none !important; + display: none; } #code-snippet-feedback-button::after { @@ -431,108 +794,143 @@ ul.flex.items-center > li > a[href*="/u/login"] { display: block; width: 16px; height: 16px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(156 163 175)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(156 163 175)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; + transition: filter 0.15s ease; } #code-snippet-feedback-button:hover::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107 114 128)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107 114 128)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button:hover::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } +/* ========================================================================== + Library/SDK Cards + ========================================================================== */ .libraries_card { display: flex; flex-direction: column; justify-content: space-between; + transition: box-shadow 0.15s ease, transform 0.15s ease; } .libraries_card:hover { - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); + transform: translateY(-1px); } .dark .libraries_card:hover { background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); +} + +.libraries_cards a svg { + width: 12px; + height: 12px; } +/* ========================================================================== + Login List Styles + ========================================================================== */ .login_list li::before { content: none; } .login_list h2 { - margin: 0 !important; + margin: 0; } .login_list a { - border-bottom: none !important; + border-bottom: none; } -.libraries_cards a svg { - width: 12px !important; - height: 12px !important; -} - -/* Default (light mode) — keep your existing */ +/* ========================================================================== + Tooltip Styles + ========================================================================== */ [data-component-part="tooltip-content"] { - text-align: left !important; - padding: 6px 14px !important; - border-radius: 4px !important; + background-color: #fff; + text-align: left; + padding: 12px; + color: var(--text-secondary); + font-size: 0.8rem; + border-radius: 16px; + box-shadow: inset 0 -0.5px 2px 0 oklch(from var(--shadow) l c h / 0.06), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06), + 0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06); } [data-component-part="tooltip-content"] .flex { - justify-content: flex-start !important; + justify-content: flex-start; } -/* Dark mode overrides */ +/* Dark mode tooltip override - white background */ .dark [data-component-part="tooltip-content"] { - background-color: #ffffff !important; - color: #000000 !important; - border-color: #000000 !important; + background-color: #fff; + color: #000; + border-color: #000; } -/* Link override in dark mode */ [data-component-part="tooltip-content"] a { - color: var(--tooltip-link-color) !important; - text-align: left !important; + color: var(--tooltip-link-color); + text-align: left; opacity: 1; - transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease; } -[data-component-part="tooltip-content"] a:hover { - opacity: 0.7; +[data-component-part="tooltip-content"] a { + color: var(--tooltip-link-color); + transition: color 0.15s ease, opacity 0.15s ease; } -.prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - text-decoration: none !important; +[data-component-part="tooltip-content"] a:hover { + color: var(--tooltip-link-color); + opacity: 0.8; + transition: color 0.15s ease, opacity 0.15s ease; } -.dark #sidebar-group a img { - background-color: transparent !important; +/* ========================================================================== + Code Block Styles + ========================================================================== */ +.prose + :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + text-decoration: none; } -/* .sidebar-group a { - background-color: #efefef !important; +.code-block > div > div > div, +.code-block > div div.z-10.relative div, +.code-group > div div.z-10.relative div { + color: black; } -.dark .sidebar-group a { - background-color: #282828 !important; -} */ +/* ========================================================================== + Sidebar & Navigation + ========================================================================== */ +.dark #sidebar-group a img { + background-color: transparent; +} -/* REMOVE HOMEPAGE TAB */ +/* Hide homepage tab */ .nav-tabs a[href="/"], .nav-tabs a[href="/docs"] { display: none; } +/* ========================================================================== + Card & Accordion Styles + ========================================================================== */ .dark .card, .dark .accordion, .dark .accordion-group { @@ -541,146 +939,189 @@ ul.flex.items-center > li > a[href*="/u/login"] { .card:hover { background-color: rgb(var(--gray-100)); + transition: background-color 0.15s ease, box-shadow 0.15s ease; } .dark .card:hover { background-color: rgb(var(--gray-800)); } -/* Default (light mode) */ -a[href^="http"]:not([href="https://auth0.com"])::after -{ - margin-left: 4px; - position: relative; - top: 1px; - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); -} - -a[href^="http"]:not([href="https://auth0.com"]):hover::after -{ - margin-left: 4px; +/* ========================================================================== + External Link Icons - Simplified approach + ========================================================================== */ +.prose + a[href^="http"]:not([href*="auth0.com"]):not(.not-prose):not(.card):not( + .quickstart_button + )::after { + content: "↗"; + display: inline-block; + margin-left: 0.25em; + font-size: 0.85em; + opacity: 0.6; position: relative; - top: 1px; - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23232220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); -} - -/* Dark mode */ -.dark a[href^="http"]:not([href="https://auth0.com"])::after -{ - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); + top: -0.1em; + transition: opacity 0.15s ease; } -.dark a[href^="http"]:not([href="https://auth0.com"]):hover::after -{ - margin-left: 4px; - position: relative; - top: 1px; - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236742d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); +.prose + a[href^="http"]:not([href*="auth0.com"]):not(.not-prose):not(.card):not( + .quickstart_button + ):hover::after { + opacity: 0.8; } -/* reset for other places */ +/* Reset external link icon in specific contexts */ #footer a[href^="http"]::after, #navbar a[href^="http"]::after, #sidebar-content a[href^="http"]::after, a.no_external_icon[href^="http"]::after, a.card[href^="http"]::after { - content: none !important; -} - -/* LINKS COLOR */ -.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: #191919 !important; -} -.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .quickstart_button)):hover { - color: #232220 !important; - border-bottom-color: #232220; -} -/* DARK LINKS COLOR */ -.dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: #efede9 !important; -} -.dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .quickstart_button)):hover { - color: #6742d5 !important; - border-bottom-color: #6742d5; + content: none; } -/* CALLOUT LINKS COLOR */ +/* ========================================================================== + Callout Link Styles + ========================================================================== */ .prose .callout a { - color: inherit !important; + color: inherit; } -/* TABS */ +/* ========================================================================== + Tab Styles + ========================================================================== */ .dark .tabs ul { border-color: #9e9e9e; } -/* TABS item hover effect */ -.cursor-pointer - .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { - border-color: #191919 !important; +/* Tab hover effect - Simplified selector */ +.cursor-pointer .flex.items-center.border-b.border-transparent:hover { + border-color: #191919; + transition: border-color 0.15s ease; } -.dark - .cursor-pointer - .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { - border-color: #9e9e9e !important; +.dark .cursor-pointer .flex.items-center.border-b.border-transparent:hover { + border-color: #9e9e9e; } -.code-block > div > div > div, -.code-block > div div.z-10.relative div, -.code-group > div div.z-10.relative div { - color: black; +/* ========================================================================== + API Page & Quickstart Buttons + ========================================================================== */ +.api_page_container .card div:first-child { + display: flex; + align-items: center; + padding: 12px 0 8px 0; } -.mdx-content h2:hover, -.mdx-content h3:hover, -.mdx-content h4:hover, -.mdx-content h5:hover, -.mdx-content h6:hover { - border-bottom: none !important; +.api_page_container .card { + border: none; + border-radius: 0; + border-bottom: 1px solid var(--border) !important; + padding: 0; } -/* .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])), -.dark .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { - -} */ +.api_page_container .card:hover { + background-color: var(--bg); +} -.api_page_container .card div { - display: flex; - align-items: center; +.api_page_container .card div#card-link-arrow-icon { + width: 16px; + height: 16px; + padding: 0; + right: 0; + top: 50%; + transform: translateY(-50%); } .quickstart_button { - border: 1px solid #cdcdcd !important; + border: 1px solid #cdcdcd; + transition: border-color 0.15s ease, background-color 0.15s ease; } .quickstart_button:hover { - border: 1px solid #a8a8a8 !important; + border: 1px solid #a8a8a8; +} + +.quickstart_button:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; } .dark .quickstart_button { - border: 1px solid #454545 !important; + border: 1px solid #454545; } .dark .quickstart_button:hover { - border: 1px solid #535353 !important; + border: 1px solid #535353; } +/* ========================================================================== + Banner Styles + ========================================================================== */ #banner { background-color: #232220; } #banner a { - color: #fff !important; - border-bottom-color: #fff !important; + color: #fff; + border-bottom-color: #fff; } #banner a:hover { - border-bottom: 2px solid #fff !important; + border-bottom: 2px solid #fff; } -.dark .text-popover-foreground button.code-snippet-feedback-form-submit-button span { - color: #000 !important; +/* ========================================================================== + Form Button Overrides + ========================================================================== */ +.dark + .text-popover-foreground + button.code-snippet-feedback-form-submit-button + span { + color: #000; +} + +/* ========================================================================== + Responsive Design - Mobile Breakpoints + ========================================================================== */ +@media (max-width: 768px) { + .mdx-content h1, + #content-container h1 { + font-size: 2rem; + } + + .mdx-content h2, + #content-container h2 { + font-size: 1.5rem; + margin-top: 2rem; + } + + .mdx-content h3, + #content-container h3 { + font-size: 1.25rem; + margin-top: 1.5rem; + } + + .table { + font-size: 0.875rem; + } +} + +@media (max-width: 640px) { + .mdx-content h1, + #content-container h1 { + font-size: 1.75rem; + line-height: 1.3; + } + + .mdx-content h2, + #content-container h2 { + font-size: 1.375rem; + } + + .mdx-content h3, + #content-container h3 { + font-size: 1.125rem; + } } /* FIXME: Temporary override for both the original SDK cards and the custom cards due to large margin in Mintlify's latest changes to their component styling */ diff --git a/main/docs/get-started/onboarding/self-service-m2m.mdx b/main/docs/get-started/onboarding/self-service-m2m.mdx index 4d1837b12..0b5921260 100644 --- a/main/docs/get-started/onboarding/self-service-m2m.mdx +++ b/main/docs/get-started/onboarding/self-service-m2m.mdx @@ -1,16 +1,17 @@ --- description: Describes how to onboard with an M2M business case. -'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png -'og:title': Self-Service Machine-to-Machine -'og:url': https://auth0.com/docs/ +"og:image": https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +"og:title": Self-Service Machine-to-Machine +"og:url": https://auth0.com/docs/ permalink: self-service-m2m title: Self-Service Machine-to-Machine -'twitter:description': Describes how to onboard with an M2M business case. -'twitter:title': Self-Service Machine-to-Machine +"twitter:description": Describes how to onboard with an M2M business case. +"twitter:title": Self-Service Machine-to-Machine --- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; -import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; +import { AuthCodeBlock } from "/snippets/AuthCodeBlock.jsx"; + +import { AuthCodeGroup } from "/snippets/AuthCodeGroup.jsx"; If your business case services a non-interactive audience, like APIs or backend servers, you will onboard with a machine-to-machine (M2M) configuration. @@ -18,13 +19,13 @@ If your business case services a non-interactive @@ -36,12 +37,12 @@ These services will still need an M2M access token for authentication. This guide is a pathway to create your M2M implementation in Auth0. We provide considerations, best practices, and concepts you should review. -* In Architecture, we advise you to configure Auth0 to support your Software Development Life Cycle and existing infrastructure. -* In Create an account, we provide instructions to create your API instance in Auth0 and an application to support the authentication flow (or grant) needed for machine-to-machine authentication. -* In Authentication, we walk through the grant you need to use for authentication as well as access tokens and permissions (or scopes) you can set. -* In Branding, we advise you where to find information on how to configure Custom Domains depending on how you plan to manage certificates. -* In Deployment Automations, you can read about our tooling to assist with deployment. -* In Quality Assurance, you can learn more about unit testing, and the readiness checks we provide in Auth0 Dashboard. +- In Architecture, we advise you to configure Auth0 to support your Software Development Life Cycle and existing infrastructure. +- In Create an account, we provide instructions to create your API instance in Auth0 and an application to support the authentication flow (or grant) needed for machine-to-machine authentication. +- In Authentication, we walk through the grant you need to use for authentication as well as access tokens and permissions (or scopes) you can set. +- In Branding, we advise you where to find information on how to configure Custom Domains depending on how you plan to manage certificates. +- In Deployment Automations, you can read about our tooling to assist with deployment. +- In Quality Assurance, you can learn more about unit testing, and the readiness checks we provide in Auth0 Dashboard. ## Architecture @@ -55,12 +56,13 @@ You may want to create a visualization of your current tech stack as well as pla Before you create a new account or configure your first tenant, you may want to consider: -* How you partition or group your APIs to call specific endpoints. +- How you partition or group your APIs to call specific endpoints. + + - This may determine the audience and other claims on access tokens. - + This may determine the audience and other claims on access tokens. -* Any third-party consumers to your resource may request an access token for each call. Excessive calls could affect your [rate limit](/docs/troubleshoot/customer-support/operational-policies/rate-limit-policy/rate-limit-configurations/self-service-public). +- Any third-party consumers to your resource may request an access token for each call. Excessive calls could affect your [rate limit](/docs/troubleshoot/customer-support/operational-policies/rate-limit-policy/rate-limit-configurations/self-service-public). - + You can use an API Gateway to limit the number of access tokens a third-party can request. To learn more about API Gateways and Auth0, read [Configure an Identity Provider in Access Gateway](/docs/get-started/auth0-overview/create-applications/configure-an-identity-provider-in-access-gateway). + - You can use an API Gateway to limit the number of access tokens a third-party can request. To learn more about API Gateways and Auth0, read [Configure an Identity Provider in Access Gateway](/docs/get-started/auth0-overview/create-applications/configure-an-identity-provider-in-access-gateway). ## Create an account @@ -70,15 +72,15 @@ Now that you have a plan for your architecture, you’ll configure your Auth0 ac In the Auth0 Dashboard or with the Auth0 Management API, create: -* An API to represent your API -* An M2M application to use the Client Credential Flow +- An API to represent your API +- An M2M application to use the Client Credential Flow You may want to plan some configuration details before you create an account. -* Your tenant name has a role in your Auth0 domain. Before you determine a name, you should review [tenant characteristics](/docs/get-started/auth0-overview/create-tenants#create-a-tenant-and-domain). -* Which Auth0 features you need for your use case. Some features are only available on Professional and Enterprise plans. -* Determine if you need to support multiple environments, such as development, staging, and production. To learn more, read [Set Up Multiple Environments](/docs/get-started/auth0-overview/create-tenants/set-up-multiple-environments). -* If you have a use case involving thirty-party applications you want to register in a tenant, you can use [Dynamic Application Registration](/docs/get-started/applications/dynamic-client-registration) based on the [OIDC Client Registration](https://openid.net/specs/openid-connect-registration-1_0.html) specification. +- Your tenant name has a role in your Auth0 domain. Before you determine a name, you should review [tenant characteristics](/docs/get-started/auth0-overview/create-tenants#create-a-tenant-and-domain). +- Which Auth0 features you need for your use case. Some features are only available on Professional and Enterprise plans. +- Determine if you need to support multiple environments, such as development, staging, and production. To learn more, read [Set Up Multiple Environments](/docs/get-started/auth0-overview/create-tenants/set-up-multiple-environments). +- If you have a use case involving thirty-party applications you want to register in a tenant, you can use [Dynamic Application Registration](/docs/get-started/applications/dynamic-client-registration) based on the [OIDC Client Registration](https://openid.net/specs/openid-connect-registration-1_0.html) specification. @@ -116,35 +118,76 @@ To register an API programmatically, use the Management API. You will need an ac Use the sample provided in Management API Explorer to call the Management API [Create a Resource Server](https://auth0.com/docs/api/management/v2/resource-servers/post-resource-servers) endpoint and include the following parameters in the body: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
FieldDescriptionExample
NameA friendly name for the API. Does not affect any functionality.yourDomain
IdentifierA unique identifier for the API. Auth0 recommends using a URL. Auth0 does differentiate between URLs that include the last forward slash. For example, `https://example.com` and `https://example.com/` are two different identifiers. The URL does not have to be a publicly available URL. Auth0 will not call your API. This value cannot be modified afterwards.`https://{yourDomain}`
JSON Web Token (JWT) ProfileThe profile determines the format of the access tokens issued for the API. The available values are Auth0 and RFC 9068. To learn more, read Access Token Profiles.access_token
JSON Web Token (JWT) Signing AlgorithmThe algorithm to sign the access tokens with. The available values are HS256, PS256, RS256. If you select RS256, the token will be signed with the tenant's private key.HS256
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Field + + Description + + Example +
+ Name + A friendly name for the API. Does not affect any functionality. + yourDomain +
+ Identifier + + A unique identifier for the API. Auth0 recommends using a URL. Auth0 + does differentiate between URLs that include the last forward slash. For + example, `https://example.com` and `https://example.com/` are two + different identifiers. The URL does not have to be a publicly available + URL. Auth0 will not call your API. This value cannot be modified + afterwards. + `https://{yourDomain}`
+ JSON Web Token (JWT) Profile + + The profile determines the format of the access tokens issued for the + API. The available values are Auth0 and{" "} + RFC 9068. To learn more, read{" "} + + Access Token Profiles + + . + + access_token +
+ JSON Web Token (JWT) Signing Algorithm + + The algorithm to sign the access tokens with. The available values are{" "} + HS256, PS256, RS256. If you + select RS256, the token will be signed with the tenant's + private key. + + HS256 +
@@ -171,11 +214,15 @@ If you create your API in the Dashboard, Auth0 automatically generates a test ap You can create another application for development or production later by following the instructions on [Register Machine-to-Machine Applications](/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps). + 3. Switch to the **API** view, and then locate the API you’d like to enable for this application. 4. Enable the **Authorize** toggle, and then select the arrow button on the right to expand the card. 5. Select **Update**. - ![Dashboard > Applications > APIs](/docs/images/cdy7uua7fh8z/6L2R46XVdYw1kifRfMifRz/87e3b9f75039d55af6028be0eb0598ac/Timesheets_API_-_English.png) + + ![Dashboard > Applications > + APIs](/docs/images/cdy7uua7fh8z/6L2R46XVdYw1kifRfMifRz/87e3b9f75039d55af6028be0eb0598ac/Timesheets_API_-_English.png) + @@ -204,13 +251,13 @@ For non-interactive applications or services to authentication, you must select In Auth0 Dashboard or Management API, you will: -* Set your application to use the Client Credentials Flow -* Update the scopes for your M2M access tokens +- Set your application to use the Client Credentials Flow +- Update the scopes for your M2M access tokens Before you configure your authentication method: -* Review the [Client Credentials Flow](/docs/get-started/authentication-and-authorization-flow/client-credentials-flow) for machine-to-machine authentication. This is the workflow for non-interactive authentication and authorization. -* Determine the level of access for your APIs. This helps determine what [scopes](/docs/get-started/apis/scopes/api-scopes), or permissions, you will configure when you create your API. +- Review the [Client Credentials Flow](/docs/get-started/authentication-and-authorization-flow/client-credentials-flow) for machine-to-machine authentication. This is the workflow for non-interactive authentication and authorization. +- Determine the level of access for your APIs. This helps determine what [scopes](/docs/get-started/apis/scopes/api-scopes), or permissions, you will configure when you create your API. @@ -265,51 +312,57 @@ import ( func main() { - url := "https://{yourDomain}/oauth/token" + url := "https://{yourDomain}/oauth/token" - payload := strings.NewReader("grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER") + payload := strings.NewReader("grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER") - req, _ := http.NewRequest("POST", url, payload) + req, _ := http.NewRequest("POST", url, payload) - req.Header.Add("content-type", "application/x-www-form-urlencoded") + req.Header.Add("content-type", "application/x-www-form-urlencoded") - res, _ := http.DefaultClient.Do(req) + res, _ := http.DefaultClient.Do(req) - defer res.Body.Close() - body, _ := ioutil.ReadAll(res.Body) + defer res.Body.Close() + body, _ := ioutil.ReadAll(res.Body) - fmt.Println(res) - fmt.Println(string(body)) + fmt.Println(res) + fmt.Println(string(body)) } -``` + +```` ```java Java HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token") .header("content-type", "application/x-www-form-urlencoded") .body("grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER") .asString(); -``` +```` + ```javascript Node.JS var axios = require("axios").default; var options = { - method: 'POST', - url: 'https://{yourDomain}/oauth/token', - headers: {'content-type': 'application/x-www-form-urlencoded'}, + method: "POST", + url: "https://{yourDomain}/oauth/token", + headers: { "content-type": "application/x-www-form-urlencoded" }, data: new URLSearchParams({ - grant_type: 'client_credentials', - client_id: '{yourClientId}', - client_secret: '{yourClientSecret}', - audience: 'YOUR_API_IDENTIFIER' - }) + grant_type: "client_credentials", + client_id: "{yourClientId}", + client_secret: "{yourClientSecret}", + audience: "YOUR_API_IDENTIFIER", + }), }; -axios.request(options).then(function (response) { - console.log(response.data); -}).catch(function (error) { - console.error(error); -}); +axios + .request(options) + .then(function (response) { + console.log(response.data); + }) + .catch(function (error) { + console.error(error); + }); ``` + ```objc Obj-C #import @@ -339,6 +392,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request }]; [dataTask resume]; ``` + ```php PHP $curl = curl_init(); @@ -367,6 +421,7 @@ if ($err) { echo $response; } ``` + ```python Python import http.client @@ -383,6 +438,7 @@ data = res.read() print(data.decode("utf-8")) ``` + ```ruby Ruby require 'uri' require 'net/http' @@ -401,6 +457,7 @@ request.body = "grant_type=client_credentials&client_id={yourClientId}&client_se response = http.request(request) puts response.read_body ``` + ```swift Swift import Foundation @@ -430,6 +487,7 @@ let dataTask = session.dataTask(with: request as URLRequest, completionHandler: dataTask.resume() ``` + The response should be similar to the sample below: @@ -472,9 +530,9 @@ Auth0 supports the use of custom domains when you call the `/authorize` endpoint In Auth0 Dashboard, you must: -* Register and verify your domain before you can use it with your Auth0 services. -* Determine if you want to manage your own certificate or use an Auth0 managed certificate. To learn more about certificates, read [Certificate management options](/docs/customize/custom-domains#certificate-management-options). -* Verify the TLS (SSL) version and cipher you want to use for self-managed certificates is supported by Auth0. To learn more, read [TLS (SSL) Versions and Ciphers](/docs/customize/custom-domains/self-managed-certificates/tls-ssl). +- Register and verify your domain before you can use it with your Auth0 services. +- Determine if you want to manage your own certificate or use an Auth0 managed certificate. To learn more about certificates, read [Certificate management options](/docs/customize/custom-domains#certificate-management-options). +- Verify the TLS (SSL) version and cipher you want to use for self-managed certificates is supported by Auth0. To learn more, read [TLS (SSL) Versions and Ciphers](/docs/customize/custom-domains/self-managed-certificates/tls-ssl). @@ -487,6 +545,7 @@ In Auth0 Dashboard, you must: You must have an Enterprise subscription to manage certificates in your custom domain. To learn more, read [Auth0 Pricing](https://auth0.com/pricing/) and [Login](/docs/authenticate/login). + 2. Review [API configuration with custom domains](/docs/customize/custom-domains/configure-features-to-use-custom-domains#apis). You may need to adjust your API settings to incorporate a custom domain. If you experience issues with your custom domain, review [Troubleshoot Custom Domains](/docs/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains). @@ -515,8 +574,8 @@ The Real-time Webtask Logs extension displays all logs for custom code in real-t Quality Assurance is important in identifying issues before you go live. Depending on the nature of your project, there are several different types of quality assurance testing that you’re going to want to consider as part of your integration with Auth0: -* How will your APIs perform when subjected to unexpected production loads? -* How will your rate limits be affected by third-party applications? +- How will your APIs perform when subjected to unexpected production loads? +- How will your rate limits be affected by third-party applications? If you are not using Auth0 widgets or features, like Universal Login, you will not have the built-in usability and accessibility best practices out-of-the-box on a host of browsers and devices. To ensure functional requirements are met and unexpected events are handled correctly, guidance is provided for testing the integration between your application(s) and Auth0, and for unit testing individual extensibility modules, such as Auth0 Actions. We also recommend you review Auth0’s [penetration testing policy](/docs/troubleshoot/customer-support/operational-policies/penetration-testing-policy) and complete Mock testing you can leverage in conjunction with our [load testing policy](/docs/troubleshoot/customer-support/operational-policies/load-testing-policy) to help ensure your application(s) perform under unexpected load. @@ -534,7 +593,10 @@ Our [Deploy and Monitor](/docs/deploy-monitor) section provides guidance for dep To review the Readiness Check, select the drop-down menu below your tenant name and environmental tag at [Auth0 Dashboard > Run Readiness Checks](https://manage.auth0.com/#/production-checks). -![Auth0 Dashboard > Readiness Checklist](/docs/images/cdy7uua7fh8z/7iu1CzH0NgaXJbLBNWXZli/b598b8cdaad0c676e83a0fb0595d4603/Readiness_Checks_-_English.png) + + ![Auth0 Dashboard > Readiness + Checklist](/docs/images/cdy7uua7fh8z/7iu1CzH0NgaXJbLBNWXZli/b598b8cdaad0c676e83a0fb0595d4603/Readiness_Checks_-_English.png) + You can use the filter to apply the Readiness Checks to selected applications. **These checks do not apply to your configured APIs**. @@ -544,8 +606,8 @@ We advise you to review [Deployment Best Practices](/docs/deploy-monitor/deploym ## Learn more -* [Auth0 Overview](/docs/get-started/auth0-overview) -* [Solution Overview (Server Apps + API)](/docs/get-started/architecture-scenarios/server-application-api/part-1) -* [Call Your API Using the Client Credentials Flow](/docs/get-started/authentication-and-authorization-flow/client-credentials-flow/call-your-api-using-the-client-credentials-flow) -* [Retrieve Log Logs Using the Management API](/docs/deploy-monitor/logs/retrieve-log-events-using-mgmt-api) -* [Get Management API Access Tokens for Production](/docs/secure/tokens/access-tokens/management-api-access-tokens/get-management-api-access-tokens-for-production) \ No newline at end of file +- [Auth0 Overview](/docs/get-started/auth0-overview) +- [Solution Overview (Server Apps + API)](/docs/get-started/architecture-scenarios/server-application-api/part-1) +- [Call Your API Using the Client Credentials Flow](/docs/get-started/authentication-and-authorization-flow/client-credentials-flow/call-your-api-using-the-client-credentials-flow) +- [Retrieve Log Logs Using the Management API](/docs/deploy-monitor/logs/retrieve-log-events-using-mgmt-api) +- [Get Management API Access Tokens for Production](/docs/secure/tokens/access-tokens/management-api-access-tokens/get-management-api-access-tokens-for-production) diff --git a/main/snippets/AuthDocsPipeline.mdx b/main/snippets/AuthDocsPipeline.mdx deleted file mode 100644 index 9bb3049c1..000000000 --- a/main/snippets/AuthDocsPipeline.mdx +++ /dev/null @@ -1,89 +0,0 @@ - - -export const AuthDocsPipeline = ({ activeId }) => { - const [hoveredId, setHoveredId] = useState(null); - - const VB_WIDTH = 1202; - const VB_HEIGHT = 424; - - const AUTH_GROUP = new Set(['authenticate', 'provision-db', 'provision-social', 'add-login']); - const CUSTOM_GROUP = new Set(['customize', 'brand', 'actions', 'extensions']); - - const STEPS = [ - { id: 'get-started', href: '/docs/get-started', cx: 53.7447, cy: 140.5572, r: 52 }, - { id: 'authenticate', href: '/docs/authenticate', cx: 239.164, cy: 140.5572, r: 52 }, - { id: 'manage-users', href: '/docs/manage-users', cx: 515.135, cy: 140.5572, r: 52 }, - { id: 'customize', href: '/docs/customize', cx: 791.106, cy: 140.5572, r: 52 }, - { id: 'deploy', href: '/docs/deploy-monitor', cx:1147.57, cy: 140.5572, r: 52 }, - { id: 'secure', href: '/docs/secure', cx: 974, cy: 224, r: 44 }, - { id: 'provision-db', href: '/docs/authenticate#provision–database', cx: 67, cy: 410, r: 42 }, - { id: 'provision-social', href: '/docs/authenticate#provision–social', cx: 167, cy: 410, r: 42 }, - { id: 'add-login', href: '/docs/authenticate#add-login', cx: 312, cy: 410, r: 42 }, - { id: 'brand', href: '/docs/customize#brand', cx: 720, cy: 410, r: 42 }, - { id: 'actions', href: '/docs/customize#actions', cx: 864, cy: 410, r: 42 }, - { id: 'extensions', href: '/docs/customize#extensions', cx: 964, cy: 410, r: 42 }, - ]; - - const addGroupToSet = (id, set) => { - if (!id) return; - if (AUTH_GROUP.has(id)) { - AUTH_GROUP.forEach((gid) => set.add(gid)); - } else if (CUSTOM_GROUP.has(id)) { - CUSTOM_GROUP.forEach((gid) => set.add(gid)); - } else { - set.add(id); - } - }; - - const lit = new Set(); - addGroupToSet(activeId, lit); - addGroupToSet(hoveredId, lit); - - return ( -
- Auth0 docs pipeline - Auth0 docs pipeline - - {STEPS.map(({ id, cx, cy, r }) => { - if (lit.has(id)) return null; - const left = ((cx - r) / VB_WIDTH) * 100; - const top = ((cy - r) / VB_HEIGHT) * 100; - const size = ((2 * r) / VB_WIDTH) * 100; - return ( -
- ); - })} - - {STEPS.map(({ id, href, cx, cy, r }) => { - const left = ((cx - r) / VB_WIDTH) * 100; - const top = ((cy - r) / VB_HEIGHT) * 100; - const size = ((2 * r) / VB_WIDTH) * 100; - return ( - setHoveredId(id)} - onMouseLeave={() => setHoveredId(null)} - /> - ); - })} -
- ); -}; diff --git a/main/snippets/AuthCodeBlock.jsx b/main/snippets/auth-code-block.jsx similarity index 100% rename from main/snippets/AuthCodeBlock.jsx rename to main/snippets/auth-code-block.jsx diff --git a/main/snippets/AuthCodeGroup.jsx b/main/snippets/auth-code-group.jsx similarity index 100% rename from main/snippets/AuthCodeGroup.jsx rename to main/snippets/auth-code-group.jsx diff --git a/main/snippets/auth-docs-pipeline.mdx b/main/snippets/auth-docs-pipeline.mdx new file mode 100644 index 000000000..cdfba5b5b --- /dev/null +++ b/main/snippets/auth-docs-pipeline.mdx @@ -0,0 +1,67 @@ +export const AuthDocsPipeline = ({ activeId }) => { + const [hoveredId, setHoveredId] = useState(null); + +const VB_WIDTH = 1202; +const VB_HEIGHT = 424; + +const AUTH_GROUP = new Set(['authenticate', 'provision-db', 'provision-social', 'add-login']); +const CUSTOM_GROUP = new Set(['customize', 'brand', 'actions', 'extensions']); + +const STEPS = [ +{ id: 'get-started', href: '/docs/get-started', cx: 53.7447, cy: 140.5572, r: 52 }, +{ id: 'authenticate', href: '/docs/authenticate', cx: 239.164, cy: 140.5572, r: 52 }, +{ id: 'manage-users', href: '/docs/manage-users', cx: 515.135, cy: 140.5572, r: 52 }, +{ id: 'customize', href: '/docs/customize', cx: 791.106, cy: 140.5572, r: 52 }, +{ id: 'deploy', href: '/docs/deploy-monitor', cx:1147.57, cy: 140.5572, r: 52 }, +{ id: 'secure', href: '/docs/secure', cx: 974, cy: 224, r: 44 }, +{ id: 'provision-db', href: '/docs/authenticate#provision–database', cx: 67, cy: 410, r: 42 }, +{ id: 'provision-social', href: '/docs/authenticate#provision–social', cx: 167, cy: 410, r: 42 }, +{ id: 'add-login', href: '/docs/authenticate#add-login', cx: 312, cy: 410, r: 42 }, +{ id: 'brand', href: '/docs/customize#brand', cx: 720, cy: 410, r: 42 }, +{ id: 'actions', href: '/docs/customize#actions', cx: 864, cy: 410, r: 42 }, +{ id: 'extensions', href: '/docs/customize#extensions', cx: 964, cy: 410, r: 42 }, +]; + +const addGroupToSet = (id, set) => { +if (!id) return; +if (AUTH_GROUP.has(id)) { +AUTH_GROUP.forEach((gid) => set.add(gid)); +} else if (CUSTOM_GROUP.has(id)) { +CUSTOM_GROUP.forEach((gid) => set.add(gid)); +} else { +set.add(id); +} +}; + +const lit = new Set(); +addGroupToSet(activeId, lit); +addGroupToSet(hoveredId, lit); + +return ( + +
+Auth0 docs pipeline + + {STEPS.map(({ id, cx, cy, r }) => { + if (lit.has(id)) return null; + const left = ((cx - r) / VB_WIDTH) * 100; + const top = ((cy - r) / VB_HEIGHT) * 100; + const size = ((2 * r) / VB_WIDTH) * 100; + return ( +
+ ); + })} + +
+ +); +}; diff --git a/main/snippets/BgImage.jsx b/main/snippets/bg-image.jsx similarity index 100% rename from main/snippets/BgImage.jsx rename to main/snippets/bg-image.jsx diff --git a/main/snippets/home.jsx b/main/snippets/home.jsx index 0f7fb7de5..7e8d18a33 100644 --- a/main/snippets/home.jsx +++ b/main/snippets/home.jsx @@ -1,14 +1,21 @@ export const DocsBanner = () => { return ( -
+
-

Auth0 Docs

-

+

+ Auth0 Docs +

+

Browse the latest sample code, articles, tutorials,
and API reference.

-
+
{/* Mobile light banner (< 420px, light mode) */} {
-
- {f.title} - {f.title} +
+ {f.title} + {f.title}
@@ -187,8 +195,14 @@ export const LanguageGrid = () => { export const ProductGrid = () => { const products = [ - { label: "Authentication", href: "https://auth0.com/platform/authentication" }, - { label: "Fine-Grained Authorization", href: "https://auth0.com/fine-grained-authorization" }, + { + label: "Authentication", + href: "https://auth0.com/platform/authentication", + }, + { + label: "Fine-Grained Authorization", + href: "https://auth0.com/fine-grained-authorization", + }, { label: "Auth0 for AI Agents", href: "https://auth0.com/ai" }, ]; @@ -272,14 +286,26 @@ export const LearnBasicsGrid = () => { > {/* Icon */}
- {it.title} - {it.title} + {it.title} + {it.title}
{/* Text */}
-

{it.title}

-

{it.desc}

+

+ {it.title} +

+

+ {it.desc} +

))} diff --git a/main/snippets/InlineImage.mdx b/main/snippets/inline-image.mdx similarity index 100% rename from main/snippets/InlineImage.mdx rename to main/snippets/inline-image.mdx diff --git a/main/snippets/QuickstartButtons.jsx b/main/snippets/quickstart-buttons.jsx similarity index 100% rename from main/snippets/QuickstartButtons.jsx rename to main/snippets/quickstart-buttons.jsx diff --git a/main/snippets/QuickstartPage.mdx b/main/snippets/quickstart-page.mdx similarity index 100% rename from main/snippets/QuickstartPage.mdx rename to main/snippets/quickstart-page.mdx diff --git a/main/snippets/RelatedPages.mdx b/main/snippets/related-pages.mdx similarity index 100% rename from main/snippets/RelatedPages.mdx rename to main/snippets/related-pages.mdx diff --git a/main/snippets/sdks/SdkLibraries.mdx b/main/snippets/sdks/sdk-libraries.mdx similarity index 100% rename from main/snippets/sdks/SdkLibraries.mdx rename to main/snippets/sdks/sdk-libraries.mdx diff --git a/main/snippets/SectionsWithCards.jsx b/main/snippets/sections-with-cards.jsx similarity index 86% rename from main/snippets/SectionsWithCards.jsx rename to main/snippets/sections-with-cards.jsx index 4ff5f0fc3..9a24117af 100644 --- a/main/snippets/SectionsWithCards.jsx +++ b/main/snippets/sections-with-cards.jsx @@ -4,11 +4,14 @@ export const SectionsWithCards = ({ sections }) => { const filteredSections = sections .map((s) => ({ ...s, - items: s.items.filter((it) => it.name.toLowerCase().includes(query.toLowerCase())), + items: s.items.filter((it) => + it.name.toLowerCase().includes(query.toLowerCase()) + ), })) .filter((s) => s.items.length > 0); - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); + const getLink = (item, label) => + item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); const Card = ({ item }) => { const github = getLink(item, "github"); @@ -22,7 +25,11 @@ export const SectionsWithCards = ({ sections }) => { const date = item?.date ?? ""; // plain string like "Jan 16, 2024" const tertiary = quickstart || docs; - const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Documentation" : ""; + const tertiaryLabel = quickstart + ? "Quickstart" + : docs + ? "Documentation" + : ""; return (
{
{item?.logo && ( - {title} + {title} )}

{title}

- {!!subtext &&

{subtext}

} + {!!subtext && ( +

+ {subtext} +

+ )}
@@ -61,7 +77,9 @@ export const SectionsWithCards = ({ sections }) => { )} {!!date && ( - on {date.replace(/^on\s+/i, "")} + + on {date.replace(/^on\s+/i, "")} + )}
@@ -198,12 +216,18 @@ export const SectionsWithCards = ({ sections }) => { {filteredSections.length === 0 ? ( -

No results for “{query}”.

+

+ No results for “{query}”. +

) : ( filteredSections.map((section) => (
-

{section.title}

-

{section.description}

+

+ {section.title} +

+

+ {section.description} +

{section.items.map((it, idx) => ( @@ -219,7 +243,8 @@ export const SectionsWithCards = ({ sections }) => { }; export const LibrariesCards = ({ cards }) => { - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); + const getLink = (item, label) => + item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); const Card = ({ item }) => { const github = getLink(item, "github"); @@ -247,14 +272,23 @@ export const LibrariesCards = ({ cards }) => {
{item?.logo && ( - {title} + {title} )}

{title}

- {!!subtext &&

{subtext}

} + {!!subtext && ( +

+ {subtext} +

+ )}
@@ -272,7 +306,9 @@ export const LibrariesCards = ({ cards }) => { )} {!!date && ( - on {date.replace(/^on\s+/i, "")} + + on {date.replace(/^on\s+/i, "")} + )}
@@ -357,7 +393,8 @@ export const LibrariesCards = ({ cards }) => { export const SectionCard = ({ item }) => { if (!item) return null; - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); + const getLink = (item, label) => + item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); const github = getLink(item, "github"); const sample = getLink(item, "sample app"); const quickstart = getLink(item, "quickstart"); @@ -368,13 +405,20 @@ export const SectionCard = ({ item }) => { const badge = item?.badge ?? ""; const date = item?.date ?? ""; - const isHttpsLogo = typeof item?.logo === "string" && /^https:\/\//i.test(item.logo); + const isHttpsLogo = + typeof item?.logo === "string" && /^https:\/\//i.test(item.logo); - const src = isHttpsLogo ? item.logo : `/docs/images/icons/light/${item?.logo}`; - const srcDark = isHttpsLogo ? item.logo : `/docs/images/icons/dark/${item?.logo}`; + const src = isHttpsLogo + ? item.logo + : `/docs/images/icons/light/${item?.logo}`; + const srcDark = isHttpsLogo + ? item.logo + : `/docs/images/icons/dark/${item?.logo}`; // Add grayscale class only if https - const imgClass = "!my-0 w-8 h-8 object-contain shrink-0 " + (isHttpsLogo ? "mint-filter mint-grayscale" : ""); + const imgClass = + "!my-0 w-8 h-8 object-contain shrink-0 " + + (isHttpsLogo ? "mint-filter mint-grayscale" : ""); const tertiary = quickstart || docs; const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : ""; @@ -392,8 +436,18 @@ export const SectionCard = ({ item }) => {
{item?.logo && ( <> - {title} - {title} + {title} + {title} )} @@ -402,7 +456,9 @@ export const SectionCard = ({ item }) => { {title} {!!subtext && ( -

{subtext}

+

+ {subtext} +

)}
diff --git a/main/snippets/useCases.mdx b/main/snippets/use-cases.mdx similarity index 100% rename from main/snippets/useCases.mdx rename to main/snippets/use-cases.mdx From 954169494e9e62b6d8da2f42a39410861c8fe6b4 Mon Sep 17 00:00:00 2001 From: Ankur Chauhan Date: Fri, 21 Nov 2025 09:20:50 +0100 Subject: [PATCH 2/9] updates styles for auth4genai docs --- auth4genai/style.css | 897 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 852 insertions(+), 45 deletions(-) diff --git a/auth4genai/style.css b/auth4genai/style.css index e31df745f..cbe530a3d 100644 --- a/auth4genai/style.css +++ b/auth4genai/style.css @@ -1,24 +1,782 @@ -button[data-component-part="tab-button"] { - font-size: 1rem !important; +#page-context-menu > button { + background: rgba(255, 255, 255, 0.2); + transition: background 0.15s ease-out; + backdrop-filter: blur(10px); + --webkit-backdrop-filter: blur(10px); } -/* For Mintlify dark mode class (if used) */ -.dark img[src*="https://mintlify-assets.b-cdn.net/auth0/"] -{ - filter: invert(1) hue-rotate(180deg); - background: transparent !important; +#page-context-menu > button:hover { + background: rgba(255, 255, 255, 0.5); + transition: background 0.15s ease-out; + backdrop-filter: blur(10px); + --webkit-backdrop-filter: blur(10px); +} + +/* ========================================================================== + BASE STYLES + ========================================================================== */ +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +/* ========================================================================== + Hero Background + ========================================================================== */ +span.fixed.inset-0.pointer-events-none { + background-repeat: no-repeat; + background-size: cover; + background-position: left -400px; +} + +/* ========================================================================== + Typography + ========================================================================== */ +.mdx-content h1, +.mdx-content h2, +.mdx-content h3, +.mdx-content h4, +.mdx-content h5, +.mdx-content h6, +#content-container h1, +#content-container h2, +#content-container h3, +#content-container h4, +#content-container h5, +#content-container h6 { + line-height: 1.2; + letter-spacing: -0.02em; + font-weight: 600; +} + +/* Enhanced heading hierarchy with better spacing */ +.mdx-content h1, +#content-container h1 { + font-size: 1.75rem; + line-height: 1.15; + letter-spacing: -0.03em; +} + +.mdx-content h2, +#content-container h2 { + font-size: 1.125rem; + line-height: 1.2; + letter-spacing: -0.025em; +} + +.mdx-content h3, +#content-container h3 { + font-size: 1rem; + line-height: 1.3; + letter-spacing: -0.02em; + margin-bottom: 0.75rem; +} + +.mdx-content h4, +#content-container h4 { + font-size: 1rem; + line-height: 1.4; + margin-bottom: 0.5rem; +} + +.mdx-content h5, +#content-container h5:not(.callout h5) { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 500; + color: var(--muted); + margin-bottom: 2rem; +} + +.mdx-content h6, +#content-container h6:not(.callout h6) { + font-size: 1rem; + line-height: 1.5; + font-weight: 700; +} + +.prose { + font-size: 1.125rem; + line-height: 1.625; + letter-spacing: 0; } -/* Make Github integration logo visible in dark mode */ +span[data-as="p"] { + font-size: 1rem; + line-height: 1.5; + letter-spacing: -0.06px; + font-weight: 400; + color: var(--text); + margin-bottom: 1rem; +} + +#content-area div.mdx-content .prose > span[data-as="p"], +#content-area div.mdx-content.prose > span[data-as="p"] { + margin-top: 0; + margin-bottom: 1rem; +} + +li { + font-size: 1rem; + line-height: 1.625; + font-weight: 400; + color: var(--text); +} +#header div p { + color: var(--text-tertiary); + line-height: 1.5rem; +} + +/* ========================================================================== + Table Styles + ========================================================================== */ +.table { + width: 100%; + table-layout: fixed; + border-collapse: collapse; + border-radius: 12px; + box-shadow: inset 0 -0.5px 2px 0 oklch(from var(--shadow) l c h / 0.06), + 0 0 0 1px var(--border-secondary), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06); + overflow: hidden; + padding-bottom: 4px; +} + +.table thead { + background-color: oklch(from var(--border) l c h / 0.15); +} + +.table th, +.table td { + font-size: 0.875rem; + text-align: left; + word-wrap: break-word; + padding: 8px 12px; +} + +.table th { + border-bottom: 1px solid var(--border-secondary); +} + +.table tr { + border-bottom: 1px solid var(--border-secondary); +} + +.table td { + background-color: var(--bg); + font-size: 0.875rem; +} + +.table td:hover { + background-color: oklch(from var(--border) l c h / 0.05); +} + +.table th:first-child, +.table td:first-child { + width: 30%; + max-width: 30%; +} + +.table th:not(:first-child), +.table td:not(:first-child) { + width: calc(70% / (var(--cols) - 1)); + border-top-right-radius: 10px; +} + +/* Nested lists */ +.mdx-content ol ol, +.prose ol ol { + list-style-type: decimal; +} + +/* ========================================================================== + CSS Variables - Design Tokens + ========================================================================== */ :root { + /* Colors */ + --tooltip-link-color: oklch(50.99% 0.2119 287.99); + --bg: oklch(100% 0 0); + --text: oklch(26.86% 0 0); + --text-secondary: oklch(45.12% 0.0123 264.12); + --text-tertiary: oklch(61.18% 0.0175 262.96); + --muted: oklch(55.1% 0.0234 264.36); + --border: oklch(92.76% 0.0058 264.53); + --border-secondary: oklch(95% 0.0087 260.89); + --accent: oklch(50.99% 0.2119 287.99); + + /* Component Colors */ + --section-icon-bg: #eef2ff; + --card-bg: oklch(100% 0 0); + --shadow: oklch(0% 0 0); + --card-shadow: oklch(from var(--shadow) l c h / calc(alpha - 0.08)); + + /* Form Elements */ + --input-bg: oklch(100% 0 0); + --input-border: oklch(87.17% 0.0093 258.34); + --input-placeholder: oklch(71.37% 0.0192 261.32); + --dash-color: oklch(93.68% 0.0029 264.54); + + /* Legacy filters - preserved for compatibility */ --github-logo-filter: none; } +.dark { + /* Dark Mode Colors */ + --tooltip-link-color: #6742d5; + --bg: #0f1115; + --text: #e5e7eb; + --text-secondary: #9ca3af; + --text-tertiary: #6b7280; + --muted: #a3a3a3; + --border: #262a33; + --border-secondary: #373e4e; + --accent: #60a5fa; + + /* Dark Mode Component Colors */ + --section-icon-bg: #1b1f2a; + --card-bg: #151923; + --shadow: #000000; + --card-shadow: rgba(255, 255, 255, 0.06); + + /* Dark Mode Form Elements */ + --input-bg: #141825; + --input-border: #2a3140; + --input-placeholder: #6b7280; + --dash-color: rgba(255, 255, 255, 0.14); +} + html[style*="color-scheme: dark"] { --github-logo-filter: invert(1) brightness(2); } +/* ========================================================================== + Frame Component + ========================================================================== */ +.frame { + padding: 0; + margin: 20px 0; +} + +.frame > div { + justify-content: start; +} + +.frame img { + width: 100%; + object-fit: cover; + border-radius: 12px; +} + +div[data-component-part="frame-caption"] { + padding-left: 12px; + padding-bottom: 12px; + color: var(--); +} + +/* ========================================================================== + Link Styles + ========================================================================== */ +.prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ) { + color: var(--accent); + border: none; + text-decoration: underline; + text-underline-offset: 4px; + font-weight: 400; + transition: text-underline-offset 0.15s ease-out, opacity 0.15s ease-out; + border-radius: 4px; +} + +.prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):hover { + text-decoration: underline; + color: var(--text); + transition: text-underline-offset 0.15s ease-out, opacity 0.15s ease-out; +} + +.prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):focus-visible { + transition: opacity 0.15s ease-out; +} + +.dark + .prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ) { + color: var(--text); +} + +.dark + .prose + a:not(.not-prose):not(.card):not(.quickstart_button):not( + [aria-label="Navigate to header"] + ):hover { + color: var(--tooltip-link-color); + border-bottom-color: var(--tooltip-link-color); +} + +/* Remove underline from heading anchor links */ +.mdx-content h2:hover, +.mdx-content h3:hover, +.mdx-content h4:hover, +.mdx-content h5:hover, +.mdx-content h6:hover { + border-bottom: none; +} + +/* Bold links */ +.prose a strong { + font-weight: 600; +} + +/* External link icons */ +.prose + a[href^="http"]:not([href*="auth0.com"]):not(.not-prose):not(.card):not( + .quickstart_button + )::after { + content: "↗"; + display: inline-block; + margin-left: 0.25em; + font-size: 0.85em; + opacity: 0.6; + position: relative; + top: -0.1em; + transition: opacity 0.15s ease; +} + +.prose + a[href^="http"]:not([href*="auth0.com"]):not(.not-prose):not(.card):not( + .quickstart_button + ):hover::after { + opacity: 0.8; +} + +/* Reset external link icon in specific contexts */ +#footer a[href^="http"]::after, +#navbar a[href^="http"]::after, +#sidebar-content a[href^="http"]::after, +a.no_external_icon[href^="http"]::after, +a.card[href^="http"]::after { + content: none; +} + +/* Callout link styles */ +.prose .callout a { + color: inherit; +} + +/* ========================================================================== + Sidebar Separators - Using dashed lines + ========================================================================== */ +#navigation-items .px-1.py-3, +.sidebar-group .px-1.py-3, +.sidebar-groups .px-1.py-3 { + padding: 0; + height: 0.5px; + width: 100%; + background: var(--border-secondary); + margin: 8px 0 16px 0; +} + +#navigation-items .px-1.py-3 > *, +.sidebar-group .px-1.py-3 > *, +.sidebar-groups .px-1.py-3 > * { + display: none; +} + +.sidebar-title { + font-size: 0.825rem; + font-weight: 500; +} + +.sidebar-group-header { + font-size: 0.825rem; + letter-spacing: 0; + font-weight: 500; + color: var(--text-tertiary); +} + +#sidebar-group > li > a { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 12px; + padding-right: 12px; + border-radius: 12px; + margin: 0; + font-size: 0.95rem; + line-height: 1.3; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > a > svg { + width: 24px; + height: 24px; + transition: all 0.15s ease-out; +} + +#sidebar-group > li > button { + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + border: none; + border-radius: 12px; + margin: 0; + font-size: 0.95rem; + line-height: 1.4; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > button > svg { + width: 28px; + height: 28px; + transition: all 0.15s ease-out; +} + +#sidebar-group > li > ul { + margin-left: 24px; +} + +#sidebar-group > li > ul > li::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: -8px; + height: 100%; + width: 0.5px; + background: var(--border-secondary); +} + +#sidebar-group > li > ul > li > a { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 12px !important; + padding-right: 12px; + border: none; + border-radius: 12px; + margin: 0; + font-size: 0.9rem; + line-height: 1.4; + font-weight: 500; + letter-spacing: -0.1px; + color: var(--text-secondary); + transition: all 0.15s ease-out; + text-shadow: none; +} + +#sidebar-group > li > ul > li > a > svg { + width: 28px; + height: 28px; + transition: all 0.15s ease-out; +} + +#sidebar-group > li > button > div { + flex-grow: 1; +} + +/* [data-callout-type="note"] [data-component-part="callout-icon"] svg { + display: none; +} + +[data-callout-type="note"] [data-component-part="callout-icon"]::before { + content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzIxYmFmYiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTMuNjYsODIuMzRsLTU2LTU2QTgsOCwwLDAsMCwxNTIsMjRINTZBMTYsMTYsMCwwLDAsNDAsNDBWMjE2YTE2LDE2LDAsMCwwLDE2LDE2SDIwMGExNiwxNiwwLDAsMCwxNi0xNlY4OEE4LDgsMCwwLDAsMjEzLjY2LDgyLjM0Wk0xNjAsNTEuMzEsMTg4LjY5LDgwSDE2MFpNMjAwLDIxNkg1NlY0MGg4OFY4OGE4LDgsMCwwLDAsOCw4aDQ4VjIxNlptLTMyLTgwYTgsOCwwLDAsMS04LDhIOTZhOCw4LDAsMCwxLDAtMTZoNjRBOCw4LDAsMCwxLDE2OCwxMzZabTAsMzJhOCw4LDAsMCwxLTgsOEg5NmE4LDgsMCwwLDEsMC0xNmg2NEE4LDgsMCwwLDEsMTY4LDE2OFoiPjwvcGF0aD48L3N2Zz4="); + display: block; + background-repeat: no-repeat; + background-size: contain; + position: relative; + top: -4px; +} */ + +/* ========================================================================== + Card Styles + ========================================================================== */ +.mdx-content .card { + transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out, + border 0.15s ease-out; + background-color: var(--bg); + border: 1px solid var(--border-secondary); + border-radius: 1.5rem; + box-shadow: 0 0 0 1px var(--border-secondary), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06); +} + +.mdx-content .card:hover { + transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out, + border 0.15s ease-out; + background-color: oklch(from var(--bg) l c h / 0.6); + border: 1px solid var(--accent); + box-shadow: 0 0 0 1px oklch(from var(--border) l c h / 0.5), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06), + 0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06); +} + +.card:hover { + background-color: rgb(var(--gray-100)); + transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out; +} + +.dark .card, +.dark .accordion, +.dark .accordion-group { + border-color: var(--border-secondary); +} + +/* ========================================================================== + Code Block Styles + ========================================================================== */ +.prose + :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + text-decoration: none; +} + +.code-block > div > div > div, +.code-block > div div.z-10.relative div, +.code-group > div div.z-10.relative div { + color: black; +} + +/* ========================================================================== + Tooltip Styles + ========================================================================== */ +[data-component-part="tooltip-content"] { + background-color: #fff; + text-align: left; + padding: 12px; + color: var(--text-secondary); + font-size: 0.8rem; + border-radius: 16px; + box-shadow: inset 0 -0.5px 2px 0 oklch(from var(--shadow) l c h / 0.06), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + 0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06), + 0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06), + 0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06), + 0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06), + 0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06); +} + +[data-component-part="tooltip-content"] .flex { + justify-content: flex-start; +} + +/* Dark mode tooltip override - white background */ +.dark [data-component-part="tooltip-content"] { + background-color: #fff; + color: #000; + border-color: #000; +} + +[data-component-part="tooltip-content"] a { + color: var(--tooltip-link-color); + text-align: left; + opacity: 1; + transition: opacity 0.2s ease; +} + +[data-component-part="tooltip-content"] a { + color: var(--tooltip-link-color); + transition: color 0.15s ease, opacity 0.15s ease; +} + +[data-component-part="tooltip-content"] a:hover { + color: var(--tooltip-link-color); + opacity: 0.8; + transition: color 0.15s ease, opacity 0.15s ease; +} + +/* ========================================================================== + Responsive Design - Mobile Breakpoints + ========================================================================== */ +@media (max-width: 768px) { + .mdx-content h1, + #content-container h1 { + font-size: 2rem; + } + + .mdx-content h2, + #content-container h2 { + font-size: 1.5rem; + margin-top: 2rem; + } + + .mdx-content h3, + #content-container h3 { + font-size: 1.25rem; + margin-top: 1.5rem; + } + + .table { + font-size: 0.875rem; + } +} + +@media (max-width: 640px) { + .mdx-content h1, + #content-container h1 { + font-size: 1.75rem; + line-height: 1.3; + } + + .mdx-content h2, + #content-container h2 { + font-size: 1.375rem; + } + + .mdx-content h3, + #content-container h3 { + font-size: 1.125rem; + } +} + +/* ========================================================================== + AUTH4GENAI SPECIFIC STYLES + ========================================================================== */ + +[data-component-part="card-content-container"] { + flex-grow: 1; + height: 100%; +} + +.mdx-content h2[data-component-part="card-title"], +#content-container h2[data-component-part="card-title"] { + font-size: 1.125rem; + font-weight: 600; +} + +#content-area div.mdx-content { + flex-grow: 1; + height: 100%; +} + +#content-area div.mdx-content .prose > span[data-as="p"]:first-child { + font-size: 0.875rem; + color: var(--text-tertiary); + font-weight: 500; + margin-top: 1rem; + margin-bottom: 0.5rem; + flex-grow: 1; + height: 100%; +} + +#card-content { + display: flex; + flex-direction: column; + height: 100%; +} + +#content-area div.mdx-content .prose > span[data-as="p"] code { + font-size: 0.75rem; + font-weight: 700; + background: var(--border); + padding: 0.15rem 0.5rem; + border-radius: 1rem; +} + +/* ========================================================================== + Table of Contents - Remove left border + ========================================================================== */ +#table-of-contents-content li a { +} + +.toc-item { + font-size: 0.875rem; +} + +/* ========================================================================== + Tab Styles + ========================================================================== */ + +[role="tablist"] { + position: relative; +} + +button[data-component-part="tab-button"] { + font-size: 1rem !important; + position: relative; + transition: color 0.2s ease; +} + +button[data-component-part="tab-button"][aria-selected="true"] { + color: var(--accent); + font-weight: 500; +} + +.tab-indicator { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: var(--accent); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; + border-radius: 2px 2px 0 0; + z-index: 1; + pointer-events: none; +} + +[role="tablist"]::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: var(--accent); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + width 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 2px 2px 0 0; + z-index: 0; + opacity: 0; +} + +.dark .tabs ul { + border-color: var(--border-secondary); +} + +/* Tab hover effect */ +.cursor-pointer .flex.items-center.border-b.border-transparent:hover { + border-color: var(--text-tertiary); + transition: border-color 0.15s ease; +} + +.dark .cursor-pointer .flex.items-center.border-b.border-transparent:hover { + border-color: var(--border-secondary); +} + +/* For Mintlify dark mode class (if used) */ +.dark img[src*="https://mintlify-assets.b-cdn.net/auth0/"] +{ + filter: invert(1) hue-rotate(180deg); + background: transparent !important; +} + /* SearchAndFilterGrid styling */ .custom-grid-container { @@ -48,29 +806,37 @@ html[style*="color-scheme: dark"] { flex-shrink: 0; } +@media screen and (width <= 900px) { + .custom-grid-search-input-wrapper { + width: 100%; + } +} + .custom-grid-search-input { width: 100%; - padding: 0.5rem 0.5rem 0.5rem 2.5rem; - border: 1px solid #d1d5db; - border-radius: 8px; - color: #374151; + padding: 0.35rem 0.5rem 0.35rem 2.5rem; + border: 1px solid var(--input-border); + border-radius: 16px; + height: 2.5rem; + color: var(--text); font-size: 0.875rem; outline: none; transition: all 0.2s ease; box-sizing: border-box; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 2px oklch(from var(--shadow) l c h / 0.05); } .custom-grid-search-input:focus { - border-color: #6366f1; - background-color: #ffffff; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(99, 102, 241, 0.1); + border-color: var(--accent); + background-color: var(--input-bg); + box-shadow: inset 0 1px 2px oklch(from var(--shadow) l c h / 0.05), + 0 0 0 3px oklch(from var(--accent) l c h / 0.1); } .custom-grid-search-input:not(:focus) { - border-color: #d1d5db; - background-color: #f9fafb; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); + border-color: var(--input-border); + background-color: oklch(from var(--bg) l c h / 0.95); + box-shadow: inset 0 1px 2px oklch(from var(--shadow) l c h / 0.05); } .custom-grid-search-icon { @@ -78,21 +844,32 @@ html[style*="color-scheme: dark"] { left: 0.875rem; top: 50%; transform: translateY(-50%); - color: #9ca3af; + color: var(--text-tertiary); pointer-events: none; } .custom-grid-no-results { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; padding: 3rem 2rem; border: 2px dashed var(--ifm-color-emphasis-300); border-radius: 8px; - background-color: var(--ifm-color-emphasis-50); } .custom-grid-no-results-icon { - font-size: 2.5rem; margin-bottom: 1rem; + padding: 2rem; + border-radius: 1.5rem; + box-shadow: inset 0 -1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + inset 0 -2px 4px -1px oklch(from var(--shadow) l c h / 0.08), + 0 0 0 0.5px oklch(from var(--shadow) l c h / 0.06), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.08), + 0 1px 2px -1px oklch(from var(--shadow) l c h / 0.08), + 0 2px 2px -1px oklch(from var(--shadow) l c h / 0.08), + 0 2px 4px -1px oklch(from var(--shadow) l c h / 0.08); } .custom-grid-no-results-title { @@ -109,38 +886,64 @@ html[style*="color-scheme: dark"] { .custom-grid-filter-buttons { display: flex; - gap: 0.5rem; + gap: 1px; flex-wrap: wrap; margin-left: auto; + height: 2.5rem; + background-color: oklch(from var(--border) l c h / 0.5); + border-radius: 16px; + padding: 1px; + border: 1px solid var(--border); + position: relative; } .custom-grid-filter-button { - padding: 0.5rem 1rem; - border: 1px solid #d1d5db; - border-radius: 0.375rem; - background-color: #ffffff; - color: #374151; + padding: 0.35rem 0.875rem; + border-radius: 14px; + color: var(--text-tertiary); font-size: 0.875rem; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.2s ease-out; outline: none; + border: none; + background: transparent; + position: relative; + z-index: 1; } .custom-grid-filter-button:hover { - background-color: #f3f4f6; - border-color: #9ca3af; + color: var(--text); } .custom-grid-filter-button.active { - background-color: #F4F0FF; - border-color: #8B5CF6; - color: #6D28D9; + color: var(--text); +} + +.custom-grid-filter-buttons-indicator { + position: absolute; + top: 2px; + left: 2px; + height: calc(100% - 4px); + background-color: #fff; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + width 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 14px; + z-index: 0; + pointer-events: none; + opacity: 0; + box-shadow: inset 0 -1px 1px -1px oklch(from var(--shadow) l c h / 0.06), + inset 0 -2px 4px -1px oklch(from var(--shadow) l c h / 0.08), + 0 0 0 0.5px oklch(from var(--shadow) l c h / 0.06), + 0 1px 1px -1px oklch(from var(--shadow) l c h / 0.08), + 0 1px 2px -1px oklch(from var(--shadow) l c h / 0.08), + 0 2px 2px -1px oklch(from var(--shadow) l c h / 0.08), + 0 2px 4px -1px oklch(from var(--shadow) l c h / 0.08); } -.custom-grid-filter-button.active:hover { - background-color: #EDE9FE; - border-color: #7C3AED; +.dark .custom-grid-filter-buttons-indicator { + background-color: var(--card-bg); } /* CustomCard styling */ @@ -204,11 +1007,11 @@ html[style*="color-scheme: dark"] { font-size: 0.75rem; line-height: 1; padding: 0.125rem 0.375rem; - background-color: #EFF6FF; - border: 1px solid #3B82F6; + background-color: #eff6ff; + border: 1px solid #3b82f6; border-radius: 0.375rem; font-weight: 500; - color: #1E40AF; + color: #1e40af; display: inline-block; } @@ -239,12 +1042,12 @@ html[style*="color-scheme: dark"] { cursor: pointer; transition: all 0.2s ease; text-decoration: none; - background-color: #3B82F6; + background-color: #3b82f6; color: white; } .download-button:hover:not(:disabled) { - background-color: #2563EB; + background-color: #2563eb; } .download-button:disabled { @@ -261,8 +1064,12 @@ html[style*="color-scheme: dark"] { } @keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } .img-sizing { From b27003936c2fb054b3af0172f9209edabc60ccc9 Mon Sep 17 00:00:00 2001 From: Ankur Chauhan Date: Fri, 21 Nov 2025 09:21:46 +0100 Subject: [PATCH 3/9] update fonts --- auth4genai/docs.json | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/auth4genai/docs.json b/auth4genai/docs.json index 590b27f29..035dab412 100644 --- a/auth4genai/docs.json +++ b/auth4genai/docs.json @@ -16,23 +16,18 @@ "favicon": "/favicon.svg", "fonts": { "heading": { - "family": "Aeonik", - "source": "https://cdn.auth0.com/website/cic-homepage/fonts/Aeonik-Medium.woff2", + "family": "Inter", + "source": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", "format": "woff2" }, "body": { - "family": "Aeonik", - "source": "https://cdn.auth0.com/website/cic-homepage/fonts/Aeonik-Regular.woff2", + "family": "Inter", + "source": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", "format": "woff2" } }, "contextual": { - "options": [ - "copy", - "vscode", - "cursor", - "mcp" - ] + "options": ["copy", "vscode", "cursor", "mcp"] }, "appearance": { "default": "dark" @@ -84,9 +79,7 @@ { "group": "Build with AI", "icon": "code", - "pages": [ - "build-with-ai/using-ai-tools" - ] + "pages": ["build-with-ai/using-ai-tools"] }, { "group": "Sample Apps", @@ -105,7 +98,7 @@ } ] }, - { + { "tab": "Integrations", "groups": [ { @@ -174,11 +167,9 @@ { "group": "Auth for MCP", "icon": "book-open", - "pages": [ - "mcp/intro/overview", - "mcp/intro/why-auth-for-mcp" - ] - },{ + "pages": ["mcp/intro/overview", "mcp/intro/why-auth-for-mcp"] + }, + { "group": "Get Started", "icon": "rocket-launch", "pages": [ @@ -186,11 +177,13 @@ "mcp/get-started/authorization-for-your-mcp-server", "mcp/get-started/call-your-apis-on-users-behalf" ] - },{ + }, + { "group": "Sample Apps", "icon": "robot", "pages": ["mcp/sample-apps"] - },{ + }, + { "group": "Guides", "icon": "graduation-cap", "pages": [ From 38eadfb427dd19a8f664f8a184c8f9ee76e6abd2 Mon Sep 17 00:00:00 2001 From: Ankur Chauhan Date: Fri, 21 Nov 2025 12:50:28 +0100 Subject: [PATCH 4/9] fix minor styling issues --- CLAUDE.md | 198 +++++---- .../intro/asynchronous-authorization.mdx | 6 +- auth4genai/intro/authorization-for-rag.mdx | 13 +- auth4genai/intro/overview.mdx | 3 +- auth4genai/intro/token-vault.mdx | 6 +- auth4genai/intro/user-authentication.mdx | 3 +- .../custom-grid/SearchAndFilterGrid.jsx | 107 +++-- auth4genai/style.css | 388 ++++++++++++++---- main/docs.json | 5 +- main/docs/css/styles.css | 76 +++- .../social-connections-for-partners.mdx | 37 +- .../social-connections-for-partners.mdx | 38 +- .../social-connections-for-partners.mdx | 48 ++- .../troubleshoot-custom-domains.mdx | 75 ++-- .../troubleshoot-custom-domains.mdx | 46 ++- main/docs/ui-components/landing.mdx | 7 +- 16 files changed, 754 insertions(+), 302 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 10c27f65c..e4cc68949 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -80,27 +80,35 @@ This is **not a managed monorepo** (no Lerna, pnpm workspaces, etc.). Each folde ### Documentation Organization **Content Structure:** + - `.mdx` and `.md` files for documentation pages - YAML frontmatter for metadata (title, description, og/twitter tags) - `docs.json` defines navigation structure and Mintlify configuration **Reusable Components:** + - `/snippets` directories contain reusable `.mdx` and `.jsx` components - Import snippets into documentation pages to avoid duplication - Commonly used for multi-language code examples in quickstart guides **Code Block Convention:** -````markdown -```[language] [filename] wrap lines highlight={lines} + +`````markdown +````[language] [filename] wrap lines highlight={lines} Example: ```typescript ./src/auth0/app wrap lines highlight={1,7-10} ```` +````` + +````` **Localization:** + - Main docs support French Canadian (`main/docs/fr-ca/`) and Japanese (`main/docs/ja-jp/`) ### UI Component Library Architecture **Technology Stack:** + - React 19 + TypeScript - Vite 7 for building - TailwindCSS 4 for styling @@ -108,28 +116,33 @@ Example: ```typescript ./src/auth0/app wrap lines highlight={1,7-10} - MobX 6 for state management **State Management:** + - MobX stores pattern with `RootStore` as central container - Key stores: `SessionStore`, `ClientStore`, `TenantStore`, `ResourceServerStore`, `VariableStore` - Components use MobX `observer` wrapper for reactivity **Build Output:** + - UMD bundle: `auth0-docs-ui-{version}.umd.js` - CSS: `auth0-docs-ui-{version}.css` - Exposed as `window.Auth0DocsUI` in browser - Exports: components, stores, and MobX utilities **Path Aliases:** + - `@/*` maps to `/ui/src/*` for clean imports ### Theme Configuration **Main Docs (`main/docs.json`):** + - Theme: "aspen" - Colors: Black primary (#000) - Breadcrumb navigation style - Traditional layout **Auth4GenAI Docs (`auth4genai/docs.json`):** + - Theme: "mint" - Colors: Purple primary (#6742D5) - Dark mode by default @@ -191,88 +204,105 @@ Mintlify supports several admonition types for highlighting important informatio #### When to Use Each Admonition **``** - ONLY for Early Access features requiring legal agreement acceptance: + ```mdx -Native to Web SSO is currently available in Early Access. To use this feature, you must have an Enterprise plan. By using this feature, you agree to the applicable Free Trial terms in Okta's Master Subscription Agreement. + Native to Web SSO is currently available in Early Access. To use this feature, + you must have an Enterprise plan. By using this feature, you agree to the + applicable Free Trial terms in Okta's Master Subscription Agreement. ``` + - Must include legal agreement links and Product Release Stages reference - Used when features require explicit Free Trial terms acceptance **``** - For plan-based restrictions, Enterprise features, and important context: + ```mdx -These security options are available to Enterprise customers only. To upgrade your plan, contact Auth0 Sales. + These security options are available to Enterprise customers only. To upgrade + your plan, contact Auth0 Sales. ``` + - Standard for Professional/Enterprise plan restrictions - Used for features like Tenant ACL, Self-Service SSO, etc. - Always use `icon="file-lines" color="#0EA5E9" iconType="regular"` for consistency **``** - For supplementary information or clarifications: + ```mdx -Both approaches can be used together for defense-in-depth security. Monitor your tenant logs regularly to detect suspicious registration patterns. + Both approaches can be used together for defense-in-depth security. Monitor + your tenant logs regularly to detect suspicious registration patterns. ``` For brief inline notes, you can also use markdown blockquote style: + ```mdx > **Note:** These options are available to Enterprise customers only. ``` **``** - For helpful contextual information: + ```mdx -If you don't see tools listed on the consent screen that's because you are not logging in with the correct user + If you don't see tools listed on the consent screen that's because you are not + logging in with the correct user ``` **``** - For helpful suggestions or shortcuts: + ```mdx -To automatically connect VS Code to the Auth0 for AI Agents MCP Server, click the down arrow icon next to **Copy page** and select **Connect to VS Code**. + To automatically connect VS Code to the Auth0 for AI Agents MCP Server, click + the down arrow icon next to **Copy page** and select **Connect to VS Code**. ``` ### Structured Content Components **Steps** - For sequential instructions: + ```mdx - Follow the [Auth0 CLI installation instructions](https://auth0.github.io/auth0-cli/). - - - Run: `auth0 login` + Follow the [Auth0 CLI installation + instructions](https://auth0.github.io/auth0-cli/). + Run: `auth0 login` ``` **Tabs** - For multi-language or multi-option content: -```mdx + +````mdx - ```python - # Python code here - ``` - - - ```javascript - // JavaScript code here - ``` + ```python # Python code here ``` + ```javascript // JavaScript code here ``` -``` +````` **Cards** - For navigation or feature highlights: + ```mdx - + Secure your application with Auth0 authentication. ``` **Columns** - For side-by-side layouts: + ```mdx @@ -285,6 +315,7 @@ To automatically connect VS Code to the Auth0 for AI Agents MCP Server, click th ``` **Frame** - For images with optional captions: + ```mdx Auth flow diagram @@ -292,15 +323,17 @@ To automatically connect VS Code to the Auth0 for AI Agents MCP Server, click th ``` **CodeGroup** - For showing multiple code examples: -```mdx + +````mdx ```bash npm npm i -g mint - ``` +```` + +```bash pnpm +pnpm add -g mint +``` - ```bash pnpm - pnpm add -g mint - ``` ``` @@ -315,6 +348,7 @@ Code blocks support language specification, file names, line wrapping, and highl ```` Common attributes: + - **Language**: `bash`, `javascript`, `typescript`, `python`, `json`, etc. - **Filename**: `./path/to/file` (optional) - **`wrap lines`**: Enable line wrapping for long lines @@ -325,17 +359,21 @@ Common attributes: When including placeholders in code examples and commands, follow these consistent patterns: **`YOUR_SOMETHING`** - For general configuration values that users need to replace: + ```bash auth0 api patch connections/YOUR_CONNECTION_ID --data '{"is_domain_connection": true}' ``` + - Examples: `YOUR_TENANT`, `YOUR_AUTH0_DOMAIN`, `YOUR_CONNECTION_ID`, `YOUR_MANAGEMENT_API_TOKEN` - Used for domains, tokens, API keys, and other configuration values - Always use uppercase with underscores **``** - For specific IDs or values extracted from previous commands: + ```bash auth0 api patch clients/ --data '{...}' ``` + - Examples: ``, ``, `` - Used for IDs returned by API calls or CLI commands - Typically lowercase with hyphens @@ -343,6 +381,7 @@ auth0 api patch clients/ --data '{...}' **DO NOT use** `{{VAR}}` syntax - This is not the established pattern in this repository. **Example combining both patterns:** + ```bash curl --location 'https://YOUR_TENANT/api/v2/token-exchange-profiles' \ --header 'Authorization: Bearer YOUR_MANAGEMENT_API_TOKEN' \ @@ -357,44 +396,41 @@ Always provide clear instructions before code blocks explaining what each placeh ### Accordion Groups For collapsible content sections: + ```mdx - - Answer to question 1 - - - Answer to question 2 - + Answer to question 1 + Answer to question 2 ``` ### Presenting Multiple Options **Use `` for:** Different implementation methods for the SAME action + ```mdx - -1. Go to Dashboard > Settings -2. Click the toggle - - -1. Get an access token -2. Call the API endpoint - + 1. Go to Dashboard > Settings 2. Click the toggle + + 1. Get an access token 2. Call the API endpoint + ``` + - Dashboard vs API configuration - Different SDK implementations - Same outcome, different tools **Use bullet lists for:** Different approaches or solutions to a problem + ```mdx There are two approaches you can implement: -* **[Tenant Access Control List](link)** (Recommended) - Description of when to use, how it works, and any limitations or benefits. +- **[Tenant Access Control List](link)** (Recommended) - Description of when to use, how it works, and any limitations or benefits. -* **[Reverse Proxy](link)** - Description of when to use, how it works, and any limitations or benefits. +- **[Reverse Proxy](link)** - Description of when to use, how it works, and any limitations or benefits. ``` + - Different security strategies - Alternative architectural patterns - Multiple remediation options for an issue @@ -470,39 +506,37 @@ You are an AI writing assistant specialized in creating exceptional technical do ```mdx -Supplementary information that supports the main content without interrupting flow + Supplementary information that supports the main content without interrupting + flow ``` #### Tip - Best Practices and Pro Tips ```mdx - -Expert advice, shortcuts, or best practices that enhance user success - +Expert advice, shortcuts, or best practices that enhance user success ``` #### Warning - Important Cautions ```mdx -Critical information about potential issues, breaking changes, or destructive actions + Critical information about potential issues, breaking changes, or destructive + actions ``` #### Info - Neutral Contextual Information ```mdx - -Background information, context, or neutral announcements - +Background information, context, or neutral announcements ``` #### Check - Success Confirmations ```mdx -Positive confirmations, successful completions, or achievement indicators + Positive confirmations, successful completions, or achievement indicators ``` @@ -515,11 +549,11 @@ Example of a single code block: ````mdx ```javascript config.js const apiConfig = { - baseURL: 'https://api.example.com', + baseURL: "https://api.example.com", timeout: 5000, headers: { - 'Authorization': `Bearer ${process.env.API_TOKEN}` - } + Authorization: `Bearer ${process.env.API_TOKEN}`, + }, }; ``` ```` @@ -546,6 +580,7 @@ response = requests.get('/api/endpoint', curl -X GET '/api/endpoint' \ -H 'Authorization: Bearer YOUR_API_KEY' ``` + ```` @@ -580,7 +615,7 @@ curl -X POST 'https://api.example.com/users' \ Example of step-by-step instructions: -```mdx +````mdx Run `npm install` to install required packages. @@ -593,9 +628,10 @@ Example of step-by-step instructions: Create a `.env` file with your API credentials. - ```bash - API_KEY=your_api_key_here - ``` +```bash +API_KEY=your_api_key_here +``` +```` Never commit API keys to version control. @@ -608,13 +644,14 @@ Example of step-by-step instructions: Example of tabbed content: -```mdx +````mdx ```bash brew install node npm install -g package-name - ``` +```` + @@ -637,7 +674,7 @@ Example of tabbed content: Example of accordion groups: -```mdx +````mdx - **Firewall blocking**: Ensure ports 80 and 443 are open @@ -651,7 +688,8 @@ Example of accordion groups: performance: { cache: true, timeout: 30000 }, security: { encryption: 'AES-256' } }; - ``` +```` + ``` @@ -662,7 +700,8 @@ Example of cards and card groups: ```mdx -Complete walkthrough from installation to your first API call in under 10 minutes. + Complete walkthrough from installation to your first API call in under 10 + minutes. @@ -684,19 +723,19 @@ Example of parameter documentation: ```mdx -Unique identifier for the user. Must be a valid UUID v4 format. + Unique identifier for the user. Must be a valid UUID v4 format. -User's email address. Must be valid and unique within the system. + User's email address. Must be valid and unique within the system. -Maximum number of results to return. Range: 1-100. + Maximum number of results to return. Range: 1-100. -Bearer token for API authentication. Format: `Bearer YOUR_API_KEY` + Bearer token for API authentication. Format: `Bearer YOUR_API_KEY` ``` @@ -706,15 +745,15 @@ Example of response field documentation: ```mdx -Unique identifier assigned to the newly created user. + Unique identifier assigned to the newly created user. -ISO 8601 formatted timestamp of when the user was created. + ISO 8601 formatted timestamp of when the user was created. -List of permission strings assigned to this user. + List of permission strings assigned to this user. ``` @@ -738,6 +777,7 @@ Complete user object with all associated data. URL to user's profile picture. Returns null if no avatar is set. + @@ -752,11 +792,14 @@ Wrap all images in frames: ```mdx -Main dashboard showing analytics overview + Main dashboard showing analytics overview -Analytics dashboard with charts + Analytics dashboard with charts ``` @@ -767,7 +810,7 @@ Use the HTML video element for self-hosted video content: ```mdx ``` @@ -776,7 +819,7 @@ Embed YouTube videos using iframe elements: ```mdx + In addition, to assist you in building your integration you can leverage our [Social Connection Integration template](https://github.com/auth0-marketplace/TEMPLATE-social-connection). @@ -31,8 +44,8 @@ If you are ready to become a partner and submit your integration, please create **We will need the following configuration and documentation:** -* The Authorization and Token URLs that should be used; if your authorization server uses a tenant architecture, include the pattern to use, and we will include a **Tenant Domain** field or similar. -* A list of fields that the customer configuring the integration should see, including **Client ID** and **Client Secret** -* A list of scopes that can be requested, including whether to require them and/or request them by default -* A profile mapping script (following the [mapping script template](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)). This script must map a unique identifier to `user_id` and, if possible, `email`, `email_verified`, and `name` -* An installation guide written in Markdown. \ No newline at end of file +- The Authorization and Token URLs that should be used; if your authorization server uses a tenant architecture, include the pattern to use, and we will include a **Tenant Domain** field or similar. +- A list of fields that the customer configuring the integration should see, including **Client ID** and **Client Secret** +- A list of scopes that can be requested, including whether to require them and/or request them by default +- A profile mapping script (following the [mapping script template](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)). This script must map a unique identifier to `user_id` and, if possible, `email`, `email_verified`, and `name` +- An installation guide written in Markdown. diff --git a/main/docs/fr-ca/customize/integrations/marketplace-partners/social-connections-for-partners.mdx b/main/docs/fr-ca/customize/integrations/marketplace-partners/social-connections-for-partners.mdx index 41af0d215..893b752c9 100644 --- a/main/docs/fr-ca/customize/integrations/marketplace-partners/social-connections-for-partners.mdx +++ b/main/docs/fr-ca/customize/integrations/marketplace-partners/social-connections-for-partners.mdx @@ -1,23 +1,35 @@ --- title: "Connexions sociales pour les partenaires" permalink: "social-connections-for-partners" -'description': "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." -'og:title': "Connexions sociales pour les partenaires" -'og:description': "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Connexions sociales pour les partenaires" -'twitter:description': "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." +"description": "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." +"og:title": "Connexions sociales pour les partenaires" +"og:description": "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." +"og:image": "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" +"twitter:title": "Connexions sociales pour les partenaires" +"twitter:description": "Découvrez les Connexions sociales et comment les partenaires d’Auth0 Marketplace peuvent les utiliser, les créer et les tester." --- Dans Auth0, les connexions sont une source d’identité d’utilisateur pour la connexion dans une ([vidéo](https://auth0-1.wistia.com/medias/tet170a1vt)). La Connexion sociale est le terme que nous utilisons pour une source d’identité au niveau du consommateur, comme Google ou Facebook ([vidéo](https://auth0-1.wistia.com/medias/5kshjcduya)). Les clients peuvent permettre à leurs utilisateurs d’utiliser une ou plusieurs connexion(s) sociale(s) sur le formulaire de connexion, ou opter pour un fournisseur unique en incluant un paramètre URL spécifique lors de la redirection vers le formulaire de connexion. -![Social Connections for Partners (Connexions sociales pour partenaires) - Universal Login with Social Connections (Connexion universelle avec connexions sociales) - Exemple de page de connexion](/docs/images/fr-ca/cdy7uua7fh8z/4mQxtOyW7bdSznrNA91eky/cee5df08fbeb04e4a3532ce82f9bc322/Social_Login_-_FR.png) + + ![Social Connections for Partners (Connexions sociales pour partenaires) - + Universal Login with Social Connections (Connexion universelle avec connexions + sociales) - Exemple de page de + connexion](/docs/images/fr-ca/cdy7uua7fh8z/4mQxtOyW7bdSznrNA91eky/cee5df08fbeb04e4a3532ce82f9bc322/Social_Login_-_FR.png) + Une fois l’utilisateur authentifié, son identité auprès du fournisseur social est associée à un profil Auth0, et le résultat est transmis à l’application ayant initié la demande de connexion. Cela crée un enregistrement d’utilisateur Auth0 en utilisant l’identité de la Connexion sociale sélectionnée. Les attributs associés à cet enregistrement sont associés depuis la source d’identité externe vers un [Profil utilisateur Auth0](/docs/fr-ca/manage-users/user-accounts/user-profiles/normalized-user-profiles). Votre Connexion sociale Marketplace débutera en tant que [Connexion sociale personnalisée](/docs/fr-ca/authenticate/identity-providers/social-identity-providers/oauth2), pouvant être configurée sur n’importe quel locataire Auth0. Cela vous permettra de visualiser le fonctionnement de la transaction et de vérifier que les utilisateurs peuvent s’authentifier via votre serveur d’autorisation. La vidéo suivante vous montrera comment créer et tester une Connexion sociale dans Auth0. - + En outre, pour vous aider à construire votre intégration, vous pouvez utiliser notre modèle [Intégration de connexion sociale](https://github.com/auth0-marketplace/TEMPLATE-social-connection). @@ -30,8 +42,8 @@ Une fois que l’intégration fonctionne, Auth0 travaillera avec vous pour publi **Nous aurons besoin de la configuration et de la documentation suivantes :** -* Les URL d’autorisation et de jeton qui doivent être utilisées; si votre serveur d’autorisation utilise une architecture de locataire, incluez le modèle à utiliser et nous inclurons un champ **Domaine du locataire** ou similaire. -* Une liste de champs que le client qui configure l’intégration doit voir, y compris **ID client** et **Secret client** -* Une liste des permissions pouvant être demandées, précisant si elles doivent être obligatoires et/ou demandées par défaut. -* Un script de mappage de profil (conformément au [modèle de script de mappage](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)). Ce script doit mapper un identifiant unique à `user_id` et, si possible, `email`, `email_verified`, et `name` -* Un guide d’installation rédigé en Markdown. \ No newline at end of file +- Les URL d’autorisation et de jeton qui doivent être utilisées; si votre serveur d’autorisation utilise une architecture de locataire, incluez le modèle à utiliser et nous inclurons un champ **Domaine du locataire** ou similaire. +- Une liste de champs que le client qui configure l’intégration doit voir, y compris **ID client** et **Secret client** +- Une liste des permissions pouvant être demandées, précisant si elles doivent être obligatoires et/ou demandées par défaut. +- Un script de mappage de profil (conformément au [modèle de script de mappage](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)). Ce script doit mapper un identifiant unique à `user_id` et, si possible, `email`, `email_verified`, et `name` +- Un guide d’installation rédigé en Markdown. diff --git a/main/docs/ja-jp/customize/integrations/marketplace-partners/social-connections-for-partners.mdx b/main/docs/ja-jp/customize/integrations/marketplace-partners/social-connections-for-partners.mdx index f1cc394c0..f17dd3d0f 100644 --- a/main/docs/ja-jp/customize/integrations/marketplace-partners/social-connections-for-partners.mdx +++ b/main/docs/ja-jp/customize/integrations/marketplace-partners/social-connections-for-partners.mdx @@ -1,37 +1,47 @@ --- title: "パートナーに対するソーシャル接続" permalink: "social-connections-for-partners" -'description': "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" -'og:title': "パートナーに対するソーシャル接続" -'og:description': "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "パートナーに対するソーシャル接続" -'twitter:description': "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" +"description": "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" +"og:title": "パートナーに対するソーシャル接続" +"og:description": "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" +"og:image": "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" +"twitter:title": "パートナーに対するソーシャル接続" +"twitter:description": "ソーシャル接続についてと、Auth0マーケットプレイスパートナーがどのように使用、構築、テストするか説明します。" --- -Auth0では、接続はログインに対するユーザーIDのソースです（[ビデオ](https://auth0-1.wistia.com/medias/tet170a1vt)）。ソーシャル接続はGoogleまたはFacebookのような消費者レベルのソースのことです（[ビデオ](https://auth0-1.wistia.com/medias/5kshjcduya)）。お客様は、ユーザーにログインフォームに複数のソーシャル接続を使用するオプションを提供するか、またはログインフォームへのリダイレクト時にURLパラメータを含めることで、単一のプロバイダーのみを使用するオプションを提供できます。 +Auth0 では、接続はログインに対するユーザー ID のソースです（[ビデオ](https://auth0-1.wistia.com/medias/tet170a1vt)）。ソーシャル接続は Google または Facebook のような消費者レベルのソースのことです（[ビデオ](https://auth0-1.wistia.com/medias/5kshjcduya)）。お客様は、ユーザーにログインフォームに複数のソーシャル接続を使用するオプションを提供するか、またはログインフォームへのリダイレクト時に URL パラメータを含めることで、単一のプロバイダーのみを使用するオプションを提供できます。 -![パートナー用ソーシャル接続 - ソーシャル接続を使ったユニバーサルログイン - ログインページ例](/docs/images/ja-jp/cdy7uua7fh8z/4mQxtOyW7bdSznrNA91eky/6a991f8f5d69fd2ace2f45c8276bb72d/Social_log_in.png) + + ![パートナー用ソーシャル接続 - ソーシャル接続を使ったユニバーサルログイン - + ログインページ例](/docs/images/ja-jp/cdy7uua7fh8z/4mQxtOyW7bdSznrNA91eky/6a991f8f5d69fd2ace2f45c8276bb72d/Social_log_in.png) + -ユーザーがログインすると、ソーシャルプロバイダーからのIDはAuth0プロファイルにマッピングされ、その結果はログインを要求したアプリケーションに送信されます。これにより選択されたソーシャル接続のIDを使用してAuth0ユーザーの記録が作成されます。この記録に使用される属性は、外部のIDソースから[Auth0ユーザープロファイル](/docs/ja-jp/manage-users/user-accounts/user-profiles/normalized-user-profiles)にマッピングされます。 +ユーザーがログインすると、ソーシャルプロバイダーからの ID は Auth0 プロファイルにマッピングされ、その結果はログインを要求したアプリケーションに送信されます。これにより選択されたソーシャル接続の ID を使用して Auth0 ユーザーの記録が作成されます。この記録に使用される属性は、外部の ID ソースから[Auth0 ユーザープロファイル](/docs/ja-jp/manage-users/user-accounts/user-profiles/normalized-user-profiles)にマッピングされます。 -マーケットプレイスソーシャル接続は、[カスタムソーシャル接続](/docs/ja-jp/authenticate/identity-providers/social-identity-providers/oauth2)として開始され、どのようなAuth0テナントでも構築することができます。そのため、取引がどのように行われるかを見ることができ、ユーザーが認可サーバーを使用してログインできるように確認することができます。次のビデオでは、Auth0で接続を構築およびテストする方法を説明します。 +マーケットプレイスソーシャル接続は、[カスタムソーシャル接続](/docs/ja-jp/authenticate/identity-providers/social-identity-providers/oauth2)として開始され、どのような Auth0 テナントでも構築することができます。そのため、取引がどのように行われるかを見ることができ、ユーザーが認可サーバーを使用してログインできるように確認することができます。次のビデオでは、Auth0 で接続を構築およびテストする方法を説明します。 - + さらに、統合の構築を支援するために、[>ソーシャル接続統合テンプレート](https://github.com/auth0-marketplace/TEMPLATE-social-connection)を活用できます。 ## ソーシャル接続を提出する -統合が機能すると、Auth0が協力してその統合を[Auth0 マーケットプレイス](http://marketplace.auth0.com/)に公開します。統合を提出する際は、次の情報を提供する必要があります： +統合が機能すると、Auth0 が協力してその統合を[Auth0 マーケットプレイス](http://marketplace.auth0.com/)に公開します。統合を提出する際は、次の情報を提供する必要があります： -1. Auth0マーケットプレイスに掲載する事業とマーケティングコンテンツ。これには、企業の概要やロゴ、統合の説明が含まれます。 -2. 統合に使用したコードと構成。パートナーは、GitHubを使用してコードを提出するのが普通です。 +1. Auth0 マーケットプレイスに掲載する事業とマーケティングコンテンツ。これには、企業の概要やロゴ、統合の説明が含まれます。 +2. 統合に使用したコードと構成。パートナーは、GitHub を使用してコードを提出するのが普通です。 **以下の構成とドキュメントが必要です** 。 -* 使用されるべき認可URLとトークンのURLについて、認可サーバーがテナントアーキテクチャを使用している場合は、使用するパターンを含めてください。これに基づき、 **テナントドメイン** フィールドなどを追加します。 -* **クライアントID** や **クライアントシークレット** などを含む、統合を設定する際に顧客が確認する必要があるフィールドのリスト -* 必須にするか、および/またはデフォルトで要求するかを指定する項目を含む、要求可能なスコープのリスト -* プロファイルマッピングスクリプト（[マッピングスクリプトテンプレート](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)に従う形式）。このスクリプトは、`user_id`に一意の識別子をマップし、可能であれば`email`、`email_verified`、および`name`をマップする必要があります。 -* Markdown記法で書かれたインストールガイド \ No newline at end of file +- 使用されるべき認可 URL とトークンの URL について、認可サーバーがテナントアーキテクチャを使用している場合は、使用するパターンを含めてください。これに基づき、 **テナントドメイン** フィールドなどを追加します。 +- **クライアント ID** や **クライアントシークレット** などを含む、統合を設定する際に顧客が確認する必要があるフィールドのリスト +- 必須にするか、および/またはデフォルトで要求するかを指定する項目を含む、要求可能なスコープのリスト +- プロファイルマッピングスクリプト（[マッピングスクリプトテンプレート](https://gist.github.com/joshcanhelp/26e1fc3581d2ced737c4f50a694ea10f)に従う形式）。このスクリプトは、`user_id`に一意の識別子をマップし、可能であれば`email`、`email_verified`、および`name`をマップする必要があります。 +- Markdown 記法で書かれたインストールガイド diff --git a/main/docs/ja-jp/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx b/main/docs/ja-jp/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx index 3c264ecfc..3343957ce 100644 --- a/main/docs/ja-jp/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx +++ b/main/docs/ja-jp/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx @@ -1,42 +1,51 @@ --- title: "カスタムドメインのトラブルシューティング" permalink: "troubleshoot-custom-domains" -'description': "カスタムドメインに関する問題のトラブルシューティングについて説明します。" -'og:title': "カスタムドメインのトラブルシューティング" -'og:description': "カスタムドメインに関する問題のトラブルシューティングについて説明します。" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "カスタムドメインのトラブルシューティング" -'twitter:description': "カスタムドメインに関する問題のトラブルシューティングについて説明します。" +"description": "カスタムドメインに関する問題のトラブルシューティングについて説明します。" +"og:title": "カスタムドメインのトラブルシューティング" +"og:description": "カスタムドメインに関する問題のトラブルシューティングについて説明します。" +"og:image": "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" +"twitter:title": "カスタムドメインのトラブルシューティング" +"twitter:description": "カスタムドメインに関する問題のトラブルシューティングについて説明します。" --- カスタムドメインに関する一般的な問題については次のビデオをご覧ください。また、特定のシナリオのトラブルシューティング手順については、以下のセクションを参照してください。 - + ## カスタムドメインが検証待ちのままである -DNSが伝播するまでに最大48時間かかる場合があります。 +DNS が伝播するまでに最大 48 時間かかる場合があります。 -* ダッシュボードにこのエラーが引き続き表示される場合は、ドメイン管理サービスでCNAMEレコードが正しく設定されていることを確認してください。CNAMEレコードの設定は、次の方法で確認できます： +- ダッシュボードにこのエラーが引き続き表示される場合は、ドメイン管理サービスで CNAME レコードが正しく設定されていることを確認してください。CNAME レコードの設定は、次の方法で確認できます： - + [Mxtoolbox](https://mxtoolbox.com/DNSLookup.aspx)または[Google](https://dns.google.com) - + ターミナルでの`dig`コマンド -* ドメイン名がAレコードにまだ関連付けられていないことを確認します。 -* CNAMEレコードのドメイン名または値を入力またはコピーするときにエラーが発生していないことを確認します。 + - [Mxtoolbox](https://mxtoolbox.com/DNSLookup.aspx)または[Google](https://dns.google.com) + - ターミナルでの`dig`コマンド -上記のことを確認してもカスタムドメインの検証がまだ保留中の場合は、ドメインを再検証する前に4時間待ってください。サービスの中断を避けるため、再検証時にカスタムドメインを再作成しないでください。 +- ドメイン名が A レコードにまだ関連付けられていないことを確認します。 +- CNAME レコードのドメイン名または値を入力またはコピーするときにエラーが発生していないことを確認します。 -## CloudflareでのCNAMEフラット化 +上記のことを確認してもカスタムドメインの検証がまだ保留中の場合は、ドメインを再検証する前に 4 時間待ってください。サービスの中断を避けるため、再検証時にカスタムドメインを再作成しないでください。 + +## Cloudflare での CNAME フラット化 -Auth0では、絶対に必要な場合を除き、CNAMEフラット化をオフにすることを推奨しています。Cloudflareのドキュメント、「[Understand and configure CNAME flattening（CNAMEフラット化を理解・構成する）](https://support.cloudflare.com/hc/en-us/articles/200169056-Understand-and-configure-CNAME-Flattening)」に従ってください。Auth0のマネージド証明書に対するCNAMEフラット化は、サポートされない構成であるため、CNAMEフラット化が有効になっているとカスタムドメインが予告なく壊れてしまう可能性があります。 +Auth0 では、絶対に必要な場合を除き、CNAME フラット化をオフにすることを推奨しています。Cloudflare のドキュメント、「[Understand and configure CNAME flattening（CNAME フラット化を理解・構成する）](https://support.cloudflare.com/hc/en-us/articles/200169056-Understand-and-configure-CNAME-Flattening)」に従ってください。Auth0 のマネージド証明書に対する CNAME フラット化は、サポートされない構成であるため、CNAME フラット化が有効になっているとカスタムドメインが予告なく壊れてしまう可能性があります。 -CNAMEフラット化は、DNSレコードの処理方法により、Auth0の検証および証明書の更新プロセスに影響します。カスタムドメインを設定した後、CloudfareでCNAMEフラット化を有効にしても、証明書の更新は **not prevent（妨げられません）］** 。 +CNAME フラット化は、DNS レコードの処理方法により、Auth0 の検証および証明書の更新プロセスに影響します。カスタムドメインを設定した後、Cloudfare で CNAME フラット化を有効にしても、証明書の更新は **not prevent（妨げられません）］** 。 -Cloudflareで管理しているすべてのサブドメインに対してCNAMEフラット化を有効にし、特定のサブドメインをAuth0のカスタムドメインとして構成する必要がある場合は、Auth0用のサブドメインを別のDNSプロバイダーに委任することを検討してください。詳細については、Cloudflareドキュメントの[「Cloudflareの外部にサブドメインを委任」](https://support.cloudflare.com/hc/en-us/articles/360021357131-Delegating-Subdomains-Outside-of-Cloudflare)を参照してください。外部に委任すると、Auth0用のサブドメインを除くすべてのサブドメインでCNAMEフラット化を使用できるようになります。 +Cloudflare で管理しているすべてのサブドメインに対して CNAME フラット化を有効にし、特定のサブドメインを Auth0 のカスタムドメインとして構成する必要がある場合は、Auth0 用のサブドメインを別の DNS プロバイダーに委任することを検討してください。詳細については、Cloudflare ドキュメントの[「Cloudflare の外部にサブドメインを委任」](https://support.cloudflare.com/hc/en-us/articles/360021357131-Delegating-Subdomains-Outside-of-Cloudflare)を参照してください。外部に委任すると、Auth0 用のサブドメインを除くすべてのサブドメインで CNAME フラット化を使用できるようになります。 ## 「このエンドポイントに到達しないでください」 @@ -44,34 +53,34 @@ Cloudflareで管理しているすべてのサブドメインに対してCNAME ## 「サービスが見つかりません」 -アプリケーションが、`audience=https://login.northwind.com/userinfo`を指定して`/authorize`要求を発行すると、サーバーは`Service not found:https://login.northwind.com/userinfo`エラーを返します。これは、カスタムドメインを設定しても、`/userinfo`エンドポイントのAPI識別子が`https://{yourOriginalAuth0Domain}/userinfo`のままになるためです。 +アプリケーションが、`audience=https://login.northwind.com/userinfo`を指定して`/authorize`要求を発行すると、サーバーは`Service not found:https://login.northwind.com/userinfo`エラーを返します。これは、カスタムドメインを設定しても、`/userinfo`エンドポイントの API 識別子が`https://{yourOriginalAuth0Domain}/userinfo`のままになるためです。 同様に、[Auth0 Management API](/docs/ja-jp/api/management/v2)の呼び出しでカスタムドメインを使用すると、同じ理由でエラーが発生します。 -これを修正するには、アプリで代わりに`audience=https://{yourOriginalAuth0Domain}/userinfo`を使用する必要があります。アプリケーションの **Advanced Settings（詳細設定）］** の **OAuth2］** タブでアプリケーションが **OIDC-Conformant（OIDC準拠）］** としてフラグ付けされている場合は、この`audience=[...]/userinfo`パラメータを完全に削除することもできます。 +これを修正するには、アプリで代わりに`audience=https://{yourOriginalAuth0Domain}/userinfo`を使用する必要があります。アプリケーションの **Advanced Settings（詳細設定）］** の **OAuth2］** タブでアプリケーションが **OIDC-Conformant（OIDC 準拠）］** としてフラグ付けされている場合は、この`audience=[...]/userinfo`パラメータを完全に削除することもできます。 -## Internet Explorerに関連するエラー +## Internet Explorer に関連するエラー -Internet Explorerを使用している場合は、次のいずれかのエラーメッセージが表示されることがあります： +Internet Explorer を使用している場合は、次のいずれかのエラーメッセージが表示されることがあります： -* 「クライアントから検証が返されませんでした」 -* 「Originヘッダーが必要です」 -* 「クロスオリジン認証に失敗しました」 +- 「クライアントから検証が返されませんでした」 +- 「Origin ヘッダーが必要です」 +- 「クロスオリジン認証に失敗しました」 -Auth0ドメインとアプリドメインの両方が同じ信頼済みゾーンまたはローカルイントラネットゾーンにある場合、Internet Explorerは要求をクロスドメイン要求として扱わず、クロスオリジンヘッダーを送信しません。 +Auth0 ドメインとアプリドメインの両方が同じ信頼済みゾーンまたはローカルイントラネットゾーンにある場合、Internet Explorer は要求をクロスドメイン要求として扱わず、クロスオリジンヘッダーを送信しません。 -これらのエラーのいずれかが表示され、埋め込みログインを使用している場合は、サイトの1つを信頼済みゾーンまたはローカルイントラネットゾーンから移動することができます。このためには、次の手順に従います。 +これらのエラーのいずれかが表示され、埋め込みログインを使用している場合は、サイトの 1 つを信頼済みゾーンまたはローカルイントラネットゾーンから移動することができます。このためには、次の手順に従います。 1. **Internet Options>Security** へ移動します。 -2. **［Local Intranet Zone（ローカル イントラネット ゾーン）］** タブを選択し、Sites>Advancedに移動します。ドメインを追加します。 +2. **［Local Intranet Zone（ローカル イントラネット ゾーン）］** タブを選択し、Sites>Advanced に移動します。ドメインを追加します。 3. **［Security（セキュリティ）］** タブに戻り、適切なゾーンが選択されていることを確認します。 4. **［Custom Level（レベルのカスタマイズ）］** をクリックし、**Miscellaneous（その他）］** セクションで **Access data sources across domains（ドメイン間のアクセス データ ソース）］** を探します。**Enable（有効化）］** の横にあるラジオボタンをクリックします。 -あるいは、[Auth0 ユニバーサルログイン](/docs/ja-jp/authenticate/login/auth0-universal-login)を実装することで、クロスオリジン認証への依存を排除​​することもできます。 +あるいは、[Auth0 ユニバーサルログイン](/docs/ja-jp/authenticate/login/auth0-universal-login)を実装することで、クロスオリジン認証への依存を排除 ​​ することもできます。 ## もっと詳しく -* [機能にカスタムドメインの使用を構成する](/docs/ja-jp/customize/custom-domains/configure-features-to-use-custom-domains) -* [Auth0管理証明書を使ってカスタムドメインを構成する](/docs/ja-jp/customize/custom-domains/auth0-managed-certificates) -* [自己管理証明書を使ってカスタムドメインを構成する](/docs/ja-jp/customize/custom-domains/self-managed-certificates) -* [TLS（SSL）のバージョンと暗号](/docs/ja-jp/customize/custom-domains/self-managed-certificates/tls-ssl) \ No newline at end of file +- [機能にカスタムドメインの使用を構成する](/docs/ja-jp/customize/custom-domains/configure-features-to-use-custom-domains) +- [Auth0 管理証明書を使ってカスタムドメインを構成する](/docs/ja-jp/customize/custom-domains/auth0-managed-certificates) +- [自己管理証明書を使ってカスタムドメインを構成する](/docs/ja-jp/customize/custom-domains/self-managed-certificates) +- [TLS（SSL）のバージョンと暗号](/docs/ja-jp/customize/custom-domains/self-managed-certificates/tls-ssl) diff --git a/main/docs/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx b/main/docs/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx index bcf1e9ed0..98af7054e 100644 --- a/main/docs/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx +++ b/main/docs/troubleshoot/integration-extensibility-issues/troubleshoot-custom-domains.mdx @@ -1,27 +1,37 @@ --- description: Learn how to troubleshoot issues with custom domains. -'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png -'og:title': Troubleshoot Custom Domains -'og:url': https://auth0.com/docs/ +"og:image": https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +"og:title": Troubleshoot Custom Domains +"og:url": https://auth0.com/docs/ permalink: troubleshoot-custom-domains title: Troubleshoot Custom Domains -'twitter:description': Learn how to troubleshoot issues with custom domains. -'twitter:title': Troubleshoot Custom Domains +"twitter:description": Learn how to troubleshoot issues with custom domains. +"twitter:title": Troubleshoot Custom Domains --- + See the following video on common issues with custom domains and refer to the sections below for troubleshooting steps for specific scenarios. - + ## Custom domain is still pending verification It can take up to 48 hours for the DNS to be propagated. -* If you continue to see this error in the Dashboard, ensure that the CNAME record is properly configured in your domain management service. You can confirm the configuration of your CNAME record using: +- If you continue to see this error in the Dashboard, ensure that the CNAME record is properly configured in your domain management service. You can confirm the configuration of your CNAME record using: + + - A tool like [Mxtoolbox](https://mxtoolbox.com/DNSLookup.aspx) or [Google](https://dns.google.com) + - The `dig` command in your terminal - + A tool like [Mxtoolbox](https://mxtoolbox.com/DNSLookup.aspx) or [Google](https://dns.google.com) - + The `dig` command in your terminal -* Ensure that the domain name is not already associated with an A record. -* Ensure that no errors were made when typing or copying the CNAME record's domain name or value. +- Ensure that the domain name is not already associated with an A record. +- Ensure that no errors were made when typing or copying the CNAME record's domain name or value. If you have ensured the above and the custom domain is still pending verification, wait 4 hours before reverifying your domain. To avoid any interruptions to your service, do not recreate the custom domain when reverifying. @@ -53,9 +63,9 @@ To fix this your app should instead use `audience=https://{yourOriginalAuth0Doma If you are using Internet Explorer, you may see any of the following error messages: -* "No verifier returned from client" -* "Origin header required" -* "Failed cross origin authentication" +- "No verifier returned from client" +- "Origin header required" +- "Failed cross origin authentication" When both the Auth0 domain and the app domain are in the same trusted or local intranet zone, Internet Explorer does not treat the request as a cross-domain request and therefore does not send the cross-origins header. @@ -70,7 +80,7 @@ Alternatively, you can remove reliance on cross-origin authentication by impleme ## Learn more -* [Configure Features to Use Custom Domains](/docs/customize/custom-domains/configure-features-to-use-custom-domains) -* [Configure Custom Domains with Auth0-Managed Certificates](/docs/customize/custom-domains/auth0-managed-certificates) -* [Configure Custom Domains with Self-Managed Certificates](/docs/customize/custom-domains/self-managed-certificates) -* [TLS (SSL) Versions and Ciphers](/docs/customize/custom-domains/self-managed-certificates/tls-ssl) \ No newline at end of file +- [Configure Features to Use Custom Domains](/docs/customize/custom-domains/configure-features-to-use-custom-domains) +- [Configure Custom Domains with Auth0-Managed Certificates](/docs/customize/custom-domains/auth0-managed-certificates) +- [Configure Custom Domains with Self-Managed Certificates](/docs/customize/custom-domains/self-managed-certificates) +- [TLS (SSL) Versions and Ciphers](/docs/customize/custom-domains/self-managed-certificates/tls-ssl) diff --git a/main/docs/ui-components/landing.mdx b/main/docs/ui-components/landing.mdx index c96cca976..39ba08c41 100644 --- a/main/docs/ui-components/landing.mdx +++ b/main/docs/ui-components/landing.mdx @@ -5,8 +5,11 @@ description: "Description of your new file." # Auth0 UI Components -### Secure, Scalable Interfaces - Built for Identity-Driven Apps +### Secure, Scalable Interfaces - Built for Identity-Driven Apps **Auth0 UI Components** is a robust, open-source UI library crafted by the identity experts at Auth0. Designed to streamline development and enforce best practices, these components are optimized for authentication workflows, security, and accessibility — right out of the box. -