Skip to content

Commit f1b62d0

Browse files
Romick2005Romick2005
committed
invertase#166 Add examples with apple webView login functionality.
1 parent 28082df commit f1b62d0

File tree

5 files changed

+295
-155
lines changed

5 files changed

+295
-155
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -231,12 +231,12 @@ async function onAppleButtonPress() {
231231
```js
232232

233233
// App.js
234-
import React from 'react';
234+
import React from "react";
235235
import {
236236
View,
237-
TouchableWithoutFeedback
237+
TouchableWithoutFeedback,
238238
Text
239-
} from 'react-native';
239+
} from "react-native";
240240
import {
241241
appleAuth,
242242
appleAuthAndroid,

‎example/app.android.js

+138-98
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,22 @@
1616
*
1717
*/
1818

19-
import React from 'react';
20-
import { StyleSheet, View, Image, Text } from 'react-native';
21-
import { AppleButton, appleAuthAndroid } from '@invertase/react-native-apple-authentication';
19+
import React, { useState } from 'react';
20+
import { StyleSheet, View, Image, TouchableOpacity, Text } from 'react-native';
21+
import { AppleButton, appleAuthAndroid, AppleAuthWebView } from '@invertase/react-native-apple-authentication';
2222
import 'react-native-get-random-values';
2323
import { v4 as uuid } from 'uuid'
2424
import appleLogoWhite from './images/apple_logo_white.png';
2525
import appleLogoBlack from './images/apple_logo_black.png';
26+
import { getAppleAuthConfig, parseAppleAuthResponse } from './app.shared';
2627

27-
28-
export default RootComponent = () => {
28+
export default function RootComponent() {
29+
const [appleAuthConfig, setAppleAuthConfig] = useState(null);
2930

3031
const doAppleLogin = async () => {
3132
// Generate secure, random values for state and nonce
3233
const rawNonce = uuid();
33-
const state = uuid();
34+
const rawState = uuid();
3435

3536
try {
3637
// Initialize the module
@@ -63,7 +64,7 @@ export default RootComponent = () => {
6364

6465
// [OPTIONAL]
6566
// Unique state value used to prevent CSRF attacks. A UUID will be generated if nothing is provided.
66-
state,
67+
state: rawState,
6768
});
6869

6970
const response = await appleAuthAndroid.signIn();
@@ -96,99 +97,138 @@ export default RootComponent = () => {
9697
}
9798
};
9899

100+
if (appleAuthConfig) {
101+
return (
102+
<AppleAuthWebView
103+
config={appleAuthConfig}
104+
onResponse={
105+
(responseContent) => {
106+
setAppleAuthConfig(null);
107+
parseAppleAuthResponse(responseContent);
108+
}
109+
}
110+
/>
111+
);
112+
}
113+
99114
return (
100115
<View style={[styles.container, styles.horizontal]}>
101-
{appleAuthAndroid.isSupported && (
102-
<View>
103-
<Text style={styles.header}>Buttons</Text>
104-
105-
<Text style={{ marginBottom: 8 }}>Continue Styles</Text>
106-
<AppleButton
107-
style={{ marginBottom: 10 }}
108-
cornerRadius={5}
109-
buttonStyle={AppleButton.Style.WHITE}
110-
buttonType={AppleButton.Type.CONTINUE}
111-
onPress={() => doAppleLogin()}
112-
leftView={(
113-
<Image
114-
style={{
115-
alignSelf: 'center',
116-
width: 14,
117-
height: 14,
118-
marginRight: 7,
119-
resizeMode: 'contain',
120-
}}
121-
source={appleLogoBlack}
122-
/>
123-
)}
124-
/>
125-
<AppleButton
126-
style={{ marginBottom: 10 }}
127-
cornerRadius={0}
128-
buttonStyle={AppleButton.Style.WHITE_OUTLINE}
129-
buttonType={AppleButton.Type.CONTINUE}
130-
onPress={() => doAppleLogin()}
131-
leftView={(
132-
<Image
133-
style={{
134-
alignSelf: 'center',
135-
width: 14,
136-
height: 14,
137-
marginRight: 7,
138-
resizeMode: 'contain',
139-
}}
140-
source={appleLogoBlack}
141-
/>
142-
)}
143-
/>
144-
<AppleButton
145-
style={{ marginBottom: 16 }}
146-
cornerRadius={30}
147-
buttonStyle={AppleButton.Style.BLACK}
148-
buttonType={AppleButton.Type.CONTINUE}
149-
onPress={() => doAppleLogin()}
150-
leftView={(
151-
<Image
152-
style={{
153-
alignSelf: 'center',
154-
width: 14,
155-
height: 14,
156-
marginRight: 7,
157-
resizeMode: 'contain',
158-
}}
159-
source={appleLogoWhite}
160-
/>
161-
)}
162-
/>
163-
164-
<Text style={{ marginBottom: 8 }}>Sign-in Styles</Text>
165-
<AppleButton
166-
style={{ marginBottom: 10 }}
167-
cornerRadius={5}
168-
buttonStyle={AppleButton.Style.WHITE}
169-
buttonType={AppleButton.Type.SIGN_IN}
170-
onPress={() => doAppleLogin()}
171-
/>
172-
<AppleButton
173-
style={{ marginBottom: 10 }}
174-
cornerRadius={5}
175-
buttonStyle={AppleButton.Style.WHITE_OUTLINE}
176-
buttonType={AppleButton.Type.SIGN_IN}
177-
onPress={() => doAppleLogin()}
178-
/>
179-
<AppleButton
180-
style={{ marginBottom: 10 }}
181-
cornerRadius={5}
182-
buttonStyle={AppleButton.Style.BLACK}
183-
buttonType={AppleButton.Type.SIGN_IN}
184-
onPress={() => doAppleLogin()}
185-
/>
186-
</View>
187-
)}
188-
189-
{!appleAuthAndroid.isSupported && (
190-
<Text>Sign In with Apple requires Android 4.4 (API 19) or higher.</Text>
191-
)}
116+
{
117+
appleAuthAndroid.isSupported && (
118+
<View>
119+
<Text style={styles.header}>Buttons</Text>
120+
121+
<Text style={{ marginBottom: 8 }}>Continue Styles</Text>
122+
<AppleButton
123+
style={{ marginBottom: 10 }}
124+
cornerRadius={5}
125+
buttonStyle={AppleButton.Style.WHITE}
126+
buttonType={AppleButton.Type.CONTINUE}
127+
onPress={() => doAppleLogin()}
128+
leftView={(
129+
<Image
130+
style={{
131+
alignSelf: 'center',
132+
width: 14,
133+
height: 14,
134+
marginRight: 7,
135+
resizeMode: 'contain',
136+
}}
137+
source={appleLogoBlack}
138+
/>
139+
)}
140+
/>
141+
<AppleButton
142+
style={{ marginBottom: 10 }}
143+
cornerRadius={0}
144+
buttonStyle={AppleButton.Style.WHITE_OUTLINE}
145+
buttonType={AppleButton.Type.CONTINUE}
146+
onPress={() => doAppleLogin()}
147+
leftView={(
148+
<Image
149+
style={{
150+
alignSelf: 'center',
151+
width: 14,
152+
height: 14,
153+
marginRight: 7,
154+
resizeMode: 'contain',
155+
}}
156+
source={appleLogoBlack}
157+
/>
158+
)}
159+
/>
160+
<AppleButton
161+
style={{ marginBottom: 16 }}
162+
cornerRadius={30}
163+
buttonStyle={AppleButton.Style.BLACK}
164+
buttonType={AppleButton.Type.CONTINUE}
165+
onPress={() => doAppleLogin()}
166+
leftView={(
167+
<Image
168+
style={{
169+
alignSelf: 'center',
170+
width: 14,
171+
height: 14,
172+
marginRight: 7,
173+
resizeMode: 'contain',
174+
}}
175+
source={appleLogoWhite}
176+
/>
177+
)}
178+
/>
179+
180+
<Text style={{ marginBottom: 8 }}>Sign-in Styles</Text>
181+
<AppleButton
182+
style={{ marginBottom: 10 }}
183+
cornerRadius={5}
184+
buttonStyle={AppleButton.Style.WHITE}
185+
buttonType={AppleButton.Type.SIGN_IN}
186+
onPress={() => doAppleLogin()}
187+
/>
188+
<AppleButton
189+
style={{ marginBottom: 10 }}
190+
cornerRadius={5}
191+
buttonStyle={AppleButton.Style.WHITE_OUTLINE}
192+
buttonType={AppleButton.Type.SIGN_IN}
193+
onPress={() => doAppleLogin()}
194+
/>
195+
<AppleButton
196+
style={{ marginBottom: 10 }}
197+
cornerRadius={5}
198+
buttonStyle={AppleButton.Style.BLACK}
199+
buttonType={AppleButton.Type.SIGN_IN}
200+
onPress={() => doAppleLogin()}
201+
/>
202+
</View>
203+
)
204+
}
205+
206+
{
207+
!appleAuthAndroid.isSupported && (
208+
<View>
209+
<Text>
210+
Sign In with Apple requires Android 4.4 (API 19) or higher.
211+
</Text>
212+
<Text>
213+
But in such cases you can always use apple webView sign in!
214+
</Text>
215+
</View>
216+
)
217+
}
218+
219+
{
220+
<TouchableOpacity onPress={
221+
() => {
222+
setAppleAuthConfig(getAppleAuthConfig());
223+
}
224+
}>
225+
<View style={styles.button}>
226+
<Text style={styles.label}>
227+
WebView sign in with Apple
228+
</Text>
229+
</View>
230+
</TouchableOpacity>
231+
}
192232
</View>
193233
);
194234
}

0 commit comments

Comments
 (0)