frontend/settings: add enable authentication switch for android

This introduce a config switch, available on Android, to enable the
system-level authentication. It also adds a new `force-auth` endpoint
that can be used by frontend components to force an authentication
request. Here it is used to force an authentication before updating
the authentication config setting.

Author: Beerosagos

backend/backend.go

@@ -116,6 +116,7 @@ type authEventType string
 
 const (
 	authRequired authEventType = "auth-required"
+	authForced   authEventType = "auth-forced"
 	authOk       authEventType = "auth-ok"
 	authErr      authEventType = "auth-err"
 )
@@ -309,6 +310,22 @@ func (backend *Backend) Config() *config.Config {
 	return backend.config
 }
 
+// Authenticate executes a system authentication if
+// the authentication config flag is enabled or if the
+// `force` input flag is enabled (as a consequence of an
+// 'auth/auth-forced' notification).
+// Otherwise, the authentication is automatically assumed as
+// successful.
+func (backend *Backend) Authenticate(force bool) {
+	backend.log.Info("Auth requested")
+	if backend.config.AppConfig().Backend.Authentication || force {
+		backend.environment.Auth()
+	} else {
+		backend.AuthResult(true)
+	}
+}
+
+// TriggerAuth triggers an auth-required notification.
 func (backend *Backend) TriggerAuth() {
 	backend.Notify(observable.Event{
 		Subject: "auth",
@@ -319,6 +336,27 @@ func (backend *Backend) TriggerAuth() {
 	})
 }
 
+// ForceAuth triggers an auth-forced notification
+// followed by an auth-required notification.
+func (backend *Backend) ForceAuth() {
+	backend.Notify(observable.Event{
+		Subject: "auth",
+		Action:  action.Replace,
+		Object: authEventObject{
+			Typ: authForced,
+		},
+	})
+	backend.Notify(observable.Event{
+		Subject: "auth",
+		Action:  action.Replace,
+		Object: authEventObject{
+			Typ: authRequired,
+		},
+	})
+}
+
+// AuthResult triggers an auth-ok or auth-err notification
+// depending on the input value.
 func (backend *Backend) AuthResult(ok bool) {
 	backend.log.Infof("Auth result: %v", ok)
 	typ := authErr

backend/config/config.go

@@ -74,6 +74,8 @@ type Backend struct {
 	DeprecatedLitecoinActive bool `json:"litecoinActive"`
 	DeprecatedEthereumActive bool `json:"ethereumActive"`
 
+	Authentication bool `json:"authentication"`
+
 	BTC  btcCoinConfig `json:"btc"`
 	TBTC btcCoinConfig `json:"tbtc"`
 	RBTC btcCoinConfig `json:"rbtc"`
@@ -155,6 +157,7 @@ func NewDefaultAppConfig() AppConfig {
 				UseProxy:     false,
 				ProxyAddress: "",
 			},
+			Authentication:           false,
 			DeprecatedBitcoinActive:  true,
 			DeprecatedLitecoinActive: true,
 			DeprecatedEthereumActive: true,

backend/handlers/handlers.go

@@ -101,6 +101,9 @@ type Backend interface {
 	AOPPCancel()
 	AOPPApprove()
 	AOPPChooseAccount(code accountsTypes.Code)
+	Authenticate(force bool)
+	TriggerAuth()
+	ForceAuth()
 	GetAccountFromCode(code string) (accounts.Interface, error)
 	HTTPClient() *http.Client
 	CancelConnectKeystore()
@@ -194,7 +197,9 @@ func NewHandlers(
 	getAPIRouterNoError(apiRouter)("/update", handlers.getUpdateHandler).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/banners/{key}", handlers.getBannersHandler).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/using-mobile-data", handlers.getUsingMobileDataHandler).Methods("GET")
-	getAPIRouterNoError(apiRouter)("/auth", handlers.getAuthHandler).Methods("GET")
+	getAPIRouterNoError(apiRouter)("/authenticate", handlers.postAuthenticateHandler).Methods("POST")
+	getAPIRouterNoError(apiRouter)("/trigger-auth", handlers.postTriggerAuthHandler).Methods("POST")
+	getAPIRouterNoError(apiRouter)("/force-auth", handlers.postForceAuthHandler).Methods("POST")
 	getAPIRouter(apiRouter)("/set-dark-theme", handlers.postDarkThemeHandler).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/detect-dark-theme", handlers.getDetectDarkThemeHandler).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/version", handlers.getVersionHandler).Methods("GET")
@@ -460,9 +465,26 @@ func (handlers *Handlers) getUsingMobileDataHandler(r *http.Request) interface{}
 	return handlers.backend.Environment().UsingMobileData()
 }
 
-func (handlers *Handlers) getAuthHandler(r *http.Request) interface{} {
-	handlers.log.Info("Auth requested")
-	handlers.backend.Environment().Auth()
+func (handlers *Handlers) postAuthenticateHandler(r *http.Request) interface{} {
+	var force bool
+	if err := json.NewDecoder(r.Body).Decode(&force); err != nil {
+		return map[string]interface{}{
+			"success":      false,
+			"errorMessage": err.Error(),
+		}
+	}
+
+	handlers.backend.Authenticate(force)
+	return nil
+}
+
+func (handlers *Handlers) postTriggerAuthHandler(r *http.Request) interface{} {
+	handlers.backend.TriggerAuth()
+	return nil
+}
+
+func (handlers *Handlers) postForceAuthHandler(r *http.Request) interface{} {
+	handlers.backend.ForceAuth()
 	return nil
 }
 

frontends/web/src/api/backend.ts

@@ -108,13 +108,16 @@ export const cancelConnectKeystore = (): Promise<void> => {
 export const setWatchonly = (watchonly: boolean): Promise<ISuccess> => {
   return apiPost('set-watchonly', watchonly);
 };
-export const authenticate = (): Promise<void> => {
-  return apiGet('auth');
+export const authenticate = (force: boolean = false): Promise<void> => {
+  return apiPost('authenticate', force);
 };
 
+export const forceAuth = (): Promise<void> => {
+  return apiPost('force-auth');
+};
 
 export type TAuthEventObject = {
-  typ: 'auth-required' | 'auth-ok' | 'auth-err';
+  typ: 'auth-required' | 'auth-forced' | 'auth-ok' | 'auth-err' ;
 };
 
 export const subscribeAuth = (

frontends/web/src/components/auth/authrequired.tsx

@@ -16,37 +16,42 @@
 
 import { View } from '../view/view';
 import style from './authrequired.module.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TAuthEventObject, authenticate, subscribeAuth } from '../../api/backend';
 
 export const AuthRequired = () => {
   const [authRequired, setAuthRequired] = useState(false);
+  const authForced = useRef(false);
 
   useEffect(() => {
     const unsubscribe = subscribeAuth((data: TAuthEventObject) => {
       switch (data.typ) {
+      case 'auth-forced':
+        authForced.current = true;
+        break;
       case 'auth-required':
         // It is a bit strange to call authenticate inside `setAuthRequired`,
         // but doing so we avoid declaring `authRequired` as a useEffect's
         // dependency, which would cause it to unsubscribe/subscribe every
         // time the state changes.
         setAuthRequired((prevAuthRequired) => {
           if (!prevAuthRequired) {
-            authenticate();
+            authenticate(authForced.current);
           }
           return true;
         });
         break;
       case 'auth-err':
-        authenticate();
+        authenticate(authForced.current);
         break;
       case 'auth-ok':
         setAuthRequired(false);
+        authForced.current = false;
       }
     });
 
     // Perform initial authentication. If the auth config is disabled,
-    // the backend will immediately sent an auth-ok back.
+    // the backend will immediately send an auth-ok back.
     setAuthRequired(true);
     authenticate();
 

frontends/web/src/locales/en/app.json

@@ -1059,6 +1059,10 @@
       }
     },
     "advancedSettings": {
+      "authentication": {
+        "description": "Lock access to the app with screen lock/fingerprint.",
+        "title": "Screen lock"
+      },
       "coinControl": {
         "description": "Select which UTXOs are part of a transaction to help improve privacy."
       },

frontends/web/src/routes/settings/advanced-settings.tsx

@@ -29,6 +29,7 @@ import { getConfig } from '../../utils/config';
 import { MobileHeader } from './components/mobile-header';
 import { Guide } from '../../components/guide/guide';
 import { Entry } from '../../components/guide/entry';
+import { EnableAuthSetting } from './components/advanced-settings/enable-auth-setting';
 
 export type TProxyConfig = {
   proxyAddress: string;
@@ -40,8 +41,10 @@ export type TFrontendConfig = {
   coinControl?: boolean;
 }
 
-type TBackendConfig = {
+export type TBackendConfig = {
   proxy?: TProxyConfig
+  authentication?: boolean;
+
 }
 
 export type TConfig = {
@@ -55,6 +58,7 @@ export const AdvancedSettings = ({ deviceIDs, hasAccounts }: TPagePropsWithSetti
   const [config, setConfig] = useState<TConfig>();
 
   const frontendConfig = config?.frontend;
+  const backendConfig = config?.backend;
   const proxyConfig = config?.backend?.proxy;
 
   useEffect(() => {
@@ -82,6 +86,7 @@ export const AdvancedSettings = ({ deviceIDs, hasAccounts }: TPagePropsWithSetti
               >
                 <EnableCustomFeesToggleSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} />
                 <EnableCoinControlSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} />
+                <EnableAuthSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
                 <EnableTorProxySetting proxyConfig={proxyConfig} onChangeConfig={setConfig} />
                 <ConnectFullNodeSetting />
               </WithSettingsTabs>

frontends/web/src/routes/settings/components/advanced-settings/enable-auth-setting.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright 2023 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeEvent, Dispatch } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Toggle } from '../../../../components/toggle/toggle';
+import { SettingsItem } from '../settingsItem/settingsItem';
+import { TBackendConfig, TConfig } from '../../advanced-settings';
+import { setConfig } from '../../../../utils/config';
+import { TAuthEventObject, subscribeAuth, forceAuth } from '../../../../api/backend';
+import { runningInAndroid } from '../../../../utils/env';
+
+type TProps = {
+  backendConfig?: TBackendConfig;
+  onChangeConfig: Dispatch<TConfig>;
+}
+
+export const EnableAuthSetting = ({ backendConfig, onChangeConfig }: TProps) => {
+  const { t } = useTranslation();
+
+  const handleToggleAuth = async (e: ChangeEvent<HTMLInputElement>) => {
+    // Before updating the config we need the user to authenticate.
+    // The forceAuth is needed to force the backend to execute the
+    // authentication even if the auth config is disabled.
+    const unsubscribe = subscribeAuth((data: TAuthEventObject) => {
+      if (data.typ === 'auth-ok') {
+        updateConfig(!e.target.checked);
+        unsubscribe();
+      }
+    });
+    forceAuth();
+  };
+
+  const updateConfig = async (auth: boolean) => {
+    const config = await setConfig({
+      backend: { authentication: auth },
+    }) as TConfig;
+    onChangeConfig(config);
+  };
+
+  if (!runningInAndroid()) {
+    return null;
+  }
+
+  return (
+    <SettingsItem
+      settingName={t('newSettings.advancedSettings.authentication.title')}
+      secondaryText={t('newSettings.advancedSettings.authentication.description')}
+      extraComponent={
+        backendConfig !== undefined ?
+          <Toggle
+            checked={backendConfig?.authentication || false}
+            onChange={handleToggleAuth}
+          />
+          :
+          null
+      }
+    />
+  );
+};