110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
|
|
import { useCallback } from 'react';
|
|
import { useAuth0 } from '@auth0/auth0-react';
|
|
|
|
import Stack from '@mui/material/Stack';
|
|
import Button from '@mui/material/Button';
|
|
import Divider from '@mui/material/Divider';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
import { useSearchParams } from 'src/routes/hooks';
|
|
|
|
import { CONFIG } from 'src/config-global';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function Auth0SignInView() {
|
|
const { loginWithPopup, loginWithRedirect } = useAuth0();
|
|
|
|
const searchParams = useSearchParams();
|
|
|
|
const returnTo = searchParams.get('returnTo');
|
|
|
|
const handleSignInWithPopup = useCallback(async () => {
|
|
try {
|
|
await loginWithPopup();
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}, [loginWithPopup]);
|
|
|
|
const handleSignUpWithPopup = useCallback(async () => {
|
|
try {
|
|
await loginWithPopup({ authorizationParams: { screen_hint: 'signup' } });
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}, [loginWithPopup]);
|
|
|
|
const handleSignInWithRedirect = useCallback(async () => {
|
|
try {
|
|
await loginWithRedirect({ appState: { returnTo: returnTo || CONFIG.auth.redirectPath } });
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}, [loginWithRedirect, returnTo]);
|
|
|
|
const handleSignUpWithRedirect = useCallback(async () => {
|
|
try {
|
|
await loginWithRedirect({
|
|
appState: { returnTo: returnTo || CONFIG.auth.redirectPath },
|
|
authorizationParams: { screen_hint: 'signup' },
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}, [loginWithRedirect, returnTo]);
|
|
|
|
return (
|
|
<>
|
|
<Typography variant="h5" sx={{ mb: 5, textAlign: 'center' }}>
|
|
Sign in to your account
|
|
</Typography>
|
|
|
|
<Stack spacing={2}>
|
|
<Button
|
|
fullWidth
|
|
color="primary"
|
|
size="large"
|
|
variant="contained"
|
|
onClick={handleSignInWithRedirect}
|
|
>
|
|
Sign in with Redirect
|
|
</Button>
|
|
|
|
<Button
|
|
fullWidth
|
|
color="primary"
|
|
size="large"
|
|
variant="soft"
|
|
onClick={handleSignUpWithRedirect}
|
|
>
|
|
Sign up with Redirect
|
|
</Button>
|
|
|
|
<Divider sx={{ borderStyle: 'dashed', my: 3 }} />
|
|
|
|
<Button
|
|
fullWidth
|
|
color="inherit"
|
|
size="large"
|
|
variant="contained"
|
|
onClick={handleSignInWithPopup}
|
|
>
|
|
Sign in with Popup
|
|
</Button>
|
|
|
|
<Button
|
|
fullWidth
|
|
color="inherit"
|
|
size="large"
|
|
variant="soft"
|
|
onClick={handleSignUpWithPopup}
|
|
>
|
|
Sign up with Popup
|
|
</Button>
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|