@umituz/react-native-auth 3.4.31 → 3.4.32
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/package.json +1 -1
- package/src/presentation/README.md +2 -2
- package/src/presentation/components/LoginForm.md +158 -267
- package/src/presentation/components/PasswordIndicators.md +199 -410
- package/src/presentation/components/ProfileComponents.md +254 -111
- package/src/presentation/components/SocialLoginButtons.md +295 -258
- package/src/presentation/hooks/useAccountManagement.md +191 -185
- package/src/presentation/hooks/useAuthBottomSheet.md +74 -77
- package/src/presentation/hooks/useSocialLogin.md +90 -145
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-auth",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.32",
|
|
4
4
|
"description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -42,7 +42,7 @@ presentation/
|
|
|
42
42
|
│ ├── AuthDivider.tsx # Divider
|
|
43
43
|
│ ├── AuthLink.tsx # Navigation link
|
|
44
44
|
│ ├── AuthErrorDisplay.tsx # Error display
|
|
45
|
-
│ ├──
|
|
45
|
+
│ ├── AuthBackground.tsx # Background component
|
|
46
46
|
│ └── icons/
|
|
47
47
|
│ ├── GoogleIconSvg.tsx # Google icon
|
|
48
48
|
│ └── AppleIconSvg.tsx # Apple icon
|
|
@@ -408,7 +408,7 @@ function AuthBottomSheet() {
|
|
|
408
408
|
|
|
409
409
|
### AuthContainer
|
|
410
410
|
|
|
411
|
-
Main auth layout container with
|
|
411
|
+
Main auth layout container with background component and scroll.
|
|
412
412
|
|
|
413
413
|
```typescript
|
|
414
414
|
import { AuthContainer } from '@umituz/react-native-auth';
|
|
@@ -1,331 +1,222 @@
|
|
|
1
1
|
# LoginForm & RegisterForm
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Pre-built authentication form components for email/password login and registration.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
## LoginForm
|
|
8
8
|
|
|
9
|
-
Email
|
|
9
|
+
Email and password login form component with built-in validation.
|
|
10
10
|
|
|
11
|
-
###
|
|
11
|
+
### Strategy
|
|
12
12
|
|
|
13
|
+
**Purpose**: Provides a complete login form with email/password validation, error handling, and loading states without needing to build from scratch.
|
|
14
|
+
|
|
15
|
+
**When to Use**:
|
|
16
|
+
- Standard email/password authentication flow
|
|
17
|
+
- Need quick login screen implementation
|
|
18
|
+
- Want built-in validation and error handling
|
|
19
|
+
|
|
20
|
+
**Import Path**:
|
|
13
21
|
```typescript
|
|
14
22
|
import { LoginForm } from '@umituz/react-native-auth';
|
|
15
|
-
|
|
16
|
-
function LoginScreen() {
|
|
17
|
-
const navigation = useNavigation();
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<View>
|
|
21
|
-
<LoginForm
|
|
22
|
-
onNavigateToRegister={() => navigation.navigate('Register')}
|
|
23
|
-
/>
|
|
24
|
-
</View>
|
|
25
|
-
);
|
|
26
|
-
}
|
|
27
23
|
```
|
|
28
24
|
|
|
29
|
-
|
|
25
|
+
**Component Location**: `src/presentation/components/LoginForm.tsx`
|
|
30
26
|
|
|
31
|
-
|
|
32
|
-
|------|-----|----------|----------|
|
|
33
|
-
| `onNavigateToRegister` | `() => void` | Yes | Kayıt ekranına navigasyon |
|
|
27
|
+
### Rules
|
|
34
28
|
|
|
35
|
-
|
|
29
|
+
**MUST**:
|
|
30
|
+
- Provide `onNavigateToRegister` callback for navigation to registration screen
|
|
31
|
+
- Use within an auth container or proper layout wrapper
|
|
32
|
+
- Handle loading states during authentication
|
|
33
|
+
- Display error messages from validation
|
|
36
34
|
|
|
37
|
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
- ✅ Keyboard navigation (Enter ile sonraki alana geçiş)
|
|
42
|
-
- ✅ Localisation desteği
|
|
43
|
-
- ✅ Disabled state (boş alanlar)
|
|
35
|
+
**MUST NOT**:
|
|
36
|
+
- Modify internal form validation logic
|
|
37
|
+
- Override keyboard navigation behavior
|
|
38
|
+
- Bypass built-in error handling
|
|
44
39
|
|
|
45
|
-
###
|
|
40
|
+
### Constraints
|
|
46
41
|
|
|
47
|
-
|
|
42
|
+
**LIMITATIONS**:
|
|
43
|
+
- Only supports email/password authentication (use social login components separately)
|
|
44
|
+
- Validation rules are fixed (email format, password required)
|
|
45
|
+
- Error messages follow localization keys
|
|
46
|
+
- Form layout is predefined
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<AuthContainer>
|
|
55
|
-
<AuthHeader title="Giriş Yap" />
|
|
56
|
-
<LoginForm
|
|
57
|
-
onNavigateToRegister={() => navigation.navigate('Register')}
|
|
58
|
-
/>
|
|
59
|
-
</AuthContainer>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
```
|
|
48
|
+
**PLATFORM SUPPORT**:
|
|
49
|
+
- iOS: ✅ Fully supported
|
|
50
|
+
- Android: ✅ Fully supported
|
|
51
|
+
- Web: ✅ Fully supported
|
|
63
52
|
|
|
64
|
-
|
|
53
|
+
**REQUIREMENTS**:
|
|
54
|
+
- Parent component must handle navigation
|
|
55
|
+
- Authentication context/provider must be configured
|
|
56
|
+
- Localization keys must be defined
|
|
65
57
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<AuthContainer>
|
|
73
|
-
<AuthHeader title="Giriş Yap" />
|
|
74
|
-
|
|
75
|
-
<LoginForm
|
|
76
|
-
onNavigateToRegister={() => navigation.navigate('Register')}
|
|
77
|
-
/>
|
|
78
|
-
|
|
79
|
-
<AuthDivider text="veya" />
|
|
80
|
-
|
|
81
|
-
<SocialLoginButtons
|
|
82
|
-
onGoogleSignIn={signInWithGoogle}
|
|
83
|
-
onAppleSignIn={signInWithApple}
|
|
84
|
-
/>
|
|
85
|
-
</AuthContainer>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
```
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## RegisterForm
|
|
61
|
+
|
|
62
|
+
User registration form with display name, email, password, and confirm password fields.
|
|
89
63
|
|
|
90
|
-
|
|
64
|
+
### Strategy
|
|
91
65
|
|
|
66
|
+
**Purpose**: Provides complete registration flow with password strength indicator, validation, and terms acceptance.
|
|
67
|
+
|
|
68
|
+
**When to Use**:
|
|
69
|
+
- Standard user registration flow
|
|
70
|
+
- Need password strength requirements
|
|
71
|
+
- Require terms/privacy acceptance
|
|
72
|
+
|
|
73
|
+
**Import Path**:
|
|
92
74
|
```typescript
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<ScrollView style={styles.container}>
|
|
96
|
-
<View style={styles.header}>
|
|
97
|
-
<Logo />
|
|
98
|
-
<Text style={styles.title}>Hoşgeldiniz</Text>
|
|
99
|
-
<Text style={styles.subtitle}>Devam etmek için giriş yapın</Text>
|
|
100
|
-
</View>
|
|
101
|
-
|
|
102
|
-
<View style={styles.formContainer}>
|
|
103
|
-
<LoginForm
|
|
104
|
-
onNavigateToRegister={() => navigation.navigate('Register')}
|
|
105
|
-
/>
|
|
106
|
-
</View>
|
|
107
|
-
|
|
108
|
-
<View style={styles.footer}>
|
|
109
|
-
<AuthLegalLinks />
|
|
110
|
-
</View>
|
|
111
|
-
</ScrollView>
|
|
112
|
-
);
|
|
113
|
-
}
|
|
75
|
+
import { RegisterForm } from '@umituz/react-native-auth';
|
|
114
76
|
```
|
|
115
77
|
|
|
116
|
-
|
|
78
|
+
**Component Location**: `src/presentation/components/RegisterForm.tsx`
|
|
117
79
|
|
|
118
|
-
|
|
80
|
+
### Rules
|
|
119
81
|
|
|
120
|
-
|
|
82
|
+
**MUST**:
|
|
83
|
+
- Provide `onNavigateToLogin` callback for navigation back to login
|
|
84
|
+
- Provide terms/privacy URLs or handlers
|
|
85
|
+
- Display password strength indicator to users
|
|
86
|
+
- Handle terms acceptance before submission
|
|
121
87
|
|
|
122
|
-
|
|
88
|
+
**MUST NOT**:
|
|
89
|
+
- Allow registration without terms acceptance
|
|
90
|
+
- Disable password validation
|
|
91
|
+
- Bypass email verification flow (if enabled)
|
|
123
92
|
|
|
124
|
-
|
|
125
|
-
import { RegisterForm } from '@umituz/react-native-auth';
|
|
93
|
+
### Constraints
|
|
126
94
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<RegisterForm
|
|
133
|
-
onNavigateToLogin={() => navigation.navigate('Login')}
|
|
134
|
-
onTermsPress={() => navigation.navigate('Terms')}
|
|
135
|
-
onPrivacyPress={() => navigation.navigate('Privacy')}
|
|
136
|
-
/>
|
|
137
|
-
</View>
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
```
|
|
95
|
+
**LIMITATIONS**:
|
|
96
|
+
- Password requirements are fixed (8+ chars, uppercase, lowercase, number, special char)
|
|
97
|
+
- Terms/privacy links must be provided
|
|
98
|
+
- Form fields are predefined (display name, email, password, confirm password)
|
|
99
|
+
- Cannot add custom validation rules
|
|
141
100
|
|
|
142
|
-
|
|
101
|
+
**VALIDATION REQUIREMENTS**:
|
|
102
|
+
- Display name: Required, cannot be empty
|
|
103
|
+
- Email: Required, must be valid format
|
|
104
|
+
- Password: Required, must meet complexity requirements
|
|
105
|
+
- Confirm Password: Required, must match password
|
|
143
106
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
| `privacyUrl` | `string` | No | Gizlilik politikası URL |
|
|
149
|
-
| `onTermsPress` | `() => void` | No | Kullanım şartları butonu handler |
|
|
150
|
-
| `onPrivacyPress` | `() => void` | No | Gizlilik politikası butonu handler |
|
|
107
|
+
**PLATFORM SUPPORT**:
|
|
108
|
+
- iOS: ✅ Fully supported
|
|
109
|
+
- Android: ✅ Fully supported
|
|
110
|
+
- Web: ✅ Fully supported
|
|
151
111
|
|
|
152
|
-
|
|
112
|
+
---
|
|
153
113
|
|
|
154
|
-
|
|
155
|
-
- ✅ Email validasyonu
|
|
156
|
-
- ✅ Şifre validasyonu
|
|
157
|
-
- ✅ Şifre eşleşme kontrolü
|
|
158
|
-
- ✅ Şifre güç göstergesi
|
|
159
|
-
- ✅ Loading state
|
|
160
|
-
- ✅ Hata gösterimi
|
|
161
|
-
- ✅ KVKK/Kullanım şartları kabulü
|
|
162
|
-
- ✅ Keyboard navigation
|
|
114
|
+
## Form Validation
|
|
163
115
|
|
|
164
|
-
###
|
|
116
|
+
### Strategy
|
|
165
117
|
|
|
166
|
-
|
|
118
|
+
**Purpose**: Built-in validation ensures user input meets security requirements before submission.
|
|
167
119
|
|
|
168
|
-
|
|
169
|
-
function RegisterScreen() {
|
|
170
|
-
const navigation = useNavigation();
|
|
171
|
-
|
|
172
|
-
return (
|
|
173
|
-
<AuthContainer>
|
|
174
|
-
<AuthHeader title="Kayıt Ol" />
|
|
175
|
-
<RegisterForm
|
|
176
|
-
onNavigateToLogin={() => navigation.navigate('Login')}
|
|
177
|
-
/>
|
|
178
|
-
</AuthContainer>
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
```
|
|
120
|
+
**Validation Utility Location**: `src/infrastructure/utils/AuthValidation.ts`
|
|
182
121
|
|
|
183
|
-
|
|
122
|
+
### Rules
|
|
184
123
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<AuthContainer>
|
|
191
|
-
<AuthHeader title="Kayıt Ol" />
|
|
192
|
-
<RegisterForm
|
|
193
|
-
onNavigateToLogin={() => navigation.navigate('Login')}
|
|
194
|
-
termsUrl="https://example.com/terms"
|
|
195
|
-
privacyUrl="https://example.com/privacy"
|
|
196
|
-
/>
|
|
197
|
-
</AuthContainer>
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
```
|
|
124
|
+
**MUST**:
|
|
125
|
+
- Use `validateEmail` for email format validation
|
|
126
|
+
- Use `validatePasswordForRegister` for password requirements
|
|
127
|
+
- Display validation errors to users
|
|
128
|
+
- Prevent submission with invalid data
|
|
201
129
|
|
|
202
|
-
|
|
130
|
+
**MUST NOT**:
|
|
131
|
+
- Allow empty required fields
|
|
132
|
+
- Bypass password complexity requirements
|
|
133
|
+
- Submit with mismatched passwords
|
|
203
134
|
|
|
204
|
-
|
|
205
|
-
function RegisterScreen() {
|
|
206
|
-
const navigation = useNavigation();
|
|
207
|
-
|
|
208
|
-
const handleTermsPress = () => {
|
|
209
|
-
navigation.navigate('WebView', {
|
|
210
|
-
url: 'https://example.com/terms',
|
|
211
|
-
title: 'Kullanım Şartları',
|
|
212
|
-
});
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
const handlePrivacyPress = () => {
|
|
216
|
-
navigation.navigate('WebView', {
|
|
217
|
-
url: 'https://example.com/privacy',
|
|
218
|
-
title: 'Gizlilik Politikası',
|
|
219
|
-
});
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
return (
|
|
223
|
-
<AuthContainer>
|
|
224
|
-
<AuthHeader title="Kayıt Ol" />
|
|
225
|
-
<RegisterForm
|
|
226
|
-
onNavigateToLogin={() => navigation.navigate('Login')}
|
|
227
|
-
onTermsPress={handleTermsPress}
|
|
228
|
-
onPrivacyPress={handlePrivacyPress}
|
|
229
|
-
/>
|
|
230
|
-
</AuthContainer>
|
|
231
|
-
);
|
|
232
|
-
}
|
|
233
|
-
```
|
|
135
|
+
### Constraints
|
|
234
136
|
|
|
235
|
-
|
|
137
|
+
**PASSWORD REQUIREMENTS** (Default):
|
|
138
|
+
- Minimum length: 8 characters
|
|
139
|
+
- Must contain: Uppercase letter
|
|
140
|
+
- Must contain: Lowercase letter
|
|
141
|
+
- Must contain: Number
|
|
142
|
+
- Must contain: Special character
|
|
236
143
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
const { signInWithGoogle, signInWithApple } = useSocialLogin();
|
|
241
|
-
|
|
242
|
-
return (
|
|
243
|
-
<AuthContainer>
|
|
244
|
-
<AuthHeader title="Kayıt Ol" />
|
|
245
|
-
|
|
246
|
-
<RegisterForm
|
|
247
|
-
onNavigateToLogin={() => navigation.navigate('Login')}
|
|
248
|
-
/>
|
|
249
|
-
|
|
250
|
-
<AuthDivider text="veya şununla devam et" />
|
|
251
|
-
|
|
252
|
-
<SocialLoginButtons
|
|
253
|
-
onGoogleSignIn={signInWithGoogle}
|
|
254
|
-
onAppleSignIn={signInWithApple}
|
|
255
|
-
/>
|
|
256
|
-
</AuthContainer>
|
|
257
|
-
);
|
|
258
|
-
}
|
|
259
|
-
```
|
|
144
|
+
**EMAIL REQUIREMENTS**:
|
|
145
|
+
- Valid email format (user@domain.com)
|
|
146
|
+
- Cannot be empty
|
|
260
147
|
|
|
261
|
-
|
|
148
|
+
**CONFIGURABLE SETTINGS**:
|
|
149
|
+
See `DEFAULT_VAL_CONFIG` in `AuthValidation.ts`
|
|
262
150
|
|
|
263
|
-
|
|
151
|
+
---
|
|
264
152
|
|
|
265
|
-
|
|
266
|
-
|------|------------|
|
|
267
|
-
| Email | Boş olamaz, geçerli email formatı |
|
|
268
|
-
| Password | Boş olamaz |
|
|
153
|
+
## Error Handling
|
|
269
154
|
|
|
270
|
-
###
|
|
155
|
+
### Strategy
|
|
271
156
|
|
|
272
|
-
|
|
273
|
-
|------|------------|
|
|
274
|
-
| DisplayName | Boş olamaz |
|
|
275
|
-
| Email | Boş olamaz, geçerli email formatı |
|
|
276
|
-
| Password | Boş olamaz, minimum uzunluk, karmaşıklık |
|
|
277
|
-
| Confirm Password | Boş olamaz, password ile eşleşmeli |
|
|
157
|
+
**Purpose**: Clear user feedback for validation and authentication errors.
|
|
278
158
|
|
|
279
|
-
|
|
159
|
+
### Rules
|
|
280
160
|
|
|
281
|
-
|
|
161
|
+
**MUST**:
|
|
162
|
+
- Display field-level validation errors
|
|
163
|
+
- Show authentication errors (wrong password, user not found, etc.)
|
|
164
|
+
- Provide clear error messages in user's language
|
|
165
|
+
- Allow retry after error
|
|
282
166
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
requireLowercase: true,
|
|
288
|
-
requireNumbers: true,
|
|
289
|
-
requireSpecialChars: true,
|
|
290
|
-
}
|
|
291
|
-
```
|
|
167
|
+
**MUST NOT**:
|
|
168
|
+
- Show raw error codes to users
|
|
169
|
+
- Expose sensitive information in errors
|
|
170
|
+
- Block user indefinitely after errors
|
|
292
171
|
|
|
293
|
-
|
|
172
|
+
### Constraints
|
|
294
173
|
|
|
295
|
-
|
|
174
|
+
**ERROR TYPES**:
|
|
175
|
+
- Validation errors: Red text below input field
|
|
176
|
+
- Network errors: Alert or banner message
|
|
177
|
+
- Authentication errors: Clear message with retry option
|
|
296
178
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
// 1. Şifre gücü gösterilir (Zayıf/Orta/Güçlü)
|
|
300
|
-
// 2. Şifreler eşleşiyor mu gösterilir
|
|
301
|
-
```
|
|
179
|
+
**LOCALIZATION**:
|
|
180
|
+
All error messages must use localization keys from i18n configuration.
|
|
302
181
|
|
|
303
|
-
|
|
182
|
+
---
|
|
304
183
|
|
|
305
|
-
|
|
184
|
+
## Accessibility
|
|
306
185
|
|
|
307
|
-
|
|
308
|
-
// Email hatalı
|
|
309
|
-
<input state="error" helperText="Geçersiz email formatı" />
|
|
186
|
+
### Strategy
|
|
310
187
|
|
|
311
|
-
|
|
312
|
-
<input state="error" helperText="Şifre en az 8 karakter olmalı" />
|
|
188
|
+
**Purpose**: Ensure forms are accessible to all users including screen reader users.
|
|
313
189
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
190
|
+
### Rules
|
|
191
|
+
|
|
192
|
+
**MUST**:
|
|
193
|
+
- Provide labels for all input fields
|
|
194
|
+
- Announce errors to screen readers
|
|
195
|
+
- Support keyboard navigation
|
|
196
|
+
- Maintain proper focus order
|
|
197
|
+
|
|
198
|
+
**MUST NOT**:
|
|
199
|
+
- Rely on color alone for error indication
|
|
200
|
+
- Use placeholder text as labels
|
|
201
|
+
- Disrupt screen reader navigation
|
|
202
|
+
|
|
203
|
+
### Constraints
|
|
204
|
+
|
|
205
|
+
**WCAG COMPLIANCE**:
|
|
206
|
+
- Minimum contrast ratios for text
|
|
207
|
+
- Touch target size: 44x44px minimum
|
|
208
|
+
- Focus indicators on all interactive elements
|
|
209
|
+
- Screen reader announcements for state changes
|
|
210
|
+
|
|
211
|
+
---
|
|
317
212
|
|
|
318
|
-
##
|
|
213
|
+
## Related Components
|
|
319
214
|
|
|
320
|
-
-
|
|
321
|
-
-
|
|
322
|
-
-
|
|
323
|
-
- [`PasswordMatchIndicator`](./PasswordMatchIndicator.md) - Şifre eşleşme göstergesi
|
|
324
|
-
- [`SocialLoginButtons`](./SocialLoginButtons.md) - Social login butonları
|
|
325
|
-
- [`AuthLegalLinks`](./AuthLegalLinks.md) - Legal links
|
|
215
|
+
- **`PasswordStrengthIndicator`** (`src/presentation/components/PasswordIndicators.tsx`) - Visual password requirements display
|
|
216
|
+
- **`PasswordMatchIndicator`** (`src/presentation/components/PasswordIndicators.tsx`) - Password confirmation feedback
|
|
217
|
+
- **`SocialLoginButtons`** (`src/presentation/components/SocialLoginButtons.tsx`) - Social authentication integration
|
|
326
218
|
|
|
327
|
-
##
|
|
219
|
+
## Related Hooks
|
|
328
220
|
|
|
329
|
-
-
|
|
330
|
-
-
|
|
331
|
-
- [`useAuth`](../hooks/useAuth.md) - Ana auth state yönetimi
|
|
221
|
+
- **`useAuth`** (`src/presentation/hooks/useAuth.ts`) - Main authentication state management
|
|
222
|
+
- **`useSocialLogin`** (`src/presentation/hooks/useSocialLogin.ts`) - Social authentication handlers
|