diff --git a/client/package-lock.json b/client/package-lock.json index dbf4027..b27ef11 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 0498e7f..3d7e22e 100644 --- a/client/package.json +++ b/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" }, diff --git a/client/src/components/auth/LoginForm.tsx b/client/src/components/auth/LoginForm.tsx index 5bb9a52..286cb3d 100644 --- a/client/src/components/auth/LoginForm.tsx +++ b/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 ( { 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 + + { + 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 */ + /> diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json index 358ca9b..a67d962 100644 --- a/client/tsconfig.app.json +++ b/client/tsconfig.app.json @@ -17,8 +17,8 @@ /* Linting */ "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, + "noUnusedLocals": false, + "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, diff --git a/client/vite.config.ts b/client/vite.config.ts index 8b0f57b..35c1795 100644 --- a/client/vite.config.ts +++ b/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/ -export default defineConfig({ - plugins: [react()], -}) +// https://vitejs.dev/config/ +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()], + }; +});