- ![{languageLogoAlt}]({"/docs/img/examples/")
-
-
-
-
+
{title}
-- by @{author} -
+
+
+
+
-
+
+
{title}
++ by{" "} + + @{author} + +
+
-
+
)
const ExampleList = ({ id, examples, title, description }: PropTypes) => (
+
Code
+ →
{docs && (
-
+
Docs
+ →
)}
-
+
- {title &&
{title}
} - {description &&{description}
} + {title &&{title}
} + {description && ( +{description}
+ )}
{examples.map((examples, index) => (
-
+
+ {!hideZoomFit && (
+ <>
+ zoomIn()}
+ title="Zoom in"
+ aria-label="Zoom in"
+ >
+
+
+ zoomOut()}
+ title="Zoom out"
+ aria-label="Zoom out"
+ >
+
+
+
+
+
+
+ )}
+
+ {isFullscreen ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
+
+export default function OryArchitectureDiagram({
+ selectedProducts = [],
+ scimSelected = false,
+ currentStep,
+ identityAnswer,
+ readonly = true,
+}: OryArchitectureDiagramProps) {
+ const { nodes: graphNodes, edges: graphEdges } = useMemo(
+ () =>
+ buildArchitectureGraph(
+ selectedProducts,
+ scimSelected,
+ currentStep,
+ identityAnswer,
+ ),
+ [selectedProducts, scimSelected, currentStep, identityAnswer],
+ )
+
+ const [nodes, setNodes, onNodesChange] = useNodesState(graphNodes)
+ const [edges, setEdges, onEdgesChange] = useEdgesState(graphEdges)
+
+ useEffect(() => {
+ setNodes(graphNodes)
+ setEdges(graphEdges)
+ }, [graphNodes, graphEdges, setNodes, setEdges])
+
+ const onConnect = useCallback(
+ (params: Connection) =>
+ setEdges((eds) => addEdge({ ...params, type: "smoothstep-solid" }, eds)),
+ [setEdges],
+ )
+
+ const onReconnect = useCallback(
+ (oldEdge: Edge, newConnection: Connection) =>
+ setEdges((eds) => reconnectEdge(oldEdge, newConnection, eds)),
+ [setEdges],
+ )
+
+ const containerRef = useRef(null)
+ const [isFullscreen, setIsFullscreen] = useState(false)
+
+ const [hideZoomFit, setHideZoomFit] = useState(false)
+ useEffect(() => {
+ const mql = window.matchMedia("(max-width: 996px)")
+ const handler = () => setHideZoomFit(mql.matches)
+ handler()
+ mql.addEventListener("change", handler)
+ return () => mql.removeEventListener("change", handler)
+ }, [])
+
+ const toggleFullscreen = useCallback(() => {
+ const el = containerRef.current
+ if (!el) return
+ if (!document.fullscreenElement) {
+ el.requestFullscreen?.().then(() => setIsFullscreen(true))
+ } else {
+ document.exitFullscreen?.().then(() => setIsFullscreen(false))
+ }
+ }, [])
+
+ useEffect(() => {
+ const handler = () => setIsFullscreen(!!document.fullscreenElement)
+ document.addEventListener("fullscreenchange", handler)
+ return () => document.removeEventListener("fullscreenchange", handler)
+ }, [])
+
+ return (
+ ", delay: 700 },
+ { type: "command", text: 'ory create project --name "MyApp"', delay: 400 },
+ { type: "output", text: "Project slug: myapp-abc123", delay: 600 },
+ { type: "success", text: "✓ Project created", delay: 200 },
+
+ // API registration
+ { type: "comment", text: "# Register a user via Ory API", delay: 600 },
+ {
+ type: "note",
+ text: "Note: Traits depend on your identity schema. This sample uses Ory's 'username' preset schema.",
+ delay: 400,
+ },
+ { type: "command", text: "curl -s -X GET \\", delay: 300 },
+ {
+ type: "command-cont",
+ text: ' "https://.projects.oryapis.com/self-service/registration/api"',
+ delay: 100,
+ },
+ {
+ type: "output",
+ text: '{ "id": "", "type": "api", "expires_at":"...","issued_at":"...","request_url":"/self-service/registration/api","ui":{"action":".projects.oryapis.com/self-service/registration?flow=","method":"POST", ... } }',
+ delay: 500,
+ },
+ { type: "command", text: "curl -s -X POST \\", delay: 400 },
+ {
+ type: "command-cont",
+ text: ' -H "Content-Type: application/json" \\',
+ delay: 100,
+ },
+ {
+ type: "command-cont",
+ text: ' -d \'{"traits":{"username":""},"password":"","method":"password"}\' \\',
+ delay: 100,
+ },
+ {
+ type: "command-cont",
+ text: ' "https://.projects.oryapis.com/self-service/registration?flow="',
+ delay: 100,
+ },
+ {
+ type: "output",
+ text: '{"identity":{"id":"...","schema_id":"preset://username","schema_url":".projects.oryapis.com/schemas/cHJlc2V0Oi8vdXNlcm5hbWU","state":"active", ... } }',
+ delay: 600,
+ },
+ { type: "success", text: "✓ User registered!", delay: 400 },
+ {
+ type: "link",
+ text: "Create your free project via Ory Console →",
+ url: "https://console.ory.sh/",
+ delay: 400,
+ },
+ ]
+
+ const runDemo = async () => {
+ if (isRunning) return
+ setIsRunning(true)
+ setHasRun(true)
+ setLines([])
+
+ for (let i = 0; i < script.length; i++) {
+ const item = script[i]
+ await new Promise((resolve) => setTimeout(resolve, item.delay))
+ setLines((prev) => [...prev, item])
+ }
+
+ setIsRunning(false)
+ }
+
+ const reset = () => {
+ setLines([
+ {
+ type: "line",
+ number: 1,
+ text: "From zero to registered user in minutes!",
+ },
+ { type: "line", number: 2, text: "Click 'Run'." },
+ ])
+ setHasRun(false)
+ }
+
+ useEffect(() => {
+ if (terminalRef.current) {
+ terminalRef.current.scrollTop = terminalRef.current.scrollHeight
+ }
+ }, [lines])
+
+ return (
+ 
+ = ({
+ categories,
+ activeCategory,
+ onCategoryChange,
+}) => {
+ return (
+ = ({
+ value,
+ onChange,
+}) => {
+ const [menuOpen, setMenuOpen] = useState(false)
+ const menuRef = useRef(null)
+
+ useClickOutside(menuRef, menuOpen, () => setMenuOpen(false))
+
+ return (
+ (false)
+ const menuRef = useRef(null)
+ const groupedLanguages = useLanguageGrouping(availableLanguages)
+
+ useClickOutside(menuRef, menuOpen, () => setMenuOpen(false))
+
+ useImperativeHandle(ref, () => ({
+ close: () => setMenuOpen(false),
+ }))
+
+ if (availableLanguages.length <= 1) {
+ return null
+ }
+
+ return (
+ = ({
+ items,
+ deploymentMode,
+}) => {
+ const filteredItems = items.filter((item) => {
+ if (!item.deploymentModes) {
+ return true
+ }
+ return item.deploymentModes.includes(deploymentMode)
+ })
+
+ return (
+ = {
+ network: "Ory Network",
+ oel: "Ory Enterprise License",
+ oss: "Ory Open Source",
+}
+
+/** Page title for /getting-started/overview — reflects selected deployment model. */
+export function QuickstartsOverviewHeading() {
+ const ctx = useQuickstartsDeployment()
+ const id = ctx?.deployment ?? "network"
+ const label = DEPLOYMENT_LABEL[id]
+
+ return Quickstarts ({label})
+}
diff --git a/src/components/QuickStarts/constants.ts b/src/components/QuickStarts/constants.ts
new file mode 100644
index 0000000000..47bb54a9a3
--- /dev/null
+++ b/src/components/QuickStarts/constants.ts
@@ -0,0 +1,244 @@
+import type { QuickstartCategory, DeploymentMode, LanguageMeta } from "./types"
+
+export const CATEGORIES: QuickstartCategory[] = [
+ {
+ id: "ory-kratos",
+ label: "Ory Kratos",
+ color: "var(--color-ory-product-kratos)",
+ items: [
+ {
+ label: "Introduction to Ory Kratos",
+ to: "/kratos/quickstarts/intro",
+ description: "Identity management and authentication.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with Ory Kratos",
+ to: "/kratos/quickstarts/quickstart",
+ description:
+ "Run Ory Kratos locally with Docker and explore the main flows.",
+ deploymentModes: ["oel", "oss"],
+ },
+ {
+ label: "Get started with identity management",
+ to: "/kratos/quickstarts/identity_model",
+ description: "Identity management and authentication.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with authentication",
+ to: "/guides/authentication",
+ description:
+ "Password, passwordless, passkey, and other authentication.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with multi-factor authentication",
+ to: "/kratos/quickstarts/mfa-overview",
+ description: "Multi-factor authentication.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ ],
+ },
+ {
+ id: "ory-keto",
+ label: "Ory Keto",
+ color: "var(--color-ory-product-keto)",
+ items: [
+ {
+ label: "Introduction to Ory Keto",
+ to: "/keto/quickstarts",
+ description: "Relationship-based permissions system.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with Ory Keto",
+ to: "/keto/quickstarts/overview",
+ description:
+ "Quickstart for understanding relationships and permission checks.",
+ deploymentModes: ["network"],
+ },
+ {
+ label: "Get started with Ory Keto",
+ to: "/keto/quickstarts/quickstart",
+ description:
+ "Quickstart for understanding relationships and permission checks.",
+ deploymentModes: ["oel", "oss"],
+ },
+ ],
+ },
+ {
+ id: "ory-hydra",
+ label: "Ory Hydra",
+ color: "var(--color-ory-product-hydra)",
+ items: [
+ {
+ label: "Introduction to Ory Hydra",
+ to: "/hydra/quickstarts",
+ description: "OAuth2 & OpenID Connect social sign-in concepts.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with Ory Hydra",
+ to: "/hydra/quickstarts/ory-network-oauth2",
+ description: "Client credential and authorization code grant.",
+ deploymentModes: ["network"],
+ },
+ {
+ label: "Get started with Ory Hydra",
+ to: "/hydra/quickstarts/quickstart",
+ description:
+ "Run Ory Hydra locally and try the most important OAuth2 flows.",
+ deploymentModes: ["oel"],
+ },
+ {
+ label: "Get started with Ory Hydra",
+ to: "/hydra/quickstarts/quickstart",
+ description:
+ "Run Ory Hydra locally and try the most important OAuth2 flows.",
+ deploymentModes: ["oss"],
+ },
+ ],
+ },
+ {
+ id: "ory-polis",
+ label: "Ory Polis",
+ color: "var(--color-ory-product-polis)",
+ items: [
+ {
+ label: "Introduction to Ory Polis",
+ to: "/polis/quickstarts",
+ description:
+ "Enterprise SSO for SAML and OIDC identity providers and SCIM provising.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Get started with Ory Polis",
+ to: "/polis/quickstarts/quickstart",
+ description:
+ "Quickstart for Enterprise SSO authentication and SCIM provisioning.",
+ deploymentModes: ["oel", "oss"],
+ },
+ ],
+ },
+ {
+ id: "ory-oathkeeper",
+ label: "Ory Oathkeeper",
+ color: "var(--color-ory-product-oathkeeper)",
+ items: [
+ {
+ label: "Introduction to Ory Oathkeeper",
+ to: "/oathkeeper/quickstarts",
+ description: "Zero trust proxy concepts and architecture.",
+ deploymentModes: ["network", "oel", "oss"],
+ },
+ {
+ label: "Configure and deploy Ory Oathkeeper",
+ to: "/oathkeeper/quickstarts/configure-deploy",
+ description: "Configure, build, and deploy Ory Oathkeeper.",
+ deploymentModes: ["oel", "oss"],
+ },
+ ],
+ },
+ {
+ id: "ory-elements",
+ label: "Ory Elements",
+ color: "var(--color-ory-product-elements)",
+ items: [
+ {
+ label: "Ory Elements introduction",
+ to: "/elements",
+ description:
+ "Pre-built UI components for Ory self-service and OAuth2 flows.",
+ deploymentModes: ["network", "oel"],
+ },
+ {
+ label: "Next.js App Router quickstart",
+ to: "/getting-started/integrate-auth/nextjs-app-router-quickstart",
+ description: "Use Ory Elements in a Next.js App Router application.",
+ deploymentModes: ["network", "oel"],
+ },
+ {
+ label: "Next.js Pages Router quickstart",
+ to: "/getting-started/integrate-auth/nextjs-pages-router-quickstart",
+ description: "Use Ory Elements in a Next.js Pages Router application.",
+ deploymentModes: ["network", "oel"],
+ },
+ ],
+ },
+]
+
+export const LANGUAGE_META: Partial> = {
+ nextjs: {
+ id: "nextjs",
+ label: "Next.js",
+ group: "Web",
+ icon: "/docs/img/examples/nextjs.svg",
+ },
+ react: {
+ id: "react",
+ label: "React",
+ group: "Web",
+ icon: "/docs/img/examples/react.svg",
+ },
+ vue: {
+ id: "vue",
+ label: "Vue",
+ group: "Web",
+ icon: "/docs/img/examples/vue.svg",
+ },
+ flutter: {
+ id: "flutter",
+ label: "Flutter",
+ group: "Mobile",
+ icon: "/docs/img/examples/flutter.svg",
+ },
+ "react-native": {
+ id: "react-native",
+ label: "React Native",
+ group: "Mobile",
+ icon: "/docs/img/examples/react.svg",
+ },
+ go: {
+ id: "go",
+ label: "Go",
+ group: "Backend",
+ icon: "/docs/img/examples/go.svg",
+ },
+ php: {
+ id: "php",
+ label: "PHP",
+ group: "Backend",
+ icon: "/docs/img/examples/php.svg",
+ },
+ python: {
+ id: "python",
+ label: "Python",
+ group: "Backend",
+ icon: "/docs/img/examples/python.svg",
+ },
+ django: {
+ id: "django",
+ label: "Django",
+ group: "Backend",
+ icon: "/docs/img/examples/django.svg",
+ },
+ dotnet: {
+ id: "dotnet",
+ label: ".NET",
+ group: "Backend",
+ icon: "/docs/img/examples/dotnet.svg",
+ },
+ nodejs: {
+ id: "nodejs",
+ label: "Node.js",
+ group: "Backend",
+ icon: "/docs/img/examples/nodejs.svg",
+ },
+}
+
+export const DEPLOYMENT_OPTIONS: { id: DeploymentMode; label: string }[] = [
+ { id: "network", label: "Ory Network" },
+ { id: "oel", label: "Ory Enterprise License" },
+ { id: "oss", label: "Ory Open Source" },
+]
diff --git a/src/components/QuickStarts/hooks/useClickOutside.ts b/src/components/QuickStarts/hooks/useClickOutside.ts
new file mode 100644
index 0000000000..f21730e5ac
--- /dev/null
+++ b/src/components/QuickStarts/hooks/useClickOutside.ts
@@ -0,0 +1,25 @@
+import { useEffect, RefObject } from "react"
+
+export function useClickOutside(
+ ref: RefObject,
+ isOpen: boolean,
+ onClose: () => void,
+) {
+ useEffect(() => {
+ if (!isOpen) {
+ return
+ }
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ onClose()
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside)
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside)
+ }
+ }, [isOpen, ref, onClose])
+}
diff --git a/src/components/QuickStarts/hooks/useExampleFilter.ts b/src/components/QuickStarts/hooks/useExampleFilter.ts
new file mode 100644
index 0000000000..165f02b302
--- /dev/null
+++ b/src/components/QuickStarts/hooks/useExampleFilter.ts
@@ -0,0 +1,59 @@
+import { useMemo } from "react"
+import * as exampleContent from "@site/src/pages/_assets/examples-content"
+import type { QuickstartCategory } from "../types"
+
+export function useExampleFilter(activeCategory: QuickstartCategory) {
+ return useMemo(() => {
+ const { basic, customui, community } = exampleContent
+
+ const allGroups = [basic, customui, community]
+
+ // Per-product filters – fall back to showing all examples if no filter.
+ const filterByCategory: Record<
+ string,
+ ((title: string, docs?: string) => boolean) | undefined
+ > = {
+ // Ory Kratos: show all current examples.
+ "ory-kratos": undefined,
+ "ory-elements": (title, docs) =>
+ title.toLowerCase().includes("customize self-service ui") ||
+ (docs ?? "").toLowerCase().includes("nextjs"),
+ // Hydra: examples whose docs mention hydra.
+ "ory-hydra": (_title, docs) =>
+ (docs ?? "").toLowerCase().includes("hydra"),
+ // Keto: examples whose docs mention keto.
+ "ory-keto": (_title, docs) => (docs ?? "").toLowerCase().includes("keto"),
+ // Others currently have no dedicated examples.
+ "ory-oathkeeper": () => false,
+ "ory-polis": () => false,
+ }
+
+ const filterFn = filterByCategory[activeCategory.id]
+
+ const byCategory = filterFn
+ ? allGroups
+ .map((group) => ({
+ ...group,
+ examples: group.examples.filter((ex) =>
+ filterFn(ex.title, ex.docs as string | undefined),
+ ),
+ }))
+ .filter((group) => group.examples.length > 0)
+ : allGroups
+
+ // Collect languages used in these examples
+ const languageSet = new Set()
+ byCategory.forEach((group) =>
+ group.examples.forEach((ex) => {
+ if (ex.language) {
+ languageSet.add(ex.language)
+ }
+ }),
+ )
+
+ return {
+ filteredExampleGroups: byCategory,
+ availableLanguages: Array.from(languageSet).sort(),
+ }
+ }, [activeCategory.id])
+}
diff --git a/src/components/QuickStarts/hooks/useLanguageGrouping.ts b/src/components/QuickStarts/hooks/useLanguageGrouping.ts
new file mode 100644
index 0000000000..26c1ebbadd
--- /dev/null
+++ b/src/components/QuickStarts/hooks/useLanguageGrouping.ts
@@ -0,0 +1,31 @@
+import { useMemo } from "react"
+import { LANGUAGE_META } from "../constants"
+import type { LanguageMeta } from "../types"
+
+export function useLanguageGrouping(availableLanguages: string[]) {
+ return useMemo(() => {
+ const groups: Record = {}
+
+ availableLanguages.forEach((lang) => {
+ const meta =
+ LANGUAGE_META[lang] ??
+ ({
+ id: lang,
+ label: lang,
+ group: "Other",
+ icon: `/docs/img/examples/${lang}.svg`,
+ } as LanguageMeta)
+
+ if (!groups[meta.group]) {
+ groups[meta.group] = []
+ }
+
+ groups[meta.group].push(meta)
+ })
+ ;(Object.keys(groups) as Array).forEach((group) => {
+ groups[group].sort((a, b) => a.label.localeCompare(b.label))
+ })
+
+ return groups
+ }, [availableLanguages])
+}
diff --git a/src/components/QuickStarts/quickstart-filter.tsx b/src/components/QuickStarts/quickstart-filter.tsx
new file mode 100644
index 0000000000..d5af3e0e20
--- /dev/null
+++ b/src/components/QuickStarts/quickstart-filter.tsx
@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useHistory, useLocation } from "@docusaurus/router"
+import { useQuickstartsDeployment } from "@site/src/contexts/QuickstartsDeploymentContext"
+import ExampleList from "../Examples/example-list"
+import { CategoryFilter } from "./CategoryFilter"
+import { CATEGORIES } from "./constants"
+import { useExampleFilter } from "./hooks/useExampleFilter"
+import { LanguageFilter, type LanguageFilterRef } from "./LanguageFilter"
+import { QuickstartGrid } from "./QuickstartGrid"
+import type { DeploymentMode } from "./types"
+
+function getSearchParams(search: string): URLSearchParams {
+ if (!search) return new URLSearchParams()
+ return new URLSearchParams(search.startsWith("?") ? search.slice(1) : search)
+}
+
+export const QuickstartFilter = () => {
+ const history = useHistory()
+ const location = useLocation()
+ const quickstartsDeployment = useQuickstartsDeployment()
+
+ const deploymentMode: DeploymentMode =
+ quickstartsDeployment?.deployment ?? "network"
+
+ const visibleCategories = useMemo(() => {
+ return CATEGORIES.filter((cat) =>
+ cat.items.some((item) => {
+ if (!item.deploymentModes) return true
+ return item.deploymentModes.includes(deploymentMode)
+ }),
+ )
+ }, [deploymentMode])
+
+ const [activeCategoryId, setActiveCategoryId] = useState(() => {
+ if (typeof window === "undefined")
+ return visibleCategories[0]?.id ?? CATEGORIES[0]?.id ?? ""
+ const params = getSearchParams(window.location.search)
+ const fromUrl = params.get("category")
+ const isValid = visibleCategories.some((c) => c.id === fromUrl)
+ return (
+ (isValid ? fromUrl : visibleCategories[0]?.id) ?? CATEGORIES[0]?.id ?? ""
+ )
+ })
+
+ const [activeLanguage, setActiveLanguage] = useState(() => {
+ if (typeof window === "undefined") return "all"
+ const params = getSearchParams(window.location.search)
+ return params.get("language") ?? "all"
+ })
+ const languageFilterRef = useRef(null)
+
+ // If the active category is not available for the selected deployment, fall back.
+ useEffect(() => {
+ if (!visibleCategories.some((c) => c.id === activeCategoryId)) {
+ setActiveCategoryId(visibleCategories[0]?.id ?? "")
+ }
+ }, [activeCategoryId, visibleCategories])
+
+ const activeCategory =
+ visibleCategories.find((cat) => cat.id === activeCategoryId) ??
+ visibleCategories[0] ??
+ CATEGORIES[0]
+
+ const { filteredExampleGroups, availableLanguages } =
+ useExampleFilter(activeCategory)
+
+ const filteredByLanguage = useMemo(() => {
+ if (activeLanguage === "all") {
+ return filteredExampleGroups
+ }
+
+ return filteredExampleGroups
+ .map((group) => ({
+ ...group,
+ examples: group.examples.filter((ex) => ex.language === activeLanguage),
+ }))
+ .filter((group) => group.examples.length > 0)
+ }, [filteredExampleGroups, activeLanguage])
+
+ const updateUrlParams = (next: {
+ categoryId?: string
+ language?: string
+ }) => {
+ const params = getSearchParams(location.search)
+ const firstCategoryId = visibleCategories[0]?.id ?? ""
+ const nextCategoryId = next.categoryId ?? activeCategoryId
+ const nextLanguage = next.language ?? activeLanguage
+
+ if (nextCategoryId && nextCategoryId !== firstCategoryId) {
+ params.set("category", nextCategoryId)
+ } else {
+ params.delete("category")
+ }
+
+ if (nextLanguage && nextLanguage !== "all") {
+ params.set("language", nextLanguage)
+ } else {
+ params.delete("language")
+ }
+
+ const qs = params.toString()
+ const nextUrl = qs ? `${location.pathname}?${qs}` : location.pathname
+ history.replace(nextUrl)
+ }
+
+ // Keep state in sync with URL (supports refresh + back/forward).
+ useEffect(() => {
+ const params = getSearchParams(location.search)
+ const urlLanguage = params.get("language") ?? "all"
+ if (urlLanguage !== activeLanguage) {
+ setActiveLanguage(urlLanguage)
+ }
+
+ const urlCategory = params.get("category")
+ const firstCategoryId = visibleCategories[0]?.id ?? ""
+ const nextCategoryId = visibleCategories.some((c) => c.id === urlCategory)
+ ? (urlCategory as string)
+ : firstCategoryId
+
+ if (nextCategoryId && nextCategoryId !== activeCategoryId) {
+ setActiveCategoryId(nextCategoryId)
+ languageFilterRef.current?.close()
+ }
+ }, [activeCategoryId, activeLanguage, location.search, visibleCategories])
+
+ return (
+ <>
+
+
+
+
+ {
+ setActiveLanguage(lang)
+ updateUrlParams({ language: lang })
+ }}
+ />
+
+ {filteredByLanguage.length > 0 ? (
+ filteredByLanguage.map((group) => (
+
+
+ )
+}
diff --git a/src/components/QuickStarts/types.ts b/src/components/QuickStarts/types.ts
new file mode 100644
index 0000000000..ecbd3fe085
--- /dev/null
+++ b/src/components/QuickStarts/types.ts
@@ -0,0 +1,23 @@
+export type QuickstartItem = {
+ label: string
+ to: string
+ description?: string
+ deploymentModes?: DeploymentMode[]
+}
+
+export type QuickstartCategory = {
+ id: string
+ label: string
+ /** CSS color for the category chip indicator (e.g. #f97316 or var(--icon-kratos-tertiary)) */
+ color?: string
+ items: QuickstartItem[]
+}
+
+export type LanguageMeta = {
+ id: string
+ label: string
+ group: "Web" | "Mobile" | "Backend" | "Other"
+ icon: string
+}
+
+export type DeploymentMode = "network" | "oel" | "oss"
diff --git a/src/components/Shared/AuthOverview.tsx b/src/components/Shared/AuthOverview.tsx
new file mode 100644
index 0000000000..d3b4c0cb58
--- /dev/null
+++ b/src/components/Shared/AuthOverview.tsx
@@ -0,0 +1,48 @@
+// src/components/shared/AuthOverview.tsx
+import React from "react"
+
+type Product = "network" | "oel" | "oss"
+
+interface AuthOverviewProps {
+ product: Product
+}
+
+export function AuthOverview({ product }: AuthOverviewProps) {
+ const productLabel =
+ product === "network"
+ ? "Ory Network"
+ : product === "oel"
+ ? "Ory Enterprise License"
+ : "Ory Open Source"
+
+ return (
+ <>
+ {`
+git clone https://github.com/ory/hydra.git
+cd hydra
+git checkout ${useLatestRelease('hydra')}`}
+
+```
+
+Run the following command(s) to start the OAuth2 server:
+
+````mdx-code-block
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+import MacOS from '@site/src/components/Install/MacOS'
+import Linux from '@site/src/components/Install/Linux'
+import Windows from '@site/src/components/Install/Windows'
+
+
+
+
+Run the latest Ory Hydra production build:
+
+```sh
+docker compose -f quickstart.yml \
+ -f quickstart-postgres.yml \
+ up
+
+Starting hydra_postgresd_1
+Starting hydra_hydra_1
+[...]
+```
+
+
+
+
+
+Run the current commit of Ory Hydra.
+
+```sh
+docker compose -f quickstart.yml \
+ -f quickstart-postgres.yml \
+ up \
+ --build
+
+Starting hydra_postgresd_1
+Starting hydra_hydra_1
+[...]
+```
+
+Building the image will override the Ory Hydra production image on your local registry. To download the latest
+production image again, run:
+
+```sh
+docker compose -f quickstart.yml pull hydra --policy always
+```
+
+
+
+
+
+
+```shell
+docker compose -f quickstart.yml \
+ -f quickstart-mysql.yml \
+ up
+```
+
+
+
+
+
+
+```shell
+docker compose -f quickstart.yml up
+```
+
+
+
+
+
+
+You may also extend the command above to enable distributed tracing. The tracing UI is exposed at
+[http://127.0.0.1:16686/search](http://127.0.0.1:16686/search):
+
+```sh
+docker compose -f quickstart.yml \
+ -f quickstart-postgres.yml \
+ -f quickstart-tracing.yml \
+ up --build
+```
+
+Hydra provides an endpoint for Prometheus to scrape as a target. You can run the following command to start the needed containers,
+and status of Hydra is exposed at targets page in Prometheus [http://localhost:9090/targets](http://localhost:9090/targets):
+
+```sh
+docker compose -f quickstart.yml \
+ -f quickstart-prometheus.yml \
+ up --build
+```
+
+
+
+
+
+
+If you want to test Hardware Security Module add `-f quickstart-hsm.yml`. For more information head over to
+[HSM support](/docs/hydra/self-hosted/hsm-support).
+
+```sh
+docker compose -f quickstart.yml \
+ -f quickstart-hsm.yml \
+ up --build
+```
+
+
+
+
+````
+
+Let's confirm that everything is working by creating an OAuth 2.0 Client.
+
+The OAuth 2.0 client uses port `4444` and `4445`. The former is Ory Hydra's
+public endpoint, the latter its administrative endpoint. For more information
+head over to
+[Exposing Administrative and Public API Endpoints](/docs/hydra/self-hosted/production).
+
+Let's create the OAuth 2.0 Client:
+
+```sh
+client=$(docker compose -f quickstart.yml exec hydra \
+ hydra create client \
+ --endpoint http://127.0.0.1:4445/ \
+ --format json \
+ --grant-type client_credentials)
+
+# We parse the JSON response using jq to get the client ID and client secret:
+client_id=$(echo $client | jq -r '.client_id')
+client_secret=$(echo $client | jq -r '.client_secret')
+```
+
+Let's perform the client credentials grant:
+
+```sh
+docker compose -f quickstart.yml exec hydra \
+ hydra perform client-credentials \
+ --endpoint http://127.0.0.1:4444/ \
+ --client-id "$client_id" \
+ --client-secret "$client_secret"
+
+ACCESS TOKEN ory_at_ZDTkKci59rH_8KlZlRjIek0812n9oPsvJX_nTdptGt0.bbpFutv5CsfjHzs8QrsnmPZ-0VxgwPvg9jgw1DQaYNg
+REFRESH TOKEN
+ID TOKEN
+EXPIRY 2022-06-27 11:50:28.244046504 +0000 UTC m=+3599.059213960
+```
+
+Let's perform token introspection on that token. Make sure to copy the token you
+just got and not the dummy value.
+
+```sh
+docker compose -f quickstart.yml exec hydra \
+ hydra introspect token \
+ --format json-pretty \
+ --endpoint http://127.0.0.1:4445/ \
+ UDYMha9TwsMBejEvKfnDOXkhgkLsnmUNYVQDklT5bD8.ZNpuNRC85erbIYDjPqhMwTinlvQmNTk_UvttcLQxFJY
+
+{
+ "active": true,
+ "client_id": "24451202-afa7-4278-98ce-8d40f421afec",
+ "exp": 1656330629,
+ "iat": 1656327029,
+ "iss": "http://127.0.0.1:4444",
+ "nbf": 1656327029,
+ "sub": "24451202-afa7-4278-98ce-8d40f421afec",
+ "token_type": "Bearer",
+ "token_use": "access_token"
+}
+```
+
+Next, we will perform the OAuth 2.0 Authorization Code Grant. For that, we must
+first create a client that's capable of performing that grant:
+
+```sh
+code_client=$(docker compose -f quickstart.yml exec hydra \
+ hydra create client \
+ --endpoint http://127.0.0.1:4445 \
+ --grant-type authorization_code,refresh_token \
+ --response-type code,id_token \
+ --format json \
+ --scope openid --scope offline \
+ --redirect-uri http://127.0.0.1:5555/callback)
+
+code_client_id=$(echo $code_client | jq -r '.client_id')
+code_client_secret=$(echo $code_client | jq -r '.client_secret')
+```
+
+Note that you need to add `--token-endpoint-auth-method none` if your clients
+are public (such as SPA apps and native apps) because the public clients can't
+provide client secrets.
+
+The following command starts a server that serves an example web application.
+The application will perform the OAuth 2.0 Authorization Code Flow using Ory
+Hydra. The web server runs on [http://127.0.0.1:5555](http://127.0.0.1:5555).
+
+```sh
+docker compose -f quickstart.yml exec hydra \
+ hydra perform authorization-code \
+ --client-id $code_client_id \
+ --client-secret $code_client_secret \
+ --endpoint http://127.0.0.1:4444/ \
+ --port 5555 \
+ --scope openid --scope offline
+
+Setting up home route on http://127.0.0.1:5555/
+Setting up callback listener on http://127.0.0.1:5555/callback
+Press ctrl + c on Linux / Windows or cmd + c on OSX to end the process.
+If your browser doesn't open automatically, navigate to:
+
+ http://127.0.0.1:5555/
+```
+
+Open the URL [http://127.0.0.1:5555](http://127.0.0.1:5555), log in, and
+authorize the application. Next, you should see at least an access token in the
+response. If you granted the `offline` scope, you will also see a refresh token.
+If you granted the `openid` scope, you will get an ID Token as well.
+
+Great! You installed Ory Hydra, connected the CLI, created a client and
+completed two authentication flows! Before you continue, clean up this set up in
+order to avoid conflicts with other tutorials from this guide:
+
+```sh
+docker compose -f quickstart.yml kill
+docker compose -f quickstart.yml rm -f -v
+```
+
+## Quickstart configuration
+
+In this tutorial we use a simplified configuration. You can find it in
+[`contrib/quickstart/5-min/hydra.yml`](https://github.com/ory/hydra/blob/master/contrib/quickstart/5-min/hydra.yml).
+The configuration gets loaded in docker compose as specified in the
+[`quickstart.yml`](https://github.com/ory/hydra/blob/master/quickstart.yml).
+
+```mdx-code-block
+ r2
+ r2 --- sub2(["athena"])
+ style sub1 fill:lightgreen
+ style sub2 fill:lightgreen
+ style r1 fill:darkgreen,color:white
+ style r2 fill:darkgreen,color:white
+`}
+/>
+```
diff --git a/src/components/Shared/keto/overview.mdx b/src/components/Shared/keto/overview.mdx
new file mode 100644
index 0000000000..fca5340654
--- /dev/null
+++ b/src/components/Shared/keto/overview.mdx
@@ -0,0 +1,221 @@
+```mdx-code-block
+import CodeFromRemote from "@theme/CodeFromRemote"
+import BrowserWindow from "@site/src/theme/BrowserWindow"
+```
+
+[Ory Permissions](https://www.ory.com/permissions) (based on
+[Ory Keto](https://github.com/ory/keto)) implements
+[Google Zanzibar](https://research.google/pubs/pub48190/). This document
+explains the most fundamental concepts necessary to work with Ory Permissions
+and gives you an opportunity to create and query a simple set of relationships.
+
+## Basic concepts
+
+Before you start, learn about the basic concepts used in Ory Permissions.
+
+### Relations and relationships
+
+The data model used by Ory Permissions are so-called
+[relationships](/docs/keto/concepts/relation-tuples) that encode relations
+between [subjects](/docs/keto/concepts/subjects) and
+[objects](/docs/keto/concepts/objects).
+
+:::tip
+
+Read the dedicated documents to learn more about
+[subjects](/docs/keto/concepts/subjects) and
+[objects](/docs/keto/concepts/objects).
+
+:::
+
+Examples of relationships are:
+
+```keto-relationships
+users:user1 is in members of groups:group1
+members of groups:group1 are readers of files:file1
+```
+
+As you can see, the subject of a relationship can either be a specific subject
+ID, or subjects defined through an
+[indirection](https://en.wikipedia.org/wiki/Indirection) (all members of a
+certain group). The object is referenced by its ID.
+
+### Checking permissions
+
+Permissions are just another form of relations. Therefore, a permission check is
+a request to check whether a subject has a certain relation to an object,
+possibly through one or more indirections.
+
+As a very simple example, let's assume the following tuples exist:
+
+```keto-relationships
+users:user1 is in members of groups:group1
+members of groups:group1 are readers of files:file1
+```
+
+Based on these tuples, you can run permission checks:
+
+- Is `user1` a `reader` of `file1`?
+
+ ```keto-relationships
+ is users:user1 in readers of files:file1? // Yes
+ ```
+
+ Yes, because `user1` is in `members` of `groups:group1` and all `members` of
+ `groups:group1` are `readers` of `files:file1`.
+
+- Is `user2` a member of `group1`?
+
+ ```keto-relationships
+ is users:user2 in members of groups:group1? // No
+ ```
+
+ No, because there is no relation between `user2` and `group1`.
+
+## Example
+
+This example setup demonstrates the basics of relationship management and usage
+of the Check API.
+
+This guide explains how to configure namespaces and relationship rules using the
+[Ory Permission Language](/docs/keto/reference/ory-permission-language) (OPL).
+You can then run fine-grained checks against Ory Permissions, which are answered
+based on a combination of OPL and the concrete high-level relationships stored.
+
+The example describes a file store. Individual files are organized in a folder
+hierarchy, and can be accessed by individual users or groups of users. Using the
+Ory Permission Language you can specify that if a user has access to a folder,
+the user also has access to all files in that folder.
+
+### Ory Network setup
+
+The fastest way to get started with Ory Permissions is using
+[Ory Console](https://console.ory.sh/).
+
+Go to
+
+
+
+
+```
+
+Paste the following content into the editor:
+
+```mdx-code-block
+
+ ```
+
+3. Use the project ID of the project in which you want to create permission
+ rules:
+
+ ```shell
+ ory use project
+ ```
+
+### Creating relationships
+
+Next, create relationships in your Ory Network project using the Ory CLI.
+
+The following relationships showcase the namespace configuration. The sample
+defines a `developer` group with two members and a folder hierarchy. Through the
+rules in the Ory Permission Language, every member of the `developer` group can
+access the files in the hierarchy.
+
+You can create additional fine-grained permission rules for certain objects,
+similar to the `private` file.
+
+```mdx-code-block
+ r2
+ r1 ----- sub1(["cat lady"])
+ r1 -.-> r4
+ obj1 ---- r4((owner))
+ r3 --- all(["* (anyone)"])
+ r4 -.-> r3
+ obj1[videos:/cats/1.mp4] --- r3((view))
+ obj2 --- r6((view))
+ r1 -.-> r5
+ obj2[videos/cats/2.mp4] ---- r5((owner))
+ r5 -.-> r6
+ style sub1 fill:lightgreen
+ style all fill:lightgreen
+ style r1 fill:darkgreen,color:white
+ style r2 fill:darkgreen,color:white
+ style r3 fill:darkgreen,color:white
+ style r4 fill:darkgreen,color:white
+ style r5 fill:darkgreen,color:white
+ style r6 fill:darkgreen,color:white
+`}
+/>
+```
+
+
+
+Updating the view permissions will be added here at a later stage.
diff --git a/src/components/Shared/keto/quickstarts/quickstart.mdx b/src/components/Shared/keto/quickstarts/quickstart.mdx
new file mode 100644
index 0000000000..1bdb2c457a
--- /dev/null
+++ b/src/components/Shared/keto/quickstarts/quickstart.mdx
@@ -0,0 +1,184 @@
+```mdx-code-block
+import Help from '@site/docs/_common/need-selfhosted-support.mdx'
+
+ r2
+ r1 ----- sub1(["cat lady"])
+ r1 -.-> r4
+ obj1 ---- r4((owner))
+ r3 --- all(["* (anyone)"])
+ r4 -.-> r3
+ obj1[videos:/cats/1.mp4] --- r3((view))
+ obj2 --- r6((view))
+ r1 -.-> r5
+ obj2[videos/cats/2.mp4] ---- r5((owner))
+ r5 -.-> r6
+ style sub1 fill:lightgreen
+ style all fill:lightgreen
+ style r1 fill:darkgreen,color:white
+ style r2 fill:darkgreen,color:white
+ style r3 fill:darkgreen,color:white
+ style r4 fill:darkgreen,color:white
+ style r5 fill:darkgreen,color:white
+ style r6 fill:darkgreen,color:white
+`}
+/>
+```
+
+
+
+Updating the view permissions will be added here at a later stage.
diff --git a/src/components/Shared/kratos/01_mfa-overview.mdx b/src/components/Shared/kratos/01_mfa-overview.mdx
new file mode 100644
index 0000000000..8e8d48ad60
--- /dev/null
+++ b/src/components/Shared/kratos/01_mfa-overview.mdx
@@ -0,0 +1,161 @@
+Multi-factor authentication (MFA) provides an additional layer of security that
+helps ensure that the accounts of your users can't be easily compromised by
+malicious actors.
+
+Nowadays, many of the passwords in use can be easily compromised because:
+
+- They are re-used across multiple websites and applications.
+- They were leaked to the web and sold to malicious actors.
+- They are considered "weak" because they are short, have obvious, derivable
+ patterns, or contain easy-to-guess character strings.
+
+By enabling two-factor authentication in your project, you introduce an
+additional verification step that can protect user login or self-service
+actions, such as updating account information or credentials, from malicious
+actors.
+For example, you might decide to require a user to log in with two factors right
+at the start of the session. Alternatively, you could allow the user to start
+the session by logging in with the first factor and only require the second
+factor at the point where the user is about to perform a security-sensitive
+operation. Read more about dynamic MFA in the
+[step-up authentication](/docs/kratos/mfa/step-up-authentication) document.
+
+## Available methods
+
+Ory offers multiple second-factor authentication methods:
+
+### Time-based one-time password (TOTP)
+
+Time-based one time passwords (TOTP) are a flexible 2FA authentication method
+based on a shared secret, and can be used both with browser-based apps and
+native apps. Read [Time-based one-time passwords (TOTP)](/docs/kratos/mfa/totp)
+to learn more.
+
+### WebAuthn
+
+This method uses the
+[Web Authentication API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API),
+also known as WebAuthn, which allows servers to register and authenticate users
+using public-key cryptography. Read
+[WebAuthn and FIDO2 (YubiKey)](/docs/kratos/mfa/webauthn-fido-yubikey) to learn
+more.
+
+### Lookup Secrets
+
+Lookup Secrets, also known as Backup Codes or Recovery Codes, are a 2FA
+fail-safe mechanism, rather than a standalone two-factor authentication method.
+They can be used to complete the second factor when users lose access to their
+selected 2FA method. Read
+[Lookup Secrets (Recovery Codes)](/docs/kratos/mfa/lookup-secrets) to learn
+more.
+
+### SMS
+
+SMS for MFA sends a one-time password to the user's registered mobile phone
+number via text message. Read the [Code via SMS](/docs/kratos/mfa/mfa-via-sms)
+documentation to learn more.
+
+## Terminology
+
+Learn more about the terms and concepts used when talking about 2FA in Ory.
+
+### Authentication Method Reference (AMR)
+
+The Authentication Method Reference (AMR) is an array of authentication methods
+used over the lifetime of an Ory Session.
+
+The following methods can be present in a session:
+
+- `password` - When the user authenticated with their password.
+- `oidc`- When the user authenticated by signing in with a social sign-in
+ provider.
+- `totp`- When the user authenticated by entering a time-based one-time
+ password.
+- `webauthn` - When the user authenticated through a WebAuthn channel, such as
+ OS-level biometric authentication or a hardware token.
+- `lookup_secret` - When the user entered a valid one-time recovery code.
+
+This is how the information is presented in the Ory Session when you fetch the
+session from the Ory Identities API:
+
+```json5 title="Sample Ory Session JSON payload"
+{
+ id: "6b51a3f2-6a2c-4557-90a8-4e23de7072aa",
+ active: true,
+ // ...
+ authenticator_assurance_level: "aal2",
+ authentication_methods: [
+ {
+ method: "password",
+ completed_at: "2021-10-14T09:37:53.872104Z",
+ },
+ {
+ method: "totp",
+ completed_at: "2021-10-14T09:41:16.771859Z",
+ },
+ ],
+ // ...
+}
+```
+
+If a user authenticates multiple times over the lifetime of the same session
+with the same method, every successful attempt will be present in the session:
+
+```json5 title="Sample Ory Session JSON Payload"
+{
+ id: "6b51a3f2-6a2c-4557-90a8-4e23de7072aa",
+ active: true,
+ // ...
+ authenticator_assurance_level: "aal2",
+ authentication_methods: [
+ {
+ method: "password",
+ completed_at: "2021-10-14T09:37:53.872104Z",
+ },
+ {
+ method: "lookup_secret",
+ completed_at: "2021-10-14T09:41:16.771859Z",
+ },
+ {
+ method: "password",
+ completed_at: "2021-10-14T12:00:00.134567Z",
+ },
+ ],
+ // ...
+}
+```
+
+### Authenticator Assurance Level (AAL)
+
+The Authenticator Assurance Level (AAL) indicates how many authentication
+factors the identity has completed.
+
+Authentication methods are classified into factors:
+
+| Authentication method | Factor |
+| :-------------------- | :----- |
+| `password` | first |
+| `oidc` | first |
+| `totp` | second |
+| `webauthn` | second |
+| `lookup_secret` | second |
+
+:::info
+
+When you enable
+[passwordless authentication with WebAuthn or Passkeys](/docs/kratos/passwordless/passkeys),
+it isn't considered as a second authentication factor.
+
+:::
+
+The AAL parameter can take one of two values:
+
+- `aal1`: The user completed only the first authentication factor(s).
+- `aal2`: The user completed the first and the second authentication factor(s).
+
+:::danger
+
+Completing two first authentication factors doesn't give the user `aal2`. For
+example, logging in with a `password` and `oidc` is still `aal1`.
+
+:::
diff --git a/src/components/Shared/kratos/01_overview.mdx b/src/components/Shared/kratos/01_overview.mdx
new file mode 100644
index 0000000000..28b1fbe248
--- /dev/null
+++ b/src/components/Shared/kratos/01_overview.mdx
@@ -0,0 +1,77 @@
+Identities are sets of data that describe humans that sign up on a website or an
+application, for example online store customers, file sharing service users, or
+company contractors signing up to use internal systems.
+
+:::info
+
+What Ory calls identities, other software often refers to as "users",
+"accounts", or "user accounts". For the sake of clarity, we use the term
+"identity" interchangeably with other common names for user accounts in the
+documentation.
+
+:::
+
+Identities are created on the basis of schemas, which define what fields (data)
+the system stores for the identity. Thanks to schemas, every identity created in
+your system can store its own set of data, which allows you to easily
+differentiate between user types, for example customers and employees.
+
+## Identity example
+
+This is a sample identity presented in the YAML format. To manage identities,
+use the `/admin/identities` endpoint. Keep in mind that the API payload is in
+JSON format.
+
+```yaml
+# This is a UUID generated when the identity is created. Can't be changed or updated.
+id: "9f425a8d-7efc-4768-8f23-7647a74fdf13"
+
+# Every identity has a state. Inactive identities can't log into the system.
+state: active
+
+# This section represents all credentials associated with the identity.
+credentials:
+ password:
+ id: password
+ identifiers:
+ - john.doe@acme.com
+ - johnd@ory.com
+ config:
+ hashed_password: ...
+ oidc:
+ id: oidc
+ identifiers:
+ - google:j8kf7a3...
+ - facebook:83475891...
+ config:
+ - provider: google
+ identifier: j8kf7a3
+ - provider: facebook
+ identifier: 83475891
+
+# This is the JSON Schema ID used for validating the traits of this identity.
+schema_id: default
+
+# Traits represent information about the identity, such as the first or last name. The traits content is
+# up to you and will be validated using the JSON Schema at `traits_schema_url`.
+traits:
+ # These are just examples
+ email: office@ory.com
+ name:
+ first: Aeneas
+ last: Rekkas
+ favorite_animal: Dog
+ accepted_tos: true
+
+# Public metadata is visible at the `/session/whoami` endpoint but cannot be modified by the users themselves.
+metadata_public:
+ any:
+ valid: ["json"]
+ example: 1
+
+# Admin metadata only visible at administrative endpoints and cannot be modified by the users themselves.
+metadata_admin:
+ another:
+ valid: ["yaml"]
+ example: 2
+```
diff --git a/src/components/Shared/kratos/10_scalability.mdx b/src/components/Shared/kratos/10_scalability.mdx
new file mode 100644
index 0000000000..3411f248f8
--- /dev/null
+++ b/src/components/Shared/kratos/10_scalability.mdx
@@ -0,0 +1,28 @@
+Ory services are running in high-scale production environments that handle
+millions of requests per day. To scale Ory, spin up another VM, Docker
+container, or pod of Ory Kratos, Ory Hydra or Keto with the same configuration.
+Ory scales effortlessly to thousands of pods without any additional work. There
+is no need for complex key-value stores or message queues to serve high traffic
+environments.
+
+If you use multiple SQL instances use HAProxy or similar technology for
+[SQL load balancing](https://severalnines.com/resources/database-management-tutorials/mysql-load-balancing-haproxy-tutorial).
+
+## Mail courier
+
+Ory Kratos processes emails by storing them in an email queue on your database
+and running a mail courier worker to handle this queue. To avoid processing the
+same email multiple times, only one instance of this mail courier should be run
+at one time. For simple single-instance Ory Kratos deployments, the courier can
+simply be run as a background worker, but for multi-instance Ory Kratos
+deployments, it needs to be run a distinct singleton foreground worker. To learn
+more about setup and configuration, read the
+[Mail courier in self-hosted Ory Kratos](../../kratos/self-hosted/mail-courier-selfhosted)
+document.
+
+Ory Kratos doesn't have any special requirements when it comes to high
+availability as it doesn't manage state itself but instead relies on the SQL
+database for that.
+
+It's therefore possible to use Ory Kratos with auto-scaling groups for example
+in Kubernetes without any additional configuration.
diff --git a/src/components/Shared/kratos/_static/quickstart/mailslurper-quickstart.png b/src/components/Shared/kratos/_static/quickstart/mailslurper-quickstart.png
new file mode 100644
index 0000000000..ec327d2146
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/mailslurper-quickstart.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/quickstart-recover-i.png b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-i.png
new file mode 100644
index 0000000000..54b53b973c
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-i.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/quickstart-recover-ii.png b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-ii.png
new file mode 100644
index 0000000000..f23f01825b
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-ii.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iii.png b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iii.png
new file mode 100644
index 0000000000..63f27203ef
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iii.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iv.png b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iv.png
new file mode 100644
index 0000000000..f31e5df657
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/quickstart-recover-iv.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-dashboard.png b/src/components/Shared/kratos/_static/quickstart/secureapp-dashboard.png
new file mode 100644
index 0000000000..e0201aad93
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-dashboard.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-login-ntrace.png b/src/components/Shared/kratos/_static/quickstart/secureapp-login-ntrace.png
new file mode 100644
index 0000000000..2d19864327
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-login-ntrace.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-login.png b/src/components/Shared/kratos/_static/quickstart/secureapp-login.png
new file mode 100644
index 0000000000..0a89ed8cc9
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-login.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-registration-ntrace.png b/src/components/Shared/kratos/_static/quickstart/secureapp-registration-ntrace.png
new file mode 100644
index 0000000000..7aac419ddd
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-registration-ntrace.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-registration-pwpolicy.png b/src/components/Shared/kratos/_static/quickstart/secureapp-registration-pwpolicy.png
new file mode 100644
index 0000000000..d07b17d33d
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-registration-pwpolicy.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/secureapp-registration.png b/src/components/Shared/kratos/_static/quickstart/secureapp-registration.png
new file mode 100644
index 0000000000..f24780b088
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/secureapp-registration.png differ
diff --git a/src/components/Shared/kratos/_static/quickstart/ui-unverified-dashboard.png b/src/components/Shared/kratos/_static/quickstart/ui-unverified-dashboard.png
new file mode 100644
index 0000000000..60eff5c492
Binary files /dev/null and b/src/components/Shared/kratos/_static/quickstart/ui-unverified-dashboard.png differ
diff --git a/src/components/Shared/kratos/e2e-integration-tests.tsx b/src/components/Shared/kratos/e2e-integration-tests.tsx
new file mode 100644
index 0000000000..88ba38bf4e
--- /dev/null
+++ b/src/components/Shared/kratos/e2e-integration-tests.tsx
@@ -0,0 +1,80 @@
+import React from "react"
+import CodeBlock from "@theme/CodeBlock"
+
+type Product = "network" | "oel" | "oss"
+
+interface E2EIntegrationTestsProps {
+ product: Product
+}
+
+export function E2EIntegrationTests({ product }: E2EIntegrationTestsProps) {
+ const productLabel =
+ product === "network"
+ ? "Ory Network"
+ : product === "oel"
+ ? "Ory Enterprise License"
+ : "Ory Open Source"
+
+ const commandPrefix = product === "network" ? "ory" : "kratos"
+
+ return (
+ <>
+
+ {`DSN=memory ${commandPrefix} serve -c ./path/to/config/kratos.yml --dev > "kratos.e2e.log" 2>&1 &`}
+
+
+
+ {`{
+ "chromeWebSecurity": false
+}`}
+
+
+
+ {`DSN=memory \\
+ DEV_DISABLE_API_FLOW_ENFORCEMENT=true
+ hydra serve -c ./path/to/config/kratos.yml --dev > "kratos.e2e.log" 2>&1 &)`}
+
+
+ )
+}
diff --git a/src/components/Shared/kratos/index.mdx b/src/components/Shared/kratos/index.mdx
new file mode 100644
index 0000000000..3bcae6016f
--- /dev/null
+++ b/src/components/Shared/kratos/index.mdx
@@ -0,0 +1,173 @@
+Ory Kratos Identities is an API-first identity and user management system built
+on top of the widely deployed open-source
+[Ory Kratos](https://github.com/ory/kratos) following
+[cloud architecture best practices](/docs/oss/software-architecture-philosophy).
+It implements mechanisms that allow handling core use cases that the majority of
+modern software applications have to deal with:
+
+- **Self-service login and registration**: Allow end-users to create and sign in
+ to accounts using username/email and password combinations, social sign-in
+ ("Sign in with Google, GitHub"), passwordless flows, and others.
+- **Multi-factor authentication (MFA/2FA)**: Support protocols such as TOTP
+ ([RFC 6238](https://tools.ietf.org/html/rfc6238) and
+ [IETF RFC 4226](https://tools.ietf.org/html/rfc4226) - better known as
+ [Google Authenticator](https://en.wikipedia.org/wiki/Google_Authenticator))
+- **Account verification**: Verify that an email address, phone number, or
+ physical address actually belongs to the user.
+- **Account recovery**: Allow users to recover access to their account using
+ "Forgot Password" flows or security codes.
+- **Profile and account management**: Use secure flows to update passwords,
+ personal details, email addresses, and linked social profiles.
+- **Admin APIs**: Import, update, and delete user accounts.
+
+:::tip
+
+Ory Identities calls user accounts "identities". The terms "user accounts",
+"users", and "identities" are used interchangeably in the Ory documentation.
+Read [more here](/docs/network/kratos/quickstarts/identity_model) to learn more
+about identities in Ory.
+
+:::
+
+Identity is a hard problem that Ory Identities solves in a unique way. Ory
+values security, flexibility, and integration with cloud technology such as
+Kubernetes the most:
+
+- Ory Identities doesn't ship an HTML Rendering Engine. You can use the Ory
+ Account Experience available in Ory Network or build your own UI in the
+ language and framework you feel most comfortable with.
+- The workflow engine allows you to fully customize your users' experience.
+ Whether you want users to activate their accounts after registration, or have
+ a multi-step (progressive) registration process - it's all possible!
+- One [identity schema](/docs/kratos/manage-identities/identity-schema) doesn't
+ fit all - you may have customers that need a billing address, have multiple
+ email addresses, or internal support staff that's assigned to a cost center.
+ You can accommodate the different data models using
+ [JSON Schema](https://json-schema.org/) and make the system work for you - not
+ the other way around.
+
+Ory Identities isn't just about features - it's about security, reliability, and
+speed. As a cornerstone of Ory Network, Ory Identities runs in a managed cloud
+environment and gives you a production-ready solution to securely manage users
+and authentication flows.
+
+When hosted on premise, Ory Identities stands out from other solutions because
+it runs on any operating system such as Linux, macOS, or Windows, and on most
+processors such as i386, amd64, or ARM. The compiled binary has no system or
+library or file dependencies and can be run as a single, static binary on top
+of, for example, a raw Linux kernel. Ory Identities self-hosted scales
+horizontally without effort. The only external dependency is an RDBMS - we
+support SQLite, PostgreSQL, MySQL, CockroachDB. You will not need memcached,
+etcd, or a similar system to scale.
+
+Ory believes in a strong separation of concerns, which is a guiding principle in
+the design of each Ory project. As such, Ory software is built to solve a
+specific problem well and offload adjacent issues such as a user interfaces to
+other applications.
+
+## Features
+
+### Cookie-based security
+
+Enhance browser security with anti-CSRF cookies, protect against common attack
+vectors such as XSS and CSRF, and maintain that session states securely.
+[Read more about it here](/docs/security-model)
+
+### Native and browser APIs
+
+Integrate seamlessly with mobile or native apps and web browsers using robust
+APIs. Read more about it [here](/docs/identities/native-browser).
+
+### Self-service flows
+
+Registration, login, logout, multi-factor authentication, settings,
+verification, and recovery. Read more about it
+[here](/docs/kratos/self-service).
+
+### Authentication methods
+
+Passwords, passwordless code, Passkeys, social sign-in, multi-factor
+authentication. Read more about it [here](/docs/kratos/concepts/credentials).
+
+### Identity schema
+
+Customize and extend user data models to fit application-specific needs. Read
+more about it [here](/docs/kratos/manage-identities/overview).
+
+### Identity management
+
+Manage user identities with CRUD (Create, Read, Update, Delete) operations. Read
+more about it [here](/docs/kratos/manage-identities/overview).
+
+### Session management
+
+Control user sessions, including lifespan, refresh, and revocation. Read more
+about it [here](/docs/kratos/session-management/overview).
+
+### User interface
+
+Build custom user interfaces for authentication and profile management using Ory
+SDKs and REST APIs to match your applications design. Read more about it
+[here](/docs/account-experience).
+
+### Send emails & SMS
+
+Email and SMS notifications for verification, recovery, and multi-factor
+authentication. Customize SMPT/HTTP and SMS server and templates. Read more
+about it [here](/docs/kratos/emails-sms/custom-email-templates).
+
+## Benefits
+
+Ory Identities offers several key benefits that make it an ideal solution for
+managing user identities, authentication, and access control. By leveraging Ory
+Identities, you can:
+
+**Accelerate development** Hit the ground running with a comprehensive user
+management system that supports a wide range of authentication methods and
+identity management features. Ory Identities adheres to industry standards,
+allowing you to streamline authentication across apps and services and focus on
+your core business.
+
+**Ensure compliance**: Ory Identities is designed to meet the latest security
+standards and regulatory requirements such as GDPR, simplifying the process of
+ensuring compliance. It helps you address legal and industry-specific data
+protection mandates effectively.
+
+**Own your user experience**: Ory Identities allows you to use a custom UI that
+matches the exact branding and flow you need to improve user experience.
+
+**Scale to millions**: Built on a cloud-native architecture, Ory Identities
+scales effortlessly to accommodate growing user bases, whether you're managing
+thousands or millions of users. Its flexible design ensures consistent
+performance and reliability as your needs evolve.
+
+**Mitigate Security Risks**: With a security-first approach Ory Identities
+minimizes attack surface. It safeguards user data and prevents unauthorized
+access and malicious attacks, providing robust protection for both users and
+data.
+
+## Usecases
+
+- B2C (Business-to-Consumer): Provide seamless registration, login, and profile
+ management for customers using your apps and services directly. This includes
+ social logins, passwordless options, and robust account recovery mechanisms.
+- B2B (Business-to-Business): Create secure logins and access controls for
+ partner organizations or client companies to manage their accounts, view
+ orders, and interact with your services. Enable streamlined authentication for
+ employees of partner organizations, allowing them to access your B2B
+ applications using their company credentials.
+- Workforce: Onboard new employees, manage user accounts, roles, and identities
+ within your organization's systems. Multi-factor authentication (MFA) and
+ breached password protection for added security
+- Enterprise: Consolidate user accounts and identities across multi-tenant
+ brands, applications and systems. Use Ory Identities to streamline user
+ onboarding, offboarding, and permission management. Seamlessly connect with
+ existing enterprise identity providers and other 3rd party systems.
+
+## Next steps
+
+Read more about the Ory Identities [security model](/docs/security-model) and
+try out one of the
+[Ory Network Identities quickstart guides](/docs/getting-started/overview) for
+your framework or programming language to learn how to add login and
+registration to your app in minutes.
diff --git a/src/components/Shared/kratos/quickstart.mdx b/src/components/Shared/kratos/quickstart.mdx
new file mode 100644
index 0000000000..567bf6e613
--- /dev/null
+++ b/src/components/Shared/kratos/quickstart.mdx
@@ -0,0 +1,719 @@
+```mdx-code-block
+import Help from '@site/docs/_common/need-selfhosted-support.mdx'
+
+{`git clone https://github.com/ory/kratos.git
+cd kratos
+\
+git checkout ${useLatestRelease('kratos')}
+docker-compose -f quickstart.yml -f quickstart-standalone.yml up --force-recreate
+# If you have SELinux, run:
+docker-compose -f quickstart.yml -f quickstart-selinux.yml -f quickstart-standalone.yml up --force-recreate`}
+```
+
+This might take a minute or two. Once the output slows down and logs indicate a
+healthy system you're ready to roll! A healthy system will show something along
+the lines of (the order of messages might be reversed):
+
+```
+kratos_1 | time="2020-01-20T14:52:13Z" level=info msg="Starting the admin httpd on: 0.0.0.0:4434"
+kratos_1 | time="2020-01-20T14:52:13Z" level=info msg="Starting the public httpd on: 0.0.0.0:4433"
+```
+
+:::note
+
+There are two important factors to get a fully functional system:
+
+- You need to make sure that ports `4455`, `4433`, `4434`, and `4436`
+ [are free](https://serverfault.com/questions/309052/check-if-port-is-open-or-closed-on-a-linux-server).
+- Make sure to always use `127.0.0.1` as the hostname; never use `localhost`!
+ This is important because browsers treat these two as separate domains and
+ will therefore have issues with setting and using cookies.
+
+:::
+
+There is no database being used in this example. Ory Kratos supports SQLite,
+PostgreSQL, MySQL, and CockroachDB as database backends. For the quickstart,
+we're mounting a persistent volume to store the SQLite database in.
+
+Future guides will explain how to set up a production system.
+
+### Network architecture
+
+This demo makes use of several services:
+
+1. [Ory Kratos](https://github.com/ory/kratos)
+ - Public ("Browser") API (port 4433)
+ - Admin API (port 4434) - This is only made public so we can test via the
+ CLI.
+2. [Node.js Selfservice UI](http://github.com/ory/kratos-selfservice-ui-node)
+ - Public (port 4455) - an example application written in Node.js that
+ implements the login, registration, logout, dashboard, and other UIs.
+3. [MailSlurper](https://github.com/mailslurper)
+ - Public (port 4436) - a development SMTP server which Ory Kratos will use to
+ send emails.
+
+To better understand the application architecture, let's take a look at the
+network configuration. This assumes that you have at least some understanding of
+how Docker networks work:
+
+|Can access URLs via 127.0.0.1:4455|OKPHN
+ B-->|Can access URLs via 127.0.0.1:4433|PAPI
+ B-->|Can access UI via 127.0.0.1:4436|SMTPUI
+ OKPHN([Selfservice UI exposed at :4455])
+ SMTPUI([MailSlurper UI exposed at :4436])
+ PAPI([Ory Kratos Public API exposed at :4433])
+end
+subgraph dn["Internal Docker Network (intranet)"]
+ OKPHN-.->SA
+ SMTPUI-.->SMTP
+ PAPI-.->OK
+ SA-->|Talks to and validates login sessions using|OK
+ OK-->|Sends mail via|SMTP
+ OK[Ory Kratos]
+ SA["Selfservice UI (Ory Kratos SelfService UI Node Example)"]
+ SMTP["SMTP Server (MailSlurper)"]
+end
+`}
+/>
+
+## Perform registration, login, and logout
+
+Enough theory, it's time to get this thing going! Let's start by trying to open
+the dashboard - **go to
+[127.0.0.1:4455/welcome](http://127.0.0.1:4455/welcome)**.
+
+You should end up at the dashboard:
+
+
+
+Under the section `Session Information` you can find the Ory Session details, as
+there is no active session this is empty for now.
+
+:::note
+
+The rendered login form should be a standard HTML `
+
+
+
+ )
+}
diff --git a/src/components/OryHeroDemo.jsx b/src/components/OryHeroDemo.jsx
new file mode 100644
index 0000000000..cd37140e5f
--- /dev/null
+++ b/src/components/OryHeroDemo.jsx
@@ -0,0 +1,233 @@
+import React, { useState, useEffect, useRef } from "react"
+
+const OryHeroDemo = () => {
+ const [lines, setLines] = useState([
+ {
+ type: "line",
+ number: 1,
+ text: "From zero to registered user in minutes!",
+ },
+ { type: "line", number: 2, text: "Click 'Run'." },
+ ])
+ const [isRunning, setIsRunning] = useState(false)
+ const [hasRun, setHasRun] = useState(false)
+ const terminalRef = useRef(null)
+
+ const script = [
+ // CLI setup
+ { type: "comment", text: "# One-time project setup via Ory CLI", delay: 0 },
+ { type: "command", text: "brew install ory/tap/cli", delay: 300 },
+ { type: "output", text: "Installing ory...", delay: 500 },
+ { type: "success", text: "✓ Installed", delay: 600 },
+ { type: "command", text: "ory auth", delay: 400 },
+ {
+ type: "output",
+ text: "Opening browser to create your Ory developer account...",
+ delay: 500,
+ },
+ { type: "success", text: "✓ Authenticated as
+
+
+
+ )
+}
+
+export default OryHeroDemo
diff --git a/src/components/OryNetworkCta/ory-network-cta.css b/src/components/OryNetworkCta/ory-network-cta.css
deleted file mode 100644
index 9001d5fe0c..0000000000
--- a/src/components/OryNetworkCta/ory-network-cta.css
+++ /dev/null
@@ -1,135 +0,0 @@
-.ory-network-cta {
- --ory-cyan-50: #ecfeff;
- --ory-cyan-100: #cffafe;
- --ory-cyan-500: #06b6d4;
- --ory-cyan-900: #164e63;
- --ory-gray-900: #0f172a;
-
- position: relative;
- margin-top: 1em;
- flex-shrink: 0;
- max-height: var(--ory-network-cta-height);
- background-color: var(--ory-cyan-500);
-}
-
-.ory-network-cta:hover {
- text-decoration: none;
-}
-
-.ory-network-cta__background {
- position: absolute;
- inset: 0;
-}
-
-.ory-network-cta__grid {
- background: url("/img/bg-grid-cell-medium.svg") center;
- position: absolute;
- inset: 0;
- z-index: 0;
-}
-
-.ory-network-cta__gradient {
- background: linear-gradient(
- 164deg,
- var(--ory-cyan-500) 64.41%,
- transparent 100%
- );
- position: absolute;
- inset: 0;
- z-index: 1;
-}
-
-.ory-network-cta__content {
- position: relative;
- padding: 16px;
- display: flex;
- flex-direction: column;
- gap: 16px;
- justify-content: space-between;
- height: 100%;
- z-index: 10;
-}
-
-.ory-network-cta__title-and-paragraph {
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-.ory-network-cta__title {
- font-style: normal;
- color: var(--ory-cyan-50);
- font-size: 24px;
- line-height: 100%;
- font-weight: 600;
-}
-
-.ory-network-cta__paragraph {
- font-size: 16px;
- line-height: 125%;
- color: var(--ory-cyan-100);
-}
-
-.ory-network-cta__button {
- /* Will be overridden in sufficiently wide container queries */
- display: none;
-
- padding: 9px 15px;
- background: var(--ory-cyan-50);
- color: var(--ory-cyan-900);
- font-weight: 500;
- word-wrap: normal;
-}
-
-.ory-network-cta__button:hover {
- text-decoration: none;
-}
-
-.ory-network-cta__inline-get-started {
- display: block;
-}
-
-@media (min-width: 1070px) {
- .ory-network-cta__button {
- display: block;
- text-align: center;
- }
-
- .ory-network-cta__inline-get-started {
- display: none;
- }
-}
-
-@media (min-width: 1230px) {
- .ory-network-cta__content {
- padding: 24px;
- gap: 48px;
- }
-
- .ory-network-cta__title {
- font-size: 26px;
- line-height: 100%;
- font-weight: 600;
- }
-}
-
-@media (min-width: 1370px) {
- .ory-network-cta__paragraph {
- font-size: 18px;
- line-height: 150%;
- }
-}
-
-@media (min-width: 1450px) {
- .ory-network-cta__content {
- gap: 32px;
- }
-
- .ory-network-cta__title {
- font-size: 36px;
- }
-
- .ory-network-cta__button {
- padding: 12px 20px;
- }
-}
diff --git a/src/components/OryNetworkCta/ory-network-cta.tsx b/src/components/OryNetworkCta/ory-network-cta.tsx
index c4cc9a7be5..fe99f9e493 100644
--- a/src/components/OryNetworkCta/ory-network-cta.tsx
+++ b/src/components/OryNetworkCta/ory-network-cta.tsx
@@ -1,194 +1,44 @@
import React from "react"
-import "./ory-network-cta.css"
+import useBaseUrl from "@docusaurus/useBaseUrl"
-const ctaVariants = [
- {
- title: "Ory Network",
- content: (
- <>
- The best way to manage identities, authentication, authorization, and
- access control—designed for speed, security, and compliance.
-
- ),
- cta: "Sign up for a free account",
- href: "https://console.ory.sh/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
- },
-]
+// Resolve image via bundler so path works in dev and build (baseUrl: /docs/)
+import networkImg from "@site/src/static/img/network-cta/network.png"
-export const OryNetworkCta = () => {
- const { cta, content, title, href } = ctaVariants[0]
-
- return (
-
+
+
+
+
+
+
+
+
+
+
+ Terminal
+
+
+ {lines.map((line, i) => (
+
+
+
+ {line.type === "line" && (
+ <>
+
+ {line.number}
+
+ $
+
+ {line.text}
+
+
+ )}
+
+ {line.type === "comment" && (
+
+ ))}
+
+ {isRunning && (
+
+ )}
+
+ {line.text}
+
+ )}
+
+ {line.type === "note" && (
+
+ {line.text}
+
+ )}
+
+ {line.type === "command" && (
+
+ ${" "}
+ {line.text}
+
+ )}
+
+ {line.type === "command-cont" && (
+ {line.text}
+ )}
+
+ {line.type === "output" && (
+ {line.text}
+ )}
+
+ {line.type === "success" && (
+
+ {line.text}
+
+ )}
+
+ {line.type === "link" && (
+
+
+ {line.text}
+
+
+ )}
+
+
+ From zero to registered user in minutes
+
+
+
+
-
- )
+const CTA_CONFIG = {
+ title: "Ory Network",
+ description:
+ "The largest Identity and Access Management network in the world. So you can get back to building your business.",
+ ctaLabel: "Sign up for free",
+ href: "https://console.ory.sh/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
}
-function Logo({ className }: { className?: string }) {
+export const OryNetworkCta = () => {
+ const { title, description, ctaLabel, href } = CTA_CONFIG
+ const imageSrc =
+ typeof networkImg === "string"
+ ? networkImg
+ : (networkImg as { default?: string }).default ??
+ useBaseUrl("/img/network-cta/network.png")
+
return (
-
+
-
-
-
+
+
+ {ctaLabel}
+
+
)
}
diff --git a/src/components/QuickStarts/CategoryFilter.tsx b/src/components/QuickStarts/CategoryFilter.tsx
new file mode 100644
index 0000000000..7f58ef52a1
--- /dev/null
+++ b/src/components/QuickStarts/CategoryFilter.tsx
@@ -0,0 +1,44 @@
+import React from "react"
+import clsx from "clsx"
+import type { QuickstartCategory } from "./types"
+
+interface CategoryFilterProps {
+ categories: QuickstartCategory[]
+ activeCategory: QuickstartCategory
+ onCategoryChange: (categoryId: string) => void
+}
+
+export const CategoryFilter: React.FC+ {title} +
++ {description} +
+
+
+ Categories
+
+ {categories.map((cat) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/QuickStarts/DeploymentModeSelector.tsx b/src/components/QuickStarts/DeploymentModeSelector.tsx
new file mode 100644
index 0000000000..064f84601d
--- /dev/null
+++ b/src/components/QuickStarts/DeploymentModeSelector.tsx
@@ -0,0 +1,59 @@
+import React, { useRef, useState } from "react"
+import clsx from "clsx"
+import { DEPLOYMENT_OPTIONS } from "./constants"
+import { useClickOutside } from "./hooks/useClickOutside"
+import type { DeploymentMode } from "./types"
+
+interface DeploymentModeSelectorProps {
+ value: DeploymentMode
+ onChange: (mode: DeploymentMode) => void
+}
+
+export const DeploymentModeSelector: React.FC
+
+
+ {menuOpen && (
+
+ )
+}
diff --git a/src/components/QuickStarts/LanguageFilter.tsx b/src/components/QuickStarts/LanguageFilter.tsx
new file mode 100644
index 0000000000..4287c5a9a8
--- /dev/null
+++ b/src/components/QuickStarts/LanguageFilter.tsx
@@ -0,0 +1,118 @@
+import React, { useRef, useState, useImperativeHandle, forwardRef } from "react"
+import clsx from "clsx"
+import { LANGUAGE_META } from "./constants"
+import { useClickOutside } from "./hooks/useClickOutside"
+import { useLanguageGrouping } from "./hooks/useLanguageGrouping"
+
+interface LanguageFilterProps {
+ availableLanguages: string[]
+ activeLanguage: string
+ onLanguageChange: (language: string) => void
+}
+
+export interface LanguageFilterRef {
+ close: () => void
+}
+
+export const LanguageFilter = forwardRef<
+ LanguageFilterRef,
+ LanguageFilterProps
+>(({ availableLanguages, activeLanguage, onLanguageChange }, ref) => {
+ const [menuOpen, setMenuOpen] = useState
+ {DEPLOYMENT_OPTIONS.map((opt) => (
+
+ ))}
+
+ )}
+
+
+
+ {menuOpen && (
+
+ )
+})
+
+LanguageFilter.displayName = "LanguageFilter"
diff --git a/src/components/QuickStarts/QuickstartGrid.tsx b/src/components/QuickStarts/QuickstartGrid.tsx
new file mode 100644
index 0000000000..9c40fec56c
--- /dev/null
+++ b/src/components/QuickStarts/QuickstartGrid.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import { OverviewCard } from "@site/src/components/welcomePage/OverviewCard"
+import type { QuickstartItem, DeploymentMode } from "./types"
+
+interface QuickstartGridProps {
+ items: QuickstartItem[]
+ deploymentMode: DeploymentMode
+}
+
+/** Prefix doc path with deployment so links go to network/oel/oss variant. */
+function toDeploymentPath(path: string, deployment: DeploymentMode): string {
+ const normalized = path.startsWith("/") ? path : `/${path}`
+ // Some routes intentionally do not have per-deployment variants.
+ if (
+ normalized.startsWith("/guides/") ||
+ normalized.startsWith("/elements") ||
+ normalized.startsWith("/getting-started/")
+ ) {
+ return normalized
+ }
+ return `/${deployment}${normalized}`
+}
+
+export const QuickstartGrid: React.FC
+ {["Web", "Mobile", "Backend", "Other"].map((group) => {
+ const langs = groupedLanguages[group]
+ if (!langs || langs.length === 0) {
+ return null
+ }
+
+ return (
+
+ )}
+
+
+ )
+ })}
+
+ {group}
+
+ {langs.map((meta) => (
+
+ ))}
+
+
+
+
+ {filteredItems.map((item) => (
+
+ )
+}
diff --git a/src/components/QuickStarts/QuickstartsOverviewHeading.tsx b/src/components/QuickStarts/QuickstartsOverviewHeading.tsx
new file mode 100644
index 0000000000..f03af60430
--- /dev/null
+++ b/src/components/QuickStarts/QuickstartsOverviewHeading.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import Heading from "@theme/Heading"
+import { useQuickstartsDeployment } from "@site/src/contexts/QuickstartsDeploymentContext"
+import type { QuickstartsDeploymentId } from "@site/src/contexts/QuickstartsDeploymentContext"
+
+const DEPLOYMENT_LABEL: Record
+
+ ))}
+
+
+
+ Quickstart guides
+
+ {
+ setActiveCategoryId(categoryId)
+ updateUrlParams({ categoryId })
+ languageFilterRef.current?.close()
+ }}
+ />
+
+
+ + No code examples are available for this product yet. +
+ )} +Authentication overview
++ This section explains how authentication works in{" "} + {productLabel}. +
+ + {product === "network" && ( ++ Because you're using Ory Network, authentication flows are fully + managed and hosted for you. +
+ )} + + {product === "oel" && ( ++ In Ory Enterprise License, you run the control plane yourself but get + enterprise support and features. +
+ )} + + {product === "oss" && ( ++ With Ory Open Source, you assemble and operate the components on your + own infrastructure. +
+ )} + + ) +} diff --git a/src/components/Shared/hydra/01_tracing.mdx b/src/components/Shared/hydra/01_tracing.mdx new file mode 100644 index 0000000000..9c1985b5b1 --- /dev/null +++ b/src/components/Shared/hydra/01_tracing.mdx @@ -0,0 +1,127 @@ +Configuring Distributed Tracing (DT) will enable you to obtain a visualization +of the call paths that take place in order to process a request made to Ory. +It's yet another tool that you can use to aid you in profiling, debugging and +ultimately understanding your deployment of Ory better. + +## Tracing options + +You have the option to use a tracing backend or follow existing traces. Ory +supports the following tracing backends: + +- [OpenTelemetry](https://github.com/open-telemetry) +- [Jaeger](https://github.com/jaegertracing/jaeger) +- [Elastic APM](https://github.com/elastic/apm) +- [Datadog](https://github.com/DataDog) +- [Zipkin](https://github.com/openzipkin/zipkin) +- [Instana](https://www.instana.com/) + +To follow existing traces: If you have deployed Ory behind a proxy that has +initiated a trace, Ory will attempt to join that trace by examining the request +headers for tracing context. + +### What an Ory trace includes + +In DT speak, a trace is comprised of one or more spans which are logical units +of work. Each Ory span is encapsulated with the following state: + +- A name +- A start time +- A finish time +- A set of zero or more tags + +Ory creates the following spans: + +- Top level span (_named after the request path_) for the requested endpoint. + Span tags: - http method - http status code - error IFF status code >= 400 +- Child span will be created if bcrypt (_e.g. when the token endpoint is + called_) is called. Span tags: - bcrypt work factor +- All SQL database interactions. Spans/tags will vary depending on the database + driver used. + +This is still evolving and subject to change as tracing support continues to +expand in Ory. If you see something that's missing/wrong, please +[create an issue](https://github.com/ory/docs/issues). + +### Local setup + +The +[provided docker-compose file](https://github.com/ory/hydra/blob/master/quickstart-tracing.yml) +in the Hydra repository (other ory services have the same docker-compose file) +has tracing configuration which you can use to play around with - just uncomment +the desired tracing provider. We will use Jaeger as an example. + +Simply run + +```sh +docker-compose -f quickstart.yml \ + -f quickstart-tracing.yml \ + up --build +``` + +Grab a coffee or stretch while you wait for everything to come up. You will then +be able to navigate to the Jaeger UI which you have exposed on port `16686` at +http://localhost:16686/search. You can now start making requests and inspect +traces! + +As an example, here is a trace created by making a bad request to the +`POST /clients` endpoint: + + + +At a glance, you are able to see that: + +- The request failed +- The request took ~80ms +- It resulted in a 409 +- The hash comparison to validate the client's credentials took a whopping 70ms. + Bcrypt is expensive! +- The various database operations performed + +:::note + +To see spans around database interactions, you must be using a SQL backend, such +as MySQL or Postgres. + +::: + +There is a more complex example to show you the interactions between Kratos, +Oathkeeper and Kratos to check if the user is allowed the access the requested +resource : + + + +As previously said, you can see the interactions between the different services +and SQL database interactions. + +### Tracing configurations + +You can configure tracing inside the configuration file (follow the same schema +for all services) or via environment variables. + +There is an example of a configuration file with tracing enabled: + +```yaml +tracing: + provider: jaeger # use any of the supported tracing providers + service_name: ory:kratos # if not set, the service name will be the service's name + providers: + jaeger: # per provider configuration + local_agent_address: jaeger:6831 + sampling: + server_url: http://jaeger:5778/sampling +``` + +:::note + +Please refer to the configuration reference for the full list of options. + +::: + +The CLI will also provide you with the list of tracing configurations and their +supported values. Simply run: + +``` +docker exec -it hydra_hydra_1 hydra serve --help +``` + +And read the section on `DEBUG CONTROLS`. diff --git a/src/components/Shared/hydra/_static/complex_trace.png b/src/components/Shared/hydra/_static/complex_trace.png new file mode 100644 index 0000000000..635d716810 Binary files /dev/null and b/src/components/Shared/hydra/_static/complex_trace.png differ diff --git a/src/components/Shared/hydra/_static/oauth2-flow.gif b/src/components/Shared/hydra/_static/oauth2-flow.gif new file mode 100644 index 0000000000..7054ddea93 Binary files /dev/null and b/src/components/Shared/hydra/_static/oauth2-flow.gif differ diff --git a/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.mp4 b/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.mp4 new file mode 100644 index 0000000000..8c558b293d Binary files /dev/null and b/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.mp4 differ diff --git a/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.webm b/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.webm new file mode 100644 index 0000000000..e762e0ae9e Binary files /dev/null and b/src/components/Shared/hydra/_static/ory-network-oauth2/oauth2-ory.webm differ diff --git a/src/components/Shared/hydra/_static/sample_trace.png b/src/components/Shared/hydra/_static/sample_trace.png new file mode 100644 index 0000000000..51987091d0 Binary files /dev/null and b/src/components/Shared/hydra/_static/sample_trace.png differ diff --git a/src/components/Shared/hydra/index.mdx b/src/components/Shared/hydra/index.mdx new file mode 100644 index 0000000000..2228ab47e4 --- /dev/null +++ b/src/components/Shared/hydra/index.mdx @@ -0,0 +1,111 @@ +OAuth2 is the industry-standard protocol that enables secure machine-to-machine +communication and grants limited access to data and services on behalf of users. +OpenID Connect, built on top of OAuth2, is required to become a social sign-in +provider. + +Ory OAuth2 and OpenID Connect, built on top of the widely deployed open-source +[Ory Hydra Federation Server](https://github.com/ory/hydra) is available out of +the box in the Ory Network and is the perfect solution for securely connecting +users, applications, and services. Whether you need single sign-on (SSO), mobile +and third-party application authorization, API access management, +server-to-server communication, or federated identity, you can find a solution +based on Ory OAuth2 and OpenID Connect. + +## Features + +Ory OAuth2 and OpenID Connect comes with a range of features that make it the +ideal solution for securely connecting users, applications, and services. + +### Certified OpenID Connect implementation + +Ory OAuth2 and OpenID Connect is a +[Certified OpenID Connect Implementation](https://openid.net/developers/certified/) +that meets all requirements set by the OpenID Foundation. You can trust Ory +OAuth2 and OpenID Connect to meet the highest standards of security and +reliability. + +### Flexible user management + +Ory OAuth2 and OpenID Connect is connected to Ory Identities by default, but +unlike many other OAuth2 service providers, Ory's service is a headless API that +doesn't force you to use a specific user management system. This means that Ory +OAuth2 and OpenID Connect is the perfect fit if you want to become an OAuth2 +provider and already have an existing user management system. + +### Low latency + +Ory OAuth2 and OpenID Connect is optimized for low latency, ensuring that your +applications can authenticate users and access resources as quickly as possible. +This is especially important for high-traffic applications or those that require +real-time data access. + +### Global deployment + +Ory OAuth2 and OpenID Connect is deployed in data centers around the world, +ensuring that your applications can access the service with minimal latency from +anywhere in the world. With global deployment, you can easily serve users in +multiple regions and meet data sovereignty requirements. + +### Security-first architecture + +Ory OAuth2 and OpenID Connect has a security-first architecture that neutralizes +common attack vectors, as well as numerous less exploited security risks. The +architecture and workflows are designed to meet the highest security standards +and comply with industry best practices. + +### Cryptographic key storage + +In addition to OAuth2 functionality, Ory OAuth2 and OpenID Connect offers safe +storage for cryptographic keys that can be used, for example, to sign JSON Web +Tokens. + +## Benefits + +Ory OAuth2 and OpenID Connect provides a number of key benefits that make it the +ideal choice for securely connecting users, applications, and services. With Ory +OAuth2 and OpenID Connect, you can: + +- **Reduce development time:** With Ory OAuth2 and OpenID Connect, you can get + up and running quickly with a fully featured OAuth2 and OpenID Connect + provider that meets all industry standards and covers a wide range of use + cases. +- **Ensure regulatory compliance:** Ory OAuth2 and OpenID Connect is designed to + comply with the latest security standards and regulatory requirements, making + it easy to meet your compliance needs. +- **Improve user experience:** With support for SSO and mobile authentication, + Ory OAuth2 and OpenID Connect makes it easy for users to access your + applications securely and quickly. +- **Scale with ease:** Ory OAuth2 and OpenID Connect is built on a cloud-native + architecture that makes it easy to deploy and scale the service to meet your + needs, whether you're serving thousands or millions of users. +- **Minimize security risks:** Ory OAuth2 and OpenID Connect's security-first + architecture and cryptographic key storage help minimize security risks, + ensuring that your users and data are protected from unauthorized access and + malicious attacks. + +## Use cases + +Ory OAuth2 and OpenID Connect can be used for a wide range of use cases, +including: + +- Single sign-on (SSO): Allow users to authenticate with a single set of + credentials across multiple applications, eliminating the need for multiple + logins. +- Mobile and third-party application authorization: Enable applications to + request authorization to access resources on behalf of users. This lets users + give apps limited access to their resources without sharing their credentials. +- API access management: Use OAuth2 to verify the identity of clients that try + to access APIs and enforce appropriate access control policies based on this + identification. +- Server-to-server communication: Authorize communication between servers + without a user present. +- Federated identity: Become an identity provider, authenticate users, and + provide access to applications just like Google, Facebook, or GitHub. + +## Next steps + +See +[Ory Network OAuth2 quickstart guide](/docs/network/hydra/quickstarts/ory-network-oauth2) +to learn how to set up your own OAuth2 and OpenID Connect provider in just a few +minutes. The guide walks you through the process of setting up Ory OAuth2 and +OpenID Connect and configuring a sample application to use the service. diff --git a/src/components/Shared/hydra/ory-network-oauth2.mdx b/src/components/Shared/hydra/ory-network-oauth2.mdx new file mode 100644 index 0000000000..e37c7a28f2 --- /dev/null +++ b/src/components/Shared/hydra/ory-network-oauth2.mdx @@ -0,0 +1,150 @@ +[Ory OAuth2 & OpenID Connect](https://www.ory.com/hydra) (based on +[Ory Hydra](https://github.com/ory/hydra)) is available in the Ory Network out +of the box. This means that you can use OIDC, Authorization Code Grant, Client +Credentials Grant, and more, without additional configuration. + +Following this guide allows you to experience the most commonly used OAuth2 +flows and see how they work in Ory Network. The examples will take you through +the following steps: + +- Creating OAuth2 clients in the Ory Network with the Ory CLI +- Using the Authorization Code Grant with federation to Ory Identities for user + authentication and UI views (login page, consent page) supplied by the Ory + Account Experience +- Using the Client Credentials Grant +- Performing token introspection using the Ory CLI + +## Prerequisites + +Before you start, [install the Ory CLI](/docs/guides/cli/installation). + +## Client Credentials Grant + +The +[Client Credentials Grant](https://www.rfc-editor.org/rfc/rfc6749#section-4.4) +is commonly used in machine-to-machine communications. This allows web services, +applications, or devices to call each other without the context of human users. +Activity that uses this grant often runs in the background and doesn't require +any user interaction. + +Follow these steps to try this grant in Ory Network. Create an Ory Network +project using the Ory CLI and export the project ID: + +```shell +ory create project --name "Ory OAuth2 Example" +project_id="{set to the project ID from output}" +``` + +1. Create an OAuth2 client: + + ```shell + ory create oauth2-client --project "$PROJECT_ID" \ + --name "Client Credentials Demo" \ + --grant-type client_credentials + ``` + +2. Export the ID and secret of the created client: + + ```shell + client_id="{set to CLIENT ID from output}" + client_secret="{set to CLIENT SECRET from output}" + ``` + +3. Start the Client Credentials Grant: + + ```shell + ory perform client-credentials \ + --client-id="$client_id" \ + --client-secret="$client_secret" \ + --project "$PROJECT_ID" + ``` + +4. Perform token introspection to get the `access_token` details: + + ```shell + # Export 'access_token' + access_token="{set to ACCESS TOKEN from output}" + + # Perform token introspection + ory introspect token $access_token --project "$PROJECT_ID" + ``` + +## Authorization Code Grant + +The +[Authorization Code Grant](https://www.rfc-editor.org/rfc/rfc6749#section-1.3) +is most commonly used in scenarios where applications need to perform actions on +behalf of users. For example, when an online marketplace allows users to add +photos from their Google Photos album to listings. + +To achieve that, the online marketplace must access the user's Google Photos +library on their behalf. If the user accepts the access scope requested by the +app (online marketplace), the app's client gets an `id_token` and `access_token` +pair which is then used to interact with Google Photos. + +This is what using the grant with UI views supplied by the Ory Account +Experience looks like: + +```mdx-code-block +import mp4 from './_static/ory-network-oauth2/oauth2-ory.mp4' +import webm from './_static/ory-network-oauth2/oauth2-ory.webm' +import VideoEmbed from '@site/src/components/VideoEmbed' + ++ +
+``` + +To get started, clone the Ory Hydra locally: + +```mdx-code-block +import CodeBlock from '@theme/CodeBlock' + ++ We run integration tests for both the{" "} + Node.js{" "} + and{" "} + + React Native + {" "} + reference implementation using{" "} + Cypress. You can find the set up + and source code for these tests in{" "} + + ./test/e2e/run.sh + + . In principle, we start Ory Kratos with some configuration and an + in-memory database in the background +
+ ++ as well as our application in the background as well. Then, we start the + Cypress test runner which executes the different e2e tests. This works + really well to test compliance and integration of Ory Kratos. +
+ ++ If you run Ory Kratos and your app on separate domains or ports you + might want to add +
+ +
+ to your cypress.json config file.
+
Testing React Native on web with Cypress
+ +
+ If you want to test React Native (rendered as a web application) in
+ Cypress, you need to disable security features preventing browser from
+ executing self-service API flows. To do this, set the environment
+ variable DEV_DISABLE_API_FLOW_ENFORCEMENT=1:
+