Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(auth): add support for using a security key

Browse source
This commit is contained in:
Matthew Penner 2021-07-17 14:32:19 -06:00
parent 3c21770c25
commit 59f2ea37d8
6 changed files with 195 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Controllers/Auth/WebauthnController.php
View file

@ -32,7 +32,7 @@ class WebauthnController extends AbstractLoginController
* @throws \Illuminate\Validation\ValidationException
* @throws \Pterodactyl\Exceptions\DisplayException
*/
public function auth(Request $request): JsonResponse
public function auth(Request $request)
{
if ($this->hasTooManyLoginAttempts($request)) {
$this->sendLockoutResponse($request);

13
app/Http/Middleware/RequireTwoFactorAuthentication.php
View file

@ -14,17 +14,12 @@ class RequireTwoFactorAuthentication
public const LEVEL_ADMIN = 1;
public const LEVEL_ALL = 2;
/**
* @var \Prologue\Alerts\AlertsMessageBag
*/
private $alert;
/**
* The route to redirect a user to to enable 2FA.
*
* @var string
*/
protected $redirectRoute = '/account';
protected string $redirectRoute = '/account';
private AlertsMessageBag $alert;
/**
* RequireTwoFactorAuthentication constructor.
@ -60,7 +55,7 @@ class RequireTwoFactorAuthentication
// send them right through, nothing else needs to be checked.
//
// If the level is set as admin and the user is not an admin, pass them through as well.
if ($level === self::LEVEL_NONE || $user->use_totp) {
if ($level === self::LEVEL_NONE || ($user->use_totp || $user->webauthnKeys()->count() > 0)) {
return $next($request);
} elseif ($level === self::LEVEL_ADMIN && !$user->root_admin) {
return $next($request);

0
resources/scripts/api/account/webauthn/login.ts → resources/scripts/api/account/webauthn/webauthnChallenge.ts
View file

40
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { StaticContext } from 'react-router';
import { Link, RouteComponentProps } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { StaticContext, useLocation } from 'react-router';
import { Link, RouteComponentProps, useHistory } from 'react-router-dom';
import loginCheckpoint from '@/api/auth/loginCheckpoint';
import LoginFormContainer from '@/components/auth/LoginFormContainer';
import { ActionCreator } from 'easy-peasy';
@ -23,12 +23,26 @@ type Props = OwnProps & {
}
const LoginCheckpointContainer = () => {
const history = useHistory();
const location = useLocation();
const { isSubmitting, setFieldValue } = useFormikContext<Values>();
const [ isMissingDevice, setIsMissingDevice ] = useState(false);
const switchToSecurityKey = () => {
history.replace('/auth/login/key', { ...location.state });
};
useEffect(() => {
setFieldValue('code', '');
setFieldValue('recoveryCode', '');
setIsMissingDevice(location.state?.recovery || false);
}, [ location.state ]);
return (
<LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
<div css={tw`mt-6`}>
<div css={tw`flex flex-col items-center justify-center w-full md:h-full md:pt-4`}>
<div>
<Field
light
name={isMissingDevice ? 'recoveryCode' : 'code'}
@ -42,9 +56,9 @@ const LoginCheckpointContainer = () => {
autoFocus
/>
</div>
<div css={tw`mt-6`}>
<div css={tw`mt-6 md:mt-auto`}>
<Button
size={'xlarge'}
size={'large'}
type={'submit'}
disabled={isSubmitting}
isLoading={isSubmitting}
@ -52,7 +66,17 @@ const LoginCheckpointContainer = () => {
Continue
</Button>
</div>
<div css={tw`mt-6 text-center`}>
<div css={tw`flex flex-row text-center mt-6 md:mt-auto`}>
<div css={tw`mr-4`}>
<a
css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700 text-center cursor-pointer`}
onClick={() => switchToSecurityKey()}
>
Use security key
</a>
</div>
<div css={tw`ml-4`}>
<span
onClick={() => {
setFieldValue('code', '');
@ -64,6 +88,7 @@ const LoginCheckpointContainer = () => {
{!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
</span>
</div>
</div>
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/login'}
@ -72,6 +97,7 @@ const LoginCheckpointContainer = () => {
Return to Login
</Link>
</div>
</div>
</LoginFormContainer>
);
};

107
resources/scripts/components/auth/LoginKeyCheckpointContainer.tsx
View file

@ -1,11 +1,112 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import webauthnChallenge from '@/api/account/webauthn/webauthnChallenge';
import { DivContainer as LoginFormContainer } from '@/components/auth/LoginFormContainer';
import useFlash from '@/plugins/useFlash';
import { useLocation } from 'react-router';
import { Link, useHistory } from 'react-router-dom';
import Spinner from '@/components/elements/Spinner';
import Button from '@/components/elements/Button';
interface LocationParams {
token: string;
publicKey: any;
hasTotp: boolean;
}
const LoginKeyCheckpointContainer = () => {
const history = useHistory();
const location = useLocation<LocationParams>();
const { clearAndAddHttpError } = useFlash();
const [ challenging, setChallenging ] = useState(false);
const switchToCode = () => {
history.replace('/auth/login/checkpoint', { ...location.state, recovery: false });
};
const switchToRecovery = () => {
history.replace('/auth/login/checkpoint', { ...location.state, recovery: true });
};
const doChallenge = () => {
setChallenging(true);
webauthnChallenge(location.state.token, location.state.publicKey)
.then(response => {
if (!response.complete) {
return;
}
// @ts-ignore
window.location = response.intended || '/';
})
.catch(error => {
clearAndAddHttpError({ error });
console.error(error);
setChallenging(false);
});
};
useEffect(() => {
doChallenge();
}, []);
return (
<LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} />
<LoginFormContainer title={'Key Checkpoint'} css={tw`w-full flex`}>
<div css={tw`flex flex-col items-center justify-center w-full md:h-full md:pt-4`}>
<h3 css={tw`font-sans text-2xl text-center text-neutral-500 font-normal`}>Attempting challenge...</h3>
<div css={tw`mt-6 md:mt-auto`}>
{challenging ?
<Spinner size={'large'} isBlue/>
:
<Button onClick={() => doChallenge()}>
Retry
</Button>
}
</div>
<div css={tw`flex flex-row text-center mt-6 md:mt-auto`}>
<div css={tw`mr-4`}>
<a
css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700 text-center cursor-pointer`}
onClick={() => switchToCode()}
>
Use two-factor token
</a>
</div>
<div css={tw`ml-4`}>
<a
css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700 text-center cursor-pointer`}
onClick={() => switchToRecovery()}
>
I&apos;ve Lost My Device
</a>
</div>
</div>
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/login'}
css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
>
Return to Login
</Link>
</div>
</div>
</LoginFormContainer>
);
};
export default LoginKeyCheckpointContainer;
export default () => {
const history = useHistory();
const location = useLocation<LocationParams>();
if (!location.state?.token) {
history.replace('/auth/login');
return null;
}
return <LoginKeyCheckpointContainer/>;
};

3
resources/scripts/routers/AuthenticationRouter.tsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import TransitionRouter from '@/TransitionRouter';
import LoginContainer from '@/components/auth/LoginContainer';
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
import LoginKeyCheckpointContainer from '@/components/auth/LoginKeyCheckpointContainer';
@ -9,6 +10,7 @@ import { NotFound } from '@/components/elements/ScreenBlock';
export default ({ location, history, match }: RouteComponentProps) => (
<div className={'pt-8 xl:pt-32'}>
<TransitionRouter>
<Switch location={location}>
<Route path={`${match.path}/login`} component={LoginContainer} exact/>
<Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
@ -20,5 +22,6 @@ export default ({ location, history, match }: RouteComponentProps) => (
<NotFound onBack={() => history.push('/auth/login')}/>
</Route>
</Switch>
</TransitionRouter>
</div>
);