react-native-nitro-auth 0.6.2 → 0.6.3
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/CHANGELOG.md +6 -1
- package/README.md +47 -10
- package/lib/commonjs/ui/social-button.js +39 -31
- package/lib/commonjs/ui/social-button.js.map +1 -1
- package/lib/module/ui/social-button.js +40 -31
- package/lib/module/ui/social-button.js.map +1 -1
- package/lib/typescript/commonjs/ui/social-button.d.ts +1 -1
- package/lib/typescript/commonjs/ui/social-button.d.ts.map +1 -1
- package/lib/typescript/module/ui/social-button.d.ts +1 -1
- package/lib/typescript/module/ui/social-button.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/ui/social-button.tsx +46 -38
package/CHANGELOG.md
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## 0.6.
|
|
3
|
+
## 0.6.3 - 2026-06-10
|
|
4
4
|
|
|
5
5
|
### Fixed
|
|
6
6
|
|
|
7
7
|
- Hardened Microsoft authority URL construction to reject absolute tenant URLs and invalid B2C domains while building valid B2C tenant/policy authority paths.
|
|
8
|
+
- Kept the Expo example iOS build on source-built Expo modules until precompiled module linking is supported by the current native dependency set.
|
|
8
9
|
|
|
9
10
|
### Changed
|
|
10
11
|
|
|
11
12
|
- Updated the Expo example SDK 56 patch dependencies so Expo Doctor passes cleanly.
|
|
13
|
+
- Polished the Expo example app UI for more consistent provider cards, controls, smoke-test status, and action states.
|
|
14
|
+
- Reduced unnecessary example-app React work by memoizing repeated demo rows, smoke-test UI, social buttons, and stable action handlers.
|
|
15
|
+
- Updated README setup, provider examples, option tables, badge links, error codes, and typed API documentation to match the current package surface.
|
|
16
|
+
- Added stronger compile-time coverage for provider-specific login options used by `AuthService.login()` and `useAuth().login()`.
|
|
12
17
|
|
|
13
18
|
## 0.6.1 - 2026-05-21
|
|
14
19
|
|
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
[](https://reactnative.dev/)
|
|
6
6
|
[](https://expo.dev/)
|
|
7
7
|
[](https://nitro.margelo.com/)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
8
9
|
|
|
9
10
|
Google Sign-In, Apple Sign-In, and Microsoft Entra ID for React Native and
|
|
10
11
|
Expo, powered by Nitro Modules.
|
|
@@ -113,15 +114,21 @@ path such as `contoso.onmicrosoft.com/B2C_1_signin`.
|
|
|
113
114
|
## Quick Start
|
|
114
115
|
|
|
115
116
|
```tsx
|
|
116
|
-
import {
|
|
117
|
+
import {
|
|
118
|
+
AuthService,
|
|
119
|
+
useAuth,
|
|
120
|
+
type ProviderLoginOptions,
|
|
121
|
+
} from "react-native-nitro-auth";
|
|
117
122
|
|
|
118
123
|
export function SignInButton() {
|
|
119
|
-
const { user, login, logout
|
|
124
|
+
const { user, login, logout } = useAuth();
|
|
120
125
|
|
|
121
126
|
async function signInWithGoogle() {
|
|
122
|
-
|
|
127
|
+
const options: ProviderLoginOptions<"google"> = {
|
|
123
128
|
scopes: ["openid", "profile", "email"],
|
|
124
|
-
}
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
await login("google", options);
|
|
125
132
|
}
|
|
126
133
|
|
|
127
134
|
if (user) {
|
|
@@ -131,8 +138,9 @@ export function SignInButton() {
|
|
|
131
138
|
return <Button title="Continue with Google" onPress={signInWithGoogle} />;
|
|
132
139
|
}
|
|
133
140
|
|
|
134
|
-
await AuthService.login(
|
|
141
|
+
await AuthService.login("microsoft", {
|
|
135
142
|
tenant: "organizations",
|
|
143
|
+
prompt: "select_account",
|
|
136
144
|
});
|
|
137
145
|
```
|
|
138
146
|
|
|
@@ -155,12 +163,39 @@ Main exports:
|
|
|
155
163
|
- `useAuth()` for React state, login, logout, refresh, and listeners.
|
|
156
164
|
- `AuthService` for imperative login, refresh, logout, and user reads.
|
|
157
165
|
- `SocialButton` for provider-aware UI.
|
|
158
|
-
- `AuthProvider` for
|
|
166
|
+
- `AuthProvider` for the `"google"`, `"apple"`, and `"microsoft"` provider names.
|
|
159
167
|
- `AuthError` and `AuthErrorCode` for deterministic failures.
|
|
160
168
|
- Provider option types for strongly typed login calls.
|
|
161
169
|
|
|
162
|
-
|
|
163
|
-
|
|
170
|
+
Provider-aware login calls reject unsupported option fields at compile time:
|
|
171
|
+
|
|
172
|
+
```ts
|
|
173
|
+
import type {
|
|
174
|
+
ProviderLoginOptions,
|
|
175
|
+
MicrosoftLoginOptions,
|
|
176
|
+
} from "react-native-nitro-auth";
|
|
177
|
+
|
|
178
|
+
const googleOptions: ProviderLoginOptions<"google"> = {
|
|
179
|
+
scopes: ["openid", "email"],
|
|
180
|
+
hostedDomain: "company.com",
|
|
181
|
+
forceAccountPicker: true,
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
const microsoftOptions: MicrosoftLoginOptions = {
|
|
185
|
+
tenant: "organizations",
|
|
186
|
+
prompt: "select_account",
|
|
187
|
+
};
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Supported login options:
|
|
191
|
+
|
|
192
|
+
| Provider | Options |
|
|
193
|
+
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
194
|
+
| Google | `scopes`, `loginHint`, `nonce`, `forceAccountPicker`, `hostedDomain`, `useSheet`, `openIDRealm`, `useOneTap`, `filterByAuthorizedAccounts`, `useLegacyGoogleSignIn`, `forceCodeForRefreshToken`, `requestVerifiedPhoneNumber` |
|
|
195
|
+
| Apple | `scopes`, `nonce` |
|
|
196
|
+
| Microsoft | `scopes`, `loginHint`, `tenant`, `prompt` |
|
|
197
|
+
|
|
198
|
+
`prompt` is typed as `"login"`, `"consent"`, `"select_account"`, or `"none"`.
|
|
164
199
|
|
|
165
200
|
## Storage Model
|
|
166
201
|
|
|
@@ -174,8 +209,10 @@ server.
|
|
|
174
209
|
Async public APIs throw `AuthError` with a stable `code`, `provider`, `platform`,
|
|
175
210
|
and `message`. Use `instanceof AuthError` when branching in UI code.
|
|
176
211
|
|
|
177
|
-
|
|
178
|
-
`
|
|
212
|
+
Error codes are `cancelled`, `timeout`, `popup_blocked`, `network_error`,
|
|
213
|
+
`configuration_error`, `not_signed_in`, `operation_in_progress`,
|
|
214
|
+
`unsupported_provider`, `invalid_state`, `invalid_nonce`, `token_error`,
|
|
215
|
+
`no_id_token`, `parse_error`, `refresh_failed`, and `unknown`.
|
|
179
216
|
|
|
180
217
|
## Platform Support
|
|
181
218
|
|
|
@@ -18,24 +18,30 @@ const PROVIDER_LABELS = {
|
|
|
18
18
|
const PROVIDER_PRIMARY_BACKGROUND = {
|
|
19
19
|
google: "#4285F4",
|
|
20
20
|
apple: "#000000",
|
|
21
|
-
microsoft: "#
|
|
21
|
+
microsoft: "#1f2937"
|
|
22
22
|
};
|
|
23
23
|
const getBackgroundColor = ({
|
|
24
24
|
disabled,
|
|
25
25
|
variant,
|
|
26
26
|
provider
|
|
27
27
|
}) => {
|
|
28
|
-
if (disabled) return "#
|
|
28
|
+
if (disabled) return "#E2E8F0";
|
|
29
29
|
if (variant === "black") return "#000000";
|
|
30
30
|
if (variant === "white") return "#FFFFFF";
|
|
31
31
|
if (variant === "outline") return "transparent";
|
|
32
32
|
return PROVIDER_PRIMARY_BACKGROUND[provider];
|
|
33
33
|
};
|
|
34
|
-
const getTextColor =
|
|
34
|
+
const getTextColor = ({
|
|
35
|
+
disabled,
|
|
36
|
+
variant
|
|
37
|
+
}) => {
|
|
38
|
+
if (disabled) return "#64748B";
|
|
39
|
+
return variant === "white" || variant === "outline" ? "#111827" : "#FFFFFF";
|
|
40
|
+
};
|
|
35
41
|
async function performLogin(provider) {
|
|
36
42
|
await _service.AuthService.login(provider);
|
|
37
43
|
}
|
|
38
|
-
const SocialButton = ({
|
|
44
|
+
const SocialButton = exports.SocialButton = /*#__PURE__*/_react.default.memo(function SocialButton({
|
|
39
45
|
provider,
|
|
40
46
|
variant = "primary",
|
|
41
47
|
borderRadius = 8,
|
|
@@ -45,9 +51,10 @@ const SocialButton = ({
|
|
|
45
51
|
onSuccess,
|
|
46
52
|
onError,
|
|
47
53
|
onPress
|
|
48
|
-
})
|
|
54
|
+
}) {
|
|
49
55
|
const [loading, setLoading] = (0, _react.useState)(false);
|
|
50
|
-
const
|
|
56
|
+
const isDisabled = loading || disabled === true;
|
|
57
|
+
const handleLogin = (0, _react.useCallback)(async () => {
|
|
51
58
|
if (loading || disabled) return;
|
|
52
59
|
if (onPress) {
|
|
53
60
|
onPress();
|
|
@@ -69,30 +76,36 @@ const SocialButton = ({
|
|
|
69
76
|
} finally {
|
|
70
77
|
setLoading(false);
|
|
71
78
|
}
|
|
72
|
-
};
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
79
|
+
}, [disabled, loading, onError, onPress, onSuccess, provider]);
|
|
80
|
+
const buttonStyle = (0, _react.useMemo)(() => ({
|
|
81
|
+
backgroundColor: getBackgroundColor({
|
|
82
|
+
disabled: isDisabled,
|
|
83
|
+
variant,
|
|
84
|
+
provider
|
|
85
|
+
}),
|
|
86
|
+
borderRadius,
|
|
87
|
+
borderColor: variant === "outline" ? "#DDDDDD" : "transparent",
|
|
88
|
+
borderWidth: variant === "outline" ? 1 : 0
|
|
89
|
+
}), [borderRadius, isDisabled, provider, variant]);
|
|
90
|
+
const textColor = getTextColor({
|
|
91
|
+
disabled: isDisabled,
|
|
92
|
+
variant
|
|
93
|
+
});
|
|
94
|
+
const labelStyle = (0, _react.useMemo)(() => [styles.text, {
|
|
95
|
+
color: textColor
|
|
96
|
+
}, textStyle], [textColor, textStyle]);
|
|
97
|
+
const appleIconStyle = (0, _react.useMemo)(() => [styles.iconText, {
|
|
98
|
+
color: textColor
|
|
99
|
+
}], [textColor]);
|
|
78
100
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
79
|
-
style: [styles.button,
|
|
80
|
-
backgroundColor: getBackgroundColor({
|
|
81
|
-
disabled: isDisabled,
|
|
82
|
-
variant,
|
|
83
|
-
provider
|
|
84
|
-
}),
|
|
85
|
-
borderRadius,
|
|
86
|
-
borderColor: getBorderColor(),
|
|
87
|
-
borderWidth: variant === "outline" ? 1 : 0
|
|
88
|
-
}, style],
|
|
101
|
+
style: [styles.button, buttonStyle, style],
|
|
89
102
|
onPress: handleLogin,
|
|
90
103
|
disabled: isDisabled,
|
|
91
104
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
92
105
|
style: styles.content,
|
|
93
106
|
children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
|
|
94
107
|
size: "small",
|
|
95
|
-
color:
|
|
108
|
+
color: textColor
|
|
96
109
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
97
110
|
children: [provider === "google" && variant !== "primary" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
98
111
|
style: styles.iconPlaceholder,
|
|
@@ -103,9 +116,7 @@ const SocialButton = ({
|
|
|
103
116
|
}), provider === "apple" && variant !== "primary" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
104
117
|
style: styles.iconPlaceholder,
|
|
105
118
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
106
|
-
style:
|
|
107
|
-
color: getTextColor(variant)
|
|
108
|
-
}],
|
|
119
|
+
style: appleIconStyle,
|
|
109
120
|
children: "\uF8FF"
|
|
110
121
|
})
|
|
111
122
|
}), provider === "microsoft" && variant !== "primary" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
@@ -115,16 +126,13 @@ const SocialButton = ({
|
|
|
115
126
|
children: "\u229E"
|
|
116
127
|
})
|
|
117
128
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
118
|
-
style:
|
|
119
|
-
color: getTextColor(variant)
|
|
120
|
-
}, textStyle],
|
|
129
|
+
style: labelStyle,
|
|
121
130
|
children: ["Sign in with ", PROVIDER_LABELS[provider]]
|
|
122
131
|
})]
|
|
123
132
|
})
|
|
124
133
|
})
|
|
125
134
|
});
|
|
126
|
-
};
|
|
127
|
-
exports.SocialButton = SocialButton;
|
|
135
|
+
});
|
|
128
136
|
const styles = _reactNative.StyleSheet.create({
|
|
129
137
|
button: {
|
|
130
138
|
paddingVertical: 12,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_service","_logger","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PROVIDER_LABELS","google","apple","microsoft","PROVIDER_PRIMARY_BACKGROUND","getBackgroundColor","disabled","variant","provider","getTextColor","performLogin","AuthService","login","SocialButton","borderRadius","style","textStyle","onSuccess","onError","onPress","loading","setLoading","useState","handleLogin","user","currentUser","error","__DEV__","logger","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_service","_logger","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PROVIDER_LABELS","google","apple","microsoft","PROVIDER_PRIMARY_BACKGROUND","getBackgroundColor","disabled","variant","provider","getTextColor","performLogin","AuthService","login","SocialButton","exports","React","memo","borderRadius","style","textStyle","onSuccess","onError","onPress","loading","setLoading","useState","isDisabled","handleLogin","useCallback","user","currentUser","error","__DEV__","logger","buttonStyle","useMemo","backgroundColor","borderColor","borderWidth","textColor","labelStyle","styles","text","color","appleIconStyle","iconText","jsx","Pressable","button","children","View","content","ActivityIndicator","size","jsxs","Fragment","iconPlaceholder","Text","microsoftIconText","StyleSheet","create","paddingVertical","paddingHorizontal","minHeight","justifyContent","alignItems","width","flexDirection","marginRight","height","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["ui/social-button.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAOA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBzC,MAAMkB,eAA6C,GAAG;EACpDC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE;AACb,CAAC;AAED,MAAMC,2BAAyD,GAAG;EAChEH,MAAM,EAAE,SAAS;EACjBC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE;AACb,CAAC;AAED,MAAME,kBAAkB,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,OAAO;EACPC;AAKF,CAAC,KAAa;EACZ,IAAIF,QAAQ,EAAE,OAAO,SAAS;EAC9B,IAAIC,OAAO,KAAK,OAAO,EAAE,OAAO,SAAS;EACzC,IAAIA,OAAO,KAAK,OAAO,EAAE,OAAO,SAAS;EACzC,IAAIA,OAAO,KAAK,SAAS,EAAE,OAAO,aAAa;EAC/C,OAAOH,2BAA2B,CAACI,QAAQ,CAAC;AAC9C,CAAC;AAED,MAAMC,YAAY,GAAGA,CAAC;EACpBH,QAAQ;EACRC;AAIF,CAAC,KAAa;EACZ,IAAID,QAAQ,EAAE,OAAO,SAAS;EAC9B,OAAOC,OAAO,KAAK,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS;AAC7E,CAAC;AAED,eAAeG,YAAYA,CAACF,QAAsB,EAAiB;EACjE,MAAMG,oBAAW,CAACC,KAAK,CAACJ,QAAQ,CAAC;AACnC;AAEO,MAAMK,YAAY,GAAAC,OAAA,CAAAD,YAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,SAASH,YAAYA,CAAC;EAC3DL,QAAQ;EACRD,OAAO,GAAG,SAAS;EACnBU,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC,SAAS;EACTb,QAAQ;EACRc,SAAS;EACTC,OAAO;EACPC;AACiB,CAAC,EAAE;EACpB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC7C,MAAMC,UAAU,GAAGH,OAAO,IAAIjB,QAAQ,KAAK,IAAI;EAE/C,MAAMqB,WAAW,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC1C,IAAIL,OAAO,IAAIjB,QAAQ,EAAE;IACzB,IAAIgB,OAAO,EAAE;MACXA,OAAO,CAAC,CAAC;MACT;IACF;IAEAE,UAAU,CAAC,IAAI,CAAC;IAChB,IAAI;MACF,MAAMd,YAAY,CAACF,QAAQ,CAAC;MAC5B,MAAMqB,IAAI,GAAGlB,oBAAW,CAACmB,WAAW;MACpC,IAAID,IAAI,EAAE;QACRT,SAAS,GAAGS,IAAI,CAAC;MACnB;IACF,CAAC,CAAC,OAAOE,KAAK,EAAE;MACd,IAAIV,OAAO,EAAE;QACXA,OAAO,CAACU,KAAK,CAAC;MAChB,CAAC,MAAM,IAAIC,OAAO,EAAE;QAClBC,cAAM,CAACF,KAAK,CAAC,+BAA+B,EAAEA,KAAK,CAAC;MACtD;IACF,CAAC,SAAS;MACRP,UAAU,CAAC,KAAK,CAAC;IACnB;EACF,CAAC,EAAE,CAAClB,QAAQ,EAAEiB,OAAO,EAAEF,OAAO,EAAEC,OAAO,EAAEF,SAAS,EAAEZ,QAAQ,CAAC,CAAC;EAE9D,MAAM0B,WAAW,GAAG,IAAAC,cAAO,EACzB,OAAO;IACLC,eAAe,EAAE/B,kBAAkB,CAAC;MAClCC,QAAQ,EAAEoB,UAAU;MACpBnB,OAAO;MACPC;IACF,CAAC,CAAC;IACFS,YAAY;IACZoB,WAAW,EAAE9B,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,aAAa;IAC9D+B,WAAW,EAAE/B,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG;EAC3C,CAAC,CAAC,EACF,CAACU,YAAY,EAAES,UAAU,EAAElB,QAAQ,EAAED,OAAO,CAC9C,CAAC;EAED,MAAMgC,SAAS,GAAG9B,YAAY,CAAC;IAAEH,QAAQ,EAAEoB,UAAU;IAAEnB;EAAQ,CAAC,CAAC;EACjE,MAAMiC,UAAU,GAAG,IAAAL,cAAO,EACxB,MAAM,CAACM,MAAM,CAACC,IAAI,EAAE;IAAEC,KAAK,EAAEJ;EAAU,CAAC,EAAEpB,SAAS,CAAC,EACpD,CAACoB,SAAS,EAAEpB,SAAS,CACvB,CAAC;EACD,MAAMyB,cAAc,GAAG,IAAAT,cAAO,EAC5B,MAAM,CAACM,MAAM,CAACI,QAAQ,EAAE;IAAEF,KAAK,EAAEJ;EAAU,CAAC,CAAC,EAC7C,CAACA,SAAS,CACZ,CAAC;EAED,oBACE,IAAA3D,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAsE,SAAS;IACR7B,KAAK,EAAE,CAACuB,MAAM,CAACO,MAAM,EAAEd,WAAW,EAAEhB,KAAK,CAAE;IAC3CI,OAAO,EAAEK,WAAY;IACrBrB,QAAQ,EAAEoB,UAAW;IAAAuB,QAAA,eAErB,IAAArE,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAyE,IAAI;MAAChC,KAAK,EAAEuB,MAAM,CAACU,OAAQ;MAAAF,QAAA,EACzB1B,OAAO,gBACN,IAAA3C,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAA2E,iBAAiB;QAACC,IAAI,EAAC,OAAO;QAACV,KAAK,EAAEJ;MAAU,CAAE,CAAC,gBAEpD,IAAA3D,WAAA,CAAA0E,IAAA,EAAA1E,WAAA,CAAA2E,QAAA;QAAAN,QAAA,GACGzC,QAAQ,KAAK,QAAQ,IAAID,OAAO,KAAK,SAAS,iBAC7C,IAAA3B,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAyE,IAAI;UAAChC,KAAK,EAAEuB,MAAM,CAACe,eAAgB;UAAAP,QAAA,eAClC,IAAArE,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAgF,IAAI;YAACvC,KAAK,EAAEuB,MAAM,CAACI,QAAS;YAAAI,QAAA,EAAC;UAAC,CAAM;QAAC,CAClC,CACP,EACAzC,QAAQ,KAAK,OAAO,IAAID,OAAO,KAAK,SAAS,iBAC5C,IAAA3B,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAyE,IAAI;UAAChC,KAAK,EAAEuB,MAAM,CAACe,eAAgB;UAAAP,QAAA,eAClC,IAAArE,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAgF,IAAI;YAACvC,KAAK,EAAE0B,cAAe;YAAAK,QAAA,EAAC;UAAC,CAAM;QAAC,CACjC,CACP,EACAzC,QAAQ,KAAK,WAAW,IAAID,OAAO,KAAK,SAAS,iBAChD,IAAA3B,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAyE,IAAI;UAAChC,KAAK,EAAEuB,MAAM,CAACe,eAAgB;UAAAP,QAAA,eAClC,IAAArE,WAAA,CAAAkE,GAAA,EAACrE,YAAA,CAAAgF,IAAI;YAACvC,KAAK,EAAEuB,MAAM,CAACiB,iBAAkB;YAAAT,QAAA,EAAC;UAAC,CAAM;QAAC,CAC3C,CACP,eACD,IAAArE,WAAA,CAAA0E,IAAA,EAAC7E,YAAA,CAAAgF,IAAI;UAACvC,KAAK,EAAEsB,UAAW;UAAAS,QAAA,GAAC,eACV,EAACjD,eAAe,CAACQ,QAAQ,CAAC;QAAA,CACnC,CAAC;MAAA,CACP;IACH,CACG;EAAC,CACE,CAAC;AAEhB,CAAC,CAAC;AAEF,MAAMiC,MAAM,GAAGkB,uBAAU,CAACC,MAAM,CAAC;EAC/BZ,MAAM,EAAE;IACNa,eAAe,EAAE,EAAE;IACnBC,iBAAiB,EAAE,EAAE;IACrBC,SAAS,EAAE,EAAE;IACbC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,MAAM;IACbC,aAAa,EAAE;EACjB,CAAC;EACDhB,OAAO,EAAE;IACPgB,aAAa,EAAE,KAAK;IACpBF,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDR,eAAe,EAAE;IACfY,WAAW,EAAE,EAAE;IACfF,KAAK,EAAE,EAAE;IACTG,MAAM,EAAE,EAAE;IACVJ,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDtB,IAAI,EAAE;IACJ4B,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACD1B,QAAQ,EAAE;IACRyB,QAAQ,EAAE;EACZ,CAAC;EACDZ,iBAAiB,EAAE;IACjBY,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useState } from "react";
|
|
3
|
+
import React, { useCallback, useMemo, useState } from "react";
|
|
4
4
|
import { Pressable, Text, StyleSheet, View, ActivityIndicator } from "react-native";
|
|
5
5
|
import { AuthService } from "../service";
|
|
6
6
|
import { logger } from "../utils/logger.js";
|
|
@@ -13,24 +13,30 @@ const PROVIDER_LABELS = {
|
|
|
13
13
|
const PROVIDER_PRIMARY_BACKGROUND = {
|
|
14
14
|
google: "#4285F4",
|
|
15
15
|
apple: "#000000",
|
|
16
|
-
microsoft: "#
|
|
16
|
+
microsoft: "#1f2937"
|
|
17
17
|
};
|
|
18
18
|
const getBackgroundColor = ({
|
|
19
19
|
disabled,
|
|
20
20
|
variant,
|
|
21
21
|
provider
|
|
22
22
|
}) => {
|
|
23
|
-
if (disabled) return "#
|
|
23
|
+
if (disabled) return "#E2E8F0";
|
|
24
24
|
if (variant === "black") return "#000000";
|
|
25
25
|
if (variant === "white") return "#FFFFFF";
|
|
26
26
|
if (variant === "outline") return "transparent";
|
|
27
27
|
return PROVIDER_PRIMARY_BACKGROUND[provider];
|
|
28
28
|
};
|
|
29
|
-
const getTextColor =
|
|
29
|
+
const getTextColor = ({
|
|
30
|
+
disabled,
|
|
31
|
+
variant
|
|
32
|
+
}) => {
|
|
33
|
+
if (disabled) return "#64748B";
|
|
34
|
+
return variant === "white" || variant === "outline" ? "#111827" : "#FFFFFF";
|
|
35
|
+
};
|
|
30
36
|
async function performLogin(provider) {
|
|
31
37
|
await AuthService.login(provider);
|
|
32
38
|
}
|
|
33
|
-
export const SocialButton = ({
|
|
39
|
+
export const SocialButton = /*#__PURE__*/React.memo(function SocialButton({
|
|
34
40
|
provider,
|
|
35
41
|
variant = "primary",
|
|
36
42
|
borderRadius = 8,
|
|
@@ -40,9 +46,10 @@ export const SocialButton = ({
|
|
|
40
46
|
onSuccess,
|
|
41
47
|
onError,
|
|
42
48
|
onPress
|
|
43
|
-
})
|
|
49
|
+
}) {
|
|
44
50
|
const [loading, setLoading] = useState(false);
|
|
45
|
-
const
|
|
51
|
+
const isDisabled = loading || disabled === true;
|
|
52
|
+
const handleLogin = useCallback(async () => {
|
|
46
53
|
if (loading || disabled) return;
|
|
47
54
|
if (onPress) {
|
|
48
55
|
onPress();
|
|
@@ -64,30 +71,36 @@ export const SocialButton = ({
|
|
|
64
71
|
} finally {
|
|
65
72
|
setLoading(false);
|
|
66
73
|
}
|
|
67
|
-
};
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
}, [disabled, loading, onError, onPress, onSuccess, provider]);
|
|
75
|
+
const buttonStyle = useMemo(() => ({
|
|
76
|
+
backgroundColor: getBackgroundColor({
|
|
77
|
+
disabled: isDisabled,
|
|
78
|
+
variant,
|
|
79
|
+
provider
|
|
80
|
+
}),
|
|
81
|
+
borderRadius,
|
|
82
|
+
borderColor: variant === "outline" ? "#DDDDDD" : "transparent",
|
|
83
|
+
borderWidth: variant === "outline" ? 1 : 0
|
|
84
|
+
}), [borderRadius, isDisabled, provider, variant]);
|
|
85
|
+
const textColor = getTextColor({
|
|
86
|
+
disabled: isDisabled,
|
|
87
|
+
variant
|
|
88
|
+
});
|
|
89
|
+
const labelStyle = useMemo(() => [styles.text, {
|
|
90
|
+
color: textColor
|
|
91
|
+
}, textStyle], [textColor, textStyle]);
|
|
92
|
+
const appleIconStyle = useMemo(() => [styles.iconText, {
|
|
93
|
+
color: textColor
|
|
94
|
+
}], [textColor]);
|
|
73
95
|
return /*#__PURE__*/_jsx(Pressable, {
|
|
74
|
-
style: [styles.button,
|
|
75
|
-
backgroundColor: getBackgroundColor({
|
|
76
|
-
disabled: isDisabled,
|
|
77
|
-
variant,
|
|
78
|
-
provider
|
|
79
|
-
}),
|
|
80
|
-
borderRadius,
|
|
81
|
-
borderColor: getBorderColor(),
|
|
82
|
-
borderWidth: variant === "outline" ? 1 : 0
|
|
83
|
-
}, style],
|
|
96
|
+
style: [styles.button, buttonStyle, style],
|
|
84
97
|
onPress: handleLogin,
|
|
85
98
|
disabled: isDisabled,
|
|
86
99
|
children: /*#__PURE__*/_jsx(View, {
|
|
87
100
|
style: styles.content,
|
|
88
101
|
children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
89
102
|
size: "small",
|
|
90
|
-
color:
|
|
103
|
+
color: textColor
|
|
91
104
|
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
92
105
|
children: [provider === "google" && variant !== "primary" && /*#__PURE__*/_jsx(View, {
|
|
93
106
|
style: styles.iconPlaceholder,
|
|
@@ -98,9 +111,7 @@ export const SocialButton = ({
|
|
|
98
111
|
}), provider === "apple" && variant !== "primary" && /*#__PURE__*/_jsx(View, {
|
|
99
112
|
style: styles.iconPlaceholder,
|
|
100
113
|
children: /*#__PURE__*/_jsx(Text, {
|
|
101
|
-
style:
|
|
102
|
-
color: getTextColor(variant)
|
|
103
|
-
}],
|
|
114
|
+
style: appleIconStyle,
|
|
104
115
|
children: "\uF8FF"
|
|
105
116
|
})
|
|
106
117
|
}), provider === "microsoft" && variant !== "primary" && /*#__PURE__*/_jsx(View, {
|
|
@@ -110,15 +121,13 @@ export const SocialButton = ({
|
|
|
110
121
|
children: "\u229E"
|
|
111
122
|
})
|
|
112
123
|
}), /*#__PURE__*/_jsxs(Text, {
|
|
113
|
-
style:
|
|
114
|
-
color: getTextColor(variant)
|
|
115
|
-
}, textStyle],
|
|
124
|
+
style: labelStyle,
|
|
116
125
|
children: ["Sign in with ", PROVIDER_LABELS[provider]]
|
|
117
126
|
})]
|
|
118
127
|
})
|
|
119
128
|
})
|
|
120
129
|
});
|
|
121
|
-
};
|
|
130
|
+
});
|
|
122
131
|
const styles = StyleSheet.create({
|
|
123
132
|
button: {
|
|
124
133
|
paddingVertical: 12,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","Text","StyleSheet","View","ActivityIndicator","AuthService","logger","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PROVIDER_LABELS","google","apple","microsoft","PROVIDER_PRIMARY_BACKGROUND","getBackgroundColor","disabled","variant","provider","getTextColor","performLogin","login","SocialButton","borderRadius","style","textStyle","onSuccess","onError","onPress","loading","setLoading","handleLogin","user","currentUser","error","__DEV__","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","useState","Pressable","Text","StyleSheet","View","ActivityIndicator","AuthService","logger","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PROVIDER_LABELS","google","apple","microsoft","PROVIDER_PRIMARY_BACKGROUND","getBackgroundColor","disabled","variant","provider","getTextColor","performLogin","login","SocialButton","memo","borderRadius","style","textStyle","onSuccess","onError","onPress","loading","setLoading","isDisabled","handleLogin","user","currentUser","error","__DEV__","buttonStyle","backgroundColor","borderColor","borderWidth","textColor","labelStyle","styles","text","color","appleIconStyle","iconText","button","children","content","size","iconPlaceholder","microsoftIconText","create","paddingVertical","paddingHorizontal","minHeight","justifyContent","alignItems","width","flexDirection","marginRight","height","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["ui/social-button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,5 +13,5 @@ export type SocialButtonProps = {
|
|
|
13
13
|
onError?: (error: unknown) => void;
|
|
14
14
|
onPress?: () => void;
|
|
15
15
|
};
|
|
16
|
-
export declare const SocialButton: ({ provider, variant, borderRadius, style, textStyle, disabled, onSuccess, onError, onPress, }: SocialButtonProps) => React.JSX.Element
|
|
16
|
+
export declare const SocialButton: React.MemoExoticComponent<({ provider, variant, borderRadius, style, textStyle, disabled, onSuccess, onError, onPress, }: SocialButtonProps) => React.JSX.Element>;
|
|
17
17
|
//# sourceMappingURL=social-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"social-button.d.ts","sourceRoot":"","sources":["../../../../src/ui/social-button.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"social-button.d.ts","sourceRoot":"","sources":["../../../../src/ui/social-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzD,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA6CF,eAAO,MAAM,YAAY,4HAUtB,iBAAiB,uBAuFlB,CAAC"}
|
|
@@ -13,5 +13,5 @@ export type SocialButtonProps = {
|
|
|
13
13
|
onError?: (error: unknown) => void;
|
|
14
14
|
onPress?: () => void;
|
|
15
15
|
};
|
|
16
|
-
export declare const SocialButton: ({ provider, variant, borderRadius, style, textStyle, disabled, onSuccess, onError, onPress, }: SocialButtonProps) => React.JSX.Element
|
|
16
|
+
export declare const SocialButton: React.MemoExoticComponent<({ provider, variant, borderRadius, style, textStyle, disabled, onSuccess, onError, onPress, }: SocialButtonProps) => React.JSX.Element>;
|
|
17
17
|
//# sourceMappingURL=social-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"social-button.d.ts","sourceRoot":"","sources":["../../../../src/ui/social-button.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"social-button.d.ts","sourceRoot":"","sources":["../../../../src/ui/social-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzD,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA6CF,eAAO,MAAM,YAAY,4HAUtB,iBAAiB,uBAuFlB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-nitro-auth",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "High-performance authentication library for React Native with Google Sign-In, Apple Sign-In, and Microsoft Sign-In support, powered by Nitro Modules (JSI)",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
package/src/ui/social-button.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useCallback, useMemo, useState } from "react";
|
|
2
2
|
import type { ViewStyle, TextStyle } from "react-native";
|
|
3
3
|
import {
|
|
4
4
|
Pressable,
|
|
@@ -34,7 +34,7 @@ const PROVIDER_LABELS: Record<AuthProvider, string> = {
|
|
|
34
34
|
const PROVIDER_PRIMARY_BACKGROUND: Record<AuthProvider, string> = {
|
|
35
35
|
google: "#4285F4",
|
|
36
36
|
apple: "#000000",
|
|
37
|
-
microsoft: "#
|
|
37
|
+
microsoft: "#1f2937",
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
const getBackgroundColor = ({
|
|
@@ -46,21 +46,29 @@ const getBackgroundColor = ({
|
|
|
46
46
|
variant: SocialButtonVariant;
|
|
47
47
|
provider: AuthProvider;
|
|
48
48
|
}): string => {
|
|
49
|
-
if (disabled) return "#
|
|
49
|
+
if (disabled) return "#E2E8F0";
|
|
50
50
|
if (variant === "black") return "#000000";
|
|
51
51
|
if (variant === "white") return "#FFFFFF";
|
|
52
52
|
if (variant === "outline") return "transparent";
|
|
53
53
|
return PROVIDER_PRIMARY_BACKGROUND[provider];
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
-
const getTextColor = (
|
|
57
|
-
|
|
56
|
+
const getTextColor = ({
|
|
57
|
+
disabled,
|
|
58
|
+
variant,
|
|
59
|
+
}: {
|
|
60
|
+
disabled: boolean;
|
|
61
|
+
variant: SocialButtonVariant;
|
|
62
|
+
}): string => {
|
|
63
|
+
if (disabled) return "#64748B";
|
|
64
|
+
return variant === "white" || variant === "outline" ? "#111827" : "#FFFFFF";
|
|
65
|
+
};
|
|
58
66
|
|
|
59
67
|
async function performLogin(provider: AuthProvider): Promise<void> {
|
|
60
68
|
await AuthService.login(provider);
|
|
61
69
|
}
|
|
62
70
|
|
|
63
|
-
export const SocialButton = ({
|
|
71
|
+
export const SocialButton = React.memo(function SocialButton({
|
|
64
72
|
provider,
|
|
65
73
|
variant = "primary",
|
|
66
74
|
borderRadius = 8,
|
|
@@ -70,10 +78,11 @@ export const SocialButton = ({
|
|
|
70
78
|
onSuccess,
|
|
71
79
|
onError,
|
|
72
80
|
onPress,
|
|
73
|
-
}: SocialButtonProps)
|
|
81
|
+
}: SocialButtonProps) {
|
|
74
82
|
const [loading, setLoading] = useState(false);
|
|
83
|
+
const isDisabled = loading || disabled === true;
|
|
75
84
|
|
|
76
|
-
const handleLogin = async () => {
|
|
85
|
+
const handleLogin = useCallback(async () => {
|
|
77
86
|
if (loading || disabled) return;
|
|
78
87
|
if (onPress) {
|
|
79
88
|
onPress();
|
|
@@ -96,36 +105,41 @@ export const SocialButton = ({
|
|
|
96
105
|
} finally {
|
|
97
106
|
setLoading(false);
|
|
98
107
|
}
|
|
99
|
-
};
|
|
100
|
-
const isDisabled = loading || disabled === true;
|
|
108
|
+
}, [disabled, loading, onError, onPress, onSuccess, provider]);
|
|
101
109
|
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
110
|
+
const buttonStyle = useMemo(
|
|
111
|
+
() => ({
|
|
112
|
+
backgroundColor: getBackgroundColor({
|
|
113
|
+
disabled: isDisabled,
|
|
114
|
+
variant,
|
|
115
|
+
provider,
|
|
116
|
+
}),
|
|
117
|
+
borderRadius,
|
|
118
|
+
borderColor: variant === "outline" ? "#DDDDDD" : "transparent",
|
|
119
|
+
borderWidth: variant === "outline" ? 1 : 0,
|
|
120
|
+
}),
|
|
121
|
+
[borderRadius, isDisabled, provider, variant],
|
|
122
|
+
);
|
|
123
|
+
|
|
124
|
+
const textColor = getTextColor({ disabled: isDisabled, variant });
|
|
125
|
+
const labelStyle = useMemo(
|
|
126
|
+
() => [styles.text, { color: textColor }, textStyle],
|
|
127
|
+
[textColor, textStyle],
|
|
128
|
+
);
|
|
129
|
+
const appleIconStyle = useMemo(
|
|
130
|
+
() => [styles.iconText, { color: textColor }],
|
|
131
|
+
[textColor],
|
|
132
|
+
);
|
|
106
133
|
|
|
107
134
|
return (
|
|
108
135
|
<Pressable
|
|
109
|
-
style={[
|
|
110
|
-
styles.button,
|
|
111
|
-
{
|
|
112
|
-
backgroundColor: getBackgroundColor({
|
|
113
|
-
disabled: isDisabled,
|
|
114
|
-
variant,
|
|
115
|
-
provider,
|
|
116
|
-
}),
|
|
117
|
-
borderRadius,
|
|
118
|
-
borderColor: getBorderColor(),
|
|
119
|
-
borderWidth: variant === "outline" ? 1 : 0,
|
|
120
|
-
},
|
|
121
|
-
style,
|
|
122
|
-
]}
|
|
136
|
+
style={[styles.button, buttonStyle, style]}
|
|
123
137
|
onPress={handleLogin}
|
|
124
138
|
disabled={isDisabled}
|
|
125
139
|
>
|
|
126
140
|
<View style={styles.content}>
|
|
127
141
|
{loading ? (
|
|
128
|
-
<ActivityIndicator size="small" color={
|
|
142
|
+
<ActivityIndicator size="small" color={textColor} />
|
|
129
143
|
) : (
|
|
130
144
|
<>
|
|
131
145
|
{provider === "google" && variant !== "primary" && (
|
|
@@ -135,11 +149,7 @@ export const SocialButton = ({
|
|
|
135
149
|
)}
|
|
136
150
|
{provider === "apple" && variant !== "primary" && (
|
|
137
151
|
<View style={styles.iconPlaceholder}>
|
|
138
|
-
<Text
|
|
139
|
-
style={[styles.iconText, { color: getTextColor(variant) }]}
|
|
140
|
-
>
|
|
141
|
-
|
|
142
|
-
</Text>
|
|
152
|
+
<Text style={appleIconStyle}></Text>
|
|
143
153
|
</View>
|
|
144
154
|
)}
|
|
145
155
|
{provider === "microsoft" && variant !== "primary" && (
|
|
@@ -147,9 +157,7 @@ export const SocialButton = ({
|
|
|
147
157
|
<Text style={styles.microsoftIconText}>⊞</Text>
|
|
148
158
|
</View>
|
|
149
159
|
)}
|
|
150
|
-
<Text
|
|
151
|
-
style={[styles.text, { color: getTextColor(variant) }, textStyle]}
|
|
152
|
-
>
|
|
160
|
+
<Text style={labelStyle}>
|
|
153
161
|
Sign in with {PROVIDER_LABELS[provider]}
|
|
154
162
|
</Text>
|
|
155
163
|
</>
|
|
@@ -157,7 +165,7 @@ export const SocialButton = ({
|
|
|
157
165
|
</View>
|
|
158
166
|
</Pressable>
|
|
159
167
|
);
|
|
160
|
-
};
|
|
168
|
+
});
|
|
161
169
|
|
|
162
170
|
const styles = StyleSheet.create({
|
|
163
171
|
button: {
|