@riligar/auth-react 1.9.4 → 1.11.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.
Files changed (6) hide show
  1. package/README.md +100 -85
  2. package/dist/index.esm.js +906 -15
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +933 -19
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -11,115 +11,130 @@ bun add @riligar/auth-react
11
11
  ## Basic Usage
12
12
 
13
13
  ```jsx
14
- import { AuthProvider, useAuth, useSignIn, ProtectedRoute } from '@riligar/auth-react';
14
+ import { AuthProvider, useAuth, useSignIn, Protect, SignedIn, SignedOut, SignIn } from '@riligar/auth-react'
15
15
 
16
16
  // 1. Wrap your app with AuthProvider
17
17
  function App() {
18
- return (
19
- <AuthProvider>
20
- <Routes>
21
- <Route path="/login" element={<Login />} />
22
- <Route element={<ProtectedRoute />}>
23
- <Route path="/" element={<Home />} />
24
- </Route>
25
- </Routes>
26
- </AuthProvider>
27
- );
18
+ return (
19
+ <AuthProvider
20
+ apiUrl="https://your-api.com"
21
+ apiKey="your-api-key"
22
+ >
23
+ <Routes>
24
+ <Route
25
+ path="/login"
26
+ element={<SignIn />}
27
+ />
28
+ <Route element={<Protect />}>
29
+ <Route
30
+ path="/"
31
+ element={<Home />}
32
+ />
33
+ </Route>
34
+ </Routes>
35
+ </AuthProvider>
36
+ )
28
37
  }
29
38
 
30
- // 2. Use hooks in your components
31
- function Login() {
32
- const signIn = useSignIn();
33
-
34
- async function handleSubmit(e) {
35
- e.preventDefault();
36
- const { email, password } = Object.fromEntries(new FormData(e.target));
37
- try {
38
- await signIn(email, password);
39
- } catch (err) {
40
- alert(err.message);
41
- }
42
- }
43
-
44
- return (
45
- <form onSubmit={handleSubmit}>
46
- <input name="email" type="email" placeholder="Email" required />
47
- <input name="password" type="password" placeholder="Password" required />
48
- <button>Sign In</button>
49
- </form>
50
- );
51
- }
52
-
53
- function Home() {
54
- const { user, isAuthenticated } = useAuth();
55
-
56
- if (!isAuthenticated) return <p>Not authenticated</p>;
57
-
58
- return <h1>Hello, {user?.email}!</h1>;
39
+ // 2. Use control components for conditional rendering
40
+ function Header() {
41
+ return (
42
+ <header>
43
+ <SignedIn>
44
+ <UserMenu />
45
+ </SignedIn>
46
+ <SignedOut>
47
+ <SignInButton />
48
+ </SignedOut>
49
+ </header>
50
+ )
59
51
  }
60
52
  ```
61
53
 
62
- ## Features
54
+ ## Components
63
55
 
64
- - ✅ **JWT Tokens** - Secure token-based authentication
65
- - ✅ **JWKS** - Signature verification with `/.well-known/jwks.json`
66
- - ✅ **Auto refresh** - Tokens renewed automatically
67
- - ✅ **Social login** - OAuth provider support
68
- - ✅ **Cross-tab sync** - Synchronized state across tabs
69
- - ✅ **Route protection** - Protected routes automatically
70
- - ✅ **SSR friendly** - Server-side rendering compatible
71
- - ✅ **LocalStorage** - Token persistence in browser
56
+ ### Authentication Components
72
57
 
73
- ## API
58
+ | Component | Description |
59
+ | ----------------------- | -------------------------------------------- |
60
+ | `<SignIn />` | Sign in form with email/password, magic link |
61
+ | `<SignUp />` | Registration form |
62
+ | `<MagicLink />` | Magic link request form |
63
+ | `<MagicLinkCallback />` | Magic link verification |
64
+ | `<ForgotPassword />` | Password reset request |
65
+ | `<ResetPassword />` | Password reset form |
66
+ | `<VerifyEmail />` | Email verification |
67
+ | `<UserProfile />` | User profile management modal |
74
68
 
75
- ### Hooks
69
+ ### Control Components
76
70
 
77
- ```jsx
78
- const { user, loading, error, isAuthenticated } = useAuth();
79
- const signIn = useSignIn();
80
- const signUp = useSignUp();
81
- const signOut = useSignOut();
82
- const checkToken = useCheckToken();
83
- ```
71
+ | Component | Description |
72
+ | --------------- | -------------------------------------------- |
73
+ | `<SignedIn>` | Renders children only when authenticated |
74
+ | `<SignedOut>` | Renders children only when NOT authenticated |
75
+ | `<AuthLoading>` | Renders children while auth is loading |
76
+ | `<AuthLoaded>` | Renders children when auth has loaded |
77
+ | `<Protect />` | Protected route wrapper |
84
78
 
85
- ### Utility functions
79
+ ### Unstyled Buttons
86
80
 
87
- ```jsx
88
- import {
89
- isAuthenticated,
90
- getCurrentUser,
91
- refreshToken,
92
- socialRedirect
93
- } from '@riligar/auth-react';
94
-
95
- // Check if authenticated
96
- if (isAuthenticated()) {
97
- console.log('User logged in');
98
- }
81
+ | Component | Description |
82
+ | ------------------- | ------------------------- |
83
+ | `<SignInButton />` | Navigates to sign-in page |
84
+ | `<SignUpButton />` | Navigates to sign-up page |
85
+ | `<SignOutButton />` | Signs out the user |
99
86
 
100
- // Get current user data
101
- const user = getCurrentUser();
87
+ ## Hooks
102
88
 
103
- // Manually refresh token
104
- await refreshToken();
105
-
106
- // Redirect to social login
107
- socialRedirect('google', '/dashboard');
89
+ ```jsx
90
+ const { user, loading, error, isAuthenticated } = useAuth()
91
+ const { user, updateProfile, changePassword, changeEmail } = useUser()
92
+ const signIn = useSignIn()
93
+ const signUp = useSignUp()
94
+ const signOut = useSignOut()
108
95
  ```
109
96
 
97
+ ## Features
98
+
99
+ - ✅ **JWT Tokens** - Secure token-based authentication
100
+ - ✅ **JWKS** - Signature verification with `/.well-known/jwks.json`
101
+ - ✅ **Auto refresh** - Tokens renewed automatically
102
+ - ✅ **Social login** - OAuth provider support
103
+ - ✅ **Cross-tab sync** - Synchronized state across tabs
104
+ - ✅ **Route protection** - Protected routes automatically
105
+ - ✅ **Control components** - Clerk-style conditional rendering
106
+ - ✅ **SSR friendly** - Server-side rendering compatible
107
+
108
+ ## Backwards Compatibility
109
+
110
+ The following deprecated aliases are still available:
111
+
112
+ | Deprecated | Use Instead |
113
+ | -------------------- | ------------------- |
114
+ | `SignInForm` | `SignIn` |
115
+ | `SignUpForm` | `SignUp` |
116
+ | `MagicLinkForm` | `MagicLink` |
117
+ | `MagicLinkVerify` | `MagicLinkCallback` |
118
+ | `ForgotPasswordForm` | `ForgotPassword` |
119
+ | `ResetPasswordForm` | `ResetPassword` |
120
+ | `VerifyEmailCard` | `VerifyEmail` |
121
+ | `AccountModal` | `UserProfile` |
122
+ | `ProtectedRoute` | `Protect` |
123
+ | `useProfile` | `useUser` |
124
+
110
125
  ## Backend Configuration
111
126
 
112
127
  The SDK expects your backend to expose:
113
128
 
114
- - `/.well-known/jwks.json` - Public keys for JWT verification
115
- - `/auth/sign-in` - Login (returns `{ token, user }`)
116
- - `/auth/sign-up` - Registration (returns `{ token, user }`)
117
- - `/auth/sign-out` - Logout
118
- - `/auth/refresh` - Token renewal
119
- - `/auth/sign-in/:provider` - Social login
129
+ - `/.well-known/jwks.json` - Public keys for JWT verification
130
+ - `/auth/sign-in` - Login (returns `{ token, user }`)
131
+ - `/auth/sign-up` - Registration (returns `{ token, user }`)
132
+ - `/auth/sign-out` - Logout
133
+ - `/auth/refresh` - Token renewal
134
+ - `/auth/sign-in/:provider` - Social login
120
135
 
121
136
  ## Build
122
137
 
123
138
  ```bash
124
139
  bun run build
125
- ```
140
+ ```