chore(passport): Apple hidden email not reachable by third-parties (#…

…2793) * chore(passport): Apple hidden email not reachable by third-parties
proofzero · Dec 20, 2023 · e2ccdfe · e2ccdfe
1 parent 292a870
commit e2ccdfe
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/design-system/src/atoms/info/Info.tsx b/packages/design-system/src/atoms/info/Info.tsx
@@ -14,7 +14,7 @@ export default function Info({
   warning = false,
 }: {
   name: string
-  description: string
+  description: string | JSX.Element
   placement?: 'top' | 'bottom' | 'left' | 'right'
   editable?: boolean
   warning?: boolean

diff --git a/packages/design-system/src/templates/authorization/Authorization.tsx b/packages/design-system/src/templates/authorization/Authorization.tsx
@@ -78,6 +78,13 @@ type AuthorizationProps = {
   radius?: string
 }
 
+const isAppleEmail = (email: string | undefined) => {
+  if (!email) return false
+  return ['icloud.com', 'privaterelay.appleid.com'].some((tld) =>
+    email.endsWith(`@${tld}`)
+  )
+}
+
 //eslint-disable-next-line react/display-name
 export default ({
   userProfile,
@@ -180,10 +187,30 @@ export default ({
                         warning={true}
                       />
                     ) : (
-                      <Info
-                        name={scopeMeta.scopes[scope].name}
-                        description={scopeMeta.scopes[scope].description}
-                      />
+                      <>
+                        {scope === 'email' &&
+                        isAppleEmail(selectedEmail?.title) ? (
+                          <Info
+                            name={scopeMeta.scopes[scope].name}
+                            description={
+                              <span>
+                                If you have enabled Apple's Hide My Email the
+                                application being authorised will not be able to
+                                send emails to it, due to restrictions on
+                                Apple's services. <br /> <br /> Consider using
+                                Rollup's email masking instead by toggling it in
+                                the Email dropdown.
+                              </span>
+                            }
+                            warning={true}
+                          />
+                        ) : (
+                          <Info
+                            name={scopeMeta.scopes[scope].name}
+                            description={scopeMeta.scopes[scope].description}
+                          />
+                        )}
+                      </>
                     )}
 
                     <div