feat: client test app, add apple login

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>