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

app/Http/Controllers/Auth/WebauthnController.php

@@ -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);

app/Http/Middleware/RequireTwoFactorAuthentication.php

@@ -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);

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { StaticContext } from 'react-router';
+import { StaticContext, useLocation } from 'react-router';
-import { Link, RouteComponentProps } from 'react-router-dom';
+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>
     );
 };

resources/scripts/components/auth/LoginKeyCheckpointContainer.tsx

@@ -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/>;
+};

resources/scripts/routers/AuthenticationRouter.tsx

@@ -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>
 );