better-auth-studio 1.0.5 → 1.0.7

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.
Files changed (44) hide show
  1. package/package.json +8 -1
  2. package/frontend/index.html +0 -13
  3. package/frontend/package-lock.json +0 -4675
  4. package/frontend/package.json +0 -52
  5. package/frontend/pnpm-lock.yaml +0 -4020
  6. package/frontend/postcss.config.js +0 -6
  7. package/frontend/src/App.tsx +0 -36
  8. package/frontend/src/components/CommandPalette.tsx +0 -219
  9. package/frontend/src/components/Layout.tsx +0 -159
  10. package/frontend/src/components/ui/badge.tsx +0 -40
  11. package/frontend/src/components/ui/button.tsx +0 -53
  12. package/frontend/src/components/ui/card.tsx +0 -78
  13. package/frontend/src/components/ui/input.tsx +0 -20
  14. package/frontend/src/components/ui/label.tsx +0 -19
  15. package/frontend/src/components/ui/select.tsx +0 -71
  16. package/frontend/src/index.css +0 -130
  17. package/frontend/src/lib/utils.ts +0 -6
  18. package/frontend/src/main.tsx +0 -10
  19. package/frontend/src/pages/Dashboard.tsx +0 -231
  20. package/frontend/src/pages/OrganizationDetails.tsx +0 -1281
  21. package/frontend/src/pages/Organizations.tsx +0 -874
  22. package/frontend/src/pages/Sessions.tsx +0 -623
  23. package/frontend/src/pages/Settings.tsx +0 -1019
  24. package/frontend/src/pages/TeamDetails.tsx +0 -666
  25. package/frontend/src/pages/Users.tsx +0 -728
  26. package/frontend/tailwind.config.js +0 -75
  27. package/frontend/tsconfig.json +0 -31
  28. package/frontend/tsconfig.node.json +0 -10
  29. package/frontend/vite.config.ts +0 -31
  30. package/src/auth-adapter.ts +0 -473
  31. package/src/cli.ts +0 -51
  32. package/src/config.ts +0 -320
  33. package/src/data.ts +0 -351
  34. package/src/routes.ts +0 -1585
  35. package/src/studio.ts +0 -86
  36. package/test-project/README.md +0 -0
  37. package/test-project/better-auth.db +0 -0
  38. package/test-project/better-auth_migrations/2025-08-27T15-55-04.099Z.sql +0 -7
  39. package/test-project/better-auth_migrations/2025-09-04T02-33-19.422Z.sql +0 -7
  40. package/test-project/package.json +0 -29
  41. package/test-project/pnpm-lock.yaml +0 -1728
  42. package/test-project/src/auth.ts +0 -47
  43. package/test-project/src/index.ts +0 -40
  44. package/tsconfig.json +0 -21
@@ -1,71 +0,0 @@
1
- import * as React from "react"
2
- import { ChevronDown } from "lucide-react"
3
-
4
- export interface SelectProps
5
- extends React.SelectHTMLAttributes<HTMLSelectElement> {}
6
-
7
- const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
8
- ({ className, children, ...props }, ref) => {
9
- return (
10
- <div className="relative">
11
- <select
12
- className={`flex h-10 w-full border border-dashed border-white/20 bg-black/30 px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-white focus:border-white/40 disabled:cursor-not-allowed disabled:opacity-50 rounded-none appearance-none pr-8 ${className}`}
13
- ref={ref}
14
- {...props}
15
- >
16
- {children}
17
- </select>
18
- <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
19
- </div>
20
- )
21
- }
22
- )
23
- Select.displayName = "Select"
24
-
25
- const SelectContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
26
- ({ className, ...props }, ref) => (
27
- <div
28
- ref={ref}
29
- className={`border border-dashed border-white/20 bg-black/30 rounded-none ${className}`}
30
- {...props}
31
- />
32
- )
33
- )
34
- SelectContent.displayName = "SelectContent"
35
-
36
- const SelectItem = React.forwardRef<HTMLOptionElement, React.OptionHTMLAttributes<HTMLOptionElement>>(
37
- ({ className, ...props }, ref) => (
38
- <option
39
- ref={ref}
40
- className={`px-3 py-2 text-sm text-white hover:bg-white/10 ${className}`}
41
- {...props}
42
- />
43
- )
44
- )
45
- SelectItem.displayName = "SelectItem"
46
-
47
- const SelectTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
48
- ({ className, children, ...props }, ref) => (
49
- <button
50
- ref={ref}
51
- className={`flex h-10 w-full border border-dashed border-white/20 bg-black/30 px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-white focus:border-white/40 disabled:cursor-not-allowed disabled:opacity-50 rounded-none ${className}`}
52
- {...props}
53
- >
54
- {children}
55
- </button>
56
- )
57
- )
58
- SelectTrigger.displayName = "SelectTrigger"
59
-
60
- const SelectValue = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
61
- ({ className, ...props }, ref) => (
62
- <span
63
- ref={ref}
64
- className={`text-sm text-white ${className}`}
65
- {...props}
66
- />
67
- )
68
- )
69
- SelectValue.displayName = "SelectValue"
70
-
71
- export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue }
@@ -1,130 +0,0 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
2
-
3
- @tailwind base;
4
- @tailwind components;
5
- @tailwind utilities;
6
-
7
- @layer base {
8
- :root {
9
- --background: 0 0% 0%;
10
- --foreground: 0 0% 100%;
11
- --card: 0 0% 3%;
12
- --card-foreground: 0 0% 100%;
13
- --popover: 0 0% 3%;
14
- --popover-foreground: 0 0% 100%;
15
- --primary: 0 0% 100%;
16
- --primary-foreground: 0 0% 0%;
17
- --secondary: 0 0% 3%;
18
- --secondary-foreground: 0 0% 100%;
19
- --muted: 0 0% 3%;
20
- --muted-foreground: 0 0% 100%;
21
- --accent: 0 0% 3%;
22
- --accent-foreground: 0 0% 100%;
23
- --destructive: 0 62.8% 30.6%;
24
- --destructive-foreground: 0 0% 100%;
25
- --border: 0 0% 15%;
26
- --input: 0 0% 3%;
27
- --ring: 0 0% 100%;
28
- --radius: 0.5rem;
29
- }
30
-
31
- .light {
32
- --background: 0 0% 100%;
33
- --foreground: 0 0% 0%;
34
- --card: 0 0% 100%;
35
- --card-foreground: 0 0% 0%;
36
- --popover: 0 0% 100%;
37
- --popover-foreground: 0 0% 0%;
38
- --primary: 0 0% 0%;
39
- --primary-foreground: 0 0% 100%;
40
- --secondary: 0 0% 100%;
41
- --secondary-foreground: 0 0% 0%;
42
- --muted: 0 0% 100%;
43
- --muted-foreground: 0 0% 0%;
44
- --accent: 0 0% 100%;
45
- --accent-foreground: 0 0% 0%;
46
- --destructive: 0 84.2% 60.2%;
47
- --destructive-foreground: 0 0% 100%;
48
- --border: 0 0% 0%;
49
- --input: 0 0% 0%;
50
- --ring: 0 0% 0%;
51
- }
52
- }
53
-
54
- @layer base {
55
- * {
56
- @apply border-border;
57
- }
58
-
59
- body {
60
- @apply bg-background text-foreground font-sans;
61
- font-feature-settings: "rlig" 1, "calt" 1;
62
- background: #000000;
63
- color: #ffffff;
64
- font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
65
- }
66
-
67
- /* Custom scrollbar for dark theme */
68
- ::-webkit-scrollbar {
69
- width: 6px;
70
- height: 6px;
71
- }
72
-
73
- ::-webkit-scrollbar-track {
74
- @apply bg-black;
75
- }
76
-
77
- ::-webkit-scrollbar-thumb {
78
- @apply bg-gray-400 rounded-full;
79
- }
80
-
81
- ::-webkit-scrollbar-thumb:hover {
82
- @apply bg-gray-300;
83
- }
84
- }
85
-
86
- @layer components {
87
- /* Pure black and white button styles */
88
- .btn-primary {
89
- @apply bg-white hover:bg-white text-black font-medium px-4 py-2 rounded-lg transition-colors duration-200;
90
- }
91
-
92
- .btn-secondary {
93
- @apply bg-gray-900 hover:bg-gray-900 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 border border-gray-600;
94
- }
95
-
96
- .btn-ghost {
97
- @apply hover:bg-gray-900 text-white hover:text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200;
98
- }
99
-
100
- /* Card styles for lighter dark theme */
101
- .card {
102
- @apply bg-gray-900 border border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200;
103
- }
104
-
105
- /* Input styles for lighter dark theme */
106
- .input {
107
- @apply w-full px-3 py-2 border border-gray-600 bg-gray-900 text-white rounded-lg focus:ring-2 focus:ring-white focus:border-transparent transition-colors duration-200;
108
- }
109
-
110
- /* Badge styles for lighter dark theme */
111
- .badge {
112
- @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
113
- }
114
-
115
- .badge-success {
116
- @apply bg-green-900 text-green-300;
117
- }
118
-
119
- .badge-warning {
120
- @apply bg-yellow-900 text-yellow-300;
121
- }
122
-
123
- .badge-error {
124
- @apply bg-red-900 text-red-300;
125
- }
126
-
127
- .badge-info {
128
- @apply bg-gray-800 text-white border border-gray-600;
129
- }
130
- }
@@ -1,6 +0,0 @@
1
- import { type ClassValue, clsx } from "clsx"
2
- import { twMerge } from "tailwind-merge"
3
-
4
- export function cn(...inputs: ClassValue[]) {
5
- return twMerge(clsx(inputs))
6
- }
@@ -1,10 +0,0 @@
1
- import React from 'react'
2
- import ReactDOM from 'react-dom/client'
3
- import App from './App.tsx'
4
- import './index.css'
5
-
6
- ReactDOM.createRoot(document.getElementById('root')!).render(
7
- <React.StrictMode>
8
- <App />
9
- </React.StrictMode>,
10
- )
@@ -1,231 +0,0 @@
1
- import { useState } from 'react'
2
- import {
3
- Users,
4
- Building2,
5
- Database,
6
- Settings,
7
- BarChart3,
8
- Zap,
9
- ArrowRight
10
- } from 'lucide-react'
11
- import { Card, CardContent } from '@/components/ui/card'
12
- import { Badge } from '@/components/ui/badge'
13
- import { Button } from '@/components/ui/button'
14
- import UsersPage from './Users'
15
- import OrganizationsPage from './Organizations'
16
- import SessionsPage from './Sessions'
17
-
18
- export default function Dashboard() {
19
- const [activeTab, setActiveTab] = useState('overview')
20
-
21
- const renderOverview = () => (
22
- <div className="space-y-8 animate-fade-in px-6 py-8">
23
- {/* Header */}
24
- <div>
25
- <h1 className="text-2xl text-white font-normal">Better Auth Studio</h1>
26
- <p className="text-gray-400 mt-1 font-light">Manage your authentication system</p>
27
- </div>
28
-
29
- {/* Action Cards */}
30
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
31
- {/* Users Card */}
32
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
33
- <CardContent className="p-6">
34
- <div className="flex items-center justify-between mb-4">
35
- <div className="p-3 bg-white/10 rounded-none">
36
- <Users className="w-6 h-6 text-white" />
37
- </div>
38
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
39
- Active
40
- </Badge>
41
- </div>
42
- <h3 className="text-lg text-white font-light mb-2">User Management</h3>
43
- <p className="text-gray-400 font-light mb-4">Manage user accounts, profiles, and permissions</p>
44
- <Button
45
- onClick={() => setActiveTab('users')}
46
- className="w-full bg-white hover:bg-white/90 text-black border border-white/20 rounded-none"
47
- >
48
- Manage Users
49
- <ArrowRight className="w-4 h-4 ml-2" />
50
- </Button>
51
- </CardContent>
52
- </Card>
53
-
54
- {/* Organizations Card */}
55
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
56
- <CardContent className="p-6">
57
- <div className="flex items-center justify-between mb-4">
58
- <div className="p-3 bg-white/10 rounded-none">
59
- <Building2 className="w-6 h-6 text-white" />
60
- </div>
61
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
62
- Active
63
- </Badge>
64
- </div>
65
- <h3 className="text-lg text-white font-light mb-2">Organizations</h3>
66
- <p className="text-gray-400 font-light mb-4">Manage organizations, teams, and memberships</p>
67
- <Button
68
- onClick={() => setActiveTab('organizations')}
69
- className="w-full bg-white hover:bg-white/90 text-black border border-white/20 rounded-none"
70
- >
71
- Manage Organizations
72
- <ArrowRight className="w-4 h-4 ml-2" />
73
- </Button>
74
- </CardContent>
75
- </Card>
76
-
77
- {/* Sessions Card */}
78
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
79
- <CardContent className="p-6">
80
- <div className="flex items-center justify-between mb-4">
81
- <div className="p-3 bg-white/10 rounded-none">
82
- <Database className="w-6 h-6 text-white" />
83
- </div>
84
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
85
- Active
86
- </Badge>
87
- </div>
88
- <h3 className="text-lg text-white font-light mb-2">Session Management</h3>
89
- <p className="text-gray-400 font-light mb-4">Monitor and manage user sessions</p>
90
- <Button
91
- onClick={() => setActiveTab('sessions')}
92
- className="w-full bg-white hover:bg-white/90 text-black border border-white/20 rounded-none"
93
- >
94
- Manage Sessions
95
- <ArrowRight className="w-4 h-4 ml-2" />
96
- </Button>
97
- </CardContent>
98
- </Card>
99
-
100
- {/* Configuration Card */}
101
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
102
- <CardContent className="p-6">
103
- <div className="flex items-center justify-between mb-4">
104
- <div className="p-3 bg-white/10 rounded-none">
105
- <Settings className="w-6 h-6 text-white" />
106
- </div>
107
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
108
- Configured
109
- </Badge>
110
- </div>
111
- <h3 className="text-lg text-white font-light mb-2">Configuration</h3>
112
- <p className="text-gray-400 font-light mb-4">View and manage auth configuration</p>
113
- <Button
114
- variant="outline"
115
- className="w-full border border-dashed border-white/20 text-white hover:bg-white/10 rounded-none"
116
- >
117
- View Config
118
- <ArrowRight className="w-4 h-4 ml-2" />
119
- </Button>
120
- </CardContent>
121
- </Card>
122
-
123
- {/* Analytics Card */}
124
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
125
- <CardContent className="p-6">
126
- <div className="flex items-center justify-between mb-4">
127
- <div className="p-3 bg-white/10 rounded-none">
128
- <BarChart3 className="w-6 h-6 text-white" />
129
- </div>
130
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
131
- Coming Soon
132
- </Badge>
133
- </div>
134
- <h3 className="text-lg text-white font-light mb-2">Analytics</h3>
135
- <p className="text-gray-400 font-light mb-4">View authentication analytics and insights</p>
136
- <Button
137
- variant="outline"
138
- disabled
139
- className="w-full border border-dashed border-white/20 text-gray-400 rounded-none"
140
- >
141
- View Analytics
142
- <ArrowRight className="w-4 h-4 ml-2" />
143
- </Button>
144
- </CardContent>
145
- </Card>
146
-
147
- {/* Quick Actions Card */}
148
- <Card className="border border-dashed border-white/20 bg-black/30 rounded-none hover:bg-black/50 transition-colors">
149
- <CardContent className="p-6">
150
- <div className="flex items-center justify-between mb-4">
151
- <div className="p-3 bg-white/10 rounded-none">
152
- <Zap className="w-6 h-6 text-white" />
153
- </div>
154
- <Badge className="bg-white/10 text-white border border-dashed border-white/20 rounded-none">
155
- Available
156
- </Badge>
157
- </div>
158
- <h3 className="text-lg text-white font-light mb-2">Quick Actions</h3>
159
- <p className="text-gray-400 font-light mb-4">Common tasks and shortcuts</p>
160
- <Button
161
- variant="outline"
162
- className="w-full border border-dashed border-white/20 text-white hover:bg-white/10 rounded-none"
163
- >
164
- View Actions
165
- <ArrowRight className="w-4 h-4 ml-2" />
166
- </Button>
167
- </CardContent>
168
- </Card>
169
- </div>
170
- </div>
171
- )
172
-
173
- return (
174
- <div className="min-h-screen bg-black text-white">
175
- {/* Navigation */}
176
- {/* <div className="border-b border-dashed border-white/10">
177
- <div className="px-6 py-4">
178
- <div className="flex items-center space-x-8">
179
- <button
180
- onClick={() => setActiveTab('overview')}
181
- className={`pb-3 px-1 border-b-2 font-light text-sm transition-colors ${
182
- activeTab === 'overview'
183
- ? 'border-white text-white'
184
- : 'border-transparent text-white/60 hover:text-white/80'
185
- }`}
186
- >
187
- Overview
188
- </button>
189
- <button
190
- onClick={() => setActiveTab('users')}
191
- className={`pb-3 px-1 border-b-2 font-light text-sm transition-colors ${
192
- activeTab === 'users'
193
- ? 'border-white text-white'
194
- : 'border-transparent text-white/60 hover:text-white/80'
195
- }`}
196
- >
197
- Users
198
- </button>
199
- <button
200
- onClick={() => setActiveTab('organizations')}
201
- className={`pb-3 px-1 border-b-2 font-light text-sm transition-colors ${
202
- activeTab === 'organizations'
203
- ? 'border-white text-white'
204
- : 'border-transparent text-white/60 hover:text-white/80'
205
- }`}
206
- >
207
- Organizations
208
- </button>
209
- <button
210
- onClick={() => setActiveTab('sessions')}
211
- className={`pb-3 px-1 border-b-2 font-light text-sm transition-colors ${
212
- activeTab === 'sessions'
213
- ? 'border-white text-white'
214
- : 'border-transparent text-white/60 hover:text-white/80'
215
- }`}
216
- >
217
- Sessions
218
- </button>
219
- </div>
220
- </div>
221
- </div> */}
222
-
223
- {/* Tab Content */}
224
- {activeTab === 'overview' ? renderOverview() :
225
- activeTab === 'users' ? <UsersPage /> :
226
- activeTab === 'organizations' ? <OrganizationsPage /> :
227
- activeTab === 'sessions' ? <SessionsPage /> :
228
- renderOverview()}
229
- </div>
230
- )
231
- }