[SG-168] Passwordless login web MVP (#3424)

* passwordless login page redesign

* passwordless login page redesign

* restyled login form to use tailwind

* restyled login form to use tailwind

* moved texts on login device template to locales

* made reactive form changes for clients

* added request model

* made more changes

* added implmentation to auth request api

* fixed refrencing issue

* renamed model property

* Added resend notification functionality

* Added new file

* login with device first draft

* login with device first draft

* login with device first draft

* login with device first draft

* connection to anonymous hub

* connection to anonymous hub

* refactored confirm login response

* removed comment

* cleaned up login

* changed uptyped form builder

* changed uptyped form builder

* [SG-168] Update login strategy with passwordless login credentials.

* [SG-168] Removed logs. Changed inputs for passwordless logic strategy. Removed tokenRequestPasswordless it is using the same as password.

* code cleanup

* code cleanup

* removed login with device from self hosted

* fixed PR comments

* added module for login

* fixed post request bug

* added feature flag

* added feature flag

* added feature flag

Co-authored-by: André Bispo <abispo@bitwarden.com>

libs/common/src/abstractions/anonymousHub.service.ts

@@ -0,0 +1,4 @@
+export abstract class AnonymousHubService {
+  createHubConnection: (token: string) => void;
+  stopHubConnection: () => void;
+}

libs/common/src/abstractions/api.service.ts

@@ -46,6 +46,7 @@ import { OrganizationUserUpdateGroupsRequest } from "../models/request/organizat
 import { OrganizationUserUpdateRequest } from "../models/request/organizationUserUpdateRequest";
 import { PasswordHintRequest } from "../models/request/passwordHintRequest";
 import { PasswordRequest } from "../models/request/passwordRequest";
+import { PasswordlessCreateAuthRequest } from "../models/request/passwordlessCreateAuthRequest";
 import { PaymentRequest } from "../models/request/paymentRequest";
 import { PreloginRequest } from "../models/request/preloginRequest";
 import { ProviderAddOrganizationRequest } from "../models/request/provider/providerAddOrganizationRequest";
@@ -84,6 +85,7 @@ import { VerifyEmailRequest } from "../models/request/verifyEmailRequest";
 import { ApiKeyResponse } from "../models/response/apiKeyResponse";
 import { AttachmentResponse } from "../models/response/attachmentResponse";
 import { AttachmentUploadDataResponse } from "../models/response/attachmentUploadDataResponse";
+import { AuthRequestResponse } from "../models/response/authRequestResponse";
 import { RegisterResponse } from "../models/response/authentication/registerResponse";
 import { BillingHistoryResponse } from "../models/response/billingHistoryResponse";
 import { BillingPaymentResponse } from "../models/response/billingPaymentResponse";
@@ -210,6 +212,9 @@ export abstract class ApiService {
   postUserRotateApiKey: (id: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
   putUpdateTempPassword: (request: UpdateTempPasswordRequest) => Promise<any>;
   postConvertToKeyConnector: () => Promise<void>;
+  //passwordless
+  postAuthRequest: (request: PasswordlessCreateAuthRequest) => Promise<AuthRequestResponse>;
+  getAuthResponse: (id: string, accessCode: string) => Promise<AuthRequestResponse>;
 
   getUserBillingHistory: () => Promise<BillingHistoryResponse>;
   getUserBillingPayment: () => Promise<BillingPaymentResponse>;

libs/common/src/abstractions/auth.service.ts

@@ -1,18 +1,26 @@
+import { Observable } from "rxjs";
+
 import { AuthenticationStatus } from "../enums/authenticationStatus";
 import { AuthResult } from "../models/domain/authResult";
 import {
   ApiLogInCredentials,
   PasswordLogInCredentials,
   SsoLogInCredentials,
+  PasswordlessLogInCredentials,
 } from "../models/domain/logInCredentials";
 import { SymmetricCryptoKey } from "../models/domain/symmetricCryptoKey";
 import { TokenRequestTwoFactor } from "../models/request/identityToken/tokenRequestTwoFactor";
+import { AuthRequestPushNotification } from "../models/response/notificationResponse";
 
 export abstract class AuthService {
   masterPasswordHash: string;
   email: string;
   logIn: (
-    credentials: ApiLogInCredentials | PasswordLogInCredentials | SsoLogInCredentials
+    credentials:
+      | ApiLogInCredentials
+      | PasswordLogInCredentials
+      | SsoLogInCredentials
+      | PasswordlessLogInCredentials
   ) => Promise<AuthResult>;
   logInTwoFactor: (
     twoFactor: TokenRequestTwoFactor,
@@ -24,4 +32,7 @@ export abstract class AuthService {
   authingWithSso: () => boolean;
   authingWithPassword: () => boolean;
   getAuthStatus: (userId?: string) => Promise<AuthenticationStatus>;
+  authResponsePushNotifiction: (notification: AuthRequestPushNotification) => Promise<any>;
+
+  getPushNotifcationObs$: () => Observable<any>;
 }

libs/common/src/enums/authRequestType.ts

@@ -0,0 +1,4 @@
+export enum AuthRequestType {
+  AuthenticateAndUnlock = 0,
+  Unlock = 1,
+}

libs/common/src/enums/authenticationType.ts

@@ -2,4 +2,5 @@ export enum AuthenticationType {
   Password = 0,
   Sso = 1,
   Api = 2,
+  Passwordless = 3,
 }

libs/common/src/enums/notificationType.ts

@@ -17,4 +17,7 @@ export enum NotificationType {
   SyncSendCreate = 12,
   SyncSendUpdate = 13,
   SyncSendDelete = 14,
+
+  AuthRequest = 15,
+  AuthRequestResponse = 16,
 }

libs/common/src/misc/logInStrategies/logIn.strategy.ts

@@ -14,6 +14,7 @@ import {
   ApiLogInCredentials,
   PasswordLogInCredentials,
   SsoLogInCredentials,
+  PasswordlessLogInCredentials,
 } from "../../models/domain/logInCredentials";
 import { DeviceRequest } from "../../models/request/deviceRequest";
 import { ApiTokenRequest } from "../../models/request/identityToken/apiTokenRequest";
@@ -42,7 +43,11 @@ export abstract class LogInStrategy {
   ) {}
 
   abstract logIn(
-    credentials: ApiLogInCredentials | PasswordLogInCredentials | SsoLogInCredentials
+    credentials:
+      | ApiLogInCredentials
+      | PasswordLogInCredentials
+      | SsoLogInCredentials
+      | PasswordlessLogInCredentials
   ): Promise<AuthResult>;
 
   async logInTwoFactor(

libs/common/src/misc/logInStrategies/passwordlessLogin.strategy.ts

@@ -0,0 +1,86 @@
+import { ApiService } from "../../abstractions/api.service";
+import { AppIdService } from "../../abstractions/appId.service";
+import { AuthService } from "../../abstractions/auth.service";
+import { CryptoService } from "../../abstractions/crypto.service";
+import { LogService } from "../../abstractions/log.service";
+import { MessagingService } from "../../abstractions/messaging.service";
+import { PlatformUtilsService } from "../../abstractions/platformUtils.service";
+import { StateService } from "../../abstractions/state.service";
+import { TokenService } from "../../abstractions/token.service";
+import { TwoFactorService } from "../../abstractions/twoFactor.service";
+import { AuthResult } from "../../models/domain/authResult";
+import { PasswordlessLogInCredentials } from "../../models/domain/logInCredentials";
+import { SymmetricCryptoKey } from "../../models/domain/symmetricCryptoKey";
+import { PasswordTokenRequest } from "../../models/request/identityToken/passwordTokenRequest";
+import { TokenRequestTwoFactor } from "../../models/request/identityToken/tokenRequestTwoFactor";
+
+import { LogInStrategy } from "./logIn.strategy";
+
+export class PasswordlessLogInStrategy extends LogInStrategy {
+  get email() {
+    return this.tokenRequest.email;
+  }
+
+  get masterPasswordHash() {
+    return this.tokenRequest.masterPasswordHash;
+  }
+
+  tokenRequest: PasswordTokenRequest;
+
+  private localHashedPassword: string;
+  private key: SymmetricCryptoKey;
+
+  constructor(
+    cryptoService: CryptoService,
+    apiService: ApiService,
+    tokenService: TokenService,
+    appIdService: AppIdService,
+    platformUtilsService: PlatformUtilsService,
+    messagingService: MessagingService,
+    logService: LogService,
+    stateService: StateService,
+    twoFactorService: TwoFactorService,
+    private authService: AuthService
+  ) {
+    super(
+      cryptoService,
+      apiService,
+      tokenService,
+      appIdService,
+      platformUtilsService,
+      messagingService,
+      logService,
+      stateService,
+      twoFactorService
+    );
+  }
+
+  async onSuccessfulLogin() {
+    await this.cryptoService.setKey(this.key);
+    await this.cryptoService.setKeyHash(this.localHashedPassword);
+  }
+
+  async logInTwoFactor(
+    twoFactor: TokenRequestTwoFactor,
+    captchaResponse: string
+  ): Promise<AuthResult> {
+    this.tokenRequest.captchaResponse = captchaResponse ?? this.captchaBypassToken;
+    return super.logInTwoFactor(twoFactor);
+  }
+
+  async logIn(credentials: PasswordlessLogInCredentials) {
+    this.localHashedPassword = credentials.localPasswordHash;
+    this.key = credentials.decKey;
+
+    this.tokenRequest = new PasswordTokenRequest(
+      credentials.email,
+      credentials.accessCode,
+      null,
+      await this.buildTwoFactor(credentials.twoFactor),
+      await this.buildDeviceRequest()
+    );
+
+    this.tokenRequest.setPasswordlessAccessCode(credentials.authRequestId);
+    return this.startLogIn();
+  }
+}

libs/common/src/models/domain/logInCredentials.ts

@@ -1,3 +1,5 @@
+import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetricCryptoKey";
+
 import { AuthenticationType } from "../../enums/authenticationType";
 import { TokenRequestTwoFactor } from "../request/identityToken/tokenRequestTwoFactor";
 
@@ -29,3 +31,16 @@ export class ApiLogInCredentials {
 
   constructor(public clientId: string, public clientSecret: string) {}
 }
+
+export class PasswordlessLogInCredentials {
+  readonly type = AuthenticationType.Passwordless;
+
+  constructor(
+    public email: string,
+    public accessCode: string,
+    public authRequestId: string,
+    public decKey: SymmetricCryptoKey,
+    public localPasswordHash: string,
+    public twoFactor?: TokenRequestTwoFactor
+  ) {}
+}

libs/common/src/models/request/identityToken/tokenRequest.ts

@@ -4,6 +4,7 @@ import { TokenRequestTwoFactor } from "./tokenRequestTwoFactor";
 
 export abstract class TokenRequest {
   protected device?: DeviceRequest;
+  protected passwordlessAuthRequest: string;
 
   constructor(protected twoFactor: TokenRequestTwoFactor, device?: DeviceRequest) {
     this.device = device != null ? device : null;
@@ -18,6 +19,10 @@ export abstract class TokenRequest {
     this.twoFactor = twoFactor;
   }
 
+  setPasswordlessAccessCode(accessCode: string) {
+    this.passwordlessAuthRequest = accessCode;
+  }
+
   protected toIdentityToken(clientId: string) {
     const obj: any = {
       scope: "api offline_access",
@@ -32,6 +37,11 @@ export abstract class TokenRequest {
       // obj.devicePushToken = this.device.pushToken;
     }
 
+    //passswordless login
+    if (this.passwordlessAuthRequest) {
+      obj.authRequest = this.passwordlessAuthRequest;
+    }
+
     if (this.twoFactor.token && this.twoFactor.provider != null) {
       obj.twoFactorToken = this.twoFactor.token;
       obj.twoFactorProvider = this.twoFactor.provider;

libs/common/src/models/request/passwordlessCreateAuthRequest.ts

@@ -0,0 +1,12 @@
+import { AuthRequestType } from "../../enums/authRequestType";
+
+export class PasswordlessCreateAuthRequest {
+  constructor(
+    readonly email: string,
+    readonly deviceIdentifier: string,
+    readonly publicKey: string,
+    readonly type: AuthRequestType,
+    readonly accessCode: string,
+    readonly fingerprintPhrase: string
+  ) {}
+}

libs/common/src/models/response/authRequestResponse.ts

@@ -0,0 +1,26 @@
+import { DeviceType } from "@bitwarden/common/enums/deviceType";
+
+import { BaseResponse } from "./baseResponse";
+
+export class AuthRequestResponse extends BaseResponse {
+  id: string;
+  publicKey: string;
+  requestDeviceType: DeviceType;
+  requestIpAddress: string;
+  key: string;
+  masterPasswordHash: string;
+  creationDate: string;
+  requestApproved: boolean;
+
+  constructor(response: any) {
+    super(response);
+    this.id = this.getResponseProperty("Id");
+    this.publicKey = this.getResponseProperty("PublicKey");
+    this.requestDeviceType = this.getResponseProperty("RequestDeviceType");
+    this.requestIpAddress = this.getResponseProperty("RequestIpAddress");
+    this.key = this.getResponseProperty("Key");
+    this.masterPasswordHash = this.getResponseProperty("MasterPasswordHash");
+    this.creationDate = this.getResponseProperty("CreationDate");
+    this.requestApproved = this.getResponseProperty("RequestApproved");
+  }
+}

libs/common/src/models/response/notificationResponse.ts

@@ -37,6 +37,10 @@ export class NotificationResponse extends BaseResponse {
       case NotificationType.SyncSendDelete:
         this.payload = new SyncSendNotification(payload);
         break;
+      case NotificationType.AuthRequest:
+      case NotificationType.AuthRequestResponse:
+        this.payload = new AuthRequestPushNotification(payload);
+        break;
       default:
         break;
     }
@@ -96,3 +100,14 @@ export class SyncSendNotification extends BaseResponse {
     this.revisionDate = new Date(this.getResponseProperty("RevisionDate"));
   }
 }
+
+export class AuthRequestPushNotification extends BaseResponse {
+  id: string;
+  userId: string;
+
+  constructor(response: any) {
+    super(response);
+    this.id = this.getResponseProperty("Id");
+    this.userId = this.getResponseProperty("UserId");
+  }
+}

libs/common/src/services/anonymousHub.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from "@angular/core";
+import {
+  HttpTransportType,
+  HubConnection,
+  HubConnectionBuilder,
+  IHubProtocol,
+} from "@microsoft/signalr";
+import { MessagePackHubProtocol } from "@microsoft/signalr-protocol-msgpack";
+
+import { AnonymousHubService as AnonymousHubServiceAbstraction } from "../abstractions/anonymousHub.service";
+import { AuthService } from "../abstractions/auth.service";
+import { EnvironmentService } from "../abstractions/environment.service";
+import { LogService } from "../abstractions/log.service";
+
+import {
+  AuthRequestPushNotification,
+  NotificationResponse,
+} from "./../models/response/notificationResponse";
+
+@Injectable()
+export class AnonymousHubService implements AnonymousHubServiceAbstraction {
+  private anonHubConnection: HubConnection;
+  private url: string;
+
+  constructor(
+    private environmentService: EnvironmentService,
+    private authService: AuthService,
+    private logService: LogService
+  ) {}
+
+  async createHubConnection(token: string) {
+    this.url = this.environmentService.getNotificationsUrl();
+
+    this.anonHubConnection = new HubConnectionBuilder()
+      .withUrl(this.url + "/anonymousHub?Token=" + token, {
+        skipNegotiation: true,
+        transport: HttpTransportType.WebSockets,
+      })
+      .withHubProtocol(new MessagePackHubProtocol() as IHubProtocol)
+      .build();
+
+    this.anonHubConnection.start().catch((error) => this.logService.error(error));
+
+    this.anonHubConnection.on("AuthRequestResponseRecieved", (data: any) => {
+      this.ProcessNotification(new NotificationResponse(data));
+    });
+  }
+
+  stopHubConnection() {
+    if (this.anonHubConnection) {
+      this.anonHubConnection.stop();
+    }
+  }
+
+  private async ProcessNotification(notification: NotificationResponse) {
+    await this.authService.authResponsePushNotifiction(
+      notification.payload as AuthRequestPushNotification
+    );
+  }
+}

libs/common/src/services/api.service.ts

@@ -54,6 +54,7 @@ import { OrganizationUserUpdateGroupsRequest } from "../models/request/organizat
 import { OrganizationUserUpdateRequest } from "../models/request/organizationUserUpdateRequest";
 import { PasswordHintRequest } from "../models/request/passwordHintRequest";
 import { PasswordRequest } from "../models/request/passwordRequest";
+import { PasswordlessCreateAuthRequest } from "../models/request/passwordlessCreateAuthRequest";
 import { PaymentRequest } from "../models/request/paymentRequest";
 import { PreloginRequest } from "../models/request/preloginRequest";
 import { ProviderAddOrganizationRequest } from "../models/request/provider/providerAddOrganizationRequest";
@@ -92,6 +93,7 @@ import { VerifyEmailRequest } from "../models/request/verifyEmailRequest";
 import { ApiKeyResponse } from "../models/response/apiKeyResponse";
 import { AttachmentResponse } from "../models/response/attachmentResponse";
 import { AttachmentUploadDataResponse } from "../models/response/attachmentUploadDataResponse";
+import { AuthRequestResponse } from "../models/response/authRequestResponse";
 import { RegisterResponse } from "../models/response/authentication/registerResponse";
 import { BillingHistoryResponse } from "../models/response/billingHistoryResponse";
 import { BillingPaymentResponse } from "../models/response/billingPaymentResponse";
@@ -265,6 +267,17 @@ export class ApiService implements ApiServiceAbstraction {
     }
   }
 
+  async postAuthRequest(request: PasswordlessCreateAuthRequest): Promise<AuthRequestResponse> {
+    const r = await this.send("POST", "/auth-requests/", request, false, true);
+    return new AuthRequestResponse(r);
+  }
+
+  async getAuthResponse(id: string, accessCode: string): Promise<AuthRequestResponse> {
+    const path = `/auth-requests/${id}/response?code=${accessCode}`;
+    const r = await this.send("GET", path, null, false, true);
+    return new AuthRequestResponse(r);
+  }
+
   // Account APIs
 
   async getProfile(): Promise<ProfileResponse> {

libs/common/src/services/auth.service.ts

@@ -1,3 +1,5 @@
+import { Observable, Subject } from "rxjs";
+
 import { ApiService } from "../abstractions/api.service";
 import { AppIdService } from "../abstractions/appId.service";
 import { AuthService as AuthServiceAbstraction } from "../abstractions/auth.service";
@@ -17,17 +19,20 @@ import { KdfType } from "../enums/kdfType";
 import { KeySuffixOptions } from "../enums/keySuffixOptions";
 import { ApiLogInStrategy } from "../misc/logInStrategies/apiLogin.strategy";
 import { PasswordLogInStrategy } from "../misc/logInStrategies/passwordLogin.strategy";
+import { PasswordlessLogInStrategy } from "../misc/logInStrategies/passwordlessLogin.strategy";
 import { SsoLogInStrategy } from "../misc/logInStrategies/ssoLogin.strategy";
 import { AuthResult } from "../models/domain/authResult";
 import {
   ApiLogInCredentials,
   PasswordLogInCredentials,
   SsoLogInCredentials,
+  PasswordlessLogInCredentials,
 } from "../models/domain/logInCredentials";
 import { SymmetricCryptoKey } from "../models/domain/symmetricCryptoKey";
 import { TokenRequestTwoFactor } from "../models/request/identityToken/tokenRequestTwoFactor";
 import { PreloginRequest } from "../models/request/preloginRequest";
 import { ErrorResponse } from "../models/response/errorResponse";
+import { AuthRequestPushNotification } from "../models/response/notificationResponse";
 
 const sessionTimeoutLength = 2 * 60 * 1000; // 2 minutes
 
@@ -42,9 +47,15 @@ export class AuthService implements AuthServiceAbstraction {
       : null;
   }
 
-  private logInStrategy: ApiLogInStrategy | PasswordLogInStrategy | SsoLogInStrategy;
+  private logInStrategy:
+    | ApiLogInStrategy
+    | PasswordLogInStrategy
+    | SsoLogInStrategy
+    | PasswordlessLogInStrategy;
   private sessionTimeout: any;
 
+  private pushNotificationSubject = new Subject<string>();
+
   constructor(
     protected cryptoService: CryptoService,
     protected apiService: ApiService,
@@ -61,52 +72,78 @@ export class AuthService implements AuthServiceAbstraction {
   ) {}
 
   async logIn(
-    credentials: ApiLogInCredentials | PasswordLogInCredentials | SsoLogInCredentials
+    credentials:
+      | ApiLogInCredentials
+      | PasswordLogInCredentials
+      | SsoLogInCredentials
+      | PasswordlessLogInCredentials
   ): Promise<AuthResult> {
     this.clearState();
 
-    let strategy: ApiLogInStrategy | PasswordLogInStrategy | SsoLogInStrategy;
+    let strategy:
+      | ApiLogInStrategy
+      | PasswordLogInStrategy
+      | SsoLogInStrategy
+      | PasswordlessLogInStrategy;
 
-    if (credentials.type === AuthenticationType.Password) {
-      strategy = new PasswordLogInStrategy(
-        this.cryptoService,
-        this.apiService,
-        this.tokenService,
-        this.appIdService,
-        this.platformUtilsService,
-        this.messagingService,
-        this.logService,
-        this.stateService,
-        this.twoFactorService,
-        this
-      );
-    } else if (credentials.type === AuthenticationType.Sso) {
-      strategy = new SsoLogInStrategy(
-        this.cryptoService,
-        this.apiService,
-        this.tokenService,
-        this.appIdService,
-        this.platformUtilsService,
-        this.messagingService,
-        this.logService,
-        this.stateService,
-        this.twoFactorService,
-        this.keyConnectorService
-      );
-    } else if (credentials.type === AuthenticationType.Api) {
-      strategy = new ApiLogInStrategy(
-        this.cryptoService,
-        this.apiService,
-        this.tokenService,
-        this.appIdService,
-        this.platformUtilsService,
-        this.messagingService,
-        this.logService,
-        this.stateService,
-        this.twoFactorService,
-        this.environmentService,
-        this.keyConnectorService
-      );
+    switch (credentials.type) {
+      case AuthenticationType.Password:
+        strategy = new PasswordLogInStrategy(
+          this.cryptoService,
+          this.apiService,
+          this.tokenService,
+          this.appIdService,
+          this.platformUtilsService,
+          this.messagingService,
+          this.logService,
+          this.stateService,
+          this.twoFactorService,
+          this
+        );
+        break;
+      case AuthenticationType.Sso:
+        strategy = new SsoLogInStrategy(
+          this.cryptoService,
+          this.apiService,
+          this.tokenService,
+          this.appIdService,
+          this.platformUtilsService,
+          this.messagingService,
+          this.logService,
+          this.stateService,
+          this.twoFactorService,
+          this.keyConnectorService
+        );
+        break;
+      case AuthenticationType.Api:
+        strategy = new ApiLogInStrategy(
+          this.cryptoService,
+          this.apiService,
+          this.tokenService,
+          this.appIdService,
+          this.platformUtilsService,
+          this.messagingService,
+          this.logService,
+          this.stateService,
+          this.twoFactorService,
+          this.environmentService,
+          this.keyConnectorService
+        );
+        break;
+      case AuthenticationType.Passwordless:
+        strategy = new PasswordlessLogInStrategy(
+          this.cryptoService,
+          this.apiService,
+          this.tokenService,
+          this.appIdService,
+          this.platformUtilsService,
+          this.messagingService,
+          this.logService,
+          this.stateService,
+          this.twoFactorService,
+          this
+        );
+        break;
     }
 
     const result = await strategy.logIn(credentials as any);
@@ -202,7 +239,21 @@ export class AuthService implements AuthServiceAbstraction {
     return this.cryptoService.makeKey(masterPassword, email, kdf, kdfIterations);
   }
 
-  private saveState(strategy: ApiLogInStrategy | PasswordLogInStrategy | SsoLogInStrategy) {
+  async authResponsePushNotifiction(notification: AuthRequestPushNotification): Promise<any> {
+    this.pushNotificationSubject.next(notification.id);
+  }
+
+  getPushNotifcationObs$(): Observable<any> {
+    return this.pushNotificationSubject.asObservable();
+  }
+
+  private saveState(
+    strategy:
+      | ApiLogInStrategy
+      | PasswordLogInStrategy
+      | SsoLogInStrategy
+      | PasswordlessLogInStrategy
+  ) {
     this.logInStrategy = strategy;
     this.startSessionTimeout();
   }