Skip to content

Commit 3c636d0

Browse files
author
patched.codes[bot]
committed
Patched /tmp/tmper2twxqu/packages/stack/src/components-page/README.md
1 parent 62f3576 commit 3c636d0

File tree

1 file changed

+37
-134
lines changed

1 file changed

+37
-134
lines changed

‎packages/stack/src/components-page/README.md‎

Lines changed: 37 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,214 +1,117 @@
1-
# Stack SDK Exports Documentation
1+
# Stack SDK Component Documentation
22

3-
The Stack SDK provides a robust set of components, hooks, and utilities designed primarily for handling authentication and user management within React applications. This documentation focuses on exports that are relevant to the current SDK folder structure, principally dealing with user authentication processes, settings management, and user interface components that are utilized within the stack environment.
3+
This documentation provides detailed information about each of the components and hooks exported from the Stack SDK, specifically from the components-page, hooks, and components folders. These components and hooks are designed to facilitate the development of authentication and user management features in applications using the Stack SDK.
44

55
---
66

7-
## StackProvider
7+
## AccountSettings
88

99
**Type**: Component
1010

11-
**Description**: This component provides a React context for Stack SDK functionality. It is responsible for wrapping the root component and managing the lifecycle and state of the SDK for child components.
11+
**Description**: This component allows users to manage their account settings, including profile details, password, email verification, and multi-factor authentication settings.
1212

1313
**Usage**:
1414
```jsx
15-
import { StackProvider } from 'path-to-stack-sdk';
16-
17-
<StackProvider settings={{ apiKey: 'your_api_key_here' }}>
18-
<App />
19-
</StackProvider>
15+
<AccountSettings fullPage={true} />
2016
```
2117

2218
**Properties**:
23-
- `settings`: `Object` - Configuration options for the Stack SDK.
24-
25-
**Notes**: The `settings` object can include API key, project ID, and other necessary configuration details.
26-
27-
---
28-
29-
## useUser
30-
31-
**Type**: Hook
32-
33-
**Description**: Custom React hook to access user-related data.
34-
35-
**Usage**:
36-
```jsx
37-
import { useUser } from 'path-to-stack-sdk';
38-
39-
function UserProfile() {
40-
const user = useUser();
41-
return user ? (
42-
<div>Welcome, {user.name}</div>
43-
) : (
44-
<div>No user data available.</div>
45-
);
46-
}
47-
```
48-
49-
**Returns**: `User | null` - Returns the current user object or null if no user is authenticated.
50-
51-
**Notes**: Should be used inside components encapsulated by `StackProvider`.
52-
53-
---
54-
55-
## useStackApp
56-
57-
**Type**: Hook
58-
59-
**Description**: Hook to access Stack app specific functionalities like redirects.
60-
61-
**Usage**:
62-
```jsx
63-
import { useStackApp } from 'path-to-stack-sdk';
64-
const app = useStackApp();
65-
66-
// Usage example to redirect
67-
function LoginRedirect() {
68-
app.redirectToSignIn();
69-
}
70-
```
71-
72-
**Returns**: `Object` - Provides functionalities related to the Stack app like direct urls and action calls for redirections.
73-
74-
---
75-
76-
## StackHandler
77-
78-
**Type**: Component
79-
80-
**Description**: A handler component for routing and handling different authentication states and pages within an app.
19+
- `fullPage`: `boolean` - Specifies whether the component should be rendered as a full-page component.
8120

82-
**Usage**:
83-
```jsx
84-
import { StackHandler } from 'path-to-stack-sdk';
85-
86-
function AppRouting() {
87-
return (
88-
<Route path="/auth/:action" component={StackHandler} />
89-
);
90-
}
91-
```
92-
93-
**Properties**: None directly; uses URL parameters for conditional rendering logic.
94-
95-
**Notes**: It dynamically handles routes like sign-in, sign-up, password resets based on the URL parameters.
21+
**Notes**: This component uses the `SidebarLayout` to provide a navigation panel for different settings sections.
9622

9723
---
9824

99-
## SignIn
25+
## AuthPage
10026

10127
**Type**: Component
10228

103-
**Description**: Renders a sign-in page component.
29+
**Description**: Serves as a central authentication page allowing users to sign-in or sign-up using different methods like OAuth, magic link, or credentials.
10430

10531
**Usage**:
10632
```jsx
107-
import { SignIn } from 'path-to-stack-sdk';
108-
109-
<SignIn />
33+
<AuthPage fullPage={true} type='sign-in' />
11034
```
11135

11236
**Properties**:
113-
- `fullPage`: `boolean` - Optional. If true, the signin page takes up the full page.
37+
- `fullPage`: `boolean` - Determines if the layout is rendered as full-page.
38+
- `type`: `'sign-in' | 'sign-up'` - Specifies the type of authentication action, either 'sign-in' or 'sign-up'.
39+
- `automaticRedirect`: `boolean` - If true, automatically redirects on successful sign-in/sign-up.
40+
41+
**Notes**: The component dynamically adjusts available forms and options based on configuration settings like `signUpEnabled`, `credentialEnabled`, etc.
11442

11543
---
11644

117-
## SignUp
45+
## EmailVerification
11846

11947
**Type**: Component
12048

121-
**Description**: Component for rendering a sign-up form interface.
49+
**Description**: Handles the flow for verifying a user's email via a code sent to their email.
12250

12351
**Usage**:
12452
```jsx
125-
import { SignUp } from 'path-to-stack-sdk';
126-
127-
<SignUp />
53+
<EmailVerification searchParams={{ code: 'your_verification_code' }} fullPage={true} />
12854
```
12955

13056
**Properties**:
131-
- `fullPage`: `boolean` - Determines if the signup form should be rendered as a full page.
57+
- `searchParams`: `{ code?: string }` - Contains the verification code needed for the email verification.
58+
- `fullPage`: `boolean` - Whether to render this in full page mode.
13259

133-
**Notes**: Uses internal Stack SDK hooks for handling creation of new user accounts.
60+
**Notes**: Uses caching for the verification process to enhance performance.
13461

13562
---
13663

137-
## EmailVerification
64+
## ForgotPassword
13865

13966
**Type**: Component
14067

141-
**Description**: Renders an email verification component that handles verification processes.
68+
**Description**: Allows users to initiate a password reset process by entering their email to receive a reset link.
14269

14370
**Usage**:
14471
```jsx
145-
import { EmailVerification } from 'path-to-stack-sdk';
146-
147-
<EmailVerification />
72+
<ForgotPassword fullPage={true} />
14873
```
14974

15075
**Properties**:
151-
- `searchParams`: `Object` - Parameters that should include the verification code.
152-
153-
**Notes**: Expected to receive the verification code through search params or URL parameters.
76+
- `fullPage`: `boolean` - Specifies if the component should occupy the whole page.
15477

15578
---
15679

157-
## PasswordReset
80+
## MagicLinkCallback
15881

15982
**Type**: Component
16083

161-
**Description**: Component to handle password reset functionality.
84+
**Description**: Manages the callback process for a magic link authentication, handling scenarios like expired or already used links.
16285

16386
**Usage**:
16487
```jsx
165-
import { PasswordReset } from 'path-to-stack-sdk';
166-
167-
<PasswordReset />
88+
<MagicLinkCallback searchParams={{ code: 'magic_link_code' }} fullPage={true} />
16889
```
16990

17091
**Properties**:
171-
- `searchParams`: `Object` - Contains the reset code necessary for processing the password reset.
92+
- `searchParams`: `{ code: string }` - Parameters received from the URL which include the magic link code.
93+
- `fullPage`: `boolean` - Whether to render this in full page mode.
17294

17395
---
17496

175-
## ForgotPassword
97+
## OAuthCallback
17698

17799
**Type**: Component
178100

179-
**Description**: Provides a user interface for initiating a password reset process.
101+
**Description**: A callback handler for OAuth authentication processes, managing success or error states post OAuth flow.
180102

181103
**Usage**:
182104
```jsx
183-
import { ForgotPassword } from 'path-to-stack-sdk';
184-
185-
<ForgotPassword />
105+
<OAuthCallback fullPage={true} />
186106
```
187107

188108
**Properties**:
189-
- `fullPage`: `boolean` - Renders the component in a full page layout if set to true.
109+
- `fullPage`: `boolean` - Determines if the layout needs to be rendered as full-page.
190110

191-
**Notes**: This component is used when a user has forgotten their password and needs to initiate a reset process.
111+
**Notes**: Handles redirection and error display post OAuth authentication.
192112

193113
---
194114

195-
## OAuthButton
196-
197-
**Type**: Component
198-
199-
**Description**: Renders OAuth provider buttons for user authentication.
200-
201-
**Usage**:
202-
```jsx
203-
import { OAuthButton } from 'path-to-stack-sdk';
204-
205-
<OAuthButton />
206-
```
207-
208-
**Properties**:
209-
- `provider`: `string` - Specifies the OAuth provider.
210-
211-
**Notes**: Supports multiple OAuth providers including Google, Facebook, etc.
115+
## PasswordReset
212116

213-
### Notes
214-
Additional functionalities, including various user interface elements and deeper integration aspects, are described in their specific subsections, following the higher-level overview provided here. The comprehensive nature of the Stack SDK ensures that most needs related to user management and authentication within a modern web application can be met efficiently.
117+
**Ty

0 commit comments

Comments
 (0)