Add a more generic component with support for SMS and Debug action

config-spec.xml

@@ -0,0 +1,79 @@
+<?xml version="1.0"?>
+<conf-spec xmlns="https://curity.se/ns/conf-spec">
+    <metadata>
+        <purpose>configuration-bundle</purpose>
+        <name>React Native HAAPI Demo Client</name>
+        <description>Configure a client for the HAAPI demo</description>
+    </metadata>
+    <variable-definitions>
+        <variable-definition>
+            <name>TOKEN_PROFILE</name>
+            <tagpath>/profiles/profile/id</tagpath>
+            <description>The profile where to add the client</description>
+            <type-hint>profile</type-hint>
+        </variable-definition>
+        <variable-definition>
+            <name>HAAPI_CLIENT</name>
+            <tagpath />
+            <description>The ID of the client to add</description>
+            <type-hint>string</type-hint>
+        </variable-definition>
+    </variable-definitions>
+    <actions />
+    <merge-config>
+        <config xmlns="http://tail-f.com/ns/config/1.0">
+            <profiles xmlns="https://curity.se/ns/conf/base">
+                <profile>
+                    <id>#{TOKEN_PROFILE}</id>
+                    <type xmlns:as="https://curity.se/ns/conf/profile/oauth">as:oauth-service</type>
+                    <settings>
+                        <authorization-server xmlns="https://curity.se/ns/conf/profile/oauth">
+                            <client-store>
+                                <config-backed>
+                                    <client>
+                                        <id>#{HAAPI_CLIENT}</id>
+                                        <no-authentication>true</no-authentication>
+                                        <redirect-uris>http://localhost:3000/</redirect-uris>
+                                        <proof-key>
+                                            <require-proof-key>true</require-proof-key>
+                                        </proof-key>
+                                        <refresh-token-ttl>disabled</refresh-token-ttl>
+                                        <scope>openid</scope>
+                                        <scope>profile</scope>
+                                        <user-authentication>
+                                        </user-authentication>
+                                        <allowed-origins>http://localhost:3000</allowed-origins>
+                                        <capabilities>
+                                            <code>
+                                            </code>
+                                            <haapi>
+                                                <use-legacy-dpop>false</use-legacy-dpop>
+                                            </haapi>
+                                        </capabilities>
+                                        <validate-port-on-loopback-interfaces>true</validate-port-on-loopback-interfaces>
+                                        <attestation>
+                                            <web>
+                                            </web>
+                                        </attestation>
+                                    </client>
+                                </config-backed>
+                            </client-store>
+                        </authorization-server>
+                    </settings>
+                </profile>
+            </profiles>
+        </config>
+    </merge-config>
+    <conditions>
+        <must-exist>
+            <path>/profiles/profile{#{TOKEN_PROFILE} oauth-service}/id</path>
+            <error-description>The provided profile does not exist or is not a token profile.</error-description>
+    </must-exist>
+    <must-not-exist>
+        <path>
+            /profiles/profile{#{TOKEN_PROFILE} oauth-service}/settings/authorization-server/client-store/config-backed/client{#{HAAPI_CLIENT}}
+        </path>
+        <error-description>A client with ID ${HAAPI_CLIENT} already exist. Please select a new ID.</error-description>
+</must-not-exist>
+    </conditions>
+</conf-spec>

src/components/HAAPIProcessor.js

@@ -19,6 +19,7 @@ import StartAuthorization from "./StartAuthorization";
 
 /* UI Authenticators */
 import UsernamePassword from "../ui-kit/authenticators/UsernamePassword";
+import FormBased from "../ui-kit/authenticators/FormBased";
 
 /* UI Containers */
 import Selector from "../ui-kit/containers/Selector";
@@ -80,10 +81,17 @@ export default function HAAPIProcessor(props) {
                 />
             case 'authenticator/external-browser/launch':
                 setStep({ name: 'external-browser-launch', haapiResponse: step.haapiResponse })
-                return
+                return 
             default:
-                setStep({ name: 'unknown-step', haapiResponse: step.haapiResponse })
-                setMissingResponseType('Authentication Step')
+                return <FormBased
+                    haapiResponse={haapiResponse}
+                    submitForm={(formState, url, method) => submitForm(formState, url, method)}
+                    isLoading={isLoading}
+                    clickLink={(url) => clickLink(url)}
+                    inputProblem={step.inputProblem}
+                />
+                //setStep({ name: 'unknown-step', haapiResponse: step.haapiResponse })
+                //setMissingResponseType('Authentication Step')
         }
     }
 
@@ -121,6 +129,7 @@ export default function HAAPIProcessor(props) {
             case 'registration-step':
                 setStep({ name: 'registration-step', haapiResponse })
                 break
+            case 'https://curity.se/problems/generic-user-error':
             case 'https://curity.se/problems/incorrect-credentials':
                 setStep({ name: step.haapiResponse.type, haapiResponse: step.haapiResponse, problem: haapiResponse })
                 break
@@ -366,4 +375,4 @@ const getRedirectBody = (fields) => {
     }
 
     return new URLSearchParams(fields.map(field => [field.name, field.value]))
-}
+}

src/config.js

@@ -22,4 +22,4 @@ const config = {
     tokenEndpoint: 'https://localhost:8443/oauth/v2/oauth-token'
 }
 
-export default config
+export default config

src/scss/curity-example-app.scss

@@ -37,7 +37,7 @@
 }
 
 
-.example-app-settings pre {
+.example-app-settings pre , .example-app-wrapper pre {
   background-color: #15161d;
   border: none;
   color: #f8f8f2;
@@ -48,22 +48,27 @@
   line-height: 1.5;
 }
 
+.example-app-wrapper pre .json-mark,
 .example-app-settings pre .json-mark {
   color: white;
 }
 
+.example-app-wrapper pre .json-key,
 .example-app-settings pre .json-key {
   color: #ff79c6;
 }
 
+.example-app-wrapper pre .json-number,
 .example-app-settings pre .json-number {
   color: #e7ca45;
 }
 
+.example-app-wrapper pre .json-link,
 .example-app-settings pre .json-link {
   color: white;
 }
 
+.example-app-wrapper pre .json-string,
 .example-app-settings pre .json-string {
   color: #50fa7b;
 }

src/ui-kit/authenticators/FormBased.js

@@ -0,0 +1,81 @@
+/*
+ *  Copyright 2024 Curity AB
+ *
+ *  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 React, {useState} from "react";
+
+/* UI Containers */
+import Form from "../containers/Form";
+import Message from "../ui-components/Message";
+
+/* UI Components */
+import { Layout, Page, Well, Logo } from "../ui-components";
+
+export default function FormBased(props) {
+    const { actions, links, messages } = props.haapiResponse
+    const { model, title } = actions[0]
+    const otherActions = actions.slice(1)
+
+    const [state, setState] = useState(new URLSearchParams())
+
+    const onChange = (name, value) => {
+        setState((prevState) => {
+            prevState.set(name, value)
+            return prevState
+        })
+    }
+
+    const computedTitle =
+        // (messages && messages.find(m => m.classList.includes("heading"))?.text)
+        // || title
+        title
+        || model.title
+
+    const messageList = [];
+    if(messages) {
+        messages.forEach((msg, index) => {
+            messageList.push(<Message key={index} message={msg} />);
+        });
+    }
+
+
+    return (
+        <Layout>
+        <Page>
+        <Well>
+        <Logo />
+        { messageList }
+        <Form
+        model={model}
+        computedTitle={computedTitle}
+        headingTitle={title}
+        actions={actions}
+        links={links}
+        submitForm={() => props.submitForm(state, model.href, model.method)}
+        onChange={onChange}
+        isLoading={props.isLoading}
+        clickLink={props.clickLink}
+        inputProblem={props.inputProblem}
+        />
+        {otherActions.map(action => <Form
+            key={action.model.href}
+            model={action.model}
+            submitForm={() => props.submitForm(null, action.model.href, action.model.method)}
+            />)}
+        </Well>
+        </Page>
+        </Layout>
+    )
+}

src/ui-kit/ui-components/Message/index.js

@@ -0,0 +1,46 @@
+/*
+ *  Copyright 2024 Curity AB
+ *
+ *  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 React from "react";
+
+import { prettyPrintJson } from "pretty-print-json";
+
+const Message = (props) => {
+    const { message } = props;
+
+    let messageComponent;
+    if(message.classList.includes('json')) {
+        messageComponent = (
+            <pre className="json-container"
+                dangerouslySetInnerHTML={{
+                __html: prettyPrintJson.toHtml(JSON.parse(message.text))
+            }} ></pre>
+        );
+    }
+    else if (message.classList.includes('heading')) {
+        messageComponent = (<h2>{message.text}</h2>);
+    } else {
+        messageComponent = (
+            <div className={message.classList.join(' ')}>
+            <p>{message.text}</p>
+            </div>
+        );
+    }
+
+    return messageComponent;
+};
+
+export default Message;