Merge pull request #7350 from pavinduLakshan/push_auth_support_myaccount

.changeset/clean-pots-perform.md

@@ -0,0 +1,7 @@
+---
+"@wso2is/myaccount": minor
+"@wso2is/theme": patch
+"@wso2is/i18n": patch
+---
+
+Introduce push authenticator configuration support in my account

apps/myaccount/project.json

@@ -147,6 +147,7 @@
                 "baseHref": "/myaccount/",
                 "open": true,
                 "hmr": true,
+                "liveReload": true,
                 "ssl": true
             },
             "configurations": {

apps/myaccount/src/api/multi-factor-push.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you 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 { AsgardeoSPAClient, HttpClientInstance, HttpRequestConfig } from "@asgardeo/auth-react";
+import { AxiosError, AxiosResponse } from "axios";
+import { HttpMethods } from "../models";
+import { store } from "../store";
+
+/**
+ * Get an axios instance.
+ */
+const httpClient: HttpClientInstance = AsgardeoSPAClient.getInstance()
+    .httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Generate push authenticator QR code URL for the authenticated user
+ */
+export const initPushAuthenticatorQRCode = (): Promise<any> => {
+    const requestConfig: HttpRequestConfig = {
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.GET,
+        url: store.getState().config.endpoints.push + "/discovery-data"
+    };
+
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            if (response.status !== 200) {
+                return Promise.reject(`An error occurred. The server returned ${response.status}`);
+            }
+
+            return Promise.resolve(response);
+        })
+        .catch((error: AxiosError) => {
+            return Promise.reject(error);
+        });
+};
+
+export const getPushEnabledDevices = () => {
+    const requestConfig: HttpRequestConfig = {
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.GET,
+        url: store.getState().config.endpoints.push + "/devices"
+    };
+
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            if (response.status !== 200) {
+                return Promise.reject(`An error occurred. The server returned ${response.status}`);
+            }
+
+            return Promise.resolve(response);
+        })
+        .catch((error: AxiosError) => {
+            return Promise.reject(error);
+        });
+};
+
+export const deletePushAuthRegisteredDevice = (deviceId: string) => {
+    const requestConfig: HttpRequestConfig = {
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.DELETE,
+        params: {
+
+        },
+        url: store.getState().config.endpoints.push + "/devices/" + deviceId
+    };
+
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            if (response.status !== 204) {
+                return Promise.reject(`An error occurred. The server returned ${response.status}`);
+            }
+
+            return Promise.resolve(response);
+        })
+        .catch((error: AxiosError) => {
+            return Promise.reject(error);
+        });
+};

apps/myaccount/src/components/multi-factor-authentication/authenticators/fido-authenticator.tsx

@@ -19,7 +19,7 @@
 import { UserAgentParser } from "@wso2is/core/helpers";
 import { TestableComponentInterface } from "@wso2is/core/models";
 import { Field, Forms } from "@wso2is/forms";
-import { ConfirmationModal, GenericIcon, Popup } from "@wso2is/react-components";
+import { ConfirmationModal, GenericIcon, Message, Popup } from "@wso2is/react-components";
 import { AxiosResponse } from "axios";
 import isEmpty from "lodash-es/isEmpty";
 import React, { ReactElement, useEffect, useState } from "react";
@@ -522,7 +522,7 @@ export const FIDOAuthenticator: React.FunctionComponent<FIDOAuthenticatorProps>
                         </Grid.Column>
                     </Grid.Row>
                 </Grid>
-                { deviceList ? (
+                { deviceList?.length > 0 ? (
                     <List
                         data-testid={ `${ testId }-devices-list` }
                         divided
@@ -663,12 +663,11 @@ export const FIDOAuthenticator: React.FunctionComponent<FIDOAuthenticatorProps>
                         ) }
                     </List>
                 ) : (
-                    <>
-                        <p style={ { fontSize: "12px" } }>
-                            <Icon color="grey" floated="left" name="info circle" />
-                            You don&apos;t have any passkey enrolled yet.
-                        </p>
-                    </>
+                    <Message
+                        type="info"
+                        className="m-3"
+                        content={ t("myAccount:components.mfa.fido.noPassKeyMessage") }
+                    />
                 ) }
             </div>
             <>{ deviceErrorModal() }</>

apps/myaccount/src/components/multi-factor-authentication/authenticators/push-authenticator.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you 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.
+ */
+
+.push-authenticator {
+    .ui.grid > .row.push-auth-registered-device-list  {
+        padding-top: 0;
+    }
+
+    .oxygen-list {
+        padding: 0;
+    }
+
+    .device-icon {
+        margin-left: -6px !important;
+        margin-right: 8px !important;
+    }
+
+    .list-icon {
+        cursor: pointer;
+    }
+}