[NEW] Sign in with Apple

app/containers/LoginServices.js

@@ -5,29 +5,32 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
+import * as AppleAuthentication from 'expo-apple-authentication';
 
 import { withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
-import { loginRequest as loginRequestAction } from '../actions/login';
 import Button from './Button';
 import OrSeparator from './OrSeparator';
 import Touch from '../utils/touch';
 import I18n from '../i18n';
 import random from '../utils/random';
+import RocketChat from '../lib/rocketchat';
 
+const BUTTON_HEIGHT = 48;
 const SERVICE_HEIGHT = 58;
+const BORDER_RADIUS = 2;
 const SERVICES_COLLAPSED_HEIGHT = 174;
 
 const styles = StyleSheet.create({
 	serviceButton: {
-		borderRadius: 2,
+		borderRadius: BORDER_RADIUS,
 		marginBottom: 10
 	},
 	serviceButtonContainer: {
-		borderRadius: 2,
+		borderRadius: BORDER_RADIUS,
 		width: '100%',
-		height: 48,
+		height: BUTTON_HEIGHT,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
@@ -187,6 +190,21 @@ class LoginServices extends React.PureComponent {
 		this.openOAuth({ url, ssoToken, authType: 'cas' });
 	}
 
+	onPressAppleLogin = async() => {
+		try {
+			const { fullName, email, identityToken } = await AppleAuthentication.signInAsync({
+				requestedScopes: [
+					AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+					AppleAuthentication.AppleAuthenticationScope.EMAIL
+				]
+			});
+
+			await RocketChat.loginOAuthOrSso({ fullName, email, identityToken });
+		} catch {
+			// Do nothing
+		}
+	}
+
 	getOAuthState = () => {
 		const credentialToken = random(43);
 		return Base64.encodeURI(JSON.stringify({ loginStyle: 'popup', credentialToken, isCordova: true }));
@@ -262,6 +280,7 @@ class LoginServices extends React.PureComponent {
 	}
 
 	renderItem = (service) => {
+		const { CAS_enabled, theme } = this.props;
 		let { name } = service;
 		name = name === 'meteor-developer' ? 'meteor' : name;
 		const icon = `icon_${ name }`;
@@ -285,11 +304,27 @@ class LoginServices extends React.PureComponent {
 				onPress = () => this.onPressCas();
 				break;
 			}
+			case 'apple': {
+				onPress = () => this.onPressAppleLogin();
+				break;
+			}
 			default:
 				break;
 		}
+
+		if (name === 'apple') {
+			return (
+				<AppleAuthentication.AppleAuthenticationButton
+					buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
+					buttonStyle={theme === 'light' ? AppleAuthentication.AppleAuthenticationButtonStyle.BLACK : AppleAuthentication.AppleAuthenticationButtonStyle.WHITE}
+					cornerRadius={BORDER_RADIUS}
+					style={[styles.serviceButton, { height: BUTTON_HEIGHT }]}
+					onPress={onPress}
+				/>
+			);
+		}
+
 		name = name.charAt(0).toUpperCase() + name.slice(1);
-		const { CAS_enabled, theme } = this.props;
 		let buttonText;
 		if (isSaml || (service.service === 'cas' && CAS_enabled)) {
 			buttonText = <Text style={[styles.serviceName, isSaml && { color: service.buttonLabelColor }]}>{name}</Text>;
@@ -356,8 +391,4 @@ const mapStateToProps = state => ({
 	services: state.login.services
 });
 
-const mapDispatchToProps = dispatch => ({
-	loginRequest: params => dispatch(loginRequestAction(params))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LoginServices));
+export default connect(mapStateToProps)(withTheme(LoginServices));

app/lib/rocketchat.js

@@ -1077,6 +1077,10 @@ const RocketChat = {
 			return 'cas';
 		}
 
+		if (authName === 'apple' && isIOS) {
+			return 'apple';
+		}
+
 		// TODO: remove this after other oauth providers are implemented. e.g. Drupal, github_enterprise
 		const availableOAuth = ['facebook', 'github', 'gitlab', 'google', 'linkedin', 'meteor-developer', 'twitter', 'wordpress'];
 		return availableOAuth.includes(authName) ? 'oauth' : 'not_supported';

ios/Podfile.lock

@@ -10,6 +10,8 @@ PODS:
   - Crashlytics (3.14.0):
     - Fabric (~> 1.10.2)
   - DoubleConversion (1.1.6)
+  - EXAppleAuthentication (2.2.1):
+    - UMCore
   - EXAV (8.1.0):
     - UMCore
     - UMFileSystemInterface
@@ -515,6 +517,7 @@ PODS:
 DEPENDENCIES:
   - BugsnagReactNative (from `../node_modules/bugsnag-react-native`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - EXAppleAuthentication (from `../node_modules/expo-apple-authentication/ios`)
   - EXAV (from `../node_modules/expo-av/ios`)
   - EXConstants (from `../node_modules/expo-constants/ios`)
   - EXFileSystem (from `../node_modules/expo-file-system/ios`)
@@ -655,6 +658,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/bugsnag-react-native"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+  EXAppleAuthentication:
+    :path: "../node_modules/expo-apple-authentication/ios"
   EXAV:
     :path: "../node_modules/expo-av/ios"
   EXConstants:
@@ -826,6 +831,7 @@ SPEC CHECKSUMS:
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   Crashlytics: 540b7e5f5da5a042647227a5e3ac51d85eed06df
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
+  EXAppleAuthentication: 5b3da71bada29e2423d8ea27e5538ef0d75aba62
   EXAV: 2edd9cd30fe98d04b55325303c7ff01db02d1d0f
   EXConstants: 5304709b1bea70a4828f48ba4c7fc3ec3b2d9b17
   EXFileSystem: cf4232ba7c62dc49b78c2d36005f97b6fddf0b01