Basic support for Sign in with Apple (#5)

.env.example

@@ -3,12 +3,18 @@
 
 VITE_API_HOST=
 
-# Get these from https://console.cloud.google.com/apis/credentials
+# Get this from https://console.cloud.google.com/apis/credentials
 # Or use these for development purposes only, NOTICE: will only work on localhost:3000
+# Setting it empty will disable Google login.
 VITE_GOOGLE_CLIENT_ID=970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com
 
+# Get this from Apple Developer Portal
+# Or use these for development purposes only, NOTICE: will only work on localhost.direct:443
+# Setting it empty will disable Apple login.
+VITE_APPLE_CLIENT_ID=com.horizon.sequence.waas
+
 # Use this Sequence API key for development purposes only
-VITE_SEQUENCE_API_KEY=eyJzZWNyZXQiOiJ0YmQiLCJ0ZW5hbnQiOjksImlkZW50aXR5UG9vbElkIjoidXMtZWFzdC0yOjQyYzlmMzlkLWM5MzUtNGQ1Yy1hODQ1LTVjODgxNWM3OWVlMyIsImVtYWlsQ2xpZW50SWQiOiI1Zmw3ZGc3bXZ1NTM0bzl2ZmpiYzZoajMxcCIsImlkcFJlZ2lvbiI6InVzLWVhc3QtMiJ9
+VITE_SEQUENCE_API_KEY=eyJzZWNyZXQiOiJUQkQiLCJ0ZW5hbnQiOjk5OTAwOCwiaWRlbnRpdHlQb29sSWQiOiJ1cy1lYXN0LTI6NWY0ZTYxMTgtMGEwMS00M2E3LTliNjItMWUwMWNlODQ1NWIyIiwiZW1haWxDbGllbnRJZCI6InN1bXNzOGdjdWE0aTNmcjZkOXBkM2oxa28iLCJpZHBSZWdpb24iOiJ1cy1lYXN0LTIiLCJycGNTZXJ2ZXIiOiJodHRwczovL2QzandiN2ExcmNwa21wLmNsb3VkZnJvbnQubmV0Iiwia21zUmVnaW9uIjoidXMtZWFzdC0yIiwiZW1haWxSZWdpb24iOiJ1cy1lYXN0LTIiLCJrZXlJZCI6ImFybjphd3M6a21zOnVzLWVhc3QtMjoxNzA3Njg2Mjc1OTI6a2V5LzBmZDhmODAzLTljYjUtNGRlNS04NmU0LTQxOTYzZmI2MDQzZCJ9
 
 # This is the Sequence indexer API key, used for fetching ERC1155 token balances
 VITE_SEQUENCE_INDEXER_API_KEY=3XwfKaFvrgRIZ6om79SxYoTAAAAAAAAAA

README.md

@@ -18,9 +18,18 @@ Start the development server using:
 pnpm dev
 ```
 
+If you want to use Sign in with Apple you must run the server using:
+```
+pnpm dev --host --port=443
+```
+
+Then you must access it at https://localhost.direct instead of "real" localhost. This is an Apple ID security limitation.
+
 ## Configuration
 ### Environment Setup
-Customize the application by setting `GOOGLE_CLIENT_ID` and `SEQUENCE_API_KEY` in the `.env` file. The project includes sample API keys for initial local testing.
+Customize the application by setting `GOOGLE_CLIENT_ID`, `APPLE_CLIENT_ID` and `SEQUENCE_API_KEY` in the `.env` file. The project includes sample API keys for initial local testing.
+
+Setting either `GOOGLE_CLIENT_ID` or `APPLE_CLIENT_ID` will disable that social identity provider.
 
 ### Fallback to Sample Configuration
 If configurations in the `.env` file are missing, the project automatically uses the sample configuration.
@@ -30,6 +39,7 @@ Access detailed information about Sequence WaaS in the [Sequence WaaS Documentat
 
 ## Current Limitations
 - The demo currently supports only social logins for transaction activities. The email login is present but does not support transaction functionalities at this stage.
+- Sign in with Apple requires running the server in host mode at port 443. The app must then be accessed from a domain that's not localhost, e.g. https://localhost.direct.
 
 ---
 

package.json

@@ -24,6 +24,8 @@
     "ethers": "5.7.2",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
+    "react-apple-signin-auth": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2"
   },
@@ -38,6 +40,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-mkcert": "^1.17.1"
   }
 }