@knowcode/doc-builder 1.9.11 → 1.9.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -9
- package/doc-builder.config.js +1 -1
- package/doc-builder.config.js.backup.1753945707032 +115 -0
- package/html/README.html +39 -28
- package/html/auth.js +17 -7
- package/html/documentation-index.html +14 -5
- package/html/guides/authentication-default-change.html +7 -3
- package/html/guides/authentication-guide.html +35 -15
- package/html/guides/claude-workflow-guide.html +14 -10
- package/html/guides/configuration-guide.html +443 -0
- package/html/guides/documentation-standards.html +11 -7
- package/html/guides/html-embedding-guide.html +17 -13
- package/html/guides/image-modal-guide.html +9 -5
- package/html/guides/phosphor-icons-guide.html +27 -23
- package/html/guides/private-directory-authentication-troubleshooting.html +21 -17
- package/html/guides/private-directory-authentication.html +7 -3
- package/html/guides/public-site-deployment.html +7 -3
- package/html/guides/search-engine-verification-guide.html +7 -3
- package/html/guides/seo-guide.html +7 -3
- package/html/guides/seo-optimization-guide.html +35 -31
- package/html/guides/supabase-authentication-complete-guide.html +860 -0
- package/html/guides/troubleshooting-guide.html +18 -14
- package/html/guides/windows-setup-guide.html +38 -34
- package/html/image-modal-test.html +7 -3
- package/html/index.html +39 -28
- package/html/js/auth.js +17 -7
- package/html/private/cache-control-anti-pattern.html +12 -8
- package/html/private/launch/README.html +15 -11
- package/html/private/launch/auth-cleanup-summary.html +24 -20
- package/html/private/launch/bubble-plugin-specification.html +7 -3
- package/html/private/launch/go-to-market-strategy.html +9 -5
- package/html/private/launch/launch-announcements.html +23 -19
- package/html/private/launch/vercel-deployment-auth-setup.html +9 -5
- package/html/private/next-steps-walkthrough.html +14 -10
- package/html/private/supabase-auth-implementation-completed.html +20 -16
- package/html/private/supabase-auth-implementation-plan.html +13 -9
- package/html/private/supabase-auth-integration-plan.html +19 -15
- package/html/private/supabase-auth-setup-guide.html +16 -12
- package/html/private/test-private-doc.html +7 -3
- package/html/private/user-management-tooling.html +7 -3
- package/html/prompts/beautiful-documentation-design.html +778 -0
- package/html/prompts/markdown-document-standards.html +11 -7
- package/html/sitemap.xml +69 -51
- package/html/vercel-cli-setup-guide.html +10 -6
- package/html/vercel-first-time-setup-guide.html +7 -3
- package/package.json +1 -1
|
@@ -0,0 +1,860 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="A comprehensive guide to implementing enterprise-grade authentication in @knowcode/doc-builder using Supabase.">
|
|
7
|
+
<title>Complete Supabase Authentication Guide</title>
|
|
8
|
+
|
|
9
|
+
<meta name="generator" content="@knowcode/doc-builder by Knowcode Ltd">
|
|
10
|
+
<meta name="author" content="Lindsay Smith">
|
|
11
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, authentication, supabase">
|
|
12
|
+
<meta name="robots" content="index, follow">
|
|
13
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/supabase-authentication-complete-guide.html">
|
|
14
|
+
|
|
15
|
+
<!-- Open Graph / Facebook -->
|
|
16
|
+
<meta property="og:type" content="article">
|
|
17
|
+
<meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/supabase-authentication-complete-guide.html">
|
|
18
|
+
<meta property="og:title" content="Complete Supabase Authentication Guide">
|
|
19
|
+
<meta property="og:description" content="A comprehensive guide to implementing enterprise-grade authentication in @knowcode/doc-builder using Supabase.">
|
|
20
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
21
|
+
<meta property="og:site_name" content="@knowcode/doc-builder">
|
|
22
|
+
<meta property="og:locale" content="en_US">
|
|
23
|
+
|
|
24
|
+
<!-- Twitter Card -->
|
|
25
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
26
|
+
<meta name="twitter:site" content="@planbbackups">
|
|
27
|
+
<meta name="twitter:creator" content="@planbbackups">
|
|
28
|
+
<meta name="twitter:title" content="Complete Supabase Authentication Guide">
|
|
29
|
+
<meta name="twitter:description" content="A comprehensive guide to implementing enterprise-grade authentication in @knowcode/doc-builder using Supabase.">
|
|
30
|
+
<meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
31
|
+
|
|
32
|
+
<!-- Custom Meta Tags -->
|
|
33
|
+
<meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
|
|
34
|
+
<meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
|
|
35
|
+
|
|
36
|
+
<!-- Fonts -->
|
|
37
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
38
|
+
|
|
39
|
+
<!-- Icons -->
|
|
40
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
41
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
42
|
+
|
|
43
|
+
<!-- Mermaid -->
|
|
44
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
45
|
+
|
|
46
|
+
<!-- Styles -->
|
|
47
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
<!-- Hide content until auth check -->
|
|
51
|
+
<style>
|
|
52
|
+
body {
|
|
53
|
+
visibility: hidden;
|
|
54
|
+
opacity: 0;
|
|
55
|
+
transition: opacity 0.3s ease;
|
|
56
|
+
}
|
|
57
|
+
body.authenticated {
|
|
58
|
+
visibility: visible;
|
|
59
|
+
opacity: 1;
|
|
60
|
+
}
|
|
61
|
+
/* Show login/logout pages immediately */
|
|
62
|
+
body.auth-page {
|
|
63
|
+
visibility: visible;
|
|
64
|
+
opacity: 1;
|
|
65
|
+
}
|
|
66
|
+
/* Style auth button consistently */
|
|
67
|
+
.auth-btn {
|
|
68
|
+
background: none;
|
|
69
|
+
border: none;
|
|
70
|
+
color: var(--text-secondary);
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
padding: 0.5rem;
|
|
73
|
+
border-radius: 0.5rem;
|
|
74
|
+
transition: all 0.2s;
|
|
75
|
+
font-size: 1.1rem;
|
|
76
|
+
}
|
|
77
|
+
.auth-btn:hover {
|
|
78
|
+
background: var(--bg-secondary);
|
|
79
|
+
color: var(--text-primary);
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
<!-- Favicon -->
|
|
85
|
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
|
|
86
|
+
|
|
87
|
+
<script type="application/ld+json">
|
|
88
|
+
{
|
|
89
|
+
"@context": "https://schema.org",
|
|
90
|
+
"@type": "TechArticle",
|
|
91
|
+
"headline": "Complete Supabase Authentication Guide",
|
|
92
|
+
"description": "A comprehensive guide to implementing enterprise-grade authentication in @knowcode/doc-builder using Supabase.",
|
|
93
|
+
"author": {
|
|
94
|
+
"@type": "Person",
|
|
95
|
+
"name": "Lindsay Smith"
|
|
96
|
+
},
|
|
97
|
+
"publisher": {
|
|
98
|
+
"@type": "Organization",
|
|
99
|
+
"name": "Knowcode Ltd",
|
|
100
|
+
"url": "https://knowcode.tech"
|
|
101
|
+
},
|
|
102
|
+
"datePublished": "2025-07-31T07:08:27.385Z",
|
|
103
|
+
"dateModified": "2025-07-31T07:08:27.385Z",
|
|
104
|
+
"mainEntityOfPage": {
|
|
105
|
+
"@type": "WebPage",
|
|
106
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/supabase-authentication-complete-guide.html"
|
|
107
|
+
},
|
|
108
|
+
"breadcrumb": {
|
|
109
|
+
"@type": "BreadcrumbList",
|
|
110
|
+
"itemListElement": [
|
|
111
|
+
{
|
|
112
|
+
"@type": "ListItem",
|
|
113
|
+
"position": 1,
|
|
114
|
+
"name": "@knowcode/doc-builder",
|
|
115
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"@type": "ListItem",
|
|
119
|
+
"position": 2,
|
|
120
|
+
"name": "Guides",
|
|
121
|
+
"item": "https://doc-builder-delta.vercel.app/guides/"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"@type": "ListItem",
|
|
125
|
+
"position": 3,
|
|
126
|
+
"name": "Supabase Authentication Complete Guide",
|
|
127
|
+
"item": "https://doc-builder-delta.vercel.app/guides/supabase-authentication-complete-guide.html"
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
</head>
|
|
134
|
+
<body>
|
|
135
|
+
<!-- Header -->
|
|
136
|
+
<header class="header">
|
|
137
|
+
<div class="header-content">
|
|
138
|
+
<a href="/index.html" class="logo">@knowcode/doc-builder</a>
|
|
139
|
+
|
|
140
|
+
<div class="header-actions">
|
|
141
|
+
<div class="deployment-info">
|
|
142
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.11">Last updated: Jul 31, 2025, 07:08 AM UTC</span>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
147
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
148
|
+
</a>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
152
|
+
<i class="fas fa-moon"></i>
|
|
153
|
+
</button>
|
|
154
|
+
|
|
155
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
156
|
+
<i class="fas fa-bars"></i>
|
|
157
|
+
</button>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
</header>
|
|
161
|
+
|
|
162
|
+
<!-- Preview Banner -->
|
|
163
|
+
<div id="preview-banner" class="preview-banner">
|
|
164
|
+
<div class="banner-content">
|
|
165
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
166
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
167
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
168
|
+
<i class="fas fa-times"></i>
|
|
169
|
+
</button>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<!-- Breadcrumbs -->
|
|
174
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
175
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
176
|
+
</nav>
|
|
177
|
+
|
|
178
|
+
<!-- Main Content -->
|
|
179
|
+
<div class="main-wrapper">
|
|
180
|
+
<!-- Sidebar -->
|
|
181
|
+
<aside class="sidebar">
|
|
182
|
+
<div class="sidebar-header">
|
|
183
|
+
<div class="filter-box">
|
|
184
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
185
|
+
<i class="fas fa-search filter-icon"></i>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<nav class="navigation">
|
|
189
|
+
|
|
190
|
+
<div class="nav-section" data-level="0">
|
|
191
|
+
<a class="nav-title" href="/README.html" >
|
|
192
|
+
<i class="ph ph-house"></i> Documentation
|
|
193
|
+
</a>
|
|
194
|
+
<div class="nav-content" >
|
|
195
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="ph ph-file-text"></i> Overview</a>
|
|
196
|
+
<a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Index</a>
|
|
197
|
+
<a href="/image-modal-test.html" class="nav-item" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="ph ph-file-text"></i> Image Modal Test</a>
|
|
198
|
+
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="ph ph-check-circle" style="color: #059669;"></i> Vercel Cli Setup Guide</a>
|
|
199
|
+
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the Vercel deployment process when using ."><i class="ph ph-check-circle" style="color: #059669;"></i> Vercel First Time Setup Guide</a></div></div>
|
|
200
|
+
<div class="nav-section" data-level="1">
|
|
201
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
202
|
+
<i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-book"></i> Guides
|
|
203
|
+
</a>
|
|
204
|
+
<div class="nav-content" id="nav-guides-1">
|
|
205
|
+
<a href="/guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="ph ph-file-text"></i> Authentication Default Change</a>
|
|
206
|
+
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="ph ph-check-circle" style="color: #059669;"></i> Authentication Guide</a>
|
|
207
|
+
<a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Claude Workflow Guide</a>
|
|
208
|
+
<a href="/guides/configuration-guide.html" class="nav-item" data-tooltip="This guide explains how @knowcode/doc-builder handles configuration files and settings."><i class="ph ph-check-circle" style="color: #059669;"></i> Configuration Guide</a>
|
|
209
|
+
<a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Standards</a>
|
|
210
|
+
<a href="/guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="ph ph-check-circle" style="color: #059669;"></i> Html Embedding Guide</a>
|
|
211
|
+
<a href="/guides/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="ph ph-check-circle" style="color: #059669;"></i> Image Modal Guide</a>
|
|
212
|
+
<a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Phosphor Icons Guide</a>
|
|
213
|
+
<a href="/guides/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="ph ph-check-circle" style="color: #059669;"></i> Private Directory Authentication</a>
|
|
214
|
+
<a href="/guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="ph ph-check-circle" style="color: #059669;"></i> Private Directory Authentication Troubleshooting</a>
|
|
215
|
+
<a href="/guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="ph ph-check-circle" style="color: #059669;"></i> Public Site Deployment</a>
|
|
216
|
+
<a href="/guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="ph ph-check-circle" style="color: #059669;"></i> Search Engine Verification Guide</a>
|
|
217
|
+
<a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="ph ph-check-circle" style="color: #059669;"></i> Seo Guide</a>
|
|
218
|
+
<a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="Comprehensive guide to optimizing documentation for search engines. Learn SEO best practices, use built-in features, and improve your rankings."><i class="ph ph-check-circle" style="color: #059669;"></i> Seo Optimization Guide</a>
|
|
219
|
+
<a href="/guides/supabase-authentication-complete-guide.html" class="nav-item active" data-tooltip="@knowcode/doc-builder includes built-in Supabase authentication that provides enterprise-grade security with zero configuration."><i class="ph ph-check-circle" style="color: #059669;"></i> Supabase Authentication Complete Guide</a>
|
|
220
|
+
<a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #059669;"></i> Troubleshooting Guide</a>
|
|
221
|
+
<a href="/guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="ph ph-check-circle" style="color: #059669;"></i> Windows Setup Guide</a></div></div>
|
|
222
|
+
<div class="nav-section private-nav" data-level="1">
|
|
223
|
+
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
224
|
+
<i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-lock"></i> Private
|
|
225
|
+
</a>
|
|
226
|
+
<div class="nav-content collapsed" id="nav-private-1">
|
|
227
|
+
<a href="/private/cache-control-anti-pattern.html" class="nav-item" data-tooltip="Cache Control Anti-Pattern: Why Aggressive Cache-Busting is Bad for Documentation Sites."><i class="ph ph-check-circle" style="color: #059669;"></i> Cache Control Anti Pattern</a>
|
|
228
|
+
<a href="/private/next-steps-walkthrough.html" class="nav-item" data-tooltip="Now that we've implemented Supabase authentication, let's walk through testing the implementation and preparing for deployment."><i class="ph ph-check-circle" style="color: #059669;"></i> Next Steps Walkthrough</a>
|
|
229
|
+
<a href="/private/supabase-auth-implementation-completed.html" class="nav-item" data-tooltip="This document records the successful implementation of Supabase authentication in @knowcode/doc-builder v1.7.5+."><i class="ph ph-check-circle" style="color: #059669;"></i> Supabase Auth Implementation Completed</a>
|
|
230
|
+
<a href="/private/supabase-auth-implementation-plan.html" class="nav-item" data-tooltip="Supabase Auth Implementation Plan for @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #059669;"></i> Supabase Auth Implementation Plan</a>
|
|
231
|
+
<a href="/private/supabase-auth-integration-plan.html" class="nav-item" data-tooltip="Supabase Authentication Integration Plan for @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #059669;"></i> Supabase Auth Integration Plan</a>
|
|
232
|
+
<a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="ph ph-check-circle" style="color: #059669;"></i> Supabase Auth Setup Guide</a>
|
|
233
|
+
<a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="ph ph-file-text"></i> Test Private Doc</a>
|
|
234
|
+
<a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="ph ph-check-circle" style="color: #059669;"></i> User Management Tooling</a></div></div>
|
|
235
|
+
<div class="nav-section private-nav" data-level="2">
|
|
236
|
+
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
237
|
+
<i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-rocket-launch"></i> Launch
|
|
238
|
+
</a>
|
|
239
|
+
<div class="nav-content collapsed" id="nav-private-launch-2">
|
|
240
|
+
<a href="/private/launch/README.html" class="nav-item" data-tooltip="This directory contains all documentation related to the commercial launch of @knowcode/doc-builder, including go-to-market strategy, platform..."><i class="ph ph-check-circle" style="color: #059669;"></i> Launch Overview</a>
|
|
241
|
+
<a href="/private/launch/auth-cleanup-summary.html" class="nav-item" data-tooltip="All references to the old client-side authentication system have been removed from @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #059669;"></i> Auth Cleanup Summary</a>
|
|
242
|
+
<a href="/private/launch/bubble-plugin-specification.html" class="nav-item" data-tooltip="This document outlines the technical specification for creating a Bubble.io plugin that integrates @knowcode/doc-builder, enabling Bubble developers..."><i class="ph ph-x-circle" style="color: #dc2626;"></i> Bubble Plugin Specification</a>
|
|
243
|
+
<a href="/private/launch/go-to-market-strategy.html" class="nav-item" data-tooltip="Go-to-Market Strategy & Product Launch Plan."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Go To Market Strategy</a>
|
|
244
|
+
<a href="/private/launch/launch-announcements.html" class="nav-item" data-tooltip="This document contains ready-to-use announcement templates for launching @knowcode/doc-builder across various platforms and channels."><i class="ph ph-check-circle" style="color: #059669;"></i> Launch Announcements</a>
|
|
245
|
+
<a href="/private/launch/vercel-deployment-auth-setup.html" class="nav-item" data-tooltip="Vercel Deployment Authentication Setup Guide."><i class="ph ph-check-circle" style="color: #059669;"></i> Vercel Deployment Auth Setup</a></div></div>
|
|
246
|
+
<div class="nav-section" data-level="1">
|
|
247
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
248
|
+
<i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-chat-circle-dots"></i> Prompts
|
|
249
|
+
</a>
|
|
250
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
251
|
+
<a href="/prompts/beautiful-documentation-design.html" class="nav-item" data-tooltip="🎨 Beautiful Documentation Design Guide."><i class="ph ph-check-circle" style="color: #059669;"></i> Beautiful Documentation Design</a>
|
|
252
|
+
<a href="/prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Markdown Document Standards</a></div></div>
|
|
253
|
+
</nav>
|
|
254
|
+
<div class="resize-handle"></div>
|
|
255
|
+
</aside>
|
|
256
|
+
|
|
257
|
+
<!-- Content Area -->
|
|
258
|
+
<main class="content">
|
|
259
|
+
<div class="content-inner">
|
|
260
|
+
<h1>Complete Supabase Authentication Guide</h1>
|
|
261
|
+
<p>A comprehensive guide to implementing enterprise-grade authentication in @knowcode/doc-builder using Supabase.</p>
|
|
262
|
+
<h2>Table of Contents</h2>
|
|
263
|
+
<ul>
|
|
264
|
+
<li><a href="#overview">Overview</a></li>
|
|
265
|
+
<li><a href="#how-it-works">How It Works</a></li>
|
|
266
|
+
<li><a href="#authentication-modes">Authentication Modes</a></li>
|
|
267
|
+
<li><a href="#quick-setup">Quick Setup</a></li>
|
|
268
|
+
<li><a href="#database-setup">Database Setup</a></li>
|
|
269
|
+
<li><a href="#user-management">User Management</a></li>
|
|
270
|
+
<li><a href="#security-features">Security Features</a></li>
|
|
271
|
+
<li><a href="#configuration-options">Configuration Options</a></li>
|
|
272
|
+
<li><a href="#troubleshooting">Troubleshooting</a></li>
|
|
273
|
+
<li><a href="#advanced-topics">Advanced Topics</a></li>
|
|
274
|
+
</ul>
|
|
275
|
+
<h2>Overview</h2>
|
|
276
|
+
<p>@knowcode/doc-builder includes built-in <strong>Supabase authentication</strong> that provides enterprise-grade security with zero configuration. The system uses JWT tokens, domain-based access control, and automatic session management to protect your documentation.</p>
|
|
277
|
+
<h3>Why Supabase?</h3>
|
|
278
|
+
<table>
|
|
279
|
+
<thead>
|
|
280
|
+
<tr>
|
|
281
|
+
<th>Feature</th>
|
|
282
|
+
<th>Benefit</th>
|
|
283
|
+
</tr>
|
|
284
|
+
</thead>
|
|
285
|
+
<tbody><tr>
|
|
286
|
+
<td><i style="font-size: 1.2em" class="ph ph-lock-key" aria-label="secure"></i> <strong>Enterprise Security</strong></td>
|
|
287
|
+
<td>JWT tokens, bcrypt password hashing, Row Level Security</td>
|
|
288
|
+
</tr>
|
|
289
|
+
<tr>
|
|
290
|
+
<td><i style="font-size: 1.2em" class="ph ph-users" aria-label="team"></i> <strong>Scalable User Management</strong></td>
|
|
291
|
+
<td>Handles millions of users with fine-grained access control</td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr>
|
|
294
|
+
<td><i style="font-size: 1.2em" class="ph ph-globe-hemisphere-west" aria-label="world"></i> <strong>Global Infrastructure</strong></td>
|
|
295
|
+
<td>Built on PostgreSQL with worldwide edge locations</td>
|
|
296
|
+
</tr>
|
|
297
|
+
<tr>
|
|
298
|
+
<td><i style="font-size: 1.2em" class="ph ph-money" aria-label="money"></i> <strong>Generous Free Tier</strong></td>
|
|
299
|
+
<td>50,000 monthly active users at no cost</td>
|
|
300
|
+
</tr>
|
|
301
|
+
<tr>
|
|
302
|
+
<td><i style="font-size: 1.2em" class="ph ph-arrows-clockwise" aria-label="refresh"></i> <strong>Real-time Updates</strong></td>
|
|
303
|
+
<td>Live permission changes without restarts</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr>
|
|
306
|
+
<td><i style="font-size: 1.2em" class="ph ph-shield" aria-label="security"></i> <strong>Built-in Security</strong></td>
|
|
307
|
+
<td>Multi-factor auth, OAuth providers, audit logs</td>
|
|
308
|
+
</tr>
|
|
309
|
+
</tbody></table>
|
|
310
|
+
<h2>How It Works</h2>
|
|
311
|
+
<p>The authentication system follows this flow:</p>
|
|
312
|
+
<div class="mermaid-wrapper">
|
|
313
|
+
<div class="mermaid">graph TD
|
|
314
|
+
A[User visits documentation page] --> B{Has valid JWT token?}
|
|
315
|
+
B -->|No| C[Redirect to login page]
|
|
316
|
+
B -->|Yes| D[Verify token with Supabase]
|
|
317
|
+
|
|
318
|
+
C --> E[User enters credentials]
|
|
319
|
+
E --> F[Authenticate with Supabase]
|
|
320
|
+
F --> G{Valid credentials?}
|
|
321
|
+
G -->|No| H[Show error message]
|
|
322
|
+
G -->|Yes| I[Issue JWT token]
|
|
323
|
+
|
|
324
|
+
I --> J[Check domain access in database]
|
|
325
|
+
D --> J
|
|
326
|
+
|
|
327
|
+
J --> K{User has access to domain?}
|
|
328
|
+
K -->|Yes| L[Show protected content]
|
|
329
|
+
K -->|No| M[Show access denied page]
|
|
330
|
+
|
|
331
|
+
style A fill:#e1f5fe
|
|
332
|
+
style L fill:#c8e6c9
|
|
333
|
+
style M fill:#ffcdd2
|
|
334
|
+
style H fill:#ffcdd2</div>
|
|
335
|
+
</div>
|
|
336
|
+
<h3>Technical Architecture</h3>
|
|
337
|
+
<ol>
|
|
338
|
+
<li><strong>Client-Side Check</strong>: JavaScript checks for valid JWT token on page load</li>
|
|
339
|
+
<li><strong>Supabase Verification</strong>: Token verified against Supabase auth service</li>
|
|
340
|
+
<li><strong>Domain-Based Access</strong>: User access checked against <code>docbuilder_access</code> table</li>
|
|
341
|
+
<li><strong>Content Display</strong>: Protected content shown only to authorized users</li>
|
|
342
|
+
<li><strong>Session Management</strong>: Automatic token refresh and session persistence</li>
|
|
343
|
+
</ol>
|
|
344
|
+
<h2>Authentication Modes</h2>
|
|
345
|
+
<p>@knowcode/doc-builder supports three authentication modes:</p>
|
|
346
|
+
<h3>1. <i style="font-size: 1.2em" class="ph ph-globe-hemisphere-west" aria-label="world"></i> Global Authentication</h3>
|
|
347
|
+
<p><strong>When to use</strong>: Entire documentation site requires login</p>
|
|
348
|
+
<pre><code class="language-javascript">// doc-builder.config.js
|
|
349
|
+
module.exports = {
|
|
350
|
+
features: {
|
|
351
|
+
authentication: 'supabase' // Entire site protected
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
</code></pre>
|
|
355
|
+
<p><strong>Behavior</strong>:</p>
|
|
356
|
+
<ul>
|
|
357
|
+
<li>All pages require authentication</li>
|
|
358
|
+
<li>Redirects to login if not authenticated</li>
|
|
359
|
+
<li>Shows access denied if user lacks domain access</li>
|
|
360
|
+
</ul>
|
|
361
|
+
<h3>2. <i style="font-size: 1.2em" class="ph ph-folder" aria-label="folder"></i> Private Directory Authentication</h3>
|
|
362
|
+
<p><strong>When to use</strong>: Public docs with some private sections (most common)</p>
|
|
363
|
+
<pre><code class="language-bash"># Create private directory - authentication automatically enabled
|
|
364
|
+
mkdir docs/private
|
|
365
|
+
echo "# Admin Documentation" > docs/private/admin-guide.md
|
|
366
|
+
</code></pre>
|
|
367
|
+
<p><strong>Behavior</strong>:</p>
|
|
368
|
+
<ul>
|
|
369
|
+
<li>Public pages accessible to everyone</li>
|
|
370
|
+
<li><code>/private/</code> folders require authentication</li>
|
|
371
|
+
<li>Seamless navigation between public and private content</li>
|
|
372
|
+
</ul>
|
|
373
|
+
<h3>3. <i style="font-size: 1.2em" class="ph ph-arrows-clockwise" aria-label="refresh"></i> Hybrid Mode</h3>
|
|
374
|
+
<p><strong>When to use</strong>: Complex access requirements</p>
|
|
375
|
+
<pre><code class="language-javascript">// doc-builder.config.js
|
|
376
|
+
module.exports = {
|
|
377
|
+
features: {
|
|
378
|
+
authentication: 'supabase', // Global auth enabled
|
|
379
|
+
privateDirectoryAuth: true // Also check private directories
|
|
380
|
+
}
|
|
381
|
+
};
|
|
382
|
+
</code></pre>
|
|
383
|
+
<p><strong>Behavior</strong>:</p>
|
|
384
|
+
<ul>
|
|
385
|
+
<li>Combines global and directory-based authentication</li>
|
|
386
|
+
<li>Granular control over different sections</li>
|
|
387
|
+
<li>Advanced user permission management</li>
|
|
388
|
+
</ul>
|
|
389
|
+
<h2>Quick Setup</h2>
|
|
390
|
+
<h3>Option 1: Zero Configuration (Recommended)</h3>
|
|
391
|
+
<p>The easiest way to get started - built-in credentials included:</p>
|
|
392
|
+
<pre><code class="language-bash"># 1. Create private content
|
|
393
|
+
mkdir docs/private
|
|
394
|
+
echo "# Secret Documentation" > docs/private/admin.md
|
|
395
|
+
|
|
396
|
+
# 2. Deploy with authentication automatically enabled
|
|
397
|
+
npx @knowcode/doc-builder deploy
|
|
398
|
+
|
|
399
|
+
# 3. Add users in Supabase dashboard
|
|
400
|
+
# Visit your deployed site - authentication is ready!
|
|
401
|
+
</code></pre>
|
|
402
|
+
<h3>Option 2: Custom Configuration</h3>
|
|
403
|
+
<p>For advanced users who want to use their own Supabase project:</p>
|
|
404
|
+
<pre><code class="language-javascript">// doc-builder.config.js
|
|
405
|
+
module.exports = {
|
|
406
|
+
siteName: 'My Secure Docs',
|
|
407
|
+
|
|
408
|
+
features: {
|
|
409
|
+
authentication: 'supabase'
|
|
410
|
+
},
|
|
411
|
+
|
|
412
|
+
auth: {
|
|
413
|
+
supabaseUrl: process.env.SUPABASE_URL || 'https://your-project.supabase.co',
|
|
414
|
+
supabaseAnonKey: process.env.SUPABASE_ANON_KEY || 'your-anon-key'
|
|
415
|
+
}
|
|
416
|
+
};
|
|
417
|
+
</code></pre>
|
|
418
|
+
<h2>Database Setup</h2>
|
|
419
|
+
<h3>Automatic Setup (Built-in Project)</h3>
|
|
420
|
+
<p>If you're using the built-in Supabase project (recommended), the database is already configured. Skip to <a href="#user-management">User Management</a>.</p>
|
|
421
|
+
<h3>Manual Setup (Custom Project)</h3>
|
|
422
|
+
<p>If using your own Supabase project, run this SQL in the Supabase SQL editor:</p>
|
|
423
|
+
<pre><code class="language-sql">-- Create access control table
|
|
424
|
+
CREATE TABLE docbuilder_access (
|
|
425
|
+
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
|
|
426
|
+
domain TEXT NOT NULL,
|
|
427
|
+
created_at TIMESTAMPTZ DEFAULT NOW(),
|
|
428
|
+
updated_at TIMESTAMPTZ DEFAULT NOW(),
|
|
429
|
+
PRIMARY KEY (user_id, domain)
|
|
430
|
+
);
|
|
431
|
+
|
|
432
|
+
-- Create indexes for performance
|
|
433
|
+
CREATE INDEX idx_docbuilder_access_domain ON docbuilder_access(domain);
|
|
434
|
+
CREATE INDEX idx_docbuilder_access_user_id ON docbuilder_access(user_id);
|
|
435
|
+
|
|
436
|
+
-- Enable Row Level Security
|
|
437
|
+
ALTER TABLE docbuilder_access ENABLE ROW LEVEL SECURITY;
|
|
438
|
+
|
|
439
|
+
-- RLS Policy: Users can only see their own access records
|
|
440
|
+
CREATE POLICY "Users see own access" ON docbuilder_access
|
|
441
|
+
FOR SELECT USING (user_id = auth.uid());
|
|
442
|
+
|
|
443
|
+
-- RLS Policy: Service role can manage all access
|
|
444
|
+
CREATE POLICY "Service role manages access" ON docbuilder_access
|
|
445
|
+
FOR ALL USING (current_setting('role') = 'service_role');
|
|
446
|
+
|
|
447
|
+
-- Create trigger to update timestamp
|
|
448
|
+
CREATE OR REPLACE FUNCTION update_updated_at_column()
|
|
449
|
+
RETURNS TRIGGER AS $
|
|
450
|
+
BEGIN
|
|
451
|
+
NEW.updated_at = NOW();
|
|
452
|
+
RETURN NEW;
|
|
453
|
+
END;
|
|
454
|
+
$ language 'plpgsql';
|
|
455
|
+
|
|
456
|
+
CREATE TRIGGER update_docbuilder_access_updated_at
|
|
457
|
+
BEFORE UPDATE ON docbuilder_access
|
|
458
|
+
FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
|
|
459
|
+
</code></pre>
|
|
460
|
+
<h3>Database Schema</h3>
|
|
461
|
+
<p>The authentication system uses a simple schema:</p>
|
|
462
|
+
<pre><code class="language-sql">-- Table: docbuilder_access
|
|
463
|
+
-- Purpose: Controls which users can access which documentation domains
|
|
464
|
+
|
|
465
|
+
Column Type Description
|
|
466
|
+
----------- ----------- ----------------------------------
|
|
467
|
+
user_id UUID Reference to auth.users(id)
|
|
468
|
+
domain TEXT Domain name (e.g., docs.example.com)
|
|
469
|
+
created_at TIMESTAMPTZ When access was granted
|
|
470
|
+
updated_at TIMESTAMPTZ Last modified timestamp
|
|
471
|
+
</code></pre>
|
|
472
|
+
<h2>User Management</h2>
|
|
473
|
+
<h3>Creating Users</h3>
|
|
474
|
+
<p><strong>Option 1: Supabase Dashboard</strong></p>
|
|
475
|
+
<ol>
|
|
476
|
+
<li>Visit your Supabase project dashboard</li>
|
|
477
|
+
<li>Go to Authentication → Users</li>
|
|
478
|
+
<li>Click "Invite user"</li>
|
|
479
|
+
<li>Enter email address</li>
|
|
480
|
+
<li>User receives signup email</li>
|
|
481
|
+
</ol>
|
|
482
|
+
<p><strong>Option 2: User Self-Registration</strong><br>Users can sign up at your login page if enabled in Supabase settings.</p>
|
|
483
|
+
<h3>Granting Access</h3>
|
|
484
|
+
<p>Grant a user access to your documentation domain:</p>
|
|
485
|
+
<pre><code class="language-sql">-- Grant access to a single user
|
|
486
|
+
INSERT INTO docbuilder_access (user_id, domain)
|
|
487
|
+
VALUES (
|
|
488
|
+
(SELECT id FROM auth.users WHERE email = 'user@example.com'),
|
|
489
|
+
'docs.example.com'
|
|
490
|
+
);
|
|
491
|
+
|
|
492
|
+
-- Grant access to multiple users
|
|
493
|
+
INSERT INTO docbuilder_access (user_id, domain)
|
|
494
|
+
SELECT id, 'docs.example.com'
|
|
495
|
+
FROM auth.users
|
|
496
|
+
WHERE email IN (
|
|
497
|
+
'admin@example.com',
|
|
498
|
+
'developer@example.com',
|
|
499
|
+
'manager@example.com'
|
|
500
|
+
);
|
|
501
|
+
|
|
502
|
+
-- Grant access to all existing users (be careful!)
|
|
503
|
+
INSERT INTO docbuilder_access (user_id, domain)
|
|
504
|
+
SELECT id, 'docs.example.com' FROM auth.users;
|
|
505
|
+
</code></pre>
|
|
506
|
+
<h3>Revoking Access</h3>
|
|
507
|
+
<p>Remove a user's access to your documentation:</p>
|
|
508
|
+
<pre><code class="language-sql">-- Remove specific user access
|
|
509
|
+
DELETE FROM docbuilder_access
|
|
510
|
+
WHERE user_id = (SELECT id FROM auth.users WHERE email = 'user@example.com')
|
|
511
|
+
AND domain = 'docs.example.com';
|
|
512
|
+
|
|
513
|
+
-- Remove all access for a domain (nuclear option)
|
|
514
|
+
DELETE FROM docbuilder_access WHERE domain = 'docs.example.com';
|
|
515
|
+
</code></pre>
|
|
516
|
+
<h3>Bulk User Management</h3>
|
|
517
|
+
<p><strong>Add users from CSV:</strong></p>
|
|
518
|
+
<pre><code class="language-sql">-- Create temporary table
|
|
519
|
+
CREATE TEMP TABLE user_emails (email TEXT);
|
|
520
|
+
|
|
521
|
+
-- Insert emails (replace with your list)
|
|
522
|
+
INSERT INTO user_emails VALUES
|
|
523
|
+
('user1@example.com'),
|
|
524
|
+
('user2@example.com'),
|
|
525
|
+
('user3@example.com');
|
|
526
|
+
|
|
527
|
+
-- Grant access to all
|
|
528
|
+
INSERT INTO docbuilder_access (user_id, domain)
|
|
529
|
+
SELECT u.id, 'docs.example.com'
|
|
530
|
+
FROM auth.users u
|
|
531
|
+
JOIN user_emails e ON u.email = e.email;
|
|
532
|
+
</code></pre>
|
|
533
|
+
<p><strong>View all users with access:</strong></p>
|
|
534
|
+
<pre><code class="language-sql">SELECT
|
|
535
|
+
u.email,
|
|
536
|
+
u.created_at as user_created,
|
|
537
|
+
da.created_at as access_granted,
|
|
538
|
+
da.domain
|
|
539
|
+
FROM auth.users u
|
|
540
|
+
JOIN docbuilder_access da ON u.id = da.user_id
|
|
541
|
+
WHERE da.domain = 'docs.example.com'
|
|
542
|
+
ORDER BY da.created_at DESC;
|
|
543
|
+
</code></pre>
|
|
544
|
+
<h2>Security Features</h2>
|
|
545
|
+
<h3>What's Included</h3>
|
|
546
|
+
<table>
|
|
547
|
+
<thead>
|
|
548
|
+
<tr>
|
|
549
|
+
<th>Security Feature</th>
|
|
550
|
+
<th>Implementation</th>
|
|
551
|
+
<th>Benefit</th>
|
|
552
|
+
</tr>
|
|
553
|
+
</thead>
|
|
554
|
+
<tbody><tr>
|
|
555
|
+
<td><strong>JWT Authentication</strong></td>
|
|
556
|
+
<td>Industry-standard tokens</td>
|
|
557
|
+
<td>Stateless, secure authentication</td>
|
|
558
|
+
</tr>
|
|
559
|
+
<tr>
|
|
560
|
+
<td><strong>Password Hashing</strong></td>
|
|
561
|
+
<td>bcrypt with salt</td>
|
|
562
|
+
<td>Passwords never stored in plaintext</td>
|
|
563
|
+
</tr>
|
|
564
|
+
<tr>
|
|
565
|
+
<td><strong>Row Level Security</strong></td>
|
|
566
|
+
<td>PostgreSQL RLS policies</td>
|
|
567
|
+
<td>Database-level access control</td>
|
|
568
|
+
</tr>
|
|
569
|
+
<tr>
|
|
570
|
+
<td><strong>Session Management</strong></td>
|
|
571
|
+
<td>Automatic token refresh</td>
|
|
572
|
+
<td>Seamless user experience</td>
|
|
573
|
+
</tr>
|
|
574
|
+
<tr>
|
|
575
|
+
<td><strong>HTTPS Only</strong></td>
|
|
576
|
+
<td>Enforced in production</td>
|
|
577
|
+
<td>Encrypted data transmission</td>
|
|
578
|
+
</tr>
|
|
579
|
+
<tr>
|
|
580
|
+
<td><strong>Domain Validation</strong></td>
|
|
581
|
+
<td>Runtime domain checking</td>
|
|
582
|
+
<td>Prevents unauthorized access</td>
|
|
583
|
+
</tr>
|
|
584
|
+
<tr>
|
|
585
|
+
<td><strong>Content Protection</strong></td>
|
|
586
|
+
<td>Client-side verification</td>
|
|
587
|
+
<td>No content served to unauthorized users</td>
|
|
588
|
+
</tr>
|
|
589
|
+
</tbody></table>
|
|
590
|
+
<h3>Security Best Practices</h3>
|
|
591
|
+
<ol>
|
|
592
|
+
<li><p><strong>Use Environment Variables</strong> (for custom projects):</p>
|
|
593
|
+
<pre><code class="language-bash"># .env.local
|
|
594
|
+
SUPABASE_URL=https://your-project.supabase.co
|
|
595
|
+
SUPABASE_ANON_KEY=your-anon-key
|
|
596
|
+
</code></pre>
|
|
597
|
+
</li>
|
|
598
|
+
<li><p><strong>Regular Access Audits</strong>:</p>
|
|
599
|
+
<pre><code class="language-sql">-- Review user access monthly
|
|
600
|
+
SELECT u.email, da.domain, da.created_at
|
|
601
|
+
FROM auth.users u
|
|
602
|
+
JOIN docbuilder_access da ON u.id = da.user_id
|
|
603
|
+
ORDER BY da.created_at DESC;
|
|
604
|
+
</code></pre>
|
|
605
|
+
</li>
|
|
606
|
+
<li><p><strong>Monitor Authentication Logs</strong>:</p>
|
|
607
|
+
<ul>
|
|
608
|
+
<li>Check Supabase dashboard for login attempts</li>
|
|
609
|
+
<li>Review failed authentication events</li>
|
|
610
|
+
<li>Set up alerts for suspicious activity</li>
|
|
611
|
+
</ul>
|
|
612
|
+
</li>
|
|
613
|
+
<li><p><strong>Custom Domain Setup</strong>:</p>
|
|
614
|
+
<pre><code class="language-bash"># Use professional domains for better security
|
|
615
|
+
https://docs.yourcompany.com # Good
|
|
616
|
+
https://random-string.vercel.app # Less secure
|
|
617
|
+
</code></pre>
|
|
618
|
+
</li>
|
|
619
|
+
</ol>
|
|
620
|
+
<h2>Configuration Options</h2>
|
|
621
|
+
<h3>Basic Configuration</h3>
|
|
622
|
+
<pre><code class="language-javascript">// doc-builder.config.js - Minimal setup
|
|
623
|
+
module.exports = {
|
|
624
|
+
features: {
|
|
625
|
+
authentication: 'supabase' // Enable authentication
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
</code></pre>
|
|
629
|
+
<h3>Advanced Configuration</h3>
|
|
630
|
+
<pre><code class="language-javascript">// doc-builder.config.js - Full configuration
|
|
631
|
+
module.exports = {
|
|
632
|
+
siteName: 'Secure Documentation',
|
|
633
|
+
siteDescription: 'Private company documentation',
|
|
634
|
+
|
|
635
|
+
features: {
|
|
636
|
+
authentication: 'supabase', // Enable Supabase auth
|
|
637
|
+
privateDirectoryAuth: true, // Also protect /private/ directories
|
|
638
|
+
mermaid: true, // Enable diagrams
|
|
639
|
+
tooltips: true, // Enable tooltips
|
|
640
|
+
phosphorIcons: true // Use Phosphor icons
|
|
641
|
+
},
|
|
642
|
+
|
|
643
|
+
auth: {
|
|
644
|
+
// Optional: Use custom Supabase project
|
|
645
|
+
supabaseUrl: process.env.SUPABASE_URL,
|
|
646
|
+
supabaseAnonKey: process.env.SUPABASE_ANON_KEY,
|
|
647
|
+
|
|
648
|
+
// Optional: Custom login page settings
|
|
649
|
+
loginPageTitle: 'Access Documentation',
|
|
650
|
+
loginPageSubtitle: 'Enter your credentials to continue'
|
|
651
|
+
},
|
|
652
|
+
|
|
653
|
+
// SEO settings work with authentication
|
|
654
|
+
seo: {
|
|
655
|
+
author: 'Your Company',
|
|
656
|
+
keywords: ['documentation', 'secure', 'private'],
|
|
657
|
+
ogImage: '/images/og-secure.png'
|
|
658
|
+
}
|
|
659
|
+
};
|
|
660
|
+
</code></pre>
|
|
661
|
+
<h3>Environment Variables</h3>
|
|
662
|
+
<pre><code class="language-bash"># .env.local - For custom Supabase projects
|
|
663
|
+
SUPABASE_URL=https://your-project.supabase.co
|
|
664
|
+
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCI...
|
|
665
|
+
|
|
666
|
+
# Optional: Custom domain for authentication
|
|
667
|
+
AUTH_DOMAIN=docs.yourcompany.com
|
|
668
|
+
</code></pre>
|
|
669
|
+
<h2>Troubleshooting</h2>
|
|
670
|
+
<h3>Common Issues</h3>
|
|
671
|
+
<h4><i style="font-size: 1.2em" class="ph ph-magnifying-glass" aria-label="search"></i> <strong>Users can't log in</strong></h4>
|
|
672
|
+
<p><strong>Symptoms</strong>: Login form shows errors, authentication fails</p>
|
|
673
|
+
<p><strong>Solutions</strong>:</p>
|
|
674
|
+
<ol>
|
|
675
|
+
<li>Check Supabase project is active and accessible</li>
|
|
676
|
+
<li>Verify credentials in config file</li>
|
|
677
|
+
<li>Ensure user exists in <code>auth.users</code> table</li>
|
|
678
|
+
<li>Check user's email is confirmed (if confirmation required)</li>
|
|
679
|
+
</ol>
|
|
680
|
+
<pre><code class="language-sql">-- Check if user exists
|
|
681
|
+
SELECT email, email_confirmed_at FROM auth.users WHERE email = 'user@example.com';
|
|
682
|
+
|
|
683
|
+
-- Check user access
|
|
684
|
+
SELECT * FROM docbuilder_access
|
|
685
|
+
WHERE user_id = (SELECT id FROM auth.users WHERE email = 'user@example.com');
|
|
686
|
+
</code></pre>
|
|
687
|
+
<h4><i style="font-size: 1.2em" class="ph ph-arrows-clockwise" aria-label="refresh"></i> <strong>Content flashes before redirect</strong></h4>
|
|
688
|
+
<p><strong>Symptoms</strong>: Protected content briefly visible before login redirect</p>
|
|
689
|
+
<p><strong>Solutions</strong>:</p>
|
|
690
|
+
<ol>
|
|
691
|
+
<li>Update to latest version (<code>npm install @knowcode/doc-builder@latest</code>)</li>
|
|
692
|
+
<li>Check network speed - slow connections may see flashing</li>
|
|
693
|
+
<li>Verify authentication script is loading properly</li>
|
|
694
|
+
</ol>
|
|
695
|
+
<pre><code class="language-html"><!-- This CSS is automatically included to prevent flashing -->
|
|
696
|
+
<style>
|
|
697
|
+
body { visibility: hidden; opacity: 0; }
|
|
698
|
+
body.authenticated { visibility: visible; opacity: 1; }
|
|
699
|
+
</style>
|
|
700
|
+
</code></pre>
|
|
701
|
+
<h4><i style="font-size: 1.2em" class="ph ph-x-circle" aria-label="error"></i> <strong>Access denied after login</strong></h4>
|
|
702
|
+
<p><strong>Symptoms</strong>: User logs in successfully but sees "Access Denied" page</p>
|
|
703
|
+
<p><strong>Solutions</strong>:</p>
|
|
704
|
+
<ol>
|
|
705
|
+
<li>Check user has entry in <code>docbuilder_access</code> table</li>
|
|
706
|
+
<li>Verify domain matches exactly (including subdomains)</li>
|
|
707
|
+
<li>Check RLS policies are correctly configured</li>
|
|
708
|
+
</ol>
|
|
709
|
+
<pre><code class="language-sql">-- Debug access check
|
|
710
|
+
SELECT
|
|
711
|
+
u.email,
|
|
712
|
+
da.domain,
|
|
713
|
+
'Expected: ' || 'your-actual-domain.com' as expected_domain
|
|
714
|
+
FROM auth.users u
|
|
715
|
+
LEFT JOIN docbuilder_access da ON u.id = da.user_id
|
|
716
|
+
WHERE u.email = 'user@example.com';
|
|
717
|
+
</code></pre>
|
|
718
|
+
<h4><i style="font-size: 1.2em" class="ph ph-plug" aria-label="plugin"></i> <strong>Authentication not working locally</strong></h4>
|
|
719
|
+
<p><strong>Symptoms</strong>: Authentication works on deployment but not locally</p>
|
|
720
|
+
<p><strong>Solutions</strong>:</p>
|
|
721
|
+
<ol>
|
|
722
|
+
<li>Check localhost is included in Supabase allowed origins</li>
|
|
723
|
+
<li>Use <code>http://localhost:3000</code> exactly in Supabase settings</li>
|
|
724
|
+
<li>Clear browser cache and cookies</li>
|
|
725
|
+
</ol>
|
|
726
|
+
<h3>Debug Checklist</h3>
|
|
727
|
+
<p>When authentication isn't working:</p>
|
|
728
|
+
<ul>
|
|
729
|
+
<li><input disabled="" type="checkbox"> Check browser console for JavaScript errors</li>
|
|
730
|
+
<li><input disabled="" type="checkbox"> Verify JWT token in DevTools → Application → Local Storage</li>
|
|
731
|
+
<li><input disabled="" type="checkbox"> Test Supabase connection in browser network tab</li>
|
|
732
|
+
<li><input disabled="" type="checkbox"> Confirm domain in database matches deployment URL</li>
|
|
733
|
+
<li><input disabled="" type="checkbox"> Check Supabase project is active and not paused</li>
|
|
734
|
+
<li><input disabled="" type="checkbox"> Verify user email is confirmed (if required)</li>
|
|
735
|
+
<li><input disabled="" type="checkbox"> Test with a fresh incognito browser window</li>
|
|
736
|
+
</ul>
|
|
737
|
+
<h3>Getting Help</h3>
|
|
738
|
+
<ol>
|
|
739
|
+
<li><strong>Check the logs</strong>: Browser console and Supabase dashboard</li>
|
|
740
|
+
<li><strong>Test components</strong>: Try logging in directly to Supabase dashboard</li>
|
|
741
|
+
<li><strong>Verify setup</strong>: Run through setup steps again</li>
|
|
742
|
+
<li><strong>Ask for help</strong>: Open an issue on GitHub with full error details</li>
|
|
743
|
+
</ol>
|
|
744
|
+
<h2>Advanced Topics</h2>
|
|
745
|
+
<h3>Custom Authentication Pages</h3>
|
|
746
|
+
<p>While @knowcode/doc-builder generates beautiful login pages automatically, you can customize them:</p>
|
|
747
|
+
<pre><code class="language-javascript">// doc-builder.config.js
|
|
748
|
+
module.exports = {
|
|
749
|
+
auth: {
|
|
750
|
+
// Custom login page configuration
|
|
751
|
+
loginPageTitle: 'Secure Access Required',
|
|
752
|
+
loginPageSubtitle: 'Please authenticate to view our documentation',
|
|
753
|
+
|
|
754
|
+
// Custom styling (advanced)
|
|
755
|
+
customLoginCSS: `
|
|
756
|
+
.auth-box {
|
|
757
|
+
border-radius: 12px;
|
|
758
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
759
|
+
}
|
|
760
|
+
`
|
|
761
|
+
}
|
|
762
|
+
};
|
|
763
|
+
</code></pre>
|
|
764
|
+
<h3>Multi-Domain Setup</h3>
|
|
765
|
+
<p>For organizations with multiple documentation sites:</p>
|
|
766
|
+
<pre><code class="language-sql">-- Grant user access to multiple domains
|
|
767
|
+
INSERT INTO docbuilder_access (user_id, domain) VALUES
|
|
768
|
+
((SELECT id FROM auth.users WHERE email = 'admin@example.com'), 'docs.example.com'),
|
|
769
|
+
((SELECT id FROM auth.users WHERE email = 'admin@example.com'), 'api.example.com'),
|
|
770
|
+
((SELECT id FROM auth.users WHERE email = 'admin@example.com'), 'internal.example.com');
|
|
771
|
+
|
|
772
|
+
-- View user's access across all domains
|
|
773
|
+
SELECT u.email, array_agg(da.domain) as accessible_domains
|
|
774
|
+
FROM auth.users u
|
|
775
|
+
JOIN docbuilder_access da ON u.id = da.user_id
|
|
776
|
+
GROUP BY u.id, u.email;
|
|
777
|
+
</code></pre>
|
|
778
|
+
<h3>OAuth Integration</h3>
|
|
779
|
+
<p>Enable social login through Supabase (optional):</p>
|
|
780
|
+
<ol>
|
|
781
|
+
<li><p><strong>In Supabase Dashboard</strong>:</p>
|
|
782
|
+
<ul>
|
|
783
|
+
<li>Go to Authentication → Settings</li>
|
|
784
|
+
<li>Enable desired providers (Google, GitHub, etc.)</li>
|
|
785
|
+
<li>Configure OAuth credentials</li>
|
|
786
|
+
</ul>
|
|
787
|
+
</li>
|
|
788
|
+
<li><p><strong>Update your config</strong>:</p>
|
|
789
|
+
</li>
|
|
790
|
+
</ol>
|
|
791
|
+
<pre><code class="language-javascript">// doc-builder.config.js
|
|
792
|
+
module.exports = {
|
|
793
|
+
auth: {
|
|
794
|
+
enableOAuth: true,
|
|
795
|
+
oauthProviders: ['google', 'github']
|
|
796
|
+
}
|
|
797
|
+
};
|
|
798
|
+
</code></pre>
|
|
799
|
+
<h3>Role-Based Access Control</h3>
|
|
800
|
+
<p>Implement different permission levels:</p>
|
|
801
|
+
<pre><code class="language-sql">-- Add role column to access table
|
|
802
|
+
ALTER TABLE docbuilder_access ADD COLUMN role TEXT DEFAULT 'reader';
|
|
803
|
+
|
|
804
|
+
-- Grant different roles
|
|
805
|
+
INSERT INTO docbuilder_access (user_id, domain, role) VALUES
|
|
806
|
+
((SELECT id FROM auth.users WHERE email = 'admin@example.com'), 'docs.example.com', 'admin'),
|
|
807
|
+
((SELECT id FROM auth.users WHERE email = 'editor@example.com'), 'docs.example.com', 'editor'),
|
|
808
|
+
((SELECT id FROM auth.users WHERE email = 'reader@example.com'), 'docs.example.com', 'reader');
|
|
809
|
+
</code></pre>
|
|
810
|
+
<h3>API Access Control</h3>
|
|
811
|
+
<p>Protect API documentation or interactive content:</p>
|
|
812
|
+
<pre><code class="language-javascript">// In your custom HTML pages
|
|
813
|
+
<script>
|
|
814
|
+
async function checkAuthForAPI() {
|
|
815
|
+
const { data: { user } } = await supabaseClient.auth.getUser();
|
|
816
|
+
if (!user) {
|
|
817
|
+
// Redirect to login or show error
|
|
818
|
+
return false;
|
|
819
|
+
}
|
|
820
|
+
return true;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
// Use in interactive demos
|
|
824
|
+
if (await checkAuthForAPI()) {
|
|
825
|
+
// Show API explorer or interactive content
|
|
826
|
+
}
|
|
827
|
+
</script>
|
|
828
|
+
</code></pre>
|
|
829
|
+
<h2>Conclusion</h2>
|
|
830
|
+
<p>Supabase authentication in @knowcode/doc-builder provides enterprise-grade security with minimal setup. The system handles everything from user management to session persistence, letting you focus on creating great documentation.</p>
|
|
831
|
+
<p><strong>Key takeaways</strong>:</p>
|
|
832
|
+
<ul>
|
|
833
|
+
<li><i style="font-size: 1.2em" class="ph ph-rocket-launch" aria-label="launch"></i> <strong>Zero configuration</strong> required with built-in credentials</li>
|
|
834
|
+
<li><i style="font-size: 1.2em" class="ph ph-globe" aria-label="global"></i> <strong>Domain-based access</strong> control eliminates complex site registration</li>
|
|
835
|
+
<li><i style="font-size: 1.2em" class="ph ph-folder" aria-label="folder"></i> <strong>Private directory</strong> support for hybrid public/private docs</li>
|
|
836
|
+
<li><i style="font-size: 1.2em" class="ph ph-lock" aria-label="locked"></i> <strong>Enterprise security</strong> with JWT tokens and Row Level Security</li>
|
|
837
|
+
<li><i style="font-size: 1.2em" class="ph ph-users" aria-label="team"></i> <strong>Scalable user management</strong> supporting unlimited users</li>
|
|
838
|
+
</ul>
|
|
839
|
+
<p>For most use cases, simply creating a <code>/private/</code> directory and running <code>npx @knowcode/doc-builder deploy</code> is all you need to secure your documentation.</p>
|
|
840
|
+
<p>Need help? Check the <a href="#troubleshooting">troubleshooting section</a> or open an issue on GitHub.</p>
|
|
841
|
+
|
|
842
|
+
</div>
|
|
843
|
+
</main>
|
|
844
|
+
</div>
|
|
845
|
+
|
|
846
|
+
<!-- Scripts -->
|
|
847
|
+
<script>
|
|
848
|
+
// Pass configuration to frontend
|
|
849
|
+
window.docBuilderConfig = {
|
|
850
|
+
features: {
|
|
851
|
+
showPdfDownload: true,
|
|
852
|
+
menuDefaultOpen: false
|
|
853
|
+
}
|
|
854
|
+
};
|
|
855
|
+
</script>
|
|
856
|
+
<script src="/js/main.js"></script>
|
|
857
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
858
|
+
<script src="/js/auth.js"></script>
|
|
859
|
+
</body>
|
|
860
|
+
</html>
|