github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-08 23:18:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add searchable component to docs

Browse Source
This commit is contained in:
Carlos Monastyrski
2025-09-01 22:56:27 -03:00
parent 01fba20872
commit c8bf9049de
17 changed files with 972 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/.eslintrc.js Normal file
View File

@@ -0,0 +1,40 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
],
parser: '@babel/eslint-parser',
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
requireConfigFile: false,
babelOptions: {
presets: ['@babel/preset-react'],
},
},
plugins: ['react'],
rules: {
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
},
settings: {
react: {
version: 'detect',
},
},
ignorePatterns: [
'node_modules/',
'dist/',
'build/',
'*.config.js',
],
};

7
docs/docs.json
View File

@@ -98,6 +98,7 @@
{
"group": "App Connections",
"pages": [
"integrations/app-connections",
"integrations/app-connections/overview",
{
"group": "Connections",
@@ -184,6 +185,7 @@
{
"group": "User Authentication",
"pages": [
"integrations/user-authentication",
"documentation/platform/auth-methods/email-password",
{
"group": "SSO",
@@ -243,6 +245,7 @@
{
"group": "Machine Identities",
"pages": [
"integrations/machine-authentication",
"documentation/platform/identities/alicloud-auth",
"documentation/platform/identities/aws-auth",
"documentation/platform/identities/azure-auth",
@@ -421,6 +424,7 @@
{
"group": "Secret Rotation",
"pages": [
"integrations/secret-rotations",
"documentation/platform/secret-rotation/overview",
"documentation/platform/secret-rotation/auth0-client-secret",
"documentation/platform/secret-rotation/aws-iam-user-secret",
@@ -436,6 +440,7 @@
{
"group": "Dynamic Secrets",
"pages": [
"integrations/dynamic-secrets",
"documentation/platform/dynamic-secrets/overview",
"documentation/platform/dynamic-secrets/aws-elasticache",
"documentation/platform/dynamic-secrets/aws-iam",
@@ -506,6 +511,7 @@
{
"group": "Secret Syncs",
"pages": [
"integrations/secret-syncs",
"integrations/secret-syncs/overview",
{
"group": "Syncs",
@@ -611,6 +617,7 @@
{
"group": "Framework Integrations",
"pages": [
"integrations/framework-integrations",
"integrations/frameworks/spring-boot-maven",
"integrations/frameworks/react",
"integrations/frameworks/vue",

8
docs/integrations/app-connections.mdx Normal file
View File

@@ -0,0 +1,8 @@
---
sidebarTitle: "Explore Options"
description: "Browse and search through all available app connections for Infisical."
---
import { AppConnectionsBrowser } from "/snippets/AppConnectionsBrowser.jsx";
<AppConnectionsBrowser />

2
docs/integrations/app-connections/overview.mdx
View File

@@ -79,4 +79,4 @@ in the UI or by passing the associated `connectionId` when generating resources
## Platform Managed Credentials
Some App Connections support the ability to have their credentials managed by Infisical. By enabling this option,
Infisical will modify the credentials to prevent external use of the configured access entity.
Infisical will modify the credentials to prevent external use of the configured access entity.

9
docs/integrations/dynamic-secrets.mdx Normal file
View File

@@ -0,0 +1,9 @@
---
title: "Dynamic Secrets"
sidebarTitle: "Explore Options"
description: "Browse and search through all available dynamic secrets for Infisical."
---
import { DynamicSecretsBrowser } from "/snippets/DynamicSecretsBrowser.jsx";
<DynamicSecretsBrowser />

9
docs/integrations/framework-integrations.mdx Normal file
View File

@@ -0,0 +1,9 @@
---
title: "Framework Integrations"
sidebarTitle: "Explore Options"
description: "Browse and search through all available framework integrations for Infisical."
---
import { FrameworkIntegrationsBrowser } from "/snippets/FrameworkIntegrationsBrowser.jsx";
<FrameworkIntegrationsBrowser />

9
docs/integrations/machine-authentication.mdx Normal file
View File

@@ -0,0 +1,9 @@
---
title: "Machine Authentication"
sidebarTitle: "Explore Options"
description: "Browse and search through all available machine authentication methods for Infisical."
---
import { MachineAuthenticationBrowser } from "/snippets/MachineAuthenticationBrowser.jsx";
<MachineAuthenticationBrowser />

8
docs/integrations/secret-rotations.mdx Normal file
View File

@@ -0,0 +1,8 @@
---
sidebarTitle: "Explore Options"
description: "Browse and search through all available secret rotations for Infisical."
---
import { RotationsBrowser } from "/snippets/RotationsBrowser.jsx";
<RotationsBrowser />

8
docs/integrations/secret-syncs.mdx Normal file
View File

@@ -0,0 +1,8 @@
---
sidebarTitle: "Explore Options"
description: "Browse and search through all available secret syncs for Infisical."
---
import { SecretSyncsBrowser } from "/snippets/SecretSyncsBrowser.jsx";
<SecretSyncsBrowser />

9
docs/integrations/user-authentication.mdx Normal file
View File

@@ -0,0 +1,9 @@
---
title: "User Authentication"
sidebarTitle: "Explore Options"
description: "Browse and search through all available user authentication methods for Infisical."
---
import { UserAuthenticationBrowser } from "/snippets/UserAuthenticationBrowser.jsx";
<UserAuthenticationBrowser />

144
docs/snippets/AppConnectionsBrowser.jsx Normal file
View File

@@ -0,0 +1,144 @@
import React, { useState, useMemo } from 'react';
export const AppConnectionsBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'Cloud Providers', 'Databases', 'CI/CD', 'Monitoring', 'Identity & Auth', 'Other'];
const connections = [
{"name": "1Password Connection", "slug": "1password", "path": "/integrations/app-connections/1password", "description": "Learn how to configure a 1Password Connection for Infisical.", "category": "Identity & Auth"},
{"name": "Auth0 Connection", "slug": "auth0", "path": "/integrations/app-connections/auth0", "description": "Learn how to configure an Auth0 Connection for Infisical.", "category": "Identity & Auth"},
{"name": "AWS Connection", "slug": "aws", "path": "/integrations/app-connections/aws", "description": "Learn how to configure an AWS Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Azure ADCS Connection", "slug": "azure-adcs", "path": "/integrations/app-connections/azure-adcs", "description": "Learn how to configure an Azure ADCS Connection for Infisical certificate management.", "category": "Cloud Providers"},
{"name": "Azure App Configuration Connection", "slug": "azure-app-configuration", "path": "/integrations/app-connections/azure-app-configuration", "description": "Learn how to configure a Azure App Configuration Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Azure Client Secrets Connection", "slug": "azure-client-secrets", "path": "/integrations/app-connections/azure-client-secrets", "description": "Learn how to configure an Azure Client Secrets Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Azure DevOps Connection", "slug": "azure-devops", "path": "/integrations/app-connections/azure-devops", "description": "Learn how to configure an Azure DevOps Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Azure Key Vault Connection", "slug": "azure-key-vault", "path": "/integrations/app-connections/azure-key-vault", "description": "Learn how to configure a Azure Key Vault Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Bitbucket Connection", "slug": "bitbucket", "path": "/integrations/app-connections/bitbucket", "description": "Learn how to configure a Bitbucket Connection for Infisical.", "category": "CI/CD"},
{"name": "Camunda Connection", "slug": "camunda", "path": "/integrations/app-connections/camunda", "description": "Learn how to configure a Camunda Connection for Infisical.", "category": "Other"},
{"name": "Checkly Connection", "slug": "checkly", "path": "/integrations/app-connections/checkly", "description": "Learn how to configure a Checkly Connection for Infisical.", "category": "Monitoring"},
{"name": "Cloudflare Connection", "slug": "cloudflare", "path": "/integrations/app-connections/cloudflare", "description": "Learn how to configure a Cloudflare Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Databricks Connection", "slug": "databricks", "path": "/integrations/app-connections/databricks", "description": "Learn how to configure a Databricks Connection for Infisical.", "category": "Monitoring"},
{"name": "DigitalOcean Connection", "slug": "digital-ocean", "path": "/integrations/app-connections/digital-ocean", "description": "Learn how to configure a DigitalOcean Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Fly.io Connection", "slug": "flyio", "path": "/integrations/app-connections/flyio", "description": "Learn how to configure a Fly.io Connection for Infisical.", "category": "Cloud Providers"},
{"name": "GCP Connection", "slug": "gcp", "path": "/integrations/app-connections/gcp", "description": "Learn how to configure a GCP Connection for Infisical.", "category": "Cloud Providers"},
{"name": "GitHub Radar Connection", "slug": "github-radar", "path": "/integrations/app-connections/github-radar", "description": "Learn how to configure a GitHub Radar Connection for Infisical.", "category": "CI/CD"},
{"name": "GitHub Connection", "slug": "github", "path": "/integrations/app-connections/github", "description": "Learn how to configure a GitHub Connection for Infisical.", "category": "CI/CD"},
{"name": "GitLab Connection", "slug": "gitlab", "path": "/integrations/app-connections/gitlab", "description": "Learn how to configure a GitLab Connection for Infisical using OAuth or Access Token methods.", "category": "CI/CD"},
{"name": "Hashicorp Vault Connection", "slug": "hashicorp-vault", "path": "/integrations/app-connections/hashicorp-vault", "description": "Learn how to configure a Hashicorp Vault Connection for Infisical.", "category": "Other"},
{"name": "Heroku Connection", "slug": "heroku", "path": "/integrations/app-connections/heroku", "description": "Learn how to configure a Heroku Connection for Infisical using OAuth or Auth Token methods.", "category": "Cloud Providers"},
{"name": "Humanitec Connection", "slug": "humanitec", "path": "/integrations/app-connections/humanitec", "description": "Learn how to configure a Humanitec Connection for Infisical.", "category": "Other"},
{"name": "LDAP Connection", "slug": "ldap", "path": "/integrations/app-connections/ldap", "description": "Learn how to configure an LDAP Connection for Infisical.", "category": "Identity & Auth"},
{"name": "Microsoft SQL Server Connection", "slug": "mssql", "path": "/integrations/app-connections/mssql", "description": "Learn how to configure a Microsoft SQL Server Connection for Infisical.", "category": "Databases"},
{"name": "MySQL Connection", "slug": "mysql", "path": "/integrations/app-connections/mysql", "description": "Learn how to configure a MySQL Connection for Infisical.", "category": "Databases"},
{"name": "Netlify Connection", "slug": "netlify", "path": "/integrations/app-connections/netlify", "description": "Learn how to configure a Netlify Connection for Infisical.", "category": "Cloud Providers"},
{"name": "OCI Connection", "slug": "oci", "path": "/integrations/app-connections/oci", "description": "Learn how to configure an Oracle Cloud Infrastructure Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Okta Connection", "slug": "okta", "path": "/integrations/app-connections/okta", "description": "Learn how to configure an Okta Connection for Infisical.", "category": "Identity & Auth"},
{"name": "OracleDB Connection", "slug": "oracledb", "path": "/integrations/app-connections/oracledb", "description": "Learn how to configure a Oracle Database Connection for Infisical.", "category": "Databases"},
{"name": "PostgreSQL Connection", "slug": "postgres", "path": "/integrations/app-connections/postgres", "description": "Learn how to configure a PostgreSQL Connection for Infisical.", "category": "Databases"},
{"name": "Railway Connection", "slug": "railway", "path": "/integrations/app-connections/railway", "description": "Learn how to configure a Railway Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Render Connection", "slug": "render", "path": "/integrations/app-connections/render", "description": "Learn how to configure a Render Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Supabase Connection", "slug": "supabase", "path": "/integrations/app-connections/supabase", "description": "Learn how to configure a Supabase Connection for Infisical.", "category": "Cloud Providers"},
{"name": "TeamCity Connection", "slug": "teamcity", "path": "/integrations/app-connections/teamcity", "description": "Learn how to configure a TeamCity Connection for Infisical.", "category": "CI/CD"},
{"name": "Terraform Cloud Connection", "slug": "terraform-cloud", "path": "/integrations/app-connections/terraform-cloud", "description": "Learn how to configure a Terraform Cloud Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Vercel Connection", "slug": "vercel", "path": "/integrations/app-connections/vercel", "description": "Learn how to configure a Vercel Connection for Infisical.", "category": "Cloud Providers"},
{"name": "Windmill Connection", "slug": "windmill", "path": "/integrations/app-connections/windmill", "description": "Learn how to configure a Windmill Connection for Infisical.", "category": "Other"},
{"name": "Zabbix Connection", "slug": "zabbix", "path": "/integrations/app-connections/zabbix", "description": "Learn how to configure a Zabbix Connection for Infisical.", "category": "Monitoring"}
];
const filteredConnections = useMemo(() => {
let filtered = connections;
if (selectedCategory !== 'All') {
filtered = filtered.filter(connection => connection.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(connection =>
connection.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
connection.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
connection.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [connections, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search app connections..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredConnections.length} app connection{filteredConnections.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Connections List */}
{filteredConnections.length > 0 ? (
<div className="space-y-4">
{filteredConnections.map((connection, index) => (
<a
key={`${connection.slug}-${index}`}
href={connection.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{connection.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{connection.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{connection.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

129
docs/snippets/DynamicSecretsBrowser.jsx Normal file
View File

@@ -0,0 +1,129 @@
import React, { useState, useMemo } from 'react';
export const DynamicSecretsBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'Databases', 'Cloud Providers', 'Message Queues', 'Caches'];
const dynamicSecrets = [
{"name": "AWS IAM", "slug": "aws-iam", "path": "/documentation/platform/dynamic-secrets/aws-iam", "description": "Learn how to generate dynamic AWS IAM credentials on-demand.", "category": "Cloud Providers"},
{"name": "AWS ElastiCache", "slug": "aws-elasticache", "path": "/documentation/platform/dynamic-secrets/aws-elasticache", "description": "Learn how to generate dynamic AWS ElastiCache credentials on-demand.", "category": "Caches"},
{"name": "Azure Entra ID", "slug": "azure-entra-id", "path": "/documentation/platform/dynamic-secrets/azure-entra-id", "description": "Learn how to generate dynamic Azure Entra ID credentials on-demand.", "category": "Cloud Providers"},
{"name": "GCP IAM", "slug": "gcp-iam", "path": "/documentation/platform/dynamic-secrets/gcp-iam", "description": "Learn how to generate dynamic GCP IAM credentials on-demand.", "category": "Cloud Providers"},
{"name": "Cassandra", "slug": "cassandra", "path": "/documentation/platform/dynamic-secrets/cassandra", "description": "Learn how to generate dynamic Cassandra database credentials on-demand.", "category": "Databases"},
{"name": "Couchbase", "slug": "couchbase", "path": "/documentation/platform/dynamic-secrets/couchbase", "description": "Learn how to generate dynamic Couchbase database credentials on-demand.", "category": "Databases"},
{"name": "MongoDB", "slug": "mongodb", "path": "/documentation/platform/dynamic-secrets/mongo-db", "description": "Learn how to generate dynamic MongoDB database credentials on-demand.", "category": "Databases"},
{"name": "MongoDB Atlas", "slug": "mongodb-atlas", "path": "/documentation/platform/dynamic-secrets/mongo-atlas", "description": "Learn how to generate dynamic MongoDB Atlas database credentials on-demand.", "category": "Databases"},
{"name": "MySQL", "slug": "mysql", "path": "/documentation/platform/dynamic-secrets/mysql", "description": "Learn how to generate dynamic MySQL database credentials on-demand.", "category": "Databases"},
{"name": "PostgreSQL", "slug": "postgresql", "path": "/documentation/platform/dynamic-secrets/postgresql", "description": "Learn how to generate dynamic PostgreSQL database credentials on-demand.", "category": "Databases"},
{"name": "Microsoft SQL Server", "slug": "mssql", "path": "/documentation/platform/dynamic-secrets/mssql", "description": "Learn how to generate dynamic Microsoft SQL Server credentials on-demand.", "category": "Databases"},
{"name": "Oracle Database", "slug": "oracle", "path": "/documentation/platform/dynamic-secrets/oracle", "description": "Learn how to generate dynamic Oracle Database credentials on-demand.", "category": "Databases"},
{"name": "SAP ASE", "slug": "sap-ase", "path": "/documentation/platform/dynamic-secrets/sap-ase", "description": "Learn how to generate dynamic SAP ASE database credentials on-demand.", "category": "Databases"},
{"name": "SAP HANA", "slug": "sap-hana", "path": "/documentation/platform/dynamic-secrets/sap-hana", "description": "Learn how to generate dynamic SAP HANA database credentials on-demand.", "category": "Databases"},
{"name": "Snowflake", "slug": "snowflake", "path": "/documentation/platform/dynamic-secrets/snowflake", "description": "Learn how to generate dynamic Snowflake database credentials on-demand.", "category": "Databases"},
{"name": "Vertica", "slug": "vertica", "path": "/documentation/platform/dynamic-secrets/vertica", "description": "Learn how to generate dynamic Vertica database credentials on-demand.", "category": "Databases"},
{"name": "Redis", "slug": "redis", "path": "/documentation/platform/dynamic-secrets/redis", "description": "Learn how to generate dynamic Redis credentials on-demand.", "category": "Caches"},
{"name": "ElasticSearch", "slug": "elasticsearch", "path": "/documentation/platform/dynamic-secrets/elastic-search", "description": "Learn how to generate dynamic ElasticSearch credentials on-demand.", "category": "Databases"},
{"name": "RabbitMQ", "slug": "rabbitmq", "path": "/documentation/platform/dynamic-secrets/rabbit-mq", "description": "Learn how to generate dynamic RabbitMQ credentials on-demand.", "category": "Message Queues"},
{"name": "LDAP", "slug": "ldap", "path": "/documentation/platform/dynamic-secrets/ldap", "description": "Learn how to generate dynamic LDAP credentials on-demand.", "category": "Cloud Providers"},
{"name": "GitHub", "slug": "github", "path": "/documentation/platform/dynamic-secrets/github", "description": "Learn how to generate dynamic GitHub credentials on-demand.", "category": "Cloud Providers"},
{"name": "Kubernetes", "slug": "kubernetes", "path": "/documentation/platform/dynamic-secrets/kubernetes", "description": "Learn how to generate dynamic Kubernetes credentials on-demand.", "category": "Cloud Providers"},
{"name": "TOTP", "slug": "totp", "path": "/documentation/platform/dynamic-secrets/totp", "description": "Learn how to generate dynamic TOTP codes on-demand.", "category": "Cloud Providers"}
];
const filteredDynamicSecrets = useMemo(() => {
let filtered = dynamicSecrets;
if (selectedCategory !== 'All') {
filtered = filtered.filter(secret => secret.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(secret =>
secret.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
secret.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
secret.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [dynamicSecrets, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search dynamic secrets..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredDynamicSecrets.length} dynamic secret{filteredDynamicSecrets.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Dynamic Secrets List */}
{filteredDynamicSecrets.length > 0 ? (
<div className="space-y-4">
{filteredDynamicSecrets.map((secret, index) => (
<a
key={`${secret.slug}-${index}`}
href={secret.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{secret.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{secret.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{secret.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

124
docs/snippets/FrameworkIntegrationsBrowser.jsx Normal file
View File

@@ -0,0 +1,124 @@
import React, { useState, useMemo } from 'react';
export const FrameworkIntegrationsBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'Web Frameworks'];
const integrations = [
{"name": "React", "slug": "react", "path": "/integrations/frameworks/react", "description": "Learn how to integrate Infisical with React applications for secure secret management.", "category": "Web Frameworks"},
{"name": "Next.js", "slug": "nextjs", "path": "/integrations/frameworks/nextjs", "description": "Learn how to integrate Infisical with Next.js applications.", "category": "Web Frameworks"},
{"name": "Vue.js", "slug": "vuejs", "path": "/integrations/frameworks/vue", "description": "Learn how to integrate Infisical with Vue.js applications.", "category": "Web Frameworks"},
{"name": "Nuxt.js", "slug": "nuxtjs", "path": "/integrations/frameworks/nuxt", "description": "Learn how to integrate Infisical with Nuxt.js applications.", "category": "Web Frameworks"},
{"name": "SvelteKit", "slug": "sveltekit", "path": "/integrations/frameworks/sveltekit", "description": "Learn how to integrate Infisical with SvelteKit applications.", "category": "Web Frameworks"},
{"name": "Express.js", "slug": "express", "path": "/integrations/frameworks/express", "description": "Learn how to integrate Infisical with Express.js backend applications.", "category": "Web Frameworks"},
{"name": "NestJS", "slug": "nestjs", "path": "/integrations/frameworks/nestjs", "description": "Learn how to integrate Infisical with NestJS applications.", "category": "Web Frameworks"},
{"name": "Django", "slug": "django", "path": "/integrations/frameworks/django", "description": "Learn how to integrate Infisical with Django applications.", "category": "Web Frameworks"},
{"name": "Flask", "slug": "flask", "path": "/integrations/frameworks/flask", "description": "Learn how to integrate Infisical with Flask applications.", "category": "Web Frameworks"},
{"name": "Ruby on Rails", "slug": "rails", "path": "/integrations/frameworks/rails", "description": "Learn how to integrate Infisical with Ruby on Rails applications.", "category": "Web Frameworks"},
{"name": "Spring Boot", "slug": "spring-boot-maven", "path": "/integrations/frameworks/spring-boot-maven", "description": "Learn how to integrate Infisical with Spring Boot applications.", "category": "Web Frameworks"},
{"name": "Laravel", "slug": "laravel", "path": "/integrations/frameworks/laravel", "description": "Learn how to integrate Infisical with Laravel applications.", "category": "Web Frameworks"},
{"name": ".NET", "slug": "dotnet", "path": "/integrations/frameworks/dotnet", "description": "Learn how to integrate Infisical with .NET applications.", "category": "Web Frameworks"},
{"name": "Fiber", "slug": "fiber", "path": "/integrations/frameworks/fiber", "description": "Learn how to integrate Infisical with Fiber (Go) framework.", "category": "Web Frameworks"},
{"name": "Gatsby", "slug": "gatsby", "path": "/integrations/frameworks/gatsby", "description": "Learn how to integrate Infisical with Gatsby applications.", "category": "Web Frameworks"},
{"name": "Remix", "slug": "remix", "path": "/integrations/frameworks/remix", "description": "Learn how to integrate Infisical with Remix applications.", "category": "Web Frameworks"},
{"name": "Vite", "slug": "vite", "path": "/integrations/frameworks/vite", "description": "Learn how to integrate Infisical with Vite applications.", "category": "Web Frameworks"},
{"name": "AB Initio", "slug": "ab-initio", "path": "/integrations/frameworks/ab-initio", "description": "Learn how to integrate Infisical with AB Initio applications.", "category": "Web Frameworks"}
];
const filteredIntegrations = useMemo(() => {
let filtered = integrations;
if (selectedCategory !== 'All') {
filtered = filtered.filter(integration => integration.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(integration =>
integration.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
integration.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
integration.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [integrations, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search framework integrations..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredIntegrations.length} framework integration{filteredIntegrations.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Integrations List */}
{filteredIntegrations.length > 0 ? (
<div className="space-y-4">
{filteredIntegrations.map((integration, index) => (
<a
key={`${integration.slug}-${index}`}
href={integration.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{integration.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{integration.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{integration.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

93
docs/snippets/MachineAuthenticationBrowser.jsx Normal file
View File

@@ -0,0 +1,93 @@
import React, { useState, useMemo } from 'react';
export const MachineAuthenticationBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const authMethods = [
{"name": "Universal Auth", "slug": "universal-auth", "path": "/documentation/platform/identities/universal-auth", "description": "Learn how to authenticate machines using Universal Auth tokens with client ID and secret.", "category": "Token-based"},
{"name": "Token Auth", "slug": "token-auth", "path": "/documentation/platform/identities/token-auth", "description": "Learn how to authenticate machines using long-lived access tokens.", "category": "Token-based"},
{"name": "JWT Auth", "slug": "jwt-auth", "path": "/documentation/platform/identities/jwt-auth", "description": "Learn how to authenticate machines using JSON Web Tokens (JWT).", "category": "Token-based"},
{"name": "AWS IAM Auth", "slug": "aws-iam-auth", "path": "/documentation/platform/identities/aws-auth", "description": "Learn how to authenticate AWS services and resources using IAM roles.", "category": "Cloud Provider"},
{"name": "Azure Auth", "slug": "azure-auth", "path": "/documentation/platform/identities/azure-auth", "description": "Learn how to authenticate Azure services using managed identities.", "category": "Cloud Provider"},
{"name": "GCP Auth", "slug": "gcp-auth", "path": "/documentation/platform/identities/gcp-auth", "description": "Learn how to authenticate GCP services using service accounts.", "category": "Cloud Provider"},
{"name": "Alicloud Auth", "slug": "alicloud-auth", "path": "/documentation/platform/identities/alicloud-auth", "description": "Learn how to authenticate Alicloud services using RAM roles.", "category": "Cloud Provider"},
{"name": "OCI Auth", "slug": "oci-auth", "path": "/documentation/platform/identities/oci-auth", "description": "Learn how to authenticate Oracle Cloud Infrastructure services.", "category": "Cloud Provider"},
{"name": "Kubernetes Auth", "slug": "kubernetes-auth", "path": "/documentation/platform/identities/kubernetes-auth", "description": "Learn how to authenticate Kubernetes workloads using service account tokens.", "category": "Kubernetes"},
{"name": "OIDC Auth (General)", "slug": "oidc-auth-general", "path": "/documentation/platform/identities/oidc-auth/general", "description": "Learn how to authenticate machines using OpenID Connect (OIDC) providers.", "category": "Token-based"},
{"name": "OIDC Auth (GitHub)", "slug": "oidc-auth-github", "path": "/documentation/platform/identities/oidc-auth/github", "description": "Learn how to authenticate GitHub Actions using OIDC.", "category": "Token-based"},
{"name": "OIDC Auth (GitLab)", "slug": "oidc-auth-gitlab", "path": "/documentation/platform/identities/oidc-auth/gitlab", "description": "Learn how to authenticate GitLab CI/CD using OIDC.", "category": "Token-based"},
{"name": "OIDC Auth (Azure)", "slug": "oidc-auth-azure", "path": "/documentation/platform/identities/oidc-auth/azure", "description": "Learn how to authenticate Azure services using OIDC.", "category": "Token-based"},
{"name": "OIDC Auth (CircleCI)", "slug": "oidc-auth-circleci", "path": "/documentation/platform/identities/oidc-auth/circleci", "description": "Learn how to authenticate CircleCI workflows using OIDC.", "category": "Token-based"},
{"name": "OIDC Auth (Terraform Cloud)", "slug": "oidc-auth-terraform", "path": "/documentation/platform/identities/oidc-auth/terraform-cloud", "description": "Learn how to authenticate Terraform Cloud using OIDC.", "category": "Token-based"},
{"name": "OIDC Auth (SPIRE)", "slug": "oidc-auth-spire", "path": "/documentation/platform/identities/oidc-auth/spire", "description": "Learn how to authenticate workloads using SPIFFE/SPIRE OIDC.", "category": "Token-based"},
{"name": "TLS Certificate Auth", "slug": "tls-cert-auth", "path": "/documentation/platform/identities/tls-cert-auth", "description": "Learn how to authenticate machines using TLS client certificates.", "category": "Certificate-based"},
{"name": "LDAP Auth (General)", "slug": "ldap-auth-general", "path": "/documentation/platform/identities/ldap-auth/general", "description": "Learn how to authenticate machines using LDAP credentials.", "category": "Certificate-based"},
{"name": "LDAP Auth (JumpCloud)", "slug": "ldap-auth-jumpcloud", "path": "/documentation/platform/identities/ldap-auth/jumpcloud", "description": "Learn how to authenticate machines using JumpCloud LDAP.", "category": "Certificate-based"}
];
const filteredAuthMethods = useMemo(() => {
if (!searchTerm) return authMethods;
return authMethods.filter(method =>
method.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
method.description.toLowerCase().includes(searchTerm.toLowerCase())
);
}, [authMethods, searchTerm]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search machine authentication methods..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredAuthMethods.length} machine authentication method{filteredAuthMethods.length !== 1 ? 's' : ''} found
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Auth Methods List */}
{filteredAuthMethods.length > 0 ? (
<div className="space-y-4">
{filteredAuthMethods.map((method, index) => (
<a
key={`${method.slug}-${index}`}
href={method.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{method.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
Authentication
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{method.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

116
docs/snippets/RotationsBrowser.jsx Normal file
View File

@@ -0,0 +1,116 @@
import React, { useState, useMemo } from 'react';
export const RotationsBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'Databases', 'Identity & Auth', 'Cloud Providers'];
const rotations = [
{"name": "AWS IAM User Secret", "slug": "aws-iam-user", "path": "/documentation/platform/secret-rotation/aws-iam-user-secret", "description": "Learn how to automatically rotate AWS IAM user access keys.", "category": "Cloud Providers"},
{"name": "Azure Client Secret", "slug": "azure-client-secret", "path": "/documentation/platform/secret-rotation/azure-client-secret", "description": "Learn how to automatically rotate Azure client secrets.", "category": "Cloud Providers"},
{"name": "Auth0 Client Secret", "slug": "auth0-client-secret", "path": "/documentation/platform/secret-rotation/auth0-client-secret", "description": "Learn how to automatically rotate Auth0 client secrets.", "category": "Identity & Auth"},
{"name": "Okta Client Secret", "slug": "okta-client-secret", "path": "/documentation/platform/secret-rotation/okta-client-secret", "description": "Learn how to automatically rotate Okta client secrets.", "category": "Identity & Auth"},
{"name": "LDAP Password", "slug": "ldap-password", "path": "/documentation/platform/secret-rotation/ldap-password", "description": "Learn how to automatically rotate LDAP user passwords.", "category": "Identity & Auth"},
{"name": "MySQL Credentials", "slug": "mysql-credentials", "path": "/documentation/platform/secret-rotation/mysql-credentials", "description": "Learn how to automatically rotate MySQL database credentials.", "category": "Databases"},
{"name": "PostgreSQL Credentials", "slug": "postgres-credentials", "path": "/documentation/platform/secret-rotation/postgres-credentials", "description": "Learn how to automatically rotate PostgreSQL database credentials.", "category": "Databases"},
{"name": "Microsoft SQL Server Credentials", "slug": "mssql-credentials", "path": "/documentation/platform/secret-rotation/mssql-credentials", "description": "Learn how to automatically rotate Microsoft SQL Server credentials.", "category": "Databases"},
{"name": "Oracle Database Credentials", "slug": "oracledb-credentials", "path": "/documentation/platform/secret-rotation/oracledb-credentials", "description": "Learn how to automatically rotate Oracle Database credentials.", "category": "Databases"},
{"name": "SendGrid", "slug": "sendgrid", "path": "/documentation/platform/secret-rotation/sendgrid", "description": "Learn how to automatically rotate SendGrid API keys.", "category": "Cloud Providers"}
];
const filteredRotations = useMemo(() => {
let filtered = rotations;
if (selectedCategory !== 'All') {
filtered = filtered.filter(rotation => rotation.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(rotation =>
rotation.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
rotation.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
rotation.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [rotations, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search secret rotations..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredRotations.length} secret rotation{filteredRotations.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Rotations List */}
{filteredRotations.length > 0 ? (
<div className="space-y-4">
{filteredRotations.map((rotation, index) => (
<a
key={`${rotation.slug}-${index}`}
href={rotation.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{rotation.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{rotation.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{rotation.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

134
docs/snippets/SecretSyncsBrowser.jsx Normal file
View File

@@ -0,0 +1,134 @@
import React, { useState, useMemo } from 'react';
export const SecretSyncsBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'Cloud Providers', 'CI/CD', 'Databases', 'Identity & Auth', 'Other'];
const syncs = [
{"name": "AWS Parameter Store", "slug": "aws-parameter-store", "path": "/integrations/cloud/aws-parameter-store", "description": "Learn how to sync secrets from Infisical to AWS Parameter Store.", "category": "Cloud Providers"},
{"name": "AWS Secrets Manager", "slug": "aws-secrets-manager", "path": "/integrations/cloud/aws-secrets-manager", "description": "Learn how to sync secrets from Infisical to AWS Secrets Manager.", "category": "Cloud Providers"},
{"name": "Azure Key Vault", "slug": "azure-key-vault", "path": "/integrations/cloud/azure-key-vault", "description": "Learn how to sync secrets from Infisical to Azure Key Vault.", "category": "Cloud Providers"},
{"name": "Bitbucket", "slug": "bitbucket", "path": "/integrations/cicd/bitbucket", "description": "Learn how to sync secrets from Infisical to Bitbucket.", "category": "CI/CD"},
{"name": "Checkly", "slug": "checkly", "path": "/integrations/cloud/checkly", "description": "Learn how to sync secrets from Infisical to Checkly.", "category": "Other"},
{"name": "CircleCI", "slug": "circleci", "path": "/integrations/cicd/circleci", "description": "Learn how to sync secrets from Infisical to CircleCI.", "category": "CI/CD"},
{"name": "Cloudflare Pages", "slug": "cloudflare-pages", "path": "/integrations/cloud/cloudflare-pages", "description": "Learn how to sync secrets from Infisical to Cloudflare Pages.", "category": "Cloud Providers"},
{"name": "Cloudflare Workers", "slug": "cloudflare-workers", "path": "/integrations/cloud/cloudflare-workers", "description": "Learn how to sync secrets from Infisical to Cloudflare Workers.", "category": "Cloud Providers"},
{"name": "Databricks", "slug": "databricks", "path": "/integrations/cloud/databricks", "description": "Learn how to sync secrets from Infisical to Databricks.", "category": "Other"},
{"name": "DigitalOcean App Platform", "slug": "digital-ocean-app-platform", "path": "/integrations/cloud/digital-ocean-app-platform", "description": "Learn how to sync secrets from Infisical to DigitalOcean App Platform.", "category": "Cloud Providers"},
{"name": "Docker", "slug": "docker", "path": "/integrations/platforms/docker", "description": "Learn how to sync secrets from Infisical to Docker.", "category": "Other"},
{"name": "Docker Compose", "slug": "docker-compose", "path": "/integrations/platforms/docker-compose", "description": "Learn how to sync secrets from Infisical to Docker Compose.", "category": "Other"},
{"name": "Fly.io", "slug": "flyio", "path": "/integrations/cloud/flyio", "description": "Learn how to sync secrets from Infisical to Fly.io.", "category": "Cloud Providers"},
{"name": "GCP Secret Manager", "slug": "gcp-secret-manager", "path": "/integrations/cloud/gcp-secret-manager", "description": "Learn how to sync secrets from Infisical to GCP Secret Manager.", "category": "Cloud Providers"},
{"name": "GitHub Actions", "slug": "github-actions", "path": "/integrations/cicd/githubactions", "description": "Learn how to sync secrets from Infisical to GitHub Actions.", "category": "CI/CD"},
{"name": "GitLab CI/CD", "slug": "gitlab-cicd", "path": "/integrations/cicd/gitlab", "description": "Learn how to sync secrets from Infisical to GitLab CI/CD.", "category": "CI/CD"},
{"name": "HashiCorp Vault", "slug": "hashicorp-vault", "path": "/integrations/cloud/hashicorp-vault", "description": "Learn how to sync secrets from Infisical to HashiCorp Vault.", "category": "Other"},
{"name": "Heroku", "slug": "heroku", "path": "/integrations/cloud/heroku", "description": "Learn how to sync secrets from Infisical to Heroku.", "category": "Cloud Providers"},
{"name": "Laravel Forge", "slug": "laravel-forge", "path": "/integrations/cloud/laravel-forge", "description": "Learn how to sync secrets from Infisical to Laravel Forge.", "category": "Other"},
{"name": "Netlify", "slug": "netlify", "path": "/integrations/cloud/netlify", "description": "Learn how to sync secrets from Infisical to Netlify.", "category": "Cloud Providers"},
{"name": "Northflank", "slug": "northflank", "path": "/integrations/cloud/northflank", "description": "Learn how to sync secrets from Infisical to Northflank.", "category": "Cloud Providers"},
{"name": "Railway", "slug": "railway", "path": "/integrations/cloud/railway", "description": "Learn how to sync secrets from Infisical to Railway.", "category": "Cloud Providers"},
{"name": "Render", "slug": "render", "path": "/integrations/cloud/render", "description": "Learn how to sync secrets from Infisical to Render.", "category": "Cloud Providers"},
{"name": "Supabase", "slug": "supabase", "path": "/integrations/cloud/supabase", "description": "Learn how to sync secrets from Infisical to Supabase.", "category": "Cloud Providers"},
{"name": "TeamCity", "slug": "teamcity", "path": "/integrations/cicd/teamcity", "description": "Learn how to sync secrets from Infisical to TeamCity.", "category": "CI/CD"},
{"name": "Terraform Cloud", "slug": "terraform-cloud", "path": "/integrations/cloud/terraform-cloud", "description": "Learn how to sync secrets from Infisical to Terraform Cloud.", "category": "Other"},
{"name": "Vercel", "slug": "vercel", "path": "/integrations/cloud/vercel", "description": "Learn how to sync secrets from Infisical to Vercel.", "category": "Cloud Providers"},
{"name": "Windmill", "slug": "windmill", "path": "/integrations/cloud/windmill", "description": "Learn how to sync secrets from Infisical to Windmill.", "category": "Other"}
];
const filteredSyncs = useMemo(() => {
let filtered = syncs;
if (selectedCategory !== 'All') {
filtered = filtered.filter(sync => sync.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(sync =>
sync.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
sync.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
sync.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [syncs, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search secret syncs..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredSyncs.length} secret sync{filteredSyncs.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Syncs List */}
{filteredSyncs.length > 0 ? (
<div className="space-y-4">
{filteredSyncs.map((sync, index) => (
<a
key={`${sync.slug}-${index}`}
href={sync.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{sync.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{sync.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{sync.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};

124
docs/snippets/UserAuthenticationBrowser.jsx Normal file
View File

@@ -0,0 +1,124 @@
import React, { useState, useMemo } from 'react';
export const UserAuthenticationBrowser = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const categories = ['All', 'SSO', 'LDAP', 'SCIM', 'General'];
const authMethods = [
{"name": "Auth0 OIDC SSO", "slug": "auth0-oidc-sso", "path": "/documentation/platform/sso/auth0-oidc", "description": "Learn how to configure Auth0 OIDC SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Auth0 SAML SSO", "slug": "auth0-saml-sso", "path": "/documentation/platform/sso/auth0-saml", "description": "Learn how to configure Auth0 SAML SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Azure AD SSO", "slug": "azure-ad-sso", "path": "/documentation/platform/sso/azure", "description": "Learn how to configure Azure Active Directory SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Google SSO", "slug": "google-sso", "path": "/documentation/platform/sso/google", "description": "Learn how to configure Google SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Google SAML SSO", "slug": "google-saml-sso", "path": "/documentation/platform/sso/google-saml", "description": "Learn how to configure Google SAML SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "GitHub SSO", "slug": "github-sso", "path": "/documentation/platform/sso/github", "description": "Learn how to configure GitHub SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "GitLab SSO", "slug": "gitlab-sso", "path": "/documentation/platform/sso/gitlab", "description": "Learn how to configure GitLab SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "JumpCloud SSO", "slug": "jumpcloud-sso", "path": "/documentation/platform/sso/jumpcloud", "description": "Learn how to configure JumpCloud SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Keycloak OIDC SSO", "slug": "keycloak-oidc-sso", "path": "/documentation/platform/sso/keycloak-oidc/overview", "description": "Learn how to configure Keycloak OIDC SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Keycloak SAML SSO", "slug": "keycloak-saml-sso", "path": "/documentation/platform/sso/keycloak-saml", "description": "Learn how to configure Keycloak SAML SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "Okta SSO", "slug": "okta-sso", "path": "/documentation/platform/sso/okta", "description": "Learn how to configure Okta SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "General OIDC SSO", "slug": "general-oidc-sso", "path": "/documentation/platform/sso/general-oidc/overview", "description": "Learn how to configure general OIDC SSO for user authentication in Infisical.", "category": "SSO"},
{"name": "JumpCloud LDAP", "slug": "jumpcloud-ldap", "path": "/documentation/platform/ldap/jumpcloud", "description": "Learn how to configure JumpCloud LDAP for user authentication in Infisical.", "category": "LDAP"},
{"name": "General LDAP", "slug": "general-ldap", "path": "/documentation/platform/ldap/general", "description": "Learn how to configure general LDAP for user authentication in Infisical.", "category": "LDAP"},
{"name": "JumpCloud SCIM", "slug": "jumpcloud-scim", "path": "/documentation/platform/scim/jumpcloud", "description": "Learn how to configure JumpCloud SCIM for user provisioning in Infisical.", "category": "SCIM"},
{"name": "Okta SCIM", "slug": "okta-scim", "path": "/documentation/platform/scim/okta", "description": "Learn how to configure Okta SCIM for user provisioning in Infisical.", "category": "SCIM"},
{"name": "Azure SCIM", "slug": "azure-scim", "path": "/documentation/platform/scim/azure", "description": "Learn how to configure Azure SCIM for user provisioning in Infisical.", "category": "SCIM"},
{"name": "Email & Password", "slug": "email-password", "path": "/documentation/platform/auth-methods/email-password", "description": "Learn about email and password authentication for users in Infisical.", "category": "General"}
];
const filteredAuthMethods = useMemo(() => {
let filtered = authMethods;
if (selectedCategory !== 'All') {
filtered = filtered.filter(method => method.category === selectedCategory);
}
if (searchTerm) {
filtered = filtered.filter(method =>
method.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
method.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
method.category.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filtered;
}, [authMethods, searchTerm, selectedCategory]);
return (
<div className="max-w-none">
{/* Search Bar */}
<div className="mb-6">
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Search authentication methods..."
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-white shadow-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Category Filter */}
<div className="mb-6">
<div className="flex flex-wrap gap-2">
{categories.map(category => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors shadow-sm ${
selectedCategory === category
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
: 'bg-white text-gray-700 border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200'
}`}
>
{category}
</button>
))}
</div>
</div>
{/* Results Count */}
<div className="mb-4">
<p className="text-sm text-gray-600">
{filteredAuthMethods.length} authentication method{filteredAuthMethods.length !== 1 ? 's' : ''} found
{selectedCategory !== 'All' && ` in ${selectedCategory}`}
{searchTerm && ` for "${searchTerm}"`}
</p>
</div>
{/* Auth Methods List */}
{filteredAuthMethods.length > 0 ? (
<div className="space-y-4">
{filteredAuthMethods.map((method, index) => (
<a
key={`${method.slug}-${index}`}
href={method.path}
className="group block px-4 py-3 border border-gray-200 rounded-xl hover:border-yellow-200 hover:bg-yellow-50/50 hover:shadow-sm transition-all duration-200 bg-white shadow-sm"
>
<div className="w-full">
<div className="flex items-center justify-between mb-0.5">
<h3 className="text-base font-medium text-gray-900 leading-none m-0">
{method.name}
</h3>
<span className="ml-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex-shrink-0">
{method.category}
</span>
</div>
<p className="text-sm text-gray-600 leading-relaxed">
{method.description}
</p>
</div>
</a>
))}
</div>
) : null}
</div>
);
};