@authagonal/login 0.1.98 → 0.1.99
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 +13 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @authagonal/login
|
|
2
2
|
|
|
3
|
-
Default login UI for [Authagonal](https://github.com/
|
|
3
|
+
Default login UI for [Authagonal](https://github.com/authagonal/authagonal) — an OAuth 2.0 / OpenID Connect authentication server backed by Azure Table Storage.
|
|
4
4
|
|
|
5
5
|
Use as a standalone app (built into the Authagonal Docker image) or as an npm package to build a custom login experience while reusing the API client, branding, i18n, and base components.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install @
|
|
10
|
+
npm install @authagonal/login
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
`react`, `react-dom`, and `react-router-dom` are externalized at build time — your app must provide them.
|
|
@@ -18,8 +18,8 @@ Import the base components and styles, then mount the router:
|
|
|
18
18
|
|
|
19
19
|
```tsx
|
|
20
20
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
21
|
-
import { AuthLayout, LoginPage, ForgotPasswordPage, ResetPasswordPage } from '@
|
|
22
|
-
import '@
|
|
21
|
+
import { AuthLayout, LoginPage, ForgotPasswordPage, ResetPasswordPage } from '@authagonal/login';
|
|
22
|
+
import '@authagonal/login/styles.css';
|
|
23
23
|
|
|
24
24
|
function App() {
|
|
25
25
|
return (
|
|
@@ -41,9 +41,9 @@ function App() {
|
|
|
41
41
|
Override individual pages while keeping the rest. Your custom page has access to the same API client, branding hooks, and i18n as the built-in pages:
|
|
42
42
|
|
|
43
43
|
```tsx
|
|
44
|
-
import { AuthLayout, ForgotPasswordPage, ResetPasswordPage } from '@
|
|
45
|
-
import { login, useBranding, useTranslation, ApiRequestError } from '@
|
|
46
|
-
import '@
|
|
44
|
+
import { AuthLayout, ForgotPasswordPage, ResetPasswordPage } from '@authagonal/login';
|
|
45
|
+
import { login, useBranding, useTranslation, ApiRequestError } from '@authagonal/login';
|
|
46
|
+
import '@authagonal/login/styles.css';
|
|
47
47
|
|
|
48
48
|
function MyLoginPage() {
|
|
49
49
|
const { t } = useTranslation();
|
|
@@ -78,14 +78,14 @@ function App() {
|
|
|
78
78
|
}
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
See [`demos/custom-server/login-app`](https://github.com/
|
|
81
|
+
See [`demos/custom-server/login-app`](https://github.com/authagonal/authagonal/tree/master/demos/custom-server/login-app) for a complete working example with a Terms of Service checkbox and branded footer.
|
|
82
82
|
|
|
83
83
|
## API client
|
|
84
84
|
|
|
85
85
|
All functions call the Authagonal auth API with cookie credentials. Set `VITE_API_URL` to point to a different origin during development.
|
|
86
86
|
|
|
87
87
|
```ts
|
|
88
|
-
import { login, logout, forgotPassword, resetPassword, getSession, ssoCheck, getProviders, getPasswordPolicy, ApiRequestError } from '@
|
|
88
|
+
import { login, logout, forgotPassword, resetPassword, getSession, ssoCheck, getProviders, getPasswordPolicy, ApiRequestError } from '@authagonal/login';
|
|
89
89
|
|
|
90
90
|
// Password login — sets a session cookie
|
|
91
91
|
await login('user@example.com', 'password');
|
|
@@ -175,7 +175,7 @@ Place a `branding.json` in your public directory. The `AuthLayout` component loa
|
|
|
175
175
|
Use `resolveLocalized()` to resolve these in your own components:
|
|
176
176
|
|
|
177
177
|
```ts
|
|
178
|
-
import { resolveLocalized, useBranding, useTranslation } from '@
|
|
178
|
+
import { resolveLocalized, useBranding, useTranslation } from '@authagonal/login';
|
|
179
179
|
|
|
180
180
|
const branding = useBranding();
|
|
181
181
|
const { i18n } = useTranslation();
|
|
@@ -199,11 +199,11 @@ Built-in support for 8 languages:
|
|
|
199
199
|
|
|
200
200
|
Language is auto-detected from the browser and persisted to `localStorage`. Force a language via query string: `?lng=es`.
|
|
201
201
|
|
|
202
|
-
The `useTranslation` hook is re-exported from this package to avoid React context duplication. Always import it from `@
|
|
202
|
+
The `useTranslation` hook is re-exported from this package to avoid React context duplication. Always import it from `@authagonal/login`, not directly from `react-i18next`:
|
|
203
203
|
|
|
204
204
|
```ts
|
|
205
205
|
// Correct
|
|
206
|
-
import { useTranslation } from '@
|
|
206
|
+
import { useTranslation } from '@authagonal/login';
|
|
207
207
|
|
|
208
208
|
// Wrong — will get a different i18n instance
|
|
209
209
|
import { useTranslation } from 'react-i18next';
|