Feature/sign in with apple

src/api/api.js

@@ -180,6 +180,17 @@ class API {
   }
 
   async oAuthLogin(type, query) {
+    if (type === 'apple') {
+      const authCode = query?.substring(1);
+      const { data } = await this.axiosInstance.post(
+        `/login/${type}/callback`,
+        {
+          state: 'cordova',
+          code: authCode
+        }
+      );
+      return data;
+    }
     const { data } = await this.axiosInstance.get(
       `/login/${type}/callback${query}`
     );

src/components/WelcomeScreen/WelcomeScreen.container.js

@@ -7,6 +7,7 @@ import Link from '@material-ui/core/Link';
 import CloseIcon from '@material-ui/icons/Close';
 import IconButton from '../UI/IconButton';
 import {
+  AppleLoginButton,
   FacebookLoginButton,
   GoogleLoginButton
 } from 'react-social-login-buttons';
@@ -94,6 +95,26 @@ export class WelcomeScreen extends Component {
     }
   };
 
+  handleAppleLoginClick = () => {
+    const intl = this.props.intl;
+    if (isIOS()) {
+      window.cordova.plugins.SignInWithApple.signin(
+        { requestedScopes: [0, 1] },
+        function(succ) {
+          window.location.hash = `#/login/apple/callback?${
+            succ.authorizationCode
+          }`;
+        },
+        function(err) {
+          alert(intl.formatMessage(messages.loginErrorAndroid));
+          console.error(err);
+        }
+      );
+      return;
+    }
+    window.location = `${API_URL}login/apple-web`;
+  };
+
   render() {
     const { finishFirstVisit, heading, text, onClose } = this.props;
     const { activeView } = this.state;
@@ -147,6 +168,15 @@ export class WelcomeScreen extends Component {
                   <FormattedMessage {...messages.facebook} />
                 </FacebookLoginButton>
               )}
+
+              {!isAndroid() && !isElectron() && (
+                <AppleLoginButton
+                  className="WelcomeScreen__button WelcomeScreen__button--google"
+                  onClick={this.handleAppleLoginClick}
+                >
+                  <FormattedMessage {...messages.apple} />
+                </AppleLoginButton>
+              )}
             </div>
 
             {!onClose && (

src/components/WelcomeScreen/WelcomeScreen.messages.js

@@ -17,6 +17,10 @@ export default defineMessages({
     id: 'cboard.components.WelcomeScreen.google',
     defaultMessage: 'Sign in with Google'
   },
+  apple: {
+    id: 'cboard.components.WelcomeScreen.apple',
+    defaultMessage: 'Sign in with Apple'
+  },
   skipForNow: {
     id: 'cboard.components.WelcomeScreen.skipForNow',
     defaultMessage: 'Skip for now'

src/translations/src/cboard.json

@@ -4,6 +4,7 @@
   "cboard.components.WelcomeScreen.skipForNow": "Skip for now",
   "cboard.components.WelcomeScreen.google": "Sign in with Google",
   "cboard.components.WelcomeScreen.facebook": "Sign in with Facebook",
+  "cboard.components.WelcomeScreen.apple": "Sign in with Apple",
   "cboard.components.WelcomeScreen.loginErrorAndroid": "Sorry. An error occurred during authenticate process. Please try it again",
   "cboard.components.WelcomeScreen.terms": "Terms",
   "cboard.components.WelcomeScreen.privacy": "Privacy Policy",