@cyberia-auth/auth 0.1.0
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/CHANGELOG.md +13 -0
- package/README.md +199 -0
- package/dist/index.cjs +939 -0
- package/dist/index.d.cts +68 -0
- package/dist/index.d.ts +68 -0
- package/dist/index.js +900 -0
- package/package.json +49 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@cyberia-auth/auth` are documented in this file.
|
|
4
|
+
|
|
5
|
+
## 0.1.0
|
|
6
|
+
|
|
7
|
+
- Initial public release.
|
|
8
|
+
- Added `CyberiaAuth` sign-in/sign-up component.
|
|
9
|
+
- Added `CyberiaAuthProvider` and hook `useCyberiaAuth()`.
|
|
10
|
+
- Added auth UI helpers: `SignedIn`, `SignedOut`, `Protect`.
|
|
11
|
+
- Added UI controls: `SignInButton`, `SignUpButton`, `SignOutButton`, `UserButton`.
|
|
12
|
+
- Added no-flash branding cache per app token.
|
|
13
|
+
- Added Clerk-like account dropdown and manage-account modal.
|
package/README.md
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
# @cyberia-auth/auth
|
|
2
|
+
|
|
3
|
+
React auth SDK for Cyberia Auth.
|
|
4
|
+
|
|
5
|
+
It provides:
|
|
6
|
+
|
|
7
|
+
- Prebuilt sign-in / sign-up UI (`CyberiaAuth`)
|
|
8
|
+
- Auth state provider (`CyberiaAuthProvider`)
|
|
9
|
+
- Clerk-like helpers (`SignedIn`, `SignedOut`, `Protect`, `UserButton`, `SignInButton`, `SignUpButton`, `SignOutButton`)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @cyberia-auth/auth
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Peer dependencies:
|
|
18
|
+
|
|
19
|
+
- `react` `^18 || ^19`
|
|
20
|
+
- `react-dom` `^18 || ^19`
|
|
21
|
+
|
|
22
|
+
## Quick Start
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import {
|
|
26
|
+
CyberiaAuthProvider,
|
|
27
|
+
SignedIn,
|
|
28
|
+
SignedOut,
|
|
29
|
+
SignInButton,
|
|
30
|
+
SignUpButton,
|
|
31
|
+
UserButton,
|
|
32
|
+
Protect,
|
|
33
|
+
} from '@cyberia-auth/auth';
|
|
34
|
+
|
|
35
|
+
function App() {
|
|
36
|
+
return (
|
|
37
|
+
<CyberiaAuthProvider
|
|
38
|
+
backendUrl="https://auth.cyberia.host"
|
|
39
|
+
apiToken="app_your_token_here"
|
|
40
|
+
oauthRedirectUri="https://your-app-domain.com/protected"
|
|
41
|
+
>
|
|
42
|
+
<header style={{ display: 'flex', gap: 8 }}>
|
|
43
|
+
<SignedOut>
|
|
44
|
+
<SignInButton />
|
|
45
|
+
<SignUpButton />
|
|
46
|
+
</SignedOut>
|
|
47
|
+
<SignedIn>
|
|
48
|
+
<UserButton />
|
|
49
|
+
</SignedIn>
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<Protect fallback={<p>Please sign in.</p>}>
|
|
53
|
+
<div>Protected content</div>
|
|
54
|
+
</Protect>
|
|
55
|
+
</CyberiaAuthProvider>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Components API
|
|
61
|
+
|
|
62
|
+
### `CyberiaAuth`
|
|
63
|
+
|
|
64
|
+
Embeddable sign-in / sign-up component.
|
|
65
|
+
|
|
66
|
+
Props:
|
|
67
|
+
|
|
68
|
+
- `backendUrl: string` - Cyberia backend base URL
|
|
69
|
+
- `apiToken: string` - app API token
|
|
70
|
+
- `oauthRedirectUri?: string` - redirect URL for Google/Microsoft OAuth
|
|
71
|
+
- `initialMode?: 'login' | 'register'` - default mode
|
|
72
|
+
- `hideModeSwitch?: boolean` - hide sign-in/sign-up toggle footer
|
|
73
|
+
- `onAuthSuccess?: (result) => void` - callback with `{ token, user }`
|
|
74
|
+
|
|
75
|
+
### `CyberiaAuthProvider`
|
|
76
|
+
|
|
77
|
+
Global auth context + modal sign-in/sign-up experience.
|
|
78
|
+
|
|
79
|
+
Props:
|
|
80
|
+
|
|
81
|
+
- `backendUrl: string`
|
|
82
|
+
- `apiToken: string`
|
|
83
|
+
- `oauthRedirectUri?: string`
|
|
84
|
+
- `children: ReactNode`
|
|
85
|
+
- `storageKey?: string` - localStorage key override (default `cyberia_auth_session`)
|
|
86
|
+
|
|
87
|
+
### `SignedIn` / `SignedOut`
|
|
88
|
+
|
|
89
|
+
Conditional rendering blocks based on auth state.
|
|
90
|
+
|
|
91
|
+
### `SignInButton` / `SignUpButton` / `SignOutButton`
|
|
92
|
+
|
|
93
|
+
Convenience buttons for opening auth dialogs or clearing session.
|
|
94
|
+
|
|
95
|
+
### `UserButton`
|
|
96
|
+
|
|
97
|
+
Avatar trigger with account dropdown and manage-account modal.
|
|
98
|
+
|
|
99
|
+
### `Protect`
|
|
100
|
+
|
|
101
|
+
Guard wrapper:
|
|
102
|
+
|
|
103
|
+
- renders children if signed in
|
|
104
|
+
- renders `fallback` if signed out
|
|
105
|
+
|
|
106
|
+
### `useCyberiaAuth`
|
|
107
|
+
|
|
108
|
+
Hook returns:
|
|
109
|
+
|
|
110
|
+
- `isLoaded`
|
|
111
|
+
- `isSignedIn`
|
|
112
|
+
- `user`
|
|
113
|
+
- `token`
|
|
114
|
+
- `openSignIn()`
|
|
115
|
+
- `openSignUp()`
|
|
116
|
+
- `signOut()`
|
|
117
|
+
- `setSessionFromAuth(result)`
|
|
118
|
+
|
|
119
|
+
## OAuth notes
|
|
120
|
+
|
|
121
|
+
- For social auth, configure backend env vars for Google and Microsoft.
|
|
122
|
+
- `oauthRedirectUri` should point to a route in your app that can receive query params.
|
|
123
|
+
- Provider auto-parses OAuth callback params (`token`, `email`, `displayName`, `provider`) and stores session.
|
|
124
|
+
|
|
125
|
+
## Theming and no-flash branding
|
|
126
|
+
|
|
127
|
+
- Component fetches app branding from backend (`/api/public/app/config`).
|
|
128
|
+
- Branding is cached per `apiToken` in localStorage to avoid initial color/logo flash.
|
|
129
|
+
- If app branding is missing, default Cyberia theme is used.
|
|
130
|
+
|
|
131
|
+
## NPM Publish Steps
|
|
132
|
+
|
|
133
|
+
### 1) Build and verify package
|
|
134
|
+
|
|
135
|
+
From package root:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
npm run build
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Optional package preview:
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
npm pack
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### 2) Login to npm
|
|
148
|
+
|
|
149
|
+
```bash
|
|
150
|
+
npm login
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### 3) Ensure package scope access
|
|
154
|
+
|
|
155
|
+
This package is scoped (`@cyberia-auth/auth`) and configured with:
|
|
156
|
+
|
|
157
|
+
- `"publishConfig": { "access": "public" }`
|
|
158
|
+
|
|
159
|
+
### 4) Publish
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
npm publish
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
For first publish from a new scope, you can also run:
|
|
166
|
+
|
|
167
|
+
```bash
|
|
168
|
+
npm publish --access public
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### 5) Publish updates
|
|
172
|
+
|
|
173
|
+
Use one command from package folder:
|
|
174
|
+
|
|
175
|
+
```bash
|
|
176
|
+
npm run release:patch
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
Available release scripts:
|
|
180
|
+
|
|
181
|
+
- `release:patch`
|
|
182
|
+
- `release:minor`
|
|
183
|
+
- `release:major`
|
|
184
|
+
|
|
185
|
+
Each script does:
|
|
186
|
+
|
|
187
|
+
1. `npm version <type>`
|
|
188
|
+
2. `npm publish --access public`
|
|
189
|
+
|
|
190
|
+
Also, `prepublishOnly` runs `npm run build` automatically before publishing.
|
|
191
|
+
|
|
192
|
+
### 6) Verify
|
|
193
|
+
|
|
194
|
+
- Open [npmjs.com](https://www.npmjs.com/) and check package page
|
|
195
|
+
- Test install in a clean project:
|
|
196
|
+
|
|
197
|
+
```bash
|
|
198
|
+
npm i @cyberia-auth/auth
|
|
199
|
+
```
|