docs: add prerequisites docs & add class based React example (#6)

* updaed code to include class version of example * podfile.lock update * initial develop environment setup * more initial set up * reworded * reworded * spelling mistakes * typo * use full package name * Update example/classVersion.js
invertase · Dec 6, 2019 · db28bfa · db28bfa
1 parent 8c27fd5
commit db28bfa
Show file tree

Hide file tree

Showing 20 changed files with 297 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -425,11 +425,7 @@ buck-out/
 # fastlane
 
 ### VisualStudioCode ###
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
+.vscode/
 
 ### WebStorm ###
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm

diff --git a/INITIAL_SETUP.md b/INITIAL_SETUP.md
@@ -0,0 +1,61 @@
+# Initial Development Environment Setup
+
+## Instructions
+
+For the purpose of demonstration, suppose we created a fresh React Native project called `testAppleButton`.
+
+* Open your project in Xcode by clicking `open another project`, and navigating to this file: `testAppleButton/ios/testAppleButton.xcodeproj`
+
+![Xcode console](docs/images/xcode-dashboard.png)
+
+* Click `testAppleButton` under the target's header.
+
+![Xcode console](docs/images/xcode-project-1.png)
+
+* Click `Signing and capabilities` to show the below noted view. Click `+ Capability` and from the menu select `Sign in with Apple` which will appear at the bottom as highlighted.
+
+![Xcode signing and capabilities](docs/images/xcode-signin-capabilities.png)
+
+* You will need to sign in as a team if you have this error message.
+
+![Xcode team sign in](docs/images/xcode-signin-team.png)
+
+* If successful, your status should show no error message like below.
+
+![Xcode team sign in success](docs/images/xcode-signin-team-success.png)
+
+* Head over to [Apple's developer console](https://developer.apple.com/). Click `Account` in the nav bar at the top. You will either have to sign in, or create an account. Your account dashboard ought to look like this. If you do not see `Certificates, IDs & profiles` as an option in the left-hand sidebar, it means you have not yet enrolled in the [Apple developer program](https://developer.apple.com/programs/) which is a prerequisite for Apple product development.
+
+![apple dashboard](docs/images/apple-developer-console.png)
+
+* Click on `Identifiers` in the left-hand sidebar. Click on your project in the list, in our case, `testAppleButton`.
+
+![apple dashboard identifiers](docs/images/identifiers.png)
+
+* Tick the checkbox for `Sign in with Apple` and click the `Edit` button. Select `Enable as a primary App ID` and click `Save` button.
+
+![edit app configuration](docs/images/enable-sign-in.png)
+
+* Click the `Save` button at the top of the screen.
+
+![save configuration](docs/images/save-button.png)
+
+* Please note: If you choose another app to be your primary app, you will have to go through the above noted process, up until you navigate to the Apple developer console, and choose the `Group with existing primary App ID` option & the `testAppleButton` ID.
+
+![save configuration for existing app ID](docs/images/group-with-existing-id.png)
+
+* Click on `keys` in left-hand sidebar and create a new key.
+
+![create key](docs/images/create-key.png)
+
+* Give your new key a name. Tick the checkbox next to `Sign In with Apple`, and click `Configure`.
+
+![register key](docs/images/register-key.png)
+
+* Select `testAppleButton` as our primary app ID.
+
+![select App ID as key](docs/images/select-app-key.png)
+
+* Register your key, download it and keep it secure. Initial setup is now complete.
+
+![complete key registration](docs/images/complete-registration.png)
diff --git a/README.md b/README.md
@@ -22,6 +22,19 @@ A well typed React Native library providing support for Apple Authentication on
 
 ![apple-auth](https://static.invertase.io/assets/apple-auth.png)
 
+## Prerequisites to using this library
+
+The `@invertase/react-native-apple-authentication` library will not work if you do not ensure the following:
+
+* You have setup react-native iOS development environment on your machine (Will only work on Mac). If not, please follow the official React Native documentation for getting  started: [React Native getting started documentation](https://facebook.github.io/react-native/docs/getting-started).
+
+* You are using React Native version `0.60` or higher.
+
+* You are using Xcode version `11` or higher. This will allow you to develop using iOS version `13`, the only version possible for authenticating with Apple.
+
+* Once you're sure you've met the above, please follow the [Initial development environment setup](INITIAL_SETUP.md).
+
+
 ## Installation
 
 ```bash
@@ -62,13 +75,13 @@ This module supports React Native auto-linking.
 ----
 
 <p>
-  <img align="left" width="75px" src="https://static.invertase.io/assets/invertase-logo-small.png"> 
-  <p align="left">  
+  <img align="left" width="75px" src="https://static.invertase.io/assets/invertase-logo-small.png">
+  <p align="left">
     Built and maintained with 💛 by <a href="https://invertase.io">Invertase</a>.
   </p>
-  <p align="left">  
-    <a href="https://invertase.io/hire-us">💼 Hire Us</a> | 
-    <a href="https://opencollective.com/react-native-firebase">☕️ Sponsor Us</a> | 
+  <p align="left">
+    <a href="https://invertase.io/hire-us">💼 Hire Us</a> |
+    <a href="https://opencollective.com/react-native-firebase">☕️ Sponsor Us</a> |
     <a href="https://opencollective.com/jobs">‍💻 Work With Us</a>
   </p>
 </p>

diff --git a/docs/images/apple-developer-console.png b/docs/images/apple-developer-console.png
diff --git a/docs/images/complete-registration.png b/docs/images/complete-registration.png
diff --git a/docs/images/create-key.png b/docs/images/create-key.png
diff --git a/docs/images/enable-sign-in.png b/docs/images/enable-sign-in.png
diff --git a/docs/images/group-with-existing-id.png b/docs/images/group-with-existing-id.png
diff --git a/docs/images/identifiers.png b/docs/images/identifiers.png
diff --git a/docs/images/register-key.png b/docs/images/register-key.png
diff --git a/docs/images/save-button.png b/docs/images/save-button.png
diff --git a/docs/images/select-app-key.png b/docs/images/select-app-key.png
diff --git a/docs/images/xcode-dashboard.png b/docs/images/xcode-dashboard.png
diff --git a/docs/images/xcode-project-1.png b/docs/images/xcode-project-1.png
diff --git a/docs/images/xcode-signin-capabilities.png b/docs/images/xcode-signin-capabilities.png
diff --git a/docs/images/xcode-signin-team-success.png b/docs/images/xcode-signin-team-success.png
diff --git a/docs/images/xcode-signin-team.png b/docs/images/xcode-signin-team.png
diff --git a/example/classVersion.js b/example/classVersion.js
@@ -0,0 +1,209 @@
+/* eslint-disable no-console */
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React from 'react';
+import { AppRegistry, StyleSheet, View, Text } from 'react-native';
+import auth, {
+  AppleButton,
+  AppleAuthError,
+  AppleAuthRequestScope,
+  AppleAuthRealUserStatus,
+  AppleAuthCredentialState,
+  AppleAuthRequestOperation,
+} from '@invertase/react-native-apple-authentication';
+
+
+class Tester extends React.Component {
+  constructor() {
+    super();
+    this.authCredentialListener = null;
+    this.user = null;
+    this.state = {
+      credentialStateForUser: -1,
+    }
+  }
+  componentDidMount() {
+    /**
+     * subscribe to credential updates.This returns a function which can be used to remove the event listener
+     * when the component unmounts.
+     */
+    this.authCredentialListener = auth.onCredentialRevoked(async () => {
+      console.warn('Credential Revoked');
+      this.fetchAndUpdateCredentialState().catch(error =>
+        this.setState({ credentialStateForUser: `Error: ${error.code}` }),
+      );
+    });
+
+    this.fetchAndUpdateCredentialState()
+      .then(res => this.setState({ credentialStateForUser: res }))
+      .catch(error => this.setState({ credentialStateForUser: `Error: ${error.code}` }))
+  }
+
+  componentWillUnmount() {
+    /**
+     * cleans up event listener
+     */
+    this.authCredentialListener();
+  }
+
+  signIn = async () => {
+    console.warn('Beginning Apple Authentication');
+
+    // start a login request
+    try {
+      const appleAuthRequestResponse = await auth.performRequest({
+        requestedOperation: AppleAuthRequestOperation.LOGIN,
+        requestedScopes: [
+          AppleAuthRequestScope.EMAIL,
+          AppleAuthRequestScope.FULL_NAME,
+        ],
+      });
+
+      console.log('appleAuthRequestResponse', appleAuthRequestResponse);
+
+      const {
+        user: newUser,
+        email,
+        nonce,
+        identityToken,
+        realUserStatus /* etc */,
+      } = appleAuthRequestResponse;
+
+      this.user = newUser;
+
+      this.fetchAndUpdateCredentialState()
+        .then(res => this.setState({ credentialStateForUser: res }))
+        .catch(error =>
+          this.setState({ credentialStateForUser: `Error: ${error.code}` }),
+        );
+
+      if (identityToken) {
+        // e.g. sign in with Firebase Auth using `nonce` & `identityToken`
+        console.log(nonce, identityToken);
+      } else {
+        // no token - failed sign-in?
+      }
+
+      if (realUserStatus === AppleAuthRealUserStatus.LIKELY_REAL) {
+        console.log("I'm a real person!");
+      }
+
+      console.warn(`Apple Authentication Completed, ${this.user}, ${email}`);
+    } catch (error) {
+      if (error.code === AppleAuthError.CANCELED) {
+        console.warn('User canceled Apple Sign in.');
+      } else {
+        console.error(error);
+      }
+    }
+  };
+
+  fetchAndUpdateCredentialState = async () => {
+    if (this.user === null) {
+      this.setState({ credentialStateForUser: 'N/A' });
+    } else {
+      const credentialState = await auth.getCredentialStateForUser(this.user);
+      if (credentialState === AppleAuthCredentialState.AUTHORIZED) {
+        this.setState({ credentialStateForUser: 'AUTHORIZED' });
+      } else {
+        this.setState({ credentialStateForUser: credentialState });
+      }
+    }
+  }
+
+  render() {
+    return (
+      <View style={[styles.container, styles.horizontal]}>
+        <Text style={styles.header}>Credential State</Text>
+        <Text>{this.state.credentialStateForUser}</Text>
+        <Text style={styles.header}>Buttons</Text>
+        <Text>Continue Styles</Text>
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.WHITE}
+          buttonType={AppleButton.Type.CONTINUE}
+          onPress={() => this.signIn()}
+        />
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.WHITE_OUTLINE}
+          buttonType={AppleButton.Type.CONTINUE}
+          onPress={() => this.signIn()}
+        />
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.BLACK}
+          buttonType={AppleButton.Type.CONTINUE}
+          onPress={() => this.signIn()}
+        />
+        <Text>Sign-in Styles</Text>
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.WHITE}
+          buttonType={AppleButton.Type.SIGN_IN}
+          onPress={() => this.signIn()}
+        />
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.WHITE_OUTLINE}
+          buttonType={AppleButton.Type.SIGN_IN}
+          onPress={() => this.signIn()}
+        />
+        <AppleButton
+          style={styles.appleButton}
+          cornerRadius={5}
+          buttonStyle={AppleButton.Style.BLACK}
+          buttonType={AppleButton.Type.SIGN_IN}
+          onPress={() => this.signIn()}
+        />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  appleButton: {
+    width: 200,
+    height: 60,
+    margin: 10,
+  },
+  header: {
+    margin: 10,
+    marginTop: 30,
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'pink',
+  },
+  horizontal: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+AppRegistry.registerComponent('testing', () => Tester);
diff --git a/example/index.js b/example/index.js
@@ -16,3 +16,9 @@
  */
 
 require('./app');
+
+/**
+ * If you want to play with the class implementation (React version 16.7 or less),
+ * comment out require('./app'); & uncomment require('./classVersion');
+ */
+// require('./classVersion');
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -217,7 +217,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNAppleAuthentication (0.0.1):
+  - RNAppleAuthentication (0.0.2):
     - React
   - Yoga (1.14.0)
 
@@ -336,7 +336,7 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNAppleAuthentication: 3f6870d909f39fdc089708ad4cc1946231c50f8f
+  RNAppleAuthentication: b18b4d98d94ecc1a0c8ab033736367f21768d5df
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: b1d11349ce6cf63de2878e6ee443202d7fc02a23