ordering-ui-react-native 0.15.50 → 0.15.51
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import { Platform, Text, StyleSheet } from 'react-native';
|
|
3
|
-
import { useApi, useSession, useLanguage } from 'ordering-components/native';
|
|
3
|
+
import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
|
|
4
4
|
import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
|
|
5
5
|
import uuid from 'react-native-uuid';
|
|
6
6
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
|
@@ -16,12 +16,12 @@ export const AppleLogin = (props: any) => {
|
|
|
16
16
|
} = props
|
|
17
17
|
|
|
18
18
|
const [ordering] = useApi();
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
const [{ auth }] = useSession();
|
|
20
|
+
const [, t] = useLanguage();
|
|
21
|
+
const [{ configs }] = useConfig()
|
|
22
|
+
const buttonText = auth
|
|
23
|
+
? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
|
|
24
|
+
: t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
|
|
25
25
|
|
|
26
26
|
const performAppleLogin = async (code: string) => {
|
|
27
27
|
try {
|
|
@@ -32,9 +32,10 @@ export const AppleLogin = (props: any) => {
|
|
|
32
32
|
code: code
|
|
33
33
|
})
|
|
34
34
|
})
|
|
35
|
-
|
|
35
|
+
const { result, error } = await response.json()
|
|
36
|
+
if (!error) {
|
|
36
37
|
if (handleSuccessAppleLogin) {
|
|
37
|
-
handleSuccessAppleLogin(
|
|
38
|
+
handleSuccessAppleLogin(result)
|
|
38
39
|
handleLoading && handleLoading(false)
|
|
39
40
|
}
|
|
40
41
|
} else {
|
|
@@ -52,54 +53,58 @@ export const AppleLogin = (props: any) => {
|
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
const onIOSButtonPress = async () => {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
56
|
+
try {
|
|
57
|
+
const appleAuthRequestResponse = await appleAuth.performRequest({
|
|
58
|
+
requestedOperation: appleAuth.Operation.LOGIN,
|
|
59
|
+
requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// get current authentication state for user
|
|
63
|
+
// /!\ This method must be tested on a real device. On the iOS simulator it always throws an error.
|
|
64
|
+
const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
|
|
65
|
+
|
|
66
|
+
// use credentialState response to ensure the user is authenticated
|
|
67
|
+
if (credentialState === appleAuth.State.AUTHORIZED) {
|
|
68
|
+
// user is authenticated
|
|
69
|
+
if (appleAuthRequestResponse.authorizationCode) {
|
|
70
|
+
performAppleLogin(appleAuthRequestResponse.authorizationCode)
|
|
71
|
+
}
|
|
70
72
|
}
|
|
73
|
+
} catch (err: any) {
|
|
74
|
+
handleLoading && handleLoading(false)
|
|
75
|
+
handleErrors && handleErrors(err.message)
|
|
71
76
|
}
|
|
72
|
-
|
|
73
77
|
}
|
|
74
|
-
|
|
75
78
|
const onAndroidButtonPress = async () => {
|
|
76
|
-
// Generate secure, random values for state and nonce
|
|
77
|
-
const rawNonce: any = uuid.v4();
|
|
78
|
-
const state: any = uuid.v4();
|
|
79
|
-
|
|
80
|
-
// Configure the request
|
|
81
|
-
appleAuthAndroid.configure({
|
|
82
|
-
clientId: 'com.example.client-android',
|
|
83
|
-
// Return URL added to your Apple dev console. We intercept this redirect, but it must still match
|
|
84
|
-
// the URL you provided to Apple. It can be an empty route on your backend as it's never called.
|
|
85
|
-
redirectUri: 'https://example.com/auth/callback',
|
|
86
|
-
responseType: appleAuthAndroid.ResponseType.ALL,
|
|
87
|
-
scope: appleAuthAndroid.Scope.ALL,
|
|
88
|
-
// Random nonce value that will be SHA256 hashed before sending to Apple.
|
|
89
|
-
nonce: rawNonce,
|
|
90
|
-
state,
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
// Open the browser window for user sign in
|
|
94
|
-
const response = await appleAuthAndroid.signIn();
|
|
95
|
-
|
|
96
79
|
try {
|
|
80
|
+
// Generate secure, random values for state and nonce
|
|
81
|
+
const rawNonce: any = uuid.v4();
|
|
82
|
+
const state: any = uuid.v4();
|
|
83
|
+
|
|
84
|
+
// Configure the request
|
|
85
|
+
appleAuthAndroid.configure({
|
|
86
|
+
// The Service ID you registered with Apple
|
|
87
|
+
clientId: configs?.apple_login_client_id?.value,
|
|
88
|
+
// Return URL added to your Apple dev console. We intercept this redirect, but it must still match
|
|
89
|
+
// the URL you provided to Apple. It can be an empty route on your backend as it's never called.
|
|
90
|
+
redirectUri: 'https://example.com/auth/callback',
|
|
91
|
+
responseType: appleAuthAndroid.ResponseType.ALL,
|
|
92
|
+
scope: appleAuthAndroid.Scope.ALL,
|
|
93
|
+
// Random nonce value that will be SHA256 hashed before sending to Apple.
|
|
94
|
+
nonce: rawNonce,
|
|
95
|
+
state,
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// Open the browser window for user sign in
|
|
99
|
+
const response = await appleAuthAndroid.signIn();
|
|
97
100
|
if (response.code) {
|
|
98
101
|
performAppleLogin(response.code)
|
|
99
102
|
}
|
|
100
103
|
} catch (err: any) {
|
|
101
|
-
|
|
104
|
+
handleLoading && handleLoading(false)
|
|
105
|
+
handleErrors && handleErrors(err.message)
|
|
102
106
|
}
|
|
107
|
+
|
|
103
108
|
}
|
|
104
109
|
|
|
105
110
|
useEffect(() => {
|
|
@@ -115,35 +120,36 @@ export const AppleLogin = (props: any) => {
|
|
|
115
120
|
if (Platform.OS === 'android') return appleAuthAndroid.isSupported;
|
|
116
121
|
return false;
|
|
117
122
|
}
|
|
123
|
+
|
|
118
124
|
return (
|
|
119
125
|
<Container>
|
|
120
|
-
{canShowButton() &&
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
126
|
+
{canShowButton() &&
|
|
127
|
+
<AppleButton
|
|
128
|
+
onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress()}
|
|
129
|
+
>
|
|
130
|
+
<Icon
|
|
131
|
+
name="apple"
|
|
132
|
+
size={20}
|
|
133
|
+
color={'black'}
|
|
134
|
+
style={style.fbBtn}
|
|
135
|
+
/>
|
|
136
|
+
<Text style={style.textBtn}>
|
|
137
|
+
{buttonText}
|
|
138
|
+
</Text>
|
|
139
|
+
</AppleButton>
|
|
134
140
|
}
|
|
135
141
|
</Container>
|
|
136
142
|
);
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
const style = StyleSheet.create({
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
})
|
|
146
|
+
fbBtn: {
|
|
147
|
+
position: 'absolute',
|
|
148
|
+
left: 0,
|
|
149
|
+
marginHorizontal: 16
|
|
150
|
+
},
|
|
151
|
+
textBtn: {
|
|
152
|
+
fontSize: 14,
|
|
153
|
+
color: '#000000'
|
|
154
|
+
}
|
|
155
|
+
})
|