Merge pull request #56 from OpenConext/add-gesture

Add button to start webauthn flow

.gitignore

@@ -9,6 +9,7 @@
 /config/packages/parameters.yml
 /build/
 /var/*
+/app/files/*
 !/var/cache
 /var/cache/*
 !var/cache/.gitkeep

public/typescript/model/application.ts

@@ -57,6 +57,7 @@ export function errorWithMailTo(error: ErrorInformation): error is ErrorWithMail
 export type ErrorInformation = ErrorWithMail | ErrorWithoutMail;
 
 export interface ApplicationState {
+  started: boolean;
   requestInformation: RequestInformation;
   errorInfo: ErrorInformation | null;
   message: TranslationString;

public/typescript/reducer/__test__/appReducer.test.ts

@@ -15,6 +15,7 @@ describe('appReducer', () => {
   };
   beforeEach(() => {
     initialState = {
+      started: false,
       errorInfo: null,
       message: 'initial',
       requestInformation,
@@ -30,13 +31,15 @@ describe('appReducer', () => {
     shouldNotAlterState(state, action);
     shouldNothaveAnError(state, action);
     shouldSetMessageTo(state, action, 'status.authentication_initial');
+    shouldBeStarted(state, action);
   });
 
   describe('ApplicationEvent.REQUEST_USER_FOR_ATTESTATION', () => {
     const action = { value: null, timestamp: 'now', type: ApplicationEvent.REQUEST_USER_FOR_ATTESTATION };
     shouldNotAlterState(state, action);
     shouldNothaveAnError(state, action);
     shouldSetMessageTo(state, action, 'status.registration_initial');
+    shouldBeStarted(state, action);
   });
 
   describe('ApplicationEvent.PUBLIC_KEY_CREDENTIALS_SERIALIZED', () => {
@@ -48,6 +51,7 @@ describe('appReducer', () => {
     const action = { value, timestamp: 'now', type: ApplicationEvent.PUBLIC_KEY_CREDENTIALS_SERIALIZED };
     shouldNotAlterState(state, action);
     shouldNothaveAnError(state, action);
+    shouldBeStarted(state, action);
     it('Should decode clientDataJSON', () => {
       const result = appReducer(initialState!, action);
       expect(result.clientDataJSON).toEqual('123');
@@ -59,13 +63,15 @@ describe('appReducer', () => {
     shouldNotAlterState(state, action);
     shouldNotDisplayRetryAndMailToButton(state, action);
     shouldSetMessageTo(state, action, 'status.webauthn_not_supported');
+    shouldBeStarted(state, action);
   });
 
   describe('ApplicationEvent.ERROR', () => {
     const action = { value: null, timestamp: 'now', type: ApplicationEvent.ERROR };
     shouldNotAlterState(state, action);
     shouldDisplayMailAndRetryButton(state, action);
     shouldSetMessageTo(state, action, 'status.general_error');
+    shouldBeStarted(state, action);
   });
 });
 
@@ -105,3 +111,10 @@ function shouldSetMessageTo(initialState: () => ApplicationState, action: Applic
     expect(result.message).toEqual(message);
   });
 }
+
+function shouldBeStarted(initialState: () => ApplicationState, action: ApplicationAction) {
+  it('Should be started', () => {
+    const result = appReducer(initialState(), action);
+    expect(result.started).toBeTruthy();
+  });
+}

public/typescript/reducer/appReducer.ts

@@ -11,6 +11,7 @@ export const appReducer: AppReducer = (state, { value, type, timestamp }) => {
   switch (type) {
     case ApplicationEvent.NOT_SUPPORTED:
       return {
+        started: true,
         requestInformation,
         message: 'status.webauthn_not_supported',
         errorInfo: {
@@ -23,6 +24,7 @@ export const appReducer: AppReducer = (state, { value, type, timestamp }) => {
 
     case ApplicationEvent.REQUEST_USER_FOR_ATTESTATION:
       return {
+        started: true,
         requestInformation,
         message: 'status.registration_initial',
         errorInfo: null,
@@ -32,11 +34,13 @@ export const appReducer: AppReducer = (state, { value, type, timestamp }) => {
       const credentials: SerializedPublicKeyCredential = value as any;
       return {
         ...state,
+        started: true,
         clientDataJSON: decode(credentials.response.clientDataJSON).toString(),
       };
 
     case ApplicationEvent.REQUEST_USER_FOR_ASSERTION:
       return {
+        started: true,
         requestInformation,
         message: 'status.authentication_initial',
         errorInfo: null,
@@ -47,6 +51,7 @@ export const appReducer: AppReducer = (state, { value, type, timestamp }) => {
         return serverResponseErrorReducer(state, timestamp, value.response);
       }
       return {
+        started: true,
         requestInformation,
         message: 'status.general_error',
         errorInfo: {

public/typescript/reducer/serverResponseErrorReducer.ts

@@ -31,6 +31,7 @@ export const serverResponseErrorReducer = (state: ApplicationState, timestamp: s
   switch (status) {
     case 'deviceNotSupported':
       return {
+        started: true,
         requestInformation,
         message: 'status.authenticator_not_supported',
         errorInfo: {
@@ -43,6 +44,7 @@ export const serverResponseErrorReducer = (state: ApplicationState, timestamp: s
     case 'noRegistrationRequired':
     case 'noAuthenticationRequired':
       return {
+        started: true,
         requestInformation,
         message: 'status.no_active_request',
         errorInfo: {
@@ -54,6 +56,7 @@ export const serverResponseErrorReducer = (state: ApplicationState, timestamp: s
       };
     case 'missingAttestationStatement':
       return {
+        started: true,
         requestInformation,
         message: 'missing_attestation_statement',
         errorInfo: {
@@ -66,6 +69,7 @@ export const serverResponseErrorReducer = (state: ApplicationState, timestamp: s
     case 'invalid':
     case 'error':
       return {
+        started: true,
         requestInformation,
         message: 'status.general_error',
         errorInfo: {

public/typescript/ui/component/App.tsx

@@ -4,19 +4,23 @@ import { ErrorTable } from './ErrorTable';
 
 export interface AppProps {
   t: (key: string) => string; requestInformation: RequestInformation;
+  started: boolean;
+  startMessage: TranslationString;
   errorInfo: ErrorInformation | null;
   message: TranslationString;
   onClick: () => void;
+  onStart: () => void;
 }
 
-export const App: FC<AppProps> = ({ t, message, requestInformation, errorInfo, onClick }) => {
+export const App: FC<AppProps> = ({ t, started, startMessage, message, requestInformation, errorInfo, onClick, onStart }) => {
   return (
     <div>
       <p>
         {t(message)}
       </p>
-      {errorInfo && <ErrorTable t={t} errorInfo={errorInfo} clientInfo={requestInformation} />}
-      {errorInfo && errorInfo.showRetry && <button onClick={onClick}>{t('retry')}</button>}
+      {started && errorInfo && <ErrorTable t={t} errorInfo={errorInfo} clientInfo={requestInformation} />}
+      {started && errorInfo && errorInfo.showRetry && <button className="btn btn-primary" onClick={onClick}>{t('retry')}</button>}
+      {!started && <button className="btn btn-primary" onClick={onStart}>{t(startMessage)}</button>}
     </div>
   );
 };

public/typescript/ui/component/AuthenticationContainer.tsx

@@ -13,9 +13,9 @@ export interface AuthenticationContainerProps {
 
 export const AuthenticationContainer: FC<AuthenticationContainerProps> = ({ t, requestInformation, publicKeyOptions, responseUrl }) => {
   const [state, dispatch] = useAppReducer(requestInformation, 'status.authentication_initial');
-  const { message, errorInfo } = state;
+  const { message, errorInfo, started } = state;
   const [click, clicked] = useClickable();
   const verify = useVerifyPublicKeyCredentials(responseUrl);
-  useAuthenticationEffect(dispatch, publicKeyOptions, verify, clicked);
-  return <App message={message} errorInfo={errorInfo} requestInformation={requestInformation} t={t} onClick={click} />;
+  const onStart = useAuthenticationEffect(dispatch, publicKeyOptions, verify, clicked);
+  return <App started={started} startMessage="authentication.start_button" message={message} errorInfo={errorInfo} requestInformation={requestInformation} t={t} onClick={click} onStart={onStart} />;
 };

public/typescript/ui/component/RegistrationContainer.tsx

@@ -13,9 +13,9 @@ export interface RegistrationContainerProps {
 
 export const RegistrationContainer: FC<RegistrationContainerProps> = ({ t, responseUrl, publicKeyOptions, requestInformation }) => {
   const [state, dispatch] = useAppReducer(requestInformation, 'status.registration_initial');
-  const { message, errorInfo } = state;
+  const { message, errorInfo, started } = state;
   const [click, clicked] = useClickable();
   const verify = useVerifyPublicKeyCredentials(responseUrl);
-  useRegistrationEffect(dispatch, publicKeyOptions, verify, clicked);
-  return <App message={message} errorInfo={errorInfo} requestInformation={requestInformation} t={t} onClick={click} />;
+  const onStart = useRegistrationEffect(dispatch, publicKeyOptions, verify, clicked);
+  return <App started={started} startMessage="registration.start_button" message={message} errorInfo={errorInfo} requestInformation={requestInformation} t={t} onClick={click} onStart={onStart} />;
 };

public/typescript/ui/hook/useAppReducer.ts

@@ -6,6 +6,7 @@ import { loggingAppReducerDecorator } from '../../reducer/loggingAppReducerDecor
 export const useAppReducer = (requestInformation: RequestInformation, initialMessage: string) => useReducer(
   loggingAppReducerDecorator(appReducer),
   useState({
+    started: false,
     message: initialMessage,
     errorInfo: null,
     requestInformation,

public/typescript/ui/hook/useAuthenticationEffect.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { Observable } from 'rxjs';
 import { reloadPage } from '../../function';
 import { PublicKeyResponseValidator } from '../../function/http';
@@ -7,7 +7,7 @@ import { authenticationObservable } from '../../observable';
 import { retryWith } from '../../operator';
 
 export const useAuthenticationEffect = (dispatch: (action: ApplicationAction) => void, publicKeyOptions: SerializedPublicKeyCredentialRequestOptions, send: PublicKeyResponseValidator, whenClicked: Observable<unknown>) =>
-  useEffect(
+  useCallback(
     () => {
       const time = () => (new Date()).toISOString();
       const subscription = authenticationObservable(

public/typescript/ui/hook/useRegistrationEffect.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { Observable } from 'rxjs';
 import { reloadPage } from '../../function';
 import { PublicKeyResponseValidator } from '../../function/http';
@@ -7,7 +7,7 @@ import { registrationObservable } from '../../observable';
 import { retryWith } from '../../operator';
 
 export const useRegistrationEffect = (dispatch: (action: ApplicationAction) => void, publicKeyOptions: SerializedPublicKeyCredentialCreationOptions, send: PublicKeyResponseValidator, whenClicked: Observable<unknown>) =>
-  useEffect(
+  useCallback(
     () => {
       const time = () => (new Date()).toISOString();
       const subscription = registrationObservable(

symfony.lock

@@ -566,6 +566,9 @@
     "symfony/polyfill-php80": {
         "version": "v1.18.1"
     },
+    "symfony/polyfill-php81": {
+        "version": "v1.23.0"
+    },
     "symfony/profiler-pack": {
         "version": "v1.0.4"
     },

templates/default/authentication.html.twig

@@ -3,7 +3,8 @@
 {% block body %}
     <h2>{{ 'authentication.sub_title'|trans }}</h2>
 
-    <div id="root"> </div>
+    <div id="root">
+    </div>
 
     {% include 'default/variables.twig' %}
     {% block javascripts %}
@@ -15,4 +16,3 @@
     {% endblock %}
 
 {% endblock %}
-

templates/default/registration.html.twig

@@ -3,7 +3,7 @@
 {% block body %}
     <h2>{{ 'registration.sub_title'|trans }}</h2>
 
-    <div id="root"> </div>
+    <div id="root"></div>
 
     {% include 'default/variables.twig' %}
     {% block javascripts %}
@@ -15,4 +15,3 @@
     {% endblock %}
 
 {% endblock %}
-

templates/default/variables.twig

@@ -1,4 +1,6 @@
 {% set translations = {
+    'authentication.start_button': 'authentication.start_button' | trans,
+    'registration.start_button': 'registration.start_button' | trans,
     'registration.sub_title':  'registration.sub_title' | trans,
     'status.registration_initial':  'status.registration_initial' | trans,
     'status.missing_attestation_statement':  'status.missing_attestation_statement' | trans,

translations/messages.en.yml

@@ -1,12 +1,14 @@
 # Registration
 
 registration.sub_title: Registration
+registration.start_button: Use your security key
 status.registration_initial: Register your FIDO2 token.
 status.missing_attestation_statement: Try again and grant access to view your FIDO2 token.
 
 # Authentication
 
 authentication.sub_title: Authentication
+authentication.start_button: Use your security key
 status.authentication_initial: Authenticate with your FIDO2 token.
 
 # General status messages
@@ -20,7 +22,7 @@ status.authenticator_not_supported: This token is not supported, try with a diff
 
 ## Buttons
 
-retry: Retry again
+retry: Try again
 cancel: Cancel
 abort: Abort
 

translations/messages.nl.yml

@@ -1,12 +1,14 @@
 # Registration
 
 registration.sub_title: Registratie
+registration.start_button: Gebruik je beveiligingssleutel
 status.registration_initial: Registreer jouw FIDO2 token.
 status.missing_attestation_statement: Probeer het opnieuw en verleen toegang om je FIDO2 token te bekijken.
 
 # Authentication
 
 authentication.sub_title: Authenticeren
+authentication.start_button: Gebruik je beveiligingssleutel
 status.authentication_initial: Authenticeer met jouw FIDO2 token.
 
 # General status messages