@authhero/admin 0.1.0 → 0.1.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/README.md +99 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# @authhero/admin
|
|
2
|
+
|
|
3
|
+
The AuthHero admin UI — a Vite + React 19 SPA for managing tenants, users, applications, connections, roles, branding and more across one or many AuthHero deployments.
|
|
4
|
+
|
|
5
|
+
Built on `ra-core` (the headless half of react-admin) with [shadcn/ui](https://ui.shadcn.com/) and Tailwind v4. This app replaces the older `apps/react-admin`.
|
|
6
|
+
|
|
7
|
+
## Quick start
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# from the repo root
|
|
11
|
+
pnpm install
|
|
12
|
+
pnpm admin dev # starts on http://localhost:5173
|
|
13
|
+
|
|
14
|
+
# or from this directory
|
|
15
|
+
pnpm dev
|
|
16
|
+
pnpm build # production bundle in ./dist
|
|
17
|
+
pnpm type-check
|
|
18
|
+
pnpm test
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Configuration
|
|
22
|
+
|
|
23
|
+
The admin reads its configuration from two sources, in priority order:
|
|
24
|
+
|
|
25
|
+
1. **Runtime config** — `window.__AUTHHERO_ADMIN_CONFIG__` (injected by the host page before the bundle loads). Useful when the same static build is served to multiple environments.
|
|
26
|
+
2. **Build-time env vars** — `VITE_*` variables baked in at `pnpm build` time.
|
|
27
|
+
|
|
28
|
+
Both paths share the same keys, defined in [`src/utils/runtimeConfig.ts`](src/utils/runtimeConfig.ts).
|
|
29
|
+
|
|
30
|
+
### Settings
|
|
31
|
+
|
|
32
|
+
| Setting | Env var | Runtime key | Default | Description |
|
|
33
|
+
| --- | --- | --- | --- | --- |
|
|
34
|
+
| Auth0 domain | `VITE_AUTH0_DOMAIN` | `domain` | — | Tenant domain used by `@auth0/auth0-spa-js` to log the admin user in. When unset, the user is prompted to pick a domain on first load. |
|
|
35
|
+
| Auth0 client ID | `VITE_AUTH0_CLIENT_ID` | `clientId` | — | SPA application client ID for the admin itself. |
|
|
36
|
+
| Management API URL | `VITE_AUTH0_API_URL` | `apiUrl` | — | Base URL of the AuthHero management API (e.g. `https://auth.example.com`). |
|
|
37
|
+
| Auth0 audience | `VITE_AUTH0_AUDIENCE` | `audience` | — | Audience requested for the management API access token. |
|
|
38
|
+
| Base path | `VITE_BASE_PATH` | `basePath` | `""` | Sub-path the admin is served from (e.g. `/admin`). Routes and the OAuth callback honor this. |
|
|
39
|
+
| App name | `VITE_APP_NAME` | `appName` | `"AuthHero Admin"` | Browser tab title and the wordmark shown in the top bar (when no logo is set). |
|
|
40
|
+
| Logo URL | `VITE_APP_LOGO_URL` | `logoUrl` | — | Image rendered in the top bar in place of the wordmark. Anything browsers can display (PNG, SVG, WebP). Recommended height: 28px. |
|
|
41
|
+
| Favicon URL | `VITE_APP_FAVICON_URL` | `faviconUrl` | `./favicon.svg` | Overrides the built-in favicon. |
|
|
42
|
+
|
|
43
|
+
### Build-time env example
|
|
44
|
+
|
|
45
|
+
Create `apps/admin/.env.local`:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
VITE_AUTH0_DOMAIN=auth.example.com
|
|
49
|
+
VITE_AUTH0_CLIENT_ID=your-spa-client-id
|
|
50
|
+
VITE_AUTH0_API_URL=https://auth.example.com
|
|
51
|
+
VITE_AUTH0_AUDIENCE=https://auth.example.com/api/v2/
|
|
52
|
+
VITE_BASE_PATH=/admin
|
|
53
|
+
|
|
54
|
+
# Whitelabel
|
|
55
|
+
VITE_APP_NAME="Acme Identity Console"
|
|
56
|
+
VITE_APP_LOGO_URL=https://cdn.example.com/acme-logo.svg
|
|
57
|
+
VITE_APP_FAVICON_URL=https://cdn.example.com/acme-favicon.svg
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Runtime config example
|
|
61
|
+
|
|
62
|
+
Inject before the bundle to swap settings without rebuilding:
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<script>
|
|
66
|
+
window.__AUTHHERO_ADMIN_CONFIG__ = {
|
|
67
|
+
domain: "auth.example.com",
|
|
68
|
+
clientId: "your-spa-client-id",
|
|
69
|
+
apiUrl: "https://auth.example.com",
|
|
70
|
+
audience: "https://auth.example.com/api/v2/",
|
|
71
|
+
basePath: "/admin",
|
|
72
|
+
appName: "Acme Identity Console",
|
|
73
|
+
logoUrl: "https://cdn.example.com/acme-logo.svg",
|
|
74
|
+
faviconUrl: "https://cdn.example.com/acme-favicon.svg",
|
|
75
|
+
};
|
|
76
|
+
</script>
|
|
77
|
+
<script type="module" src="/admin/assets/index-<hash>.js"></script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
The bundle entry filename is fingerprinted by Vite at build time (e.g. `index-Ab12Cd.js`), so substitute the real filename from your build output — or use `window.__AUTHHERO_ADMIN_CONFIG__.basePath` to construct it from the configured base path.
|
|
81
|
+
|
|
82
|
+
If neither source provides a `domain`, the admin shows a domain picker on first load and stores the choice in a cookie via [`src/utils/domainUtils.ts`](src/utils/domainUtils.ts).
|
|
83
|
+
|
|
84
|
+
## Whitelabeling
|
|
85
|
+
|
|
86
|
+
The three branding settings (`appName`, `logoUrl`, `faviconUrl`) are read in three places:
|
|
87
|
+
|
|
88
|
+
- `document.title` and the favicon `<link>` are set on boot by `applyBranding()` in [`src/utils/runtimeConfig.ts`](src/utils/runtimeConfig.ts).
|
|
89
|
+
- The top bar in [`src/components/admin/layout.tsx`](src/components/admin/layout.tsx) renders `logoUrl` as an `<img>` when set, otherwise the `appName` wordmark (with two-letter initials as the narrow-width glyph).
|
|
90
|
+
|
|
91
|
+
To replace the default mark, set `VITE_APP_FAVICON_URL` to your own asset; the bundled default lives at [`public/favicon.svg`](public/favicon.svg).
|
|
92
|
+
|
|
93
|
+
## Architecture notes
|
|
94
|
+
|
|
95
|
+
- **Dual router**: the outer router in [`src/index.tsx`](src/index.tsx) handles domain selection (`/`), tenant management (`/tenants/*`), per-tenant admin (`/:tenantId/*`) and the OAuth callback (`/auth-callback`). The inner router in [`src/App.tsx`](src/App.tsx) is the react-admin router mounted with `basename="/:tenantId"`.
|
|
96
|
+
- **Auth**: `@auth0/auth0-spa-js` against the configured `domain`/`clientId`/`audience`. The provider lives in [`src/authProvider.ts`](src/authProvider.ts).
|
|
97
|
+
- **Data**: a custom data provider in [`src/auth0DataProvider.ts`](src/auth0DataProvider.ts) talks to the AuthHero management API.
|
|
98
|
+
|
|
99
|
+
See the full docs at [authhero.net/apps/admin/](https://authhero.net/apps/admin/).
|