feat: client test app, add apple login

client/package-lock.json

@@ -15,6 +15,7 @@
         "@mui/material": "^6.3.1",
         "axios": "^1.7.9",
         "react": "^18.3.1",
+        "react-apple-signin-auth": "^1.1.0",
         "react-dom": "^18.3.1",
         "react-router-dom": "^7.1.1"
       },
@@ -3528,6 +3529,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apple-signin-auth": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-apple-signin-auth/-/react-apple-signin-auth-1.1.0.tgz",
+      "integrity": "sha512-cEFj5kVBa0R7K2Ah/F0kVtttVX19YZ0Fm6tSAICxEj9SmP6kwYHUysZ8N558cHHG09/cK+NTZ9pUxGVNXlG2Lg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

client/package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^6.3.1",
     "axios": "^1.7.9",
     "react": "^18.3.1",
+    "react-apple-signin-auth": "^1.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1"
   },

client/src/components/auth/LoginForm.tsx

@@ -1,8 +1,8 @@
 import { Alert, Box, Button, Container, Paper, TextField, Typography } from '@mui/material';
 import React, { useState } from 'react';
+import AppleSignin from 'react-apple-signin-auth';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
-
 export const LoginForm = () => {
   const { login } = useAuth();
   const navigate = useNavigate();
@@ -35,7 +35,7 @@ export const LoginForm = () => {
       [name]: value,
     }));
   };
-
+  console.log(process.env);
   return (
     <Box
       sx={{
@@ -62,7 +62,7 @@ export const LoginForm = () => {
             borderRadius: 3,
             border: '1px solid',
             borderColor: 'divider',
-            backgroundColor: 'background.paper'
+            backgroundColor: 'background.paper',
           }}
         >
           {error && (
@@ -85,7 +85,7 @@ export const LoginForm = () => {
               sx={{
                 '& .MuiOutlinedInput-root': {
                   borderRadius: 2,
-                }
+                },
               }}
             />
 
@@ -101,7 +101,7 @@ export const LoginForm = () => {
               sx={{
                 '& .MuiOutlinedInput-root': {
                   borderRadius: 2,
-                }
+                },
               }}
             />
 
@@ -116,7 +116,7 @@ export const LoginForm = () => {
                 height: 48,
                 borderRadius: 2,
                 textTransform: 'none',
-                fontSize: '1rem'
+                fontSize: '1rem',
               }}
               disabled={loading}
             >
@@ -131,13 +131,51 @@ export const LoginForm = () => {
                 fontSize: '1rem',
                 color: 'text.secondary',
                 '&:hover': {
-                  color: 'primary.main'
+                  color: 'primary.main',
-                }
+                },
               }}
               onClick={() => navigate('/register')}
             >
               signup
             </Button>
+
+            <AppleSignin
+              /** Auth options passed to AppleID.auth.init() */
+              authOptions={{
+                /** Client ID - eg: 'com.example.com' */
+                clientId: process?.env.REACT_APP_APPLE_CLIENT_ID!,
+
+                scope: 'email name',
+                /** Requested scopes, seperated by spaces - eg: 'email name' */
+                /** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */
+                redirectURI: process?.env.REACT_APP_APPLE_REDIRECT_URI!,
+
+                state: 'default',
+
+                /** Uses popup auth instead of redirection */
+                usePopup: true,
+              }} // REQUIRED
+              /** General props */
+              uiType="dark"
+              /** className */
+              className="apple-auth-btn"
+              /** Removes default style tag */
+              noDefaultStyle={false}
+              /** Allows to change the button's children, eg: for changing the button text */
+              buttonExtraChildren="Continue with Apple"
+              /** Extra controlling props */
+              /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */
+              onSuccess={(response: any) => {
+                console.log(response);
+              }} // default = undefined
+              /** Called upon signin error */
+              onError={(error: any) => console.error(error)} // default = undefined
+              /** Skips loading the apple script if true */
+              skipScript={false} // default = undefined
+              /** Apple image props */
+
+              /** render function - called with all props - can be used to fully customize the UI by rendering your own component  */
+            />
           </Box>
         </Paper>
       </Container>

client/tsconfig.app.json

@@ -17,8 +17,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

client/vite.config.ts

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react';
-import react from '@vitejs/plugin-react'
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
 
-// https://vite.dev/config/
+// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, path.join(process.cwd(), '..'), '');
+  return {
+    define: {
+      'process.env.REACT_APP_APPLE_CLIENT_ID': JSON.stringify(env.REACT_APP_APPLE_CLIENT_ID),
+      'process.env.REACT_APP_APPLE_REDIRECT_URI': JSON.stringify(env.REACT_APP_APPLE_REDIRECT_URI),
+    },
     plugins: [react()],
-})
+  };
+});