@knowcode/doc-builder 1.7.6 → 1.8.1
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/.claude/settings.local.json +6 -1
- package/CHANGELOG.md +29 -0
- package/assets/css/notion-style.css +9 -1
- package/assets/js/main.js +10 -6
- package/html/README.html +44 -20
- package/html/auth.js +62 -13
- package/html/css/notion-style.css +9 -1
- package/html/documentation-index.html +44 -20
- package/html/guides/authentication-default-change.html +44 -20
- package/html/guides/authentication-guide.html +228 -263
- package/html/guides/claude-workflow-guide.html +44 -20
- package/html/guides/documentation-standards.html +44 -20
- package/html/guides/phosphor-icons-guide.html +44 -20
- package/html/guides/private-directory-authentication.html +472 -0
- package/html/guides/public-site-deployment.html +50 -25
- package/html/guides/search-engine-verification-guide.html +44 -20
- package/html/guides/seo-guide.html +44 -20
- package/html/guides/seo-optimization-guide.html +44 -20
- package/html/guides/troubleshooting-guide.html +44 -20
- package/html/guides/windows-setup-guide.html +44 -20
- package/html/index.html +44 -20
- package/html/js/auth.js +118 -39
- package/html/js/main.js +10 -6
- package/html/login.html +4 -4
- package/html/logout.html +2 -2
- package/html/private/cache-control-anti-pattern.html +408 -0
- package/html/private/launch/README.html +350 -0
- package/html/private/launch/auth-cleanup-summary.html +340 -0
- package/html/private/launch/bubble-plugin-specification.html +986 -0
- package/html/private/launch/go-to-market-strategy.html +716 -0
- package/html/private/launch/launch-announcements.html +646 -0
- package/html/private/launch/vercel-deployment-auth-setup.html +390 -0
- package/html/private/next-steps-walkthrough.html +685 -0
- package/html/private/supabase-auth-implementation-completed.html +433 -0
- package/html/private/supabase-auth-implementation-plan.html +590 -0
- package/html/private/supabase-auth-integration-plan.html +718 -0
- package/html/private/supabase-auth-setup-guide.html +545 -0
- package/html/private/test-private-doc.html +281 -0
- package/html/robots.txt +4 -0
- package/html/sitemap.xml +113 -29
- package/html/vercel-cli-setup-guide.html +44 -20
- package/html/vercel-first-time-setup-guide.html +44 -20
- package/lib/config.js +21 -3
- package/lib/core-builder.js +49 -7
- package/lib/supabase-auth.js +80 -25
- package/package.json +1 -1
- package/user-management/README.md +306 -0
- package/user-management/add-users.sh +730 -0
- package/user-management/create-user.js +65 -0
- package/user-management/users.txt +15 -0
|
@@ -0,0 +1,545 @@
|
|
|
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="Complete guide for setting up secure authentication for your @knowcode/doc-builder documentation sites using Supabase.">
|
|
7
|
+
<title>Supabase Authentication Setup Guide | @knowcode/doc-builder</title>
|
|
8
|
+
|
|
9
|
+
<meta name="author" content="Lindsay Smith">
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, supabase, your">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/private/supabase-auth-setup-guide.html">
|
|
13
|
+
|
|
14
|
+
<!-- Open Graph / Facebook -->
|
|
15
|
+
<meta property="og:type" content="article">
|
|
16
|
+
<meta property="og:url" content="https://doc-builder-delta.vercel.app/private/supabase-auth-setup-guide.html">
|
|
17
|
+
<meta property="og:title" content="Supabase Authentication Setup Guide | @knowcode/doc-builder">
|
|
18
|
+
<meta property="og:description" content="Complete guide for setting up secure authentication for your @knowcode/doc-builder documentation sites using Supabase.">
|
|
19
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
20
|
+
<meta property="og:site_name" content="@knowcode/doc-builder">
|
|
21
|
+
<meta property="og:locale" content="en_US">
|
|
22
|
+
|
|
23
|
+
<!-- Twitter Card -->
|
|
24
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
25
|
+
<meta name="twitter:site" content="@planbbackups">
|
|
26
|
+
<meta name="twitter:creator" content="@planbbackups">
|
|
27
|
+
<meta name="twitter:title" content="Supabase Authentication Setup Guide | @knowcode/doc-builder">
|
|
28
|
+
<meta name="twitter:description" content="Complete guide for setting up secure authentication for your @knowcode/doc-builder documentation sites using Supabase.">
|
|
29
|
+
<meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
30
|
+
|
|
31
|
+
<!-- Custom Meta Tags -->
|
|
32
|
+
<meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
|
|
33
|
+
<meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
|
|
34
|
+
|
|
35
|
+
<!-- Fonts -->
|
|
36
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
37
|
+
|
|
38
|
+
<!-- Icons -->
|
|
39
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
41
|
+
|
|
42
|
+
<!-- Mermaid -->
|
|
43
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
44
|
+
|
|
45
|
+
<!-- Styles -->
|
|
46
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
<!-- Hide content until auth check -->
|
|
50
|
+
<style>
|
|
51
|
+
body {
|
|
52
|
+
visibility: hidden;
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transition: opacity 0.3s ease;
|
|
55
|
+
}
|
|
56
|
+
body.authenticated {
|
|
57
|
+
visibility: visible;
|
|
58
|
+
opacity: 1;
|
|
59
|
+
}
|
|
60
|
+
/* Show login/logout pages immediately */
|
|
61
|
+
body.auth-page {
|
|
62
|
+
visibility: visible;
|
|
63
|
+
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
/* Style auth button consistently */
|
|
66
|
+
.auth-btn {
|
|
67
|
+
background: none;
|
|
68
|
+
border: none;
|
|
69
|
+
color: var(--text-secondary);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
padding: 0.5rem;
|
|
72
|
+
border-radius: 0.5rem;
|
|
73
|
+
transition: all 0.2s;
|
|
74
|
+
font-size: 1.1rem;
|
|
75
|
+
}
|
|
76
|
+
.auth-btn:hover {
|
|
77
|
+
background: var(--bg-secondary);
|
|
78
|
+
color: var(--text-primary);
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
<!-- Favicon -->
|
|
84
|
+
<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>">
|
|
85
|
+
|
|
86
|
+
<script type="application/ld+json">
|
|
87
|
+
{
|
|
88
|
+
"@context": "https://schema.org",
|
|
89
|
+
"@type": "TechArticle",
|
|
90
|
+
"headline": "Supabase Authentication Setup Guide",
|
|
91
|
+
"description": "Complete guide for setting up secure authentication for your @knowcode/doc-builder documentation sites using Supabase.",
|
|
92
|
+
"author": {
|
|
93
|
+
"@type": "Person",
|
|
94
|
+
"name": "Lindsay Smith"
|
|
95
|
+
},
|
|
96
|
+
"publisher": {
|
|
97
|
+
"@type": "Organization",
|
|
98
|
+
"name": "Knowcode Ltd",
|
|
99
|
+
"url": "https://knowcode.tech"
|
|
100
|
+
},
|
|
101
|
+
"datePublished": "2025-07-26T10:20:52.442Z",
|
|
102
|
+
"dateModified": "2025-07-26T10:20:52.442Z",
|
|
103
|
+
"mainEntityOfPage": {
|
|
104
|
+
"@type": "WebPage",
|
|
105
|
+
"@id": "https://doc-builder-delta.vercel.app/private/supabase-auth-setup-guide.html"
|
|
106
|
+
},
|
|
107
|
+
"breadcrumb": {
|
|
108
|
+
"@type": "BreadcrumbList",
|
|
109
|
+
"itemListElement": [
|
|
110
|
+
{
|
|
111
|
+
"@type": "ListItem",
|
|
112
|
+
"position": 1,
|
|
113
|
+
"name": "@knowcode/doc-builder",
|
|
114
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"@type": "ListItem",
|
|
118
|
+
"position": 2,
|
|
119
|
+
"name": "Private",
|
|
120
|
+
"item": "https://doc-builder-delta.vercel.app/private/"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"@type": "ListItem",
|
|
124
|
+
"position": 3,
|
|
125
|
+
"name": "Supabase Auth Setup Guide",
|
|
126
|
+
"item": "https://doc-builder-delta.vercel.app/private/supabase-auth-setup-guide.html"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
132
|
+
</head>
|
|
133
|
+
<body>
|
|
134
|
+
<!-- Header -->
|
|
135
|
+
<header class="header">
|
|
136
|
+
<div class="header-content">
|
|
137
|
+
<a href="/index.html" class="logo">@knowcode/doc-builder</a>
|
|
138
|
+
|
|
139
|
+
<div class="header-actions">
|
|
140
|
+
<div class="deployment-info">
|
|
141
|
+
<span class="deployment-date" title="Built with doc-builder v1.8.0">Last updated: Jul 26, 2025, 10:20 AM UTC</span>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
+
</a>
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
151
|
+
<i class="fas fa-moon"></i>
|
|
152
|
+
</button>
|
|
153
|
+
|
|
154
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
155
|
+
<i class="fas fa-bars"></i>
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</header>
|
|
160
|
+
|
|
161
|
+
<!-- Preview Banner -->
|
|
162
|
+
<div id="preview-banner" class="preview-banner">
|
|
163
|
+
<div class="banner-content">
|
|
164
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
165
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
166
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
167
|
+
<i class="fas fa-times"></i>
|
|
168
|
+
</button>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<!-- Breadcrumbs -->
|
|
173
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
174
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
175
|
+
</nav>
|
|
176
|
+
|
|
177
|
+
<!-- Main Content -->
|
|
178
|
+
<div class="main-wrapper">
|
|
179
|
+
<!-- Sidebar -->
|
|
180
|
+
<aside class="sidebar">
|
|
181
|
+
<div class="sidebar-header">
|
|
182
|
+
<div class="filter-box">
|
|
183
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
184
|
+
<i class="fas fa-search filter-icon"></i>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
<nav class="navigation">
|
|
188
|
+
|
|
189
|
+
<div class="nav-section" data-level="0">
|
|
190
|
+
<a class="nav-title" href="/README.html" >
|
|
191
|
+
<i class="fas fa-home"></i> Documentation
|
|
192
|
+
</a>
|
|
193
|
+
<div class="nav-content" >
|
|
194
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
195
|
+
<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="fas fa-file-alt"></i> Documentation Index</a>
|
|
196
|
+
<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="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
197
|
+
<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="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
198
|
+
<div class="nav-section" data-level="1">
|
|
199
|
+
<a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
|
|
200
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
201
|
+
</a>
|
|
202
|
+
<div class="nav-content collapsed" id="nav-guides-1">
|
|
203
|
+
<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="fas fa-file-alt"></i> Authentication Default Change</a>
|
|
204
|
+
<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="fas fa-file-alt"></i> Authentication Guide</a>
|
|
205
|
+
<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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
206
|
+
<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="fas fa-file-alt"></i> Documentation Standards</a>
|
|
207
|
+
<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="fas fa-file-alt"></i> Phosphor Icons Guide</a>
|
|
208
|
+
<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="fas fa-file-alt"></i> Private Directory Authentication</a>
|
|
209
|
+
<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="fas fa-file-alt"></i> Public Site Deployment</a>
|
|
210
|
+
<a href="/guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="fas fa-file-alt"></i> Search Engine Verification Guide</a>
|
|
211
|
+
<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="fas fa-file-alt"></i> Seo Guide</a>
|
|
212
|
+
<a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
|
|
213
|
+
<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="fas fa-file-alt"></i> Troubleshooting Guide</a>
|
|
214
|
+
<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="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
|
|
215
|
+
<div class="nav-section" data-level="1">
|
|
216
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-private-1" >
|
|
217
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
218
|
+
</a>
|
|
219
|
+
<div class="nav-content" id="nav-private-1">
|
|
220
|
+
<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="fas fa-file-alt"></i> Cache Control Anti Pattern</a>
|
|
221
|
+
<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="fas fa-file-alt"></i> Next Steps Walkthrough</a>
|
|
222
|
+
<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="fas fa-file-alt"></i> Supabase Auth Implementation Completed</a>
|
|
223
|
+
<a href="/private/supabase-auth-implementation-plan.html" class="nav-item" data-tooltip="Supabase Auth Implementation Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Implementation Plan</a>
|
|
224
|
+
<a href="/private/supabase-auth-integration-plan.html" class="nav-item" data-tooltip="Supabase Authentication Integration Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Integration Plan</a>
|
|
225
|
+
<a href="/private/supabase-auth-setup-guide.html" class="nav-item active" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
|
|
226
|
+
<a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a></div></div>
|
|
227
|
+
<div class="nav-section" data-level="2">
|
|
228
|
+
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
229
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
230
|
+
</a>
|
|
231
|
+
<div class="nav-content collapsed" id="nav-private-launch-2">
|
|
232
|
+
<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="fas fa-file-alt"></i> Launch Overview</a>
|
|
233
|
+
<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="fas fa-file-alt"></i> Auth Cleanup Summary</a>
|
|
234
|
+
<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="fas fa-file-alt"></i> Bubble Plugin Specification</a>
|
|
235
|
+
<a href="/private/launch/go-to-market-strategy.html" class="nav-item" data-tooltip="Go-to-Market Strategy & Product Launch Plan."><i class="fas fa-file-alt"></i> Go To Market Strategy</a>
|
|
236
|
+
<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="fas fa-file-alt"></i> Launch Announcements</a>
|
|
237
|
+
<a href="/private/launch/vercel-deployment-auth-setup.html" class="nav-item" data-tooltip="Vercel Deployment Authentication Setup Guide."><i class="fas fa-file-alt"></i> Vercel Deployment Auth Setup</a></div></div>
|
|
238
|
+
</nav>
|
|
239
|
+
<div class="resize-handle"></div>
|
|
240
|
+
</aside>
|
|
241
|
+
|
|
242
|
+
<!-- Content Area -->
|
|
243
|
+
<main class="content">
|
|
244
|
+
<div class="content-inner">
|
|
245
|
+
<h1>Supabase Authentication Setup Guide</h1>
|
|
246
|
+
<p>Complete guide for setting up secure authentication for your @knowcode/doc-builder documentation sites using Supabase.</p>
|
|
247
|
+
<h2>Overview</h2>
|
|
248
|
+
<p>@knowcode/doc-builder supports enterprise-grade authentication through Supabase. This provides:</p>
|
|
249
|
+
<ul>
|
|
250
|
+
<li><strong>Secure authentication</strong> with industry-standard security practices</li>
|
|
251
|
+
<li><strong>Multi-site support</strong> - one account can access multiple documentation sites</li>
|
|
252
|
+
<li><strong>User management</strong> through CLI commands</li>
|
|
253
|
+
<li><strong>Password reset</strong> functionality built-in</li>
|
|
254
|
+
<li><strong>Enterprise features</strong> like audit logging and access control</li>
|
|
255
|
+
</ul>
|
|
256
|
+
<h2>Prerequisites</h2>
|
|
257
|
+
<ol>
|
|
258
|
+
<li><strong>Supabase Account</strong>: Create a free account at <a href="https://supabase.com">supabase.com</a></li>
|
|
259
|
+
<li><strong>Node.js 14+</strong>: Required for @knowcode/doc-builder</li>
|
|
260
|
+
<li><strong>Basic SQL knowledge</strong>: For database setup</li>
|
|
261
|
+
</ol>
|
|
262
|
+
<h2>Step 1: Create Supabase Project</h2>
|
|
263
|
+
<ol>
|
|
264
|
+
<li>Go to <a href="https://app.supabase.com">app.supabase.com</a></li>
|
|
265
|
+
<li>Click "New Project"</li>
|
|
266
|
+
<li>Choose your organization</li>
|
|
267
|
+
<li>Enter project name and database password</li>
|
|
268
|
+
<li>Select a region close to your users</li>
|
|
269
|
+
<li>Click "Create new project"</li>
|
|
270
|
+
</ol>
|
|
271
|
+
<p>Wait for the project to be created (usually 1-2 minutes).</p>
|
|
272
|
+
<h2>Step 2: Create Database Tables</h2>
|
|
273
|
+
<p>In your Supabase dashboard, go to <strong>SQL Editor</strong> and run this SQL:</p>
|
|
274
|
+
<pre><code class="language-sql">-- Table 1: Documentation sites
|
|
275
|
+
CREATE TABLE docbuilder_sites (
|
|
276
|
+
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
277
|
+
domain TEXT UNIQUE NOT NULL,
|
|
278
|
+
name TEXT NOT NULL,
|
|
279
|
+
created_at TIMESTAMPTZ DEFAULT NOW()
|
|
280
|
+
);
|
|
281
|
+
|
|
282
|
+
-- Table 2: User access mapping
|
|
283
|
+
CREATE TABLE docbuilder_access (
|
|
284
|
+
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
|
|
285
|
+
site_id UUID REFERENCES docbuilder_sites(id) ON DELETE CASCADE,
|
|
286
|
+
created_at TIMESTAMPTZ DEFAULT NOW(),
|
|
287
|
+
PRIMARY KEY (user_id, site_id)
|
|
288
|
+
);
|
|
289
|
+
|
|
290
|
+
-- Enable Row Level Security
|
|
291
|
+
ALTER TABLE docbuilder_sites ENABLE ROW LEVEL SECURITY;
|
|
292
|
+
ALTER TABLE docbuilder_access ENABLE ROW LEVEL SECURITY;
|
|
293
|
+
|
|
294
|
+
-- RLS Policy: Users can only see sites they have access to
|
|
295
|
+
CREATE POLICY "Users see accessible sites" ON docbuilder_sites
|
|
296
|
+
FOR SELECT USING (
|
|
297
|
+
EXISTS (
|
|
298
|
+
SELECT 1 FROM docbuilder_access
|
|
299
|
+
WHERE site_id = docbuilder_sites.id
|
|
300
|
+
AND user_id = auth.uid()
|
|
301
|
+
)
|
|
302
|
+
);
|
|
303
|
+
|
|
304
|
+
-- RLS Policy: Users can see their own access
|
|
305
|
+
CREATE POLICY "Users see own access" ON docbuilder_access
|
|
306
|
+
FOR SELECT USING (user_id = auth.uid());
|
|
307
|
+
</code></pre>
|
|
308
|
+
<h2>Step 3: Get Supabase Credentials</h2>
|
|
309
|
+
<ol>
|
|
310
|
+
<li>In your Supabase dashboard, go to <strong>Settings</strong> → <strong>API</strong></li>
|
|
311
|
+
<li>Copy these values:<ul>
|
|
312
|
+
<li><strong>Project URL</strong> (looks like <code>https://xxx.supabase.co</code>)</li>
|
|
313
|
+
<li><strong>Anon/Public Key</strong> (starts with <code>eyJ...</code>)</li>
|
|
314
|
+
</ul>
|
|
315
|
+
</li>
|
|
316
|
+
</ol>
|
|
317
|
+
<p><i class="ph ph-warning-circle" aria-label="warning"></i> <strong>Never share your service role key</strong> - only use the anon/public key for doc-builder.</p>
|
|
318
|
+
<h2>Step 4: Initialize Authentication</h2>
|
|
319
|
+
<p>Run the initialization command in your documentation project:</p>
|
|
320
|
+
<pre><code class="language-bash">npx @knowcode/doc-builder auth:init
|
|
321
|
+
</code></pre>
|
|
322
|
+
<p>This will prompt you for:</p>
|
|
323
|
+
<ul>
|
|
324
|
+
<li>Your Supabase project URL</li>
|
|
325
|
+
<li>Your Supabase anonymous key </li>
|
|
326
|
+
<li>A name for your documentation site</li>
|
|
327
|
+
</ul>
|
|
328
|
+
<p>It creates a <code>doc-builder.config.js</code> file like this:</p>
|
|
329
|
+
<pre><code class="language-javascript">module.exports = {
|
|
330
|
+
siteName: 'My Documentation',
|
|
331
|
+
|
|
332
|
+
features: {
|
|
333
|
+
authentication: 'supabase'
|
|
334
|
+
},
|
|
335
|
+
|
|
336
|
+
auth: {
|
|
337
|
+
supabaseUrl: 'https://xxx.supabase.co',
|
|
338
|
+
supabaseAnonKey: 'eyJ...',
|
|
339
|
+
siteId: '' // Will be set in next step
|
|
340
|
+
}
|
|
341
|
+
};
|
|
342
|
+
</code></pre>
|
|
343
|
+
<h2>Step 5: Add Your Site to Database</h2>
|
|
344
|
+
<h3>Option A: Using SQL (Recommended)</h3>
|
|
345
|
+
<p>In Supabase SQL Editor, run:</p>
|
|
346
|
+
<pre><code class="language-sql">INSERT INTO docbuilder_sites (domain, name)
|
|
347
|
+
VALUES ('docs.yourcompany.com', 'Company Documentation')
|
|
348
|
+
RETURNING id;
|
|
349
|
+
</code></pre>
|
|
350
|
+
<p>Copy the returned ID and update your config file's <code>siteId</code> field.</p>
|
|
351
|
+
<h3>Option B: Using CLI (Coming Soon)</h3>
|
|
352
|
+
<pre><code class="language-bash">npx @knowcode/doc-builder auth:add-site \
|
|
353
|
+
--domain docs.yourcompany.com \
|
|
354
|
+
--name "Company Documentation"
|
|
355
|
+
</code></pre>
|
|
356
|
+
<h2>Step 6: Create Your First User</h2>
|
|
357
|
+
<h3>Method 1: Through Supabase Dashboard</h3>
|
|
358
|
+
<ol>
|
|
359
|
+
<li>Go to <strong>Authentication</strong> → <strong>Users</strong> in Supabase</li>
|
|
360
|
+
<li>Click "Add User"</li>
|
|
361
|
+
<li>Enter email and password</li>
|
|
362
|
+
<li>Click "Create User"</li>
|
|
363
|
+
<li>Copy the user ID from the users table</li>
|
|
364
|
+
</ol>
|
|
365
|
+
<h3>Method 2: Through Your App (Recommended)</h3>
|
|
366
|
+
<p>Users can sign up when they visit your documentation site and try to log in.</p>
|
|
367
|
+
<h2>Step 7: Grant User Access</h2>
|
|
368
|
+
<h3>Using SQL:</h3>
|
|
369
|
+
<pre><code class="language-sql">-- Replace with actual user ID and site ID
|
|
370
|
+
INSERT INTO docbuilder_access (user_id, site_id)
|
|
371
|
+
VALUES ('user-uuid-here', 'site-uuid-here');
|
|
372
|
+
</code></pre>
|
|
373
|
+
<h3>Using CLI (Coming Soon):</h3>
|
|
374
|
+
<pre><code class="language-bash">npx @knowcode/doc-builder auth:grant \
|
|
375
|
+
--email user@example.com \
|
|
376
|
+
--site-id your-site-uuid
|
|
377
|
+
</code></pre>
|
|
378
|
+
<h2>Step 8: Build and Deploy</h2>
|
|
379
|
+
<pre><code class="language-bash"># Build with Supabase authentication
|
|
380
|
+
npx @knowcode/doc-builder build
|
|
381
|
+
|
|
382
|
+
# Deploy to Vercel
|
|
383
|
+
npx @knowcode/doc-builder deploy
|
|
384
|
+
</code></pre>
|
|
385
|
+
<p>Your documentation site now has secure authentication! <i class="ph ph-confetti" aria-label="party"></i></p>
|
|
386
|
+
<h2>User Management</h2>
|
|
387
|
+
<h3>List Users with Access</h3>
|
|
388
|
+
<pre><code class="language-sql">SELECT u.email, da.created_at as granted_at
|
|
389
|
+
FROM docbuilder_access da
|
|
390
|
+
JOIN auth.users u ON u.id = da.user_id
|
|
391
|
+
WHERE da.site_id = 'your-site-id';
|
|
392
|
+
</code></pre>
|
|
393
|
+
<h3>Revoke Access</h3>
|
|
394
|
+
<pre><code class="language-sql">DELETE FROM docbuilder_access
|
|
395
|
+
WHERE user_id = (SELECT id FROM auth.users WHERE email = 'user@example.com')
|
|
396
|
+
AND site_id = 'your-site-id';
|
|
397
|
+
</code></pre>
|
|
398
|
+
<h3>Reset User Password</h3>
|
|
399
|
+
<p>Users can reset their own passwords through the login page "Forgot Password" link.</p>
|
|
400
|
+
<h2>Environment Variables (Optional)</h2>
|
|
401
|
+
<p>For better security, use environment variables:</p>
|
|
402
|
+
<pre><code class="language-bash"># .env
|
|
403
|
+
SUPABASE_URL=https://xxx.supabase.co
|
|
404
|
+
SUPABASE_ANON_KEY=eyJ...
|
|
405
|
+
DOC_SITE_ID=your-site-uuid
|
|
406
|
+
</code></pre>
|
|
407
|
+
<p>Update your config:</p>
|
|
408
|
+
<pre><code class="language-javascript">module.exports = {
|
|
409
|
+
auth: {
|
|
410
|
+
supabaseUrl: process.env.SUPABASE_URL,
|
|
411
|
+
supabaseAnonKey: process.env.SUPABASE_ANON_KEY,
|
|
412
|
+
siteId: process.env.DOC_SITE_ID
|
|
413
|
+
}
|
|
414
|
+
};
|
|
415
|
+
</code></pre>
|
|
416
|
+
<h2>Multi-Site Setup</h2>
|
|
417
|
+
<p>To use one Supabase project for multiple documentation sites:</p>
|
|
418
|
+
<ol>
|
|
419
|
+
<li>Add each site to the database:</li>
|
|
420
|
+
</ol>
|
|
421
|
+
<pre><code class="language-sql">INSERT INTO docbuilder_sites (domain, name) VALUES
|
|
422
|
+
('docs.product1.com', 'Product 1 Docs'),
|
|
423
|
+
('internal.company.com', 'Internal Docs'),
|
|
424
|
+
('api.company.com', 'API Documentation');
|
|
425
|
+
</code></pre>
|
|
426
|
+
<ol start="2">
|
|
427
|
+
<li><p>Create separate config files for each site with different <code>siteId</code> values</p>
|
|
428
|
+
</li>
|
|
429
|
+
<li><p>Grant users access to specific sites:</p>
|
|
430
|
+
</li>
|
|
431
|
+
</ol>
|
|
432
|
+
<pre><code class="language-sql">-- User can access both Product 1 and Internal docs
|
|
433
|
+
INSERT INTO docbuilder_access (user_id, site_id) VALUES
|
|
434
|
+
('user-uuid', 'product1-site-uuid'),
|
|
435
|
+
('user-uuid', 'internal-site-uuid');
|
|
436
|
+
</code></pre>
|
|
437
|
+
<h2>Security Features</h2>
|
|
438
|
+
<h3>What Supabase Provides</h3>
|
|
439
|
+
<ul>
|
|
440
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Password hashing</strong> with bcrypt</li>
|
|
441
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>JWT tokens</strong> with automatic refresh</li>
|
|
442
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Session management</strong> with secure cookies</li>
|
|
443
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Rate limiting</strong> on authentication endpoints</li>
|
|
444
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Email verification</strong> (optional)</li>
|
|
445
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Password reset</strong> flows</li>
|
|
446
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Multi-factor authentication</strong> (optional)</li>
|
|
447
|
+
</ul>
|
|
448
|
+
<h3>Row Level Security</h3>
|
|
449
|
+
<p>All data access is protected by RLS policies:</p>
|
|
450
|
+
<ul>
|
|
451
|
+
<li>Users can only see sites they have access to</li>
|
|
452
|
+
<li>Users can only see their own access records</li>
|
|
453
|
+
<li>No way to access other users' data</li>
|
|
454
|
+
</ul>
|
|
455
|
+
<h2>Troubleshooting</h2>
|
|
456
|
+
<h3>"Invalid JWT" Errors</h3>
|
|
457
|
+
<ul>
|
|
458
|
+
<li>Check that your Supabase URL and anon key are correct</li>
|
|
459
|
+
<li>Ensure you're using the anon key, not the service role key</li>
|
|
460
|
+
<li>Clear browser cookies and try again</li>
|
|
461
|
+
</ul>
|
|
462
|
+
<h3>Users Can't Access Site</h3>
|
|
463
|
+
<ul>
|
|
464
|
+
<li>Verify the user exists in <code>auth.users</code> table</li>
|
|
465
|
+
<li>Check that user has access in <code>docbuilder_access</code> table </li>
|
|
466
|
+
<li>Confirm the <code>site_id</code> matches your config</li>
|
|
467
|
+
</ul>
|
|
468
|
+
<h3>Login Page Not Working</h3>
|
|
469
|
+
<ul>
|
|
470
|
+
<li>Check browser console for JavaScript errors</li>
|
|
471
|
+
<li>Verify Supabase credentials in generated HTML</li>
|
|
472
|
+
<li>Ensure Supabase project is not paused</li>
|
|
473
|
+
</ul>
|
|
474
|
+
<h3>Build Errors</h3>
|
|
475
|
+
<ul>
|
|
476
|
+
<li>Run <code>npm install @supabase/supabase-js</code> if missing</li>
|
|
477
|
+
<li>Check that config file has all required fields</li>
|
|
478
|
+
<li>Validate Supabase URL format (must be <a href="https://xxx.supabase.co">https://xxx.supabase.co</a>)</li>
|
|
479
|
+
</ul>
|
|
480
|
+
<h2>Security Best Practices</h2>
|
|
481
|
+
<p>When using Supabase authentication:</p>
|
|
482
|
+
<ol>
|
|
483
|
+
<li><strong>Use environment variables</strong> - Store credentials securely</li>
|
|
484
|
+
<li><strong>Enable RLS</strong> - Always use Row Level Security on tables</li>
|
|
485
|
+
<li><strong>Regular audits</strong> - Review user access permissions</li>
|
|
486
|
+
<li><strong>Monitor logs</strong> - Check Supabase dashboard for anomalies</li>
|
|
487
|
+
<li><strong>Stay updated</strong> - Keep @knowcode/doc-builder and dependencies current</li>
|
|
488
|
+
</ol>
|
|
489
|
+
<h2>Advanced Configuration</h2>
|
|
490
|
+
<h3>Custom Login Styling</h3>
|
|
491
|
+
<p>Customize the login page by modifying the generated CSS:</p>
|
|
492
|
+
<pre><code class="language-css">.auth-container {
|
|
493
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.auth-box {
|
|
497
|
+
backdrop-filter: blur(10px);
|
|
498
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
499
|
+
}
|
|
500
|
+
</code></pre>
|
|
501
|
+
<h3>OAuth Providers</h3>
|
|
502
|
+
<p>Enable social login in Supabase:</p>
|
|
503
|
+
<ol>
|
|
504
|
+
<li>Go to <strong>Authentication</strong> → <strong>Providers</strong></li>
|
|
505
|
+
<li>Enable Google, GitHub, etc.</li>
|
|
506
|
+
<li>Configure OAuth settings</li>
|
|
507
|
+
<li>Users can then sign in with social accounts</li>
|
|
508
|
+
</ol>
|
|
509
|
+
<p>No changes needed in doc-builder - it automatically supports all Supabase auth providers.</p>
|
|
510
|
+
<h2>Support</h2>
|
|
511
|
+
<ul>
|
|
512
|
+
<li><strong>Documentation Issues</strong>: <a href="https://github.com/wapdat/doc-builder/issues">GitHub Issues</a></li>
|
|
513
|
+
<li><strong>Supabase Help</strong>: <a href="https://supabase.com/docs">Supabase Docs</a></li>
|
|
514
|
+
<li><strong>Authentication Guides</strong>: <a href="https://supabase.com/docs/guides/auth">Supabase Auth</a></li>
|
|
515
|
+
</ul>
|
|
516
|
+
<h2>Summary</h2>
|
|
517
|
+
<p>You now have secure, enterprise-grade authentication for your documentation! Key benefits:</p>
|
|
518
|
+
<ol>
|
|
519
|
+
<li><strong>No more client-side credentials</strong> - everything is server-validated</li>
|
|
520
|
+
<li><strong>Multi-site support</strong> - one account for all your docs</li>
|
|
521
|
+
<li><strong>Professional features</strong> - password reset, session management</li>
|
|
522
|
+
<li><strong>Scalable</strong> - handles teams of any size</li>
|
|
523
|
+
<li><strong>Free tier</strong> - supports up to 50,000 monthly active users</li>
|
|
524
|
+
</ol>
|
|
525
|
+
<p>Your documentation is now properly secured while maintaining the simplicity that makes @knowcode/doc-builder great to use.</p>
|
|
526
|
+
|
|
527
|
+
</div>
|
|
528
|
+
</main>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<!-- Scripts -->
|
|
532
|
+
<script>
|
|
533
|
+
// Pass configuration to frontend
|
|
534
|
+
window.docBuilderConfig = {
|
|
535
|
+
features: {
|
|
536
|
+
showPdfDownload: true,
|
|
537
|
+
menuDefaultOpen: false
|
|
538
|
+
}
|
|
539
|
+
};
|
|
540
|
+
</script>
|
|
541
|
+
<script src="/js/main.js"></script>
|
|
542
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
543
|
+
<script src="/js/auth.js"></script>
|
|
544
|
+
</body>
|
|
545
|
+
</html>
|