Updates with-supertokens example to add sign in with apple (#31200)

Co-authored-by: Lee Robinson <me@leerob.io>

examples/with-supertokens/.env

@@ -0,0 +1,14 @@
+# These are all working development keys.
+# IMPORTANT: You can use them during development, but for production use,
+# make sure to change them to keys issued for your app.
+
+GOOGLE_CLIENT_ID=1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
+GITHUB_CLIENT_ID=467101b197249757c71f
+GITHUB_CLIENT_SECRET=e97051221f4b6426e8fe8d51486396703012f5bd
+
+APPLE_CLIENT_ID=4398792-io.supertokens.example.service
+APPLE_KEY_ID=7M48Y4RYDL
+APPLE_TEAM_ID=YWQCXGJRJL
+APPLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----

examples/with-supertokens/README.md

@@ -18,4 +18,5 @@ yarn create next-app --example with-supertokens with-supertokens-app
 
 ## Notes
 
-Take a look at [SuperTokens documentation](https://supertokens.io/docs/community/introduction).
+- Take a look at [SuperTokens documentation](https://supertokens.io/docs/community/introduction).
+- We have provided development OAuth keys for the various in build third party providers in the `.env` file. Feel free to use them for development purposes, but **please create your own keys for production use**.

examples/with-supertokens/config/backendConfig.js

@@ -15,18 +15,21 @@ export let backendConfig = () => {
           // We have provided you with development keys which you can use for testing.
           // IMPORTANT: Please replace them with your own OAuth keys for production use.
           ThirdPartyEmailPasswordNode.Google({
-            clientId:
-              '1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com',
-            clientSecret: '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',
+            clientId: process.env.GOOGLE_CLIENT_ID,
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
           }),
           ThirdPartyEmailPasswordNode.Github({
-            clientId: '467101b197249757c71f',
-            clientSecret: 'e97051221f4b6426e8fe8d51486396703012f5bd',
+            clientId: process.env.GITHUB_CLIENT_ID,
+            clientSecret: process.env.GITHUB_CLIENT_SECRET,
+          }),
+          ThirdPartyEmailPasswordNode.Apple({
+            clientId: process.env.APPLE_CLIENT_ID,
+            clientSecret: {
+              keyId: process.env.APPLE_KEY_ID,
+              privateKey: process.env.APPLE_PRIVATE_KEY.replace(/\\n/g, '\n'),
+              teamId: process.env.APPLE_TEAM_ID,
+            },
           }),
-          // ThirdPartyEmailPasswordNode.Facebook({
-          //   clientSecret: process.env.FACEBOOK_CLIENT_SECRET || 'PLACEHOLDER',
-          //   clientId: process.env.FACEBOOK_CLIENT_ID || 'PLACEHOLDER',
-          // }),
         ],
       }),
       SessionNode.init(),

examples/with-supertokens/config/frontendConfig.js

@@ -14,6 +14,7 @@ export let frontendConfig = () => {
           providers: [
             ThirdPartyEmailPasswordReact.Google.init(),
             ThirdPartyEmailPasswordReact.Github.init(),
+            ThirdPartyEmailPasswordReact.Apple.init(),
           ],
         },
       }),

examples/with-supertokens/package.json

@@ -10,7 +10,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "supertokens-auth-react": "^0.17.0",
-    "supertokens-node": "^8.0.0"
+    "supertokens-node": "^8.1.0"
   },
   "devDependencies": {
     "eslint-config-next": "11.0.1"