mirror of
https://github.com/HamzaSha1/zod-backend.git
synced 2025-08-25 13:49:40 +00:00
feat: client test app, add apple login
This commit is contained in:
Abdalhamid Alhamad
11
client/package-lock.json
generated
11
client/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
|
||||
@ -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()],
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user