[draft] Use "Sign in with Apple".

Author: Chris Bobbe

src/api/settings/getServerSettings.js

@@ -14,14 +14,28 @@ export type AuthenticationMethods = {
   ...
 };
 
-export type ExternalAuthenticationMethod = {|
-  name: string,
+type BaseExternalAuthenticationMethod = {|
   display_name: string,
   display_icon: string | null,
   login_url: string,
   signup_url: string,
 |};
 
+export type AppleExternalAuthenticationMethod = {|
+  name: 'apple',
+  apple_kid: string,
+  ...BaseExternalAuthenticationMethod,
+|};
+
+export type OtherExternalAuthenticationMethod = {|
+  name: string, // I'd like this to be "all strings except 'apple'"
+  ...BaseExternalAuthenticationMethod,
+|};
+
+export type ExternalAuthenticationMethod =
+  | AppleExternalAuthenticationMethod
+  | OtherExternalAuthenticationMethod;
+
 export type ApiResponseServerSettings = {|
   ...ApiResponseSuccess,
   authentication_methods: AuthenticationMethods,

src/common/Icons.js

@@ -49,6 +49,7 @@ export const IconPin: IconType = props => <SimpleLineIcons name="pin" {...props}
 export const IconPrivate: IconType = props => <Feather name="lock" {...props} />;
 export const IconPrivateChat: IconType = props => <Feather name="mail" {...props} />;
 export const IconDownArrow: IconType = props => <Feather name="chevron-down" {...props} />;
+export const IconApple: IconType = props => <IoniconsIcon name="logo-apple" {...props} />;
 export const IconGoogle: IconType = props => <IoniconsIcon name="logo-google" {...props} />;
 export const IconGitHub: IconType = props => <Feather name="github" {...props} />;
 export const IconWindows: IconType = props => <IoniconsIcon name="logo-windows" {...props} />;

src/start/AuthScreen.js

@@ -1,26 +1,36 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { Linking } from 'react-native';
+import { Linking, Platform } from 'react-native';
 import type { NavigationScreenProp } from 'react-navigation';
+import * as AppleAuthentication from 'expo-apple-authentication';
 
 import type {
   AuthenticationMethods,
   Dispatch,
   ExternalAuthenticationMethod,
   ApiResponseServerSettings,
 } from '../types';
-import { IconPrivate, IconGoogle, IconGitHub, IconWindows, IconTerminal } from '../common/Icons';
+import {
+  IconApple,
+  IconPrivate,
+  IconGoogle,
+  IconGitHub,
+  IconWindows,
+  IconTerminal,
+} from '../common/Icons';
 import type { IconType } from '../common/Icons';
 import { connect } from '../react-redux';
 import styles from '../styles';
 import { Centerer, Screen, ZulipButton } from '../common';
 import { getCurrentRealm } from '../selectors';
 import RealmInfo from './RealmInfo';
-import { getFullUrl } from '../utils/url';
+import { getFullUrl, encodeParamsForUrl } from '../utils/url';
 import * as webAuth from './webAuth';
 import { loginSuccess, navigateToDev, navigateToPassword } from '../actions';
+import IosCompliantAppleAuthButton from './IosCompliantAppleAuthButton';
 
+const KANDRA_APPLE_KID = 'asdfjkl;'; // TODO, of course (likely won't live here)
 /**
  * Describes a method for authenticating to the server.
  *
@@ -99,6 +109,7 @@ const externalMethodIcons = new Map([
   ['google', IconGoogle],
   ['github', IconGitHub],
   ['azuread', IconWindows],
+  ['apple', IconApple],
 ]);
 
 /** Exported for tests only. */
@@ -220,12 +231,47 @@ class AuthScreen extends PureComponent<Props> {
     this.props.dispatch(navigateToPassword(serverSettings.require_email_format_usernames));
   };
 
-  handleAuth = (method: AuthenticationMethodDetails) => {
+  handleNativeAppleAuth = async () => {
+    const { dispatch, realm } = this.props;
+    const nativeAppleOTP = await webAuth.generateOtp();
+    const credential = await AppleAuthentication.signInAsync({
+      state: nativeAppleOTP,
+    });
+    if (credential.state !== nativeAppleOTP) {
+      throw new Error('OTP mismatch');
+    }
+
+    // TODO: handle errors from this fetch (no Zulip account exists, etc.)
+    const { url: callbackUrl } = await fetch(
+      `${this.props.realm}/complete/apple/?mobile_flow_otp=${nativeAppleOTP}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: encodeParamsForUrl(credential),
+      },
+    );
+
+    const auth = webAuth.authFromCallbackUrl(callbackUrl, nativeAppleOTP, realm);
+    if (auth) {
+      dispatch(loginSuccess(auth.realm, auth.email, auth.apiKey));
+    }
+  };
+
+  handleAuth = async (method: AuthenticationMethodDetails) => {
     const { action } = method;
+    const shouldUseNativeAppleFlow =
+      method.name === 'apple'
+      && method.apple_kid === KANDRA_APPLE_KID
+      && (await AppleAuthentication.isAvailableAsync());
+
     if (action === 'dev') {
       this.handleDevAuth();
     } else if (action === 'password') {
       this.handlePassword();
+    } else if (shouldUseNativeAppleFlow) {
+      this.handleNativeAppleAuth();
     } else {
       this.beginWebAuth(action.url);
     }
@@ -244,16 +290,23 @@ class AuthScreen extends PureComponent<Props> {
           {activeAuthentications(
             serverSettings.authentication_methods,
             serverSettings.external_authentication_methods,
-          ).map(auth => (
-            <ZulipButton
-              key={auth.name}
-              style={styles.halfMarginTop}
-              secondary
-              text={`Sign in with ${auth.displayName}`}
-              Icon={auth.Icon}
-              onPress={() => this.handleAuth(auth)}
-            />
-          ))}
+          ).map(auth =>
+            auth.name === 'apple' && Platform.OS === 'ios' ? (
+              <IosCompliantAppleAuthButton
+                style={styles.halfMarginTop}
+                onPress={() => this.handleAuth(auth)}
+              />
+            ) : (
+              <ZulipButton
+                key={auth.name}
+                style={styles.halfMarginTop}
+                secondary
+                text={`Sign in with ${auth.displayName}`}
+                Icon={auth.Icon}
+                onPress={() => this.handleAuth(auth)}
+              />
+            ),
+          )}
         </Centerer>
       </Screen>
     );