@fluoce/auth-react 0.1.1 → 0.1.2
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/dist/index.cjs +297 -222
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +41 -70
- package/dist/index.d.ts +41 -70
- package/dist/index.js +300 -226
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/README.md +0 -87
package/README.md
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# @fluoce/auth-react
|
|
2
|
-
|
|
3
|
-
React SDK for Fluoce Auth. Wraps the exchange / me / refresh flow, stores
|
|
4
|
-
tokens in cookies, and gives you `AuthGuard` + `useFluoceAuth()`.
|
|
5
|
-
|
|
6
|
-
## Setup
|
|
7
|
-
|
|
8
|
-
```tsx
|
|
9
|
-
// App.tsx
|
|
10
|
-
import { FluoceAuthProvider } from "@fluoce/auth-react";
|
|
11
|
-
|
|
12
|
-
export function App() {
|
|
13
|
-
return (
|
|
14
|
-
<FluoceAuthProvider
|
|
15
|
-
authUrl="https://auth.fluoce.com"
|
|
16
|
-
apiUrl="https://auth-service.fluoce.com"
|
|
17
|
-
appUrl="https://myapp.com/auth" // this app's callback url (the `ref`)
|
|
18
|
-
>
|
|
19
|
-
<Routes />
|
|
20
|
-
</FluoceAuthProvider>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
`appUrl` must be a route in your app that stays mounted under `FluoceAuthProvider`
|
|
26
|
-
(e.g. `/auth`) — auth.fluoce.com redirects back to `${appUrl}?code=...`, and the
|
|
27
|
-
provider picks the `code` param up automatically wherever it appears, exchanges
|
|
28
|
-
it, sets cookies, and strips it from the URL.
|
|
29
|
-
|
|
30
|
-
## Protecting a route
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { AuthGuard } from "@fluoce/auth-react";
|
|
34
|
-
|
|
35
|
-
function DashboardPage() {
|
|
36
|
-
return (
|
|
37
|
-
<AuthGuard fallback={<Spinner />}>
|
|
38
|
-
<Dashboard />
|
|
39
|
-
</AuthGuard>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
If there's no valid session, `AuthGuard` redirects to
|
|
45
|
-
`${authUrl}/auth?ref=${appUrl}` for you — nothing else to wire up.
|
|
46
|
-
|
|
47
|
-
## Reading the user / calling other endpoints
|
|
48
|
-
|
|
49
|
-
```tsx
|
|
50
|
-
import { useFluoceAuth } from "@fluoce/auth-react";
|
|
51
|
-
|
|
52
|
-
function Profile() {
|
|
53
|
-
const { user, loading, logout } = useFluoceAuth();
|
|
54
|
-
|
|
55
|
-
if (loading) return <Spinner />;
|
|
56
|
-
|
|
57
|
-
return (
|
|
58
|
-
<div>
|
|
59
|
-
<p>{user?.name ?? user?.email}</p>
|
|
60
|
-
<button onClick={() => logout()}>Log out</button>
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
`authFetch` is the same authenticated-fetch helper the SDK uses internally for
|
|
67
|
-
`/me` — it auto-refreshes on 401 and redirects to login if the refresh also
|
|
68
|
-
fails. Use it for any endpoint, including ones not wrapped yet
|
|
69
|
-
(`/me/add/email`, `/me/add/phone`, etc.) until they get first-class methods.
|
|
70
|
-
|
|
71
|
-
## Cookies
|
|
72
|
-
|
|
73
|
-
Access/refresh tokens are stored as regular (non-httpOnly — this is
|
|
74
|
-
client-side JS) cookies:
|
|
75
|
-
|
|
76
|
-
- `fluoce_access_token`
|
|
77
|
-
- `fluoce_refresh_token`
|
|
78
|
-
|
|
79
|
-
Override names/expiry via provider props: `accessTokenCookie`,
|
|
80
|
-
`refreshTokenCookie`, `accessTokenExpiryDays`, `refreshTokenExpiryDays`.
|
|
81
|
-
|
|
82
|
-
## Not yet wrapped
|
|
83
|
-
|
|
84
|
-
`/email`, `/phone`, `/google`, `/github`, `/me/add/email`, `/me/add/phone`,
|
|
85
|
-
`/logout/all` (client method exists, no dedicated hook) — call these directly
|
|
86
|
-
via `authFetch` (or plain `fetch` for the pre-login ones like `/email`,
|
|
87
|
-
`/phone`, `/google`, `/github`) until added.
|