draftbit-oauth/components.js at main · draftbitbuildservices/draftbit-oauth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
//import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View, Text, Image, Button } from 'react-native';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
WebBrowser.maybeCompleteAuthSession();

// export default function Apple() {
//   const [request, response, promptAsync] = Google.useAuthRequest({
//     expoClientId: '122244295972-gq660fbei8fcjjtdgsnghj668kuuhdv8.apps.googleusercontent.com',
//     iosClientId: '122244295972-nqo5sa9rvov9cb7ecrmulqahhepl3jm3.apps.googleusercontent.com',
//    // androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
//     webClientId: '122244295972-gq660fbei8fcjjtdgsnghj668kuuhdv8.apps.googleusercontent.com',
//   });

//   React.useEffect(() => {
//     if (response?.type === 'success') {
//       const { authentication } = response;
//       }
//   }, [response]);

//   return (
//     <Button
//       disabled={!request}
//       title="Login"
//       onPress={() => {
//         promptAsync();
//         }}
//     />
//   );
// }

//WebBrowser.maybeCompleteAuthSession();

export function App() {
  const [accessToken, setAccessToken] = React.useState();
  const [userInfo, setUserInfo] = React.useState();
  const [message, setMessage] = React.useState();

  const [request, response, promptAsync] = Google.useAuthRequest({
    webClientId:
      '122244295972-gq660fbei8fcjjtdgsnghj668kuuhdv8.apps.googleusercontent.com',
    iosClientId:
      '122244295972-nqo5sa9rvov9cb7ecrmulqahhepl3jm3.apps.googleusercontent.com',
    expoClientId:
      '122244295972-gq660fbei8fcjjtdgsnghj668kuuhdv8.apps.googleusercontent.com',
  });

  React.useEffect(() => {
    setMessage(JSON.stringify(response));
    if (response?.type === 'success') {
      setAccessToken(response.authentication.accessToken);
    }
  }, [response]);

  async function getUserData() {
    let userInfoResponse = await fetch(
      'https://www.googleapis.com/userinfo/v2/me',
      {
        headers: { Authorization: `Bearer ${accessToken}` },
      }
    );

    userInfoResponse.json().then(data => {
      setUserInfo(data);
    });
  }

  function showUserInfo() {
    if (userInfo) {
      return (
        <View style={styles.userInfo}>
          <Image source={{ uri: userInfo.picture }} style={styles.profilePic} />
          <Text>Welcome {userInfo.name}</Text>
          <Text>{userInfo.email}</Text>
        </View>
      );
    }
  }

  return (
    <View style={styles.container}>
      {showUserInfo()}
      <Button
        title={accessToken ? 'Get User Data' : 'Login'}
        onPress={
          accessToken
            ? getUserData
            : () => {
                promptAsync({ useProxy: false, showInRecents: true });
              }
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  userInfo: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  profilePic: {
    width: 50,
    height: 50,
  },
});