IR-346: Add Apple SSO support to the IR Engine.

packages/client-core/i18n/en/admin.json

@@ -366,6 +366,7 @@
       "defaults": "Defaults",
       "host": "Host",
       "protocol": "Protocol",
+      "apple": "Apple",
       "discord": "Discord",
       "facebook": "Meta",
       "google": "Google",
@@ -653,6 +654,7 @@
       "clearAllScopes": "Clear All Scopes",
       "userSearch": "user by id, name or account identifier",
       "linkedAccounts": "Linked Accounts",
+      "apple": "Apple",
       "discord": "Discord",
       "facebook": "Meta",
       "google": "Google",

packages/client-core/i18n/en/social.json

@@ -191,6 +191,7 @@
   },
   "registration": {
     "ph-phoneEmail": "Use phone / email",
+    "apple": "Continue with Apple",
     "facebook": "Continue with Meta",
     "google": "Continue with Google",
     "linkedin": "Continue with Linkedin",

packages/client-core/i18n/en/user.json

@@ -36,6 +36,7 @@
       "sms-sent-msg": "Login Magic Link was sent. Please check your SMS."
     },
     "social": {
+      "apple": "Login with Apple",
       "gitHub": "Login with GitHub",
       "google": "Login with Google",
       "facebook": "Login with Meta",

packages/client-core/src/admin/components/settings/tabs/authentication.tsx

@@ -42,6 +42,7 @@ import { initialAuthState } from '../../../../common/initialAuthState'
 import { NotificationService } from '../../../../common/services/NotificationService'
 
 const OAUTH_TYPES = {
+  APPLE: 'apple',
   DISCORD: 'discord',
   FACEBOOK: 'facebook',
   GITHUB: 'github',
@@ -62,6 +63,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
   const state = useHookstate(initialAuthState)
   const holdAuth = useHookstate(initialAuthState)
   const keySecret = useHookstate({
+    apple: authSetting?.oauth?.apple,
     discord: authSetting?.oauth?.discord,
     github: authSetting?.oauth?.github,
     google: authSetting?.oauth?.google,
@@ -84,6 +86,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
 
       const tempKeySecret = JSON.parse(
         JSON.stringify({
+          apple: authSetting?.oauth?.apple,
           discord: authSetting?.oauth?.discord,
           github: authSetting?.oauth?.github,
           google: authSetting?.oauth?.google,
@@ -131,6 +134,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
 
     const tempKeySecret = JSON.parse(
       JSON.stringify({
+        apple: authSetting?.oauth?.apple,
         discord: authSetting?.oauth?.discord,
         github: authSetting?.oauth?.github,
         google: authSetting?.oauth?.google,
@@ -258,6 +262,34 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
 
       <hr className="my-6 border border-theme-primary" />
 
+      {holdAuth?.apple?.value && (
+        <div className="col-span-1">
+          <Text component="h4" fontSize="base" fontWeight="medium" className="my-4 w-full">
+            {t('admin:components.setting.apple')}
+          </Text>
+
+          <PasswordInput
+            label={t('admin:components.setting.key')}
+            value={keySecret?.value?.apple?.key || ''}
+            onChange={(e) => handleOnChangeKey(e, OAUTH_TYPES.APPLE)}
+          />
+
+          <PasswordInput
+            containerClassname="mt-2"
+            label={t('admin:components.setting.secret')}
+            value={keySecret?.value?.apple?.secret || ''}
+            onChange={(e) => handleOnChangeSecret(e, OAUTH_TYPES.APPLE)}
+          />
+
+          <Input
+            containerClassname="mt-2"
+            label={t('admin:components.setting.callback')}
+            value={authSetting?.callback?.apple || ''}
+            disabled
+          />
+        </div>
+      )}
+
       <div className="grid grid-cols-3 gap-4">
         {holdAuth?.discord?.value && (
           <div className="col-span-1">
@@ -343,9 +375,10 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
           </div>
         )}
 
-        {(holdAuth?.discord?.value || holdAuth?.linkedin?.value || holdAuth?.facebook?.value) && (
-          <hr className="col-span-full my-6 border border-theme-primary" />
-        )}
+        {(holdAuth?.apple?.value ||
+          holdAuth?.discord?.value ||
+          holdAuth?.linkedin?.value ||
+          holdAuth?.facebook?.value) && <hr className="col-span-full my-6 border border-theme-primary" />}
 
         {holdAuth?.google?.value && (
           <div className="col-span-1">

packages/client-core/src/admin/components/user/AccountIdentifiers.tsx

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import React from 'react'
 import { MdEmail } from 'react-icons/md'
 import {
+  RiAppleFill,
   RiDiscordFill,
   RiGithubFill,
   RiGoogleFill,
@@ -39,6 +40,7 @@ import { UserType } from '@etherealengine/common/src/schema.type.module'
 import Tooltip from '@etherealengine/ui/src/primitives/tailwind/Tooltip'
 
 export default function AccountIdentifiers({ user }: { user: UserType }) {
+  const appleIp = user.identityProviders.find((ip) => ip.type === 'apple')
   const discordIp = user.identityProviders.find((ip) => ip.type === 'discord')
   const googleIp = user.identityProviders.find((ip) => ip.type === 'google')
   const facebookIp = user.identityProviders.find((ip) => ip.type === 'facebook')
@@ -50,6 +52,11 @@ export default function AccountIdentifiers({ user }: { user: UserType }) {
 
   return (
     <div className="flex items-center gap-2">
+      {appleIp ? (
+        <Tooltip title={appleIp.accountIdentifier!}>
+          <RiAppleFill className="h-6 w-6" />
+        </Tooltip>
+      ) : null}
       {discordIp ? (
         <Tooltip title={discordIp.accountIdentifier!}>
           <RiDiscordFill className="h-6 w-6" />

packages/client-core/src/common/components/Icons/AppleIcon.tsx

@@ -0,0 +1,36 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+
+import { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const AppleIcon = (props: SvgIconProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="0.82em" height="1em" viewBox="0 0 256 315">
+      <path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.387 39.475 13.662 51.889 13.662c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.64-22.262" />
+    </svg>
+  )
+}

packages/client-core/src/common/initialAuthState.ts

@@ -25,6 +25,7 @@ Ethereal Engine. All Rights Reserved.
 
 export const initialAuthState = {
   jwt: true,
+  apple: false,
   discord: false,
   facebook: false,
   github: false,
@@ -37,6 +38,7 @@ export const initialAuthState = {
 }
 
 export const initialOAuthConnectedState = {
+  apple: false,
   discord: false,
   facebook: false,
   github: false,

packages/client-core/src/user/components/Oauth/AppleCallback.tsx

@@ -0,0 +1,82 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import multiLogger from '@etherealengine/common/src/logger'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import Button from '@etherealengine/ui/src/primitives/mui/Button'
+import Container from '@etherealengine/ui/src/primitives/mui/Container'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+
+import { InstanceID } from '@etherealengine/common/src/schema.type.module'
+import { AuthService, AuthState } from '../../services/AuthService'
+import styles from './styles.module.scss'
+const logger = multiLogger.child({ component: 'engine:ecs:AppleCallback' })
+const AppleCallbackComponent = (props): JSX.Element => {
+  const { t } = useTranslation()
+  const initialState = { error: '', token: '' }
+  const [state, setState] = useState(initialState)
+  const search = new URLSearchParams(useLocation().search)
+
+  useEffect(() => {
+    const error = search.get('error') as string
+    const token = search.get('token') as string
+    const type = search.get('type') as string
+    const path = search.get('path') as string
+    const instanceId = search.get('instanceId') as InstanceID
+
+    if (!error) {
+      if (type === 'connection') {
+        const user = useHookstate(getMutableState(AuthState)).user
+        AuthService.refreshConnections(user.id.value!)
+      } else {
+        let redirectSuccess = `${path}`
+        if (instanceId != null) redirectSuccess += `?instanceId=${instanceId}`
+        AuthService.loginUserByJwt(token, redirectSuccess || '/', '/')
+      }
+    }
+
+    setState({ ...state, error, token })
+  }, [])
+
+  function redirectToRoot() {
+    window.location.href = '/'
+  }
+
+  return state.error && state.error !== '' ? (
+    <Container className={styles.oauthError}>
+      <div className={styles.title}>{t('user:oauth.authFailed', { service: 'Apple' })}</div>
+      <div className={styles.message}>{state.error}</div>
+      <Button onClick={redirectToRoot} className={styles.gradientButton}>
+        {t('user:oauth.redirectToRoot')}
+      </Button>
+    </Container>
+  ) : (
+    <Container>{t('user:oauth.authenticating')}</Container>
+  )
+}
+
+export const AppleCallback = AppleCallbackComponent as any

packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx

@@ -33,6 +33,7 @@ import Avatar from '@etherealengine/client-core/src/common/components/Avatar'
 import Button from '@etherealengine/client-core/src/common/components/Button'
 import commonStyles from '@etherealengine/client-core/src/common/components/common.module.scss'
 import ConfirmDialog from '@etherealengine/client-core/src/common/components/ConfirmDialog'
+import { AppleIcon } from '@etherealengine/client-core/src/common/components/Icons/AppleIcon'
 import { DiscordIcon } from '@etherealengine/client-core/src/common/components/Icons/DiscordIcon'
 import { GoogleIcon } from '@etherealengine/client-core/src/common/components/Icons/GoogleIcon'
 import { LinkedInIcon } from '@etherealengine/client-core/src/common/components/Icons/LinkedInIcon'
@@ -42,6 +43,7 @@ import InputText from '@etherealengine/client-core/src/common/components/InputTe
 import Menu from '@etherealengine/client-core/src/common/components/Menu'
 import Text from '@etherealengine/client-core/src/common/components/Text'
 import config, { validateEmail, validatePhoneNumber } from '@etherealengine/common/src/config'
+import multiLogger from '@etherealengine/common/src/logger'
 import { authenticationSettingPath, clientSettingPath, UserName } from '@etherealengine/common/src/schema.type.module'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
@@ -61,6 +63,8 @@ import { UserMenus } from '../../../UserUISystem'
 import styles from '../index.module.scss'
 import { PopupMenuServices } from '../PopupMenuService'
 
+const logger = multiLogger.child({ component: 'engine:ecs:ProfileMenu' })
+
 interface Props {
   className?: string
   hideLogin?: boolean
@@ -111,6 +115,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
 
   let type = ''
   const addMoreSocial =
+    (authState?.value?.apple && !oauthConnectedState.apple.value) ||
     (authState?.value?.discord && !oauthConnectedState.discord.value) ||
     (authState?.value?.facebook && !oauthConnectedState.facebook.value) ||
     (authState?.value?.github && !oauthConnectedState.github.value) ||
@@ -144,6 +149,9 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
     if (selfUser.identityProviders.get({ noproxy: true }))
       for (const ip of selfUser.identityProviders.get({ noproxy: true })!) {
         switch (ip.type) {
+          case 'apple':
+            oauthConnectedState.merge({ apple: true })
+            break
           case 'discord':
             oauthConnectedState.merge({ discord: true })
             break
@@ -349,6 +357,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
   const enableWalletLogin = false // authState?.didWallet
 
   const enableSocial =
+    authState?.value?.apple ||
     authState?.value?.discord ||
     authState?.value?.facebook ||
     authState?.value?.github ||
@@ -592,7 +601,6 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                     {t('user:usermenu.profile.addSocial')}
                   </Text>
                 )}
-
                 <div className={styles.socialContainer}>
                   {authState?.value?.discord && !oauthConnectedState.discord.value && (
                     <IconButton
@@ -608,6 +616,9 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                       onClick={handleOAuthServiceClick}
                     />
                   )}
+                  {authState?.value?.apple && !oauthConnectedState.apple.value && (
+                    <IconButton id="apple" icon={<AppleIcon viewBox="0 0 40 40" />} onClick={handleOAuthServiceClick} />
+                  )}
                   {authState?.value?.facebook && !oauthConnectedState.facebook.value && (
                     <IconButton
                       id="facebook"
@@ -639,8 +650,14 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                     <Text align="center" variant="body2" mb={1} mt={2}>
                       {t('user:usermenu.profile.removeSocial')}
                     </Text>
-
                     <div className={styles.socialContainer}>
+                      {authState?.apple.value && oauthConnectedState.apple.value && (
+                        <IconButton
+                          id="apple"
+                          icon={<AppleIcon viewBox="0 0 40 40" />}
+                          onClick={handleRemoveOAuthServiceClick}
+                        />
+                      )}
                       {authState?.discord.value && oauthConnectedState.discord.value && (
                         <IconButton
                           id="discord"

packages/client-core/src/user/services/AuthService.ts

@@ -146,6 +146,10 @@
   password: string
 }
 
+export interface AppleLoginForm {
+  email: string
+}
+
 export interface GithubLoginForm {
   email: string
 }
@@ -415,16 +419,16 @@
         const storedToken = authData.authUser?.accessToken?.value
         if (storedToken === accessToken) {
           clearInterval(waitForTokenStored)
           window.location.href = redirectSuccess
         }
         // After 3 seconds without the token getting updated, send the user back anyway - something seems to have
         // gone wrong, and we don't want them stuck on the page they were on indefinitely.
         if (timeoutTimer > 3000) window.location.href = redirectSuccess
       }, TIMEOUT_INTERVAL)
     } catch (err) {
       authState.merge({ error: i18n.t('common:error.login-error') })
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
       window.location.href = `${redirectError}?error=${err.message}`
     } finally {
       authState.merge({ isProcessing: false, error: '' })
     }
@@ -605,7 +609,7 @@
   },
 
   async addConnectionByOauth(
-    oauth: 'facebook' | 'google' | 'github' | 'linkedin' | 'twitter' | 'discord',
+    oauth: 'apple' | 'facebook' | 'google' | 'github' | 'linkedin' | 'twitter' | 'discord',
     userId: UserID
   ) {
     window.open(`https://${config.client.serverHost}/auth/oauth/${oauth}?userId=${userId}`, '_blank')

packages/client/src/pages/auth/authRoutes.tsx

@@ -30,6 +30,7 @@ import { Route, Routes } from 'react-router-dom'
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
 
 import $magiclink from './magiclink'
+import $apple from './oauth/apple'
 import $discord from './oauth/discord'
 import $facebook from './oauth/facebook'
 import $github from './oauth/github'
@@ -41,6 +42,7 @@ const AuthRoutes = () => {
   return (
     <Suspense fallback={<LoadingCircle message={t('common:loader.loadingAuth')} />}>
       <Routes>
+        <Route path="oauth/apple" element={<$apple />} />
         <Route path="oauth/discord" element={<$discord />} />
         <Route path="oauth/facebook" element={<$facebook />} />
         <Route path="oauth/github" element={<$github />} />