[Design Discussion] Flow Management and Translations #812
ThaminduDilshan
started this conversation in
Design
Replies: 6 comments 1 reply
-
|
Before going ahead on how we are going to do this, I would like to understand our stance on,
The
My take is, its neutral.. As a intermediate approach, we can reduce the contrast/opacity of these non-ui/logical nodes and give less prominence for those additional nodes. And if we can have a way to switch between views like,
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Additionally,
|
Beta Was this translation helpful? Give feedback.
0 replies
-
Considerations
Limitations
Examples01. Login with Username/Password
Step Based Approach (Alternative) {
"id": "auth_flow_basic",
"name": "Basic Authentication",
"flowType": "AUTHENTICATION",
"steps": [
{
"id": "login_step",
"type": "VIEW",
"size": { "width": 200, "height": 150 },
"position": { "x": 100, "y": 100 },
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_login",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "username_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"config": { "label": "Username", "identifier": "username" }
},
{
"id": "password_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"variant": "PASSWORD",
"config": { "label": "Password", "identifier": "password" }
},
{
"id": "login_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": {
"type": "EXECUTOR",
"executor": { "name": "BasicAuthExecutor" },
"next": "auth_success"
}
}
]
}
]
}
},
{
"id": "auth_success",
"type": "AUTHENTICATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "auth_flow_basic_revised",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "login_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 150 },
"position": { "x": 100, "y": 100 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_credentials",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_username",
"category": "FIELD",
"type": "INPUT",
"variant": "TEXT",
"config": {
"type": "text",
"label": "{{ t(auth:username.label) }}",
"placeholder": "{{ t(auth:username.placeholder) }}",
"required": true,
"identifier": "username"
}
},
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"type": "password",
"label": "{{ t(auth:password.label) }}",
"placeholder": "{{ t(auth:password.placeholder) }}",
"required": true,
"identifier": "password"
}
},
{
"id": "btn_login",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:login.button) }}"
},
"action": {
"type": "NEXT",
"next": "basic_auth"
}
}
]
}
]
},
"next": ["basic_auth"]
},
{
"id": "basic_auth",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 100, "y": 300 }
},
"executor": {
"name": "BasicAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 100, "y": 450 }
}
}
]
}02. Login with SMS OTP
Step Based Approach (Alternative) {
"id": "auth_flow_sms",
"name": "SMS OTP Authentication",
"flowType": "AUTHENTICATION",
"steps": [
{
"id": "mobile_step",
"type": "VIEW",
"size": { "width": 200, "height": 120 },
"position": { "x": 100, "y": 100 },
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:sms.title) }}"
}
},
{
"id": "form_mobile",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "mobile_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"variant": "TEL",
"config": { "label": "Mobile Number", "identifier": "mobileNumber" }
},
{
"id": "continue_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": {
"type": "NEXT",
"next": "otp_step"
}
}
]
}
]
}
},
{
"id": "otp_step",
"type": "VIEW",
"size": { "width": 200, "height": 120 },
"position": { "x": 100, "y": 270 },
"data": {
"components": [
{
"id": "title_otp",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.verify.title) }}"
}
},
{
"id": "form_otp",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "otp_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"variant": "TEXT",
"config": { "label": "Enter OTP Code", "identifier": "otpCode" }
},
{
"id": "verify_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": {
"type": "EXECUTOR",
"executor": { "name": "SMSOTPAuthExecutor" },
"next": "auth_success"
}
}
]
}
]
}
},
{
"id": "auth_success",
"type": "AUTHENTICATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "auth_flow_sms_revised",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "mobile_input_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 120 },
"position": { "x": 100, "y": 100 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:sms.title) }}"
}
},
{
"id": "form_mobile",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_mobile",
"category": "FIELD",
"type": "INPUT",
"variant": "TEL",
"config": {
"type": "tel",
"label": "{{ t(auth:mobile.label) }}",
"placeholder": "{{ t(auth:mobile.placeholder) }}",
"required": true,
"identifier": "mobileNumber"
}
},
{
"id": "btn_send_otp",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:sms.sendButton) }}"
},
"action": {
"type": "NEXT",
"next": "sms_otp_auth"
}
}
]
}
]
},
"next": ["sms_otp_auth"]
},
{
"id": "sms_otp_auth",
"type": "TASK_EXECUTION",
"properties": {
"senderId": "<your-sender-id>"
},
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 100, "y": 270 }
},
"executor": {
"name": "SMSOTPAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 100, "y": 420 }
}
}
]
}03. Login with SMS OTP or Email OTP
Step Based Approach (Alternative) {
"id": "auth_flow_sms_email",
"name": "SMS or Email OTP",
"flowType": "AUTHENTICATION",
"steps": [
{
"id": "method_choice_step",
"type": "VIEW",
"size": { "width": 200, "height": 140 },
"position": { "x": 100, "y": 50 },
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.chooseMethod.title) }}"
}
},
{
"id": "btn_sms",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": { "text": "{{ t(auth:otp.smsOption) }}" },
"action": { "type": "NEXT", "next": "sms_mobile_step" }
},
{
"id": "btn_email",
"category": "ACTION",
"type": "BUTTON",
"variant": "SECONDARY",
"config": { "text": "{{ t(auth:otp.emailOption) }}" },
"action": { "type": "NEXT", "next": "email_address_step" }
}
]
}
},
{
"id": "sms_mobile_step",
"type": "VIEW",
"size": { "width": 200, "height": 130 },
"position": { "x": 50, "y": 240 },
"data": {
"components": [
{
"id": "title_mobile",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:sms.mobile.title) }}"
}
},
{
"id": "form_mobile",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "mobile_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"variant": "TEL",
"config": {
"label": "{{ t(auth:mobile.label) }}",
"identifier": "mobileNumber"
}
},
{
"id": "continue_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": { "type": "NEXT", "next": "sms_otp_step" }
}
]
}
]
}
},
{
"id": "sms_otp_step",
"type": "VIEW",
"size": { "width": 200, "height": 130 },
"position": { "x": 50, "y": 420 },
"data": {
"components": [
{
"id": "title_sms_otp",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.verify.title) }}"
}
},
{
"id": "form_sms_otp",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "otp_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"config": {
"label": "{{ t(auth:otp.code.label) }}",
"identifier": "otpCode"
}
},
{
"id": "verify_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": {
"type": "EXECUTOR",
"executor": { "name": "SMSOTPAuthExecutor" },
"next": "auth_success"
}
}
]
}
]
}
},
{
"id": "email_address_step",
"type": "VIEW",
"size": { "width": 200, "height": 130 },
"position": { "x": 250, "y": 240 },
"data": {
"components": [
{
"id": "title_email",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:email.address.title) }}"
}
},
{
"id": "form_email",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "email_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"variant": "EMAIL",
"config": {
"label": "{{ t(auth:email.label) }}",
"identifier": "email"
}
},
{
"id": "continue_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": { "type": "NEXT", "next": "email_otp_step" }
}
]
}
]
}
},
{
"id": "email_otp_step",
"type": "VIEW",
"size": { "width": 200, "height": 130 },
"position": { "x": 250, "y": 420 },
"data": {
"components": [
{
"id": "title_email_otp",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.verify.title) }}"
}
},
{
"id": "form_email_otp",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "otp_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"config": {
"label": "{{ t(auth:otp.code.label) }}",
"identifier": "otpCode"
}
},
{
"id": "verify_button",
"category": "ACTION",
"type": "BUTTON",
"config": { "type": "submit" },
"action": {
"type": "EXECUTOR",
"executor": { "name": "EmailOTPAuthExecutor" },
"next": "auth_success"
}
}
]
}
]
}
},
{
"id": "auth_success",
"type": "AUTHENTICATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "auth_flow_sms_email_otp",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "otp_method_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 140 },
"position": { "x": 100, "y": 50 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.chooseMethod.title) }}"
}
},
{
"id": "btn_sms",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "button",
"text": "{{ t(auth:otp.smsOption) }}"
},
"action": {
"type": "NEXT",
"next": "sms_mobile_view"
}
},
{
"id": "btn_email",
"category": "ACTION",
"type": "BUTTON",
"variant": "SECONDARY",
"config": {
"type": "button",
"text": "{{ t(auth:otp.emailOption) }}"
},
"action": {
"type": "NEXT",
"next": "email_address_view"
}
}
]
},
"next": ["choose_otp_method"]
},
{
"id": "choose_otp_method",
"type": "DECISION",
"layout": {
"size": { "width": 120, "height": 60 },
"position": { "x": 120, "y": 240 }
},
"next": ["sms_mobile_view", "email_address_view"]
},
{
"id": "sms_mobile_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 130 },
"position": { "x": 20, "y": 350 }
},
"uiDefinition": {
"components": [
{
"id": "title_mobile",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:sms.mobile.title) }}"
}
},
{
"id": "form_mobile",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_mobile",
"category": "FIELD",
"type": "INPUT",
"variant": "TEL",
"config": {
"type": "tel",
"label": "{{ t(auth:mobile.label) }}",
"placeholder": "{{ t(auth:mobile.placeholder) }}",
"required": true,
"identifier": "mobileNumber"
}
},
{
"id": "btn_send_sms",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:sms.sendButton) }}"
},
"action": {
"type": "NEXT",
"next": "sms_otp_auth"
}
}
]
}
]
},
"next": ["sms_otp_auth"]
},
{
"id": "sms_otp_auth",
"type": "TASK_EXECUTION",
"properties": {
"senderId": "<your-sender-id>"
},
"layout": {
"size": { "width": 150, "height": 80 },
"position": { "x": 45, "y": 530 }
},
"executor": {
"name": "SMSOTPAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "email_address_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 130 },
"position": { "x": 240, "y": 350 }
},
"uiDefinition": {
"components": [
{
"id": "title_email",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:email.address.title) }}"
}
},
{
"id": "form_email",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_email",
"category": "FIELD",
"type": "INPUT",
"variant": "EMAIL",
"config": {
"type": "email",
"label": "{{ t(auth:email.label) }}",
"placeholder": "{{ t(auth:email.placeholder) }}",
"required": true,
"identifier": "email"
}
},
{
"id": "btn_send_email",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:email.sendButton) }}"
},
"action": {
"type": "NEXT",
"next": "email_otp_auth"
}
}
]
}
]
},
"next": ["email_otp_auth"]
},
{
"id": "email_otp_auth",
"type": "TASK_EXECUTION",
"properties": {
"senderId": "<your-sender-id>"
},
"layout": {
"size": { "width": 150, "height": 80 },
"position": { "x": 265, "y": 530 }
},
"executor": {
"name": "EmailOTPAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 130, "y": 840 }
}
}
]
}04. Login with Username/Password or Google
Step Based Approach (Alternative) {
"id": "auth_flow_basic_google",
"name": "Basic or Google Auth",
"flowType": "AUTHENTICATION",
"steps": [
{
"id": "login_step",
"type": "VIEW",
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_login",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "username_input",
"category": "FIELD",
"config": {
"identifier": "username"
}
},
{
"id": "password_input",
"category": "FIELD",
"config": {
"identifier": "password"
}
},
{
"id": "login_button",
"category": "ACTION",
"type": "BUTTON",
"config": {
"type": "submit"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "BasicAuthExecutor"
},
"next": "auth_success"
}
}
]
},
{
"id": "google_button",
"category": "ACTION",
"type": "BUTTON",
"config": {
"type": "button"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "GoogleOIDCAuthExecutor",
"meta": {
"idpId": "google-123"
}
},
"next": "auth_success"
}
}
]
}
},
{
"id": "auth_success",
"type": "AUTHENTICATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "auth_flow_basic_google_revised",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "login_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 180 },
"position": { "x": 100, "y": 100 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_credentials",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_username",
"category": "FIELD",
"type": "INPUT",
"variant": "TEXT",
"config": {
"type": "text",
"label": "{{ t(auth:username.label) }}",
"placeholder": "{{ t(auth:username.placeholder) }}",
"required": true,
"identifier": "username"
}
},
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"type": "password",
"label": "{{ t(auth:password.label) }}",
"placeholder": "{{ t(auth:password.placeholder) }}",
"required": true,
"identifier": "password"
}
},
{
"id": "btn_login",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:login.button) }}"
},
"action": {
"type": "NEXT",
"next": "basic_auth"
}
}
]
},
{
"id": "divider_1",
"category": "DISPLAY",
"type": "DIVIDER",
"config": {
"text": "{{ t(auth:login.orDivider) }}"
}
},
{
"id": "btn_google",
"category": "ACTION",
"type": "BUTTON",
"variant": "SOCIAL",
"config": {
"type": "button",
"text": "{{ t(auth:google.button) }}",
"icon": "google"
},
"action": {
"type": "NEXT",
"next": "google_auth"
}
}
]
},
"next": ["choose_method"]
},
{
"id": "choose_method",
"type": "DECISION",
"layout": {
"size": { "width": 120, "height": 60 },
"position": { "x": 120, "y": 330 }
},
"next": ["basic_auth", "google_auth"]
},
{
"id": "basic_auth",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 150, "height": 80 },
"position": { "x": 30, "y": 450 }
},
"executor": {
"name": "BasicAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "google_auth",
"type": "TASK_EXECUTION",
"properties": {
"idpId": "<google-idp-id>"
},
"layout": {
"size": { "width": 150, "height": 80 },
"position": { "x": 220, "y": 450 }
},
"executor": {
"name": "GoogleOIDCAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 120, "y": 590 }
}
}
]
}05. Login with Username/Password and SMS OTP (MFA)
Step Based Approach (Alternative) {
"id": "auth_flow_basic_sms_mfa",
"name": "Basic Auth with SMS MFA",
"flowType": "AUTHENTICATION",
"steps": [
{
"id": "login_step",
"type": "VIEW",
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_login",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "username_input",
"category": "FIELD",
"config": {
"identifier": "username"
}
},
{
"id": "password_input",
"category": "FIELD",
"config": {
"identifier": "password"
}
},
{
"id": "login_button",
"category": "ACTION",
"type": "BUTTON",
"config": {
"type": "submit"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "BasicAuthExecutor"
},
"next": "otp_step"
}
}
]
}
]
}
},
{
"id": "otp_step",
"type": "VIEW",
"data": {
"components": [
{
"id": "title_otp",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:otp.verify.title) }}"
}
},
{
"id": "form_otp",
"category": "BLOCK",
"type": "FORM",
"components": [
{
"id": "otp_input",
"category": "FIELD",
"type": "TEXT_INPUT",
"config": {
"label": "Enter OTP",
"identifier": "otpCode"
}
},
{
"id": "verify_button",
"category": "ACTION",
"type": "BUTTON",
"config": {
"type": "submit"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "SMSOTPAuthExecutor"
},
"next": "auth_success"
}
}
]
}
]
}
},
{
"id": "auth_success",
"type": "AUTHENTICATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "auth_flow_basic_sms_mfa_revised",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "login_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 200, "height": 150 },
"position": { "x": 100, "y": 100 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(auth:login.title) }}"
}
},
{
"id": "form_credentials",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_username",
"category": "FIELD",
"type": "INPUT",
"variant": "TEXT",
"config": {
"type": "text",
"label": "{{ t(auth:username.label) }}",
"placeholder": "{{ t(auth:username.placeholder) }}",
"required": true,
"identifier": "username"
}
},
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"type": "password",
"label": "{{ t(auth:password.label) }}",
"placeholder": "{{ t(auth:password.placeholder) }}",
"required": true,
"identifier": "password"
}
},
{
"id": "btn_login",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(auth:login.button) }}"
},
"action": {
"type": "NEXT",
"next": "basic_auth"
}
}
]
}
]
},
"next": ["basic_auth"]
},
{
"id": "basic_auth",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 100, "y": 300 }
},
"executor": {
"name": "BasicAuthExecutor"
},
"next": ["sms_otp_auth"]
},
{
"id": "sms_otp_auth",
"type": "TASK_EXECUTION",
"properties": {
"senderId": "<your-sender-id>"
},
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 100, "y": 620 }
},
"executor": {
"name": "SMSOTPAuthExecutor"
},
"next": ["authenticated"]
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 100, "y": 760 }
}
}
]
}06. Invited User Password Update
Step Based Approach (Alternative) {
"id": "invited_user_registration",
"name": "Invited User Registration",
"flowType": "INVITED_USER_REGISTRATION",
"steps": [
{
"id": "confirmation_step",
"type": "EXECUTION",
"size": { "width": 205, "height": 99 },
"position": { "x": 100, "y": 50 },
"data": {
"action": {
"type": "EXECUTOR",
"executor": {
"name": "ConfirmationCodeValidator"
},
"next": "password_step"
}
}
},
{
"id": "password_step",
"type": "VIEW",
"size": { "width": 350, "height": 200 },
"position": { "x": 100, "y": 200 },
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(registration:setPassword.title) }}"
}
},
{
"id": "form_password",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"identifier": "password",
"type": "password",
"label": "{{ t(registration:password.label) }}",
"placeholder": "{{ t(registration:password.placeholder) }}",
"required": true
}
},
{
"id": "button_submit",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(registration:continue.button) }}"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "PasswordProvisioningExecutor"
},
"next": "registration_success"
}
}
]
}
]
}
},
{
"id": "registration_success",
"type": "REGISTRATION_SUCCESS"
}
]
}UI Node Approach (Proposed) {
"id": "invited_user_registration_revised",
"type": "INVITED_USER_REGISTRATION",
"nodes": [
{
"id": "confirmation_validation",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 205, "height": 99 },
"position": { "x": 100, "y": 50 }
},
"executor": {
"name": "ConfirmationCodeValidator"
},
"next": ["password_setup_view"]
},
{
"id": "password_setup_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 300, "height": 200 },
"position": { "x": 100, "y": 200 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(registration:setPassword.title) }}"
}
},
{
"id": "form_password",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"type": "password",
"identifier": "password",
"label": "{{ t(registration:password.label) }}",
"placeholder": "{{ t(registration:password.placeholder) }}",
"required": true
}
},
{
"id": "input_confirm_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"type": "password",
"identifier": "confirmPassword",
"label": "{{ t(registration:confirmPassword.label) }}",
"placeholder": "{{ t(registration:confirmPassword.placeholder) }}",
"required": true
}
},
{
"id": "btn_submit",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(registration:setPassword.button) }}"
},
"action": {
"type": "NEXT",
"next": "password_provisioning"
}
}
]
}
]
},
"next": ["password_provisioning"]
},
{
"id": "password_provisioning",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 205, "height": 99 },
"position": { "x": 100, "y": 450 }
},
"executor": {
"name": "PasswordProvisioningExecutor"
},
"next": ["registration_complete"]
},
{
"id": "registration_complete",
"type": "REGISTRATION_SUCCESS",
"layout": {
"size": { "width": 180, "height": 70 },
"position": { "x": 110, "y": 980 }
}
}
]
}07. Recover Password with SMS OTP
Step Based Approach (Alternative) {
"id": "password_recovery_sms",
"name": "Password Recovery with SMS OTP",
"flowType": "PASSWORD_RECOVERY",
"steps": [
{
"id": "username_step",
"type": "VIEW",
"size": { "width": 350, "height": 200 },
"position": { "x": 100, "y": 50 },
"data": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:forgot.password.title) }}"
}
},
{
"id": "form_username",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_username",
"category": "FIELD",
"type": "INPUT",
"variant": "TEXT",
"config": {
"identifier": "username",
"type": "text",
"label": "{{ t(recovery:username.label) }}",
"placeholder": "{{ t(recovery:username.placeholder) }}",
"required": true
}
},
{
"id": "btn_continue",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(common:button.continue) }}"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "IdentifyExecutor"
},
"next": "otp_step"
}
}
]
}
]
}
},
{
"id": "otp_step",
"type": "VIEW",
"size": { "width": 350, "height": 180 },
"position": { "x": 100, "y": 300 },
"data": {
"components": [
{
"id": "title_otp",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:otp.verification.title) }}"
}
},
{
"id": "form_otp",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_otp",
"category": "FIELD",
"type": "INPUT",
"variant": "OTP",
"config": {
"identifier": "otp",
"type": "text",
"label": "{{ t(recovery:otp.label) }}",
"required": true
}
},
{
"id": "btn_verify",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(common:button.continue) }}"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "SMSOTPExecutor"
},
"next": "password_step"
}
}
]
}
]
}
},
{
"id": "password_step",
"type": "VIEW",
"size": { "width": 350, "height": 180 },
"position": { "x": 100, "y": 530 },
"data": {
"components": [
{
"id": "title_password",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:reset.password.title) }}"
}
},
{
"id": "form_password",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"identifier": "password",
"type": "password",
"label": "{{ t(recovery:password.label) }}",
"placeholder": "{{ t(recovery:password.placeholder) }}",
"required": true
}
},
{
"id": "btn_submit",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(common:button.continue) }}"
},
"action": {
"type": "EXECUTOR",
"executor": {
"name": "PasswordProvisioningExecutor"
},
"next": "success_step"
}
}
]
}
]
}
},
{
"id": "success_step",
"type": "VIEW",
"size": { "width": 350, "height": 150 },
"position": { "x": 250, "y": 970 },
"data": {
"components": [
{
"id": "title_success",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:success.title) }}"
}
},
{
"id": "message_success",
"category": "DISPLAY",
"type": "RICH_TEXT",
"config": {
"text": "{{ t(recovery:success.message) }}"
}
}
]
}
}
]
}UI Node Approach (Proposed) {
"id": "password_recovery_sms_revised",
"type": "PASSWORD_RECOVERY",
"nodes": [
{
"id": "username_input_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 350, "height": 200 },
"position": { "x": 100, "y": 50 }
},
"uiDefinition": {
"components": [
{
"id": "title_1",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:forgot.password.title) }}"
}
},
{
"id": "form_username",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_username",
"category": "FIELD",
"type": "INPUT",
"variant": "TEXT",
"config": {
"identifier": "username",
"type": "text",
"label": "{{ t(recovery:username.label) }}",
"placeholder": "{{ t(recovery:username.placeholder) }}",
"required": true
}
},
{
"id": "btn_continue",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(common:button.continue) }}"
},
"action": {
"type": "NEXT",
"next": "user_resolve"
}
}
]
}
]
},
"next": ["user_resolve"]
},
{
"id": "user_resolve",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 110, "y": 300 }
},
"executor": {
"name": "IdentifyExecutor"
},
"next": ["sms_otp_send"]
},
{
"id": "sms_otp_send",
"type": "TASK_EXECUTION",
"properties": {
"senderId": "<your-sender-id>"
},
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 110, "y": 440 }
},
"executor": {
"name": "SMSOTPExecutor"
},
"next": ["password_input_view"]
},
{
"id": "password_input_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 350, "height": 180 },
"position": { "x": 100, "y": 950 }
},
"uiDefinition": {
"components": [
{
"id": "title_password",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:reset.password.title) }}"
}
},
{
"id": "form_password",
"category": "BLOCK",
"type": "FORM",
"config": {},
"components": [
{
"id": "input_password",
"category": "FIELD",
"type": "INPUT",
"variant": "PASSWORD",
"config": {
"identifier": "password",
"type": "password",
"label": "{{ t(recovery:password.label) }}",
"placeholder": "{{ t(recovery:password.placeholder) }}",
"required": true
}
},
{
"id": "btn_submit",
"category": "ACTION",
"type": "BUTTON",
"variant": "PRIMARY",
"config": {
"type": "submit",
"text": "{{ t(common:button.continue) }}"
},
"action": {
"type": "NEXT",
"next": "password_provisioning"
}
}
]
}
]
},
"next": ["password_provisioning"]
},
{
"id": "password_provisioning",
"type": "TASK_EXECUTION",
"layout": {
"size": { "width": 180, "height": 90 },
"position": { "x": 110, "y": 1180 }
},
"executor": {
"name": "PasswordProvisioningExecutor"
},
"next": ["success_view"]
},
{
"id": "success_view",
"type": "UI_INTERACTION",
"layout": {
"size": { "width": 350, "height": 150 },
"position": { "x": 250, "y": 1400 }
},
"uiDefinition": {
"components": [
{
"id": "title_success",
"category": "DISPLAY",
"type": "TYPOGRAPHY",
"variant": "H3",
"config": {
"text": "{{ t(recovery:success.title) }}"
}
},
{
"id": "message_success",
"category": "DISPLAY",
"type": "RICH_TEXT",
"config": {
"text": "{{ t(recovery:success.message) }}"
}
}
]
}
}
]
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Hey @ThaminduDilshan & @darshanasbg, I’d like to propose a different approach for representing the flow. ScenarioA user initiates the sign-in process.
If the user selects username/password, the system triggers a Basic Authentication task to validate the credentials. If the user selects SMS OTP, the system triggers a Send SMS task, which delivers an OTP to the user’s mobile number.
After the user submits the OTP, a Verify OTP task is executed. This scenario is modeled using:
Graph Representation (JSON Format)Below is a sample of how the above scenario can be expressed in both verbose and non-verbose modes. Note Verbose mode includes UI metadata, while non-verbose mode strips all UI details and keeps only the logic. Verbose Mode{
"nodes": [
{
"id": "node_001",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "TEXT",
"id": "text_001",
"label": "signin.heading.label",
"variant": "HEADING_01"
},
{
"type": "BLOCK",
"id": "block_001",
"components": [
{
"type": "TEXT_INPUT",
"id": "input_001",
"label": "signin.fields.username.label",
"required": true,
"placeholder": "signin.fields.username.placeholder"
},
{
"type": "PASSWORD_INPUT",
"id": "input_002",
"label": "signin.fields.password.label",
"required": true,
"placeholder": "signin.fields.password.placeholder"
},
{
"type": "ACTION",
"id": "action_001",
"label": "signin.buttons.submit"
}
]
},
{
"type": "DIVIDER",
"id": "divider_001",
"label": "signin.divider"
},
{
"type": "ACTION",
"id": "action_002",
"label": "signin.buttons.continue.with.sms.otp"
}
]
},
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor",
"properties": {
"senderId": "<SENDER_ID>"
}
},
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_003",
"label": "sms.otp.verify.heading"
},
{
"type": "TEXT",
"id": "text_003",
"label": "sms.otp.verify.heading.label",
"variant": "HEADING_01"
},
{
"type": "OTP_INPUT",
"id": "otp_001",
"label": "sms.otp.verify.otp.input",
"length": 6,
"required": true
},
{
"type": "ACTION",
"id": "action_003",
"label": "sms.otp.verify.buttons.submit"
},
{
"type": "ACTION",
"id": "action_004",
"label": "sms.otp.verify.buttons.resend"
}
]
},
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor",
"properties": {}
}
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor",
"properties": {}
}
},
{
"id": "node_006",
"type": "END"
},
{
"id": "node_007",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_007",
"label": "sms.otp.error.heading"
},
{
"type": "TEXT_INPUT",
"id": "text_007",
"label": "sms.otp.error.message"
},
{
"type": "ACTION",
"id": "action_007",
"label": "sms.otp.error.buttons.retry"
}
]
},
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
}
]
}Non-Verbose ModeNote There are no UI metadata in the non-verbose mode {
"nodes": [
{
"id": "node_001",
"type": "PROMPT",
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor",
"properties": {
"senderId": "<SENDER_ID>"
}
},
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor",
"properties": {}
}
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor",
"properties": {}
}
},
{
"id": "node_006",
"type": "END"
},
{
"id": "node_007",
"type": "PROMPT",
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
}
]
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Hi @brionmario, +1 for the suggestion. However I'd like to make some slight adjustments to the proposed definition.
Also determining behaviour of the error node ( Verbose Mode{
"nodes": [
+ {
+ "id": "node_000",
+ "type": "START",
+ "onSuccess": "node_001"
+ },
{
"id": "node_001",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "TEXT",
"id": "text_001",
- "label": "signin.heading.label",
+ "label": "{{ t(signin:heading.label) }}",
"variant": "HEADING_01"
},
{
"type": "BLOCK",
"id": "block_001",
"components": [
{
"type": "TEXT_INPUT",
"id": "input_001",
- "label": "signin.fields.username.label",
+ "label": "{{ t(signin:fields.username.label) }}",
"required": true,
- "placeholder": "signin.fields.username.placeholder"
+ "placeholder": "{{ t(signin:fields.username.placeholder) }}"
},
{
"type": "PASSWORD_INPUT",
"id": "input_002",
- "label": "signin.fields.password.label",
+ "label": "{{ t(signin:fields.password.label) }}",
"required": true,
- "placeholder": "signin.fields.password.placeholder"
+ "placeholder": "{{ t(signin:fields.password.placeholder) }}"
},
{
"type": "ACTION",
"id": "action_001",
- "label": "signin.buttons.submit"
+ "label": "{{ t(signin:buttons.submit.label) }}"
}
]
},
{
"type": "DIVIDER",
"id": "divider_001",
- "label": "signin.divider"
+ "label": "{{ t(signin:divider.or.label) }}"
},
{
"type": "ACTION",
"id": "action_002",
- "label": "signin.buttons.continue.with.sms.otp"
+ "label": "{{ t(signin:buttons.continue.with.sms.otp.label) }}"
}
]
},
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
+ "identifier": "username",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
+ "identifier": "password",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor",
- "properties": {
- "senderId": "<SENDER_ID>"
- }
},
+ "properties": {
+ "senderId": "<SENDER_ID>"
+ },
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_003",
- "label": "sms.otp.verify.heading"
+ "label": "{{ t(sms.otp:verify.heading) }}"
},
{
"type": "TEXT",
"id": "text_003",
- "label": "sms.otp.verify.heading.label",
+ "label": "{{ t(sms.otp:verify.heading.label) }}",
"variant": "HEADING_01"
},
{
"type": "OTP_INPUT",
"id": "otp_001",
- "label": "sms.otp.verify.otp.input",
+ "label": "{{ t(sms.otp:verify.otp.input.label) }}",
"length": 6,
"required": true
},
{
"type": "ACTION",
"id": "action_003",
- "label": "sms.otp.verify.buttons.submit"
+ "label": "{{ t(sms.otp:verify.buttons.submit) }}"
},
{
"type": "ACTION",
"id": "action_004",
- "label": "sms.otp.verify.buttons.resend"
+ "label": "{{ t(sms.otp:verify.buttons.resend) }}"
}
]
},
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
+ "identifier": "otp",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor",
- "properties": {}
}
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor",
- "properties": {}
},
+ "properties": {
+ "SENDER_ID": "<SENDER_ID>"
+ },
+ "onSuccess": "node_006",
},
{
"id": "node_007",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_007",
- "label": "sms.otp.error.heading"
+ "label": "{{ t(sms.otp:error.heading) }}"
},
{
"type": "TEXT_INPUT",
"id": "text_007",
- "label": "sms.otp.error.message"
+ "label": "{{ t(sms.otp:error.message ) }}"
},
{
"type": "ACTION",
"id": "action_007",
- "label": "sms.otp.error.buttons.retry"
+ "label": "{{ t(sms.otp:error.buttons.retry) }}"
}
]
},
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
},
{
"id": "node_006",
"type": "END"
}
]
}click to expand updated json{
"nodes": [
{
"id": "node_000",
"type": "START",
"onSuccess": "node_001"
},
{
"id": "node_001",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "TEXT",
"id": "text_001",
"label": "{{ t(signin:heading.label) }}",
"variant": "HEADING_01"
},
{
"type": "BLOCK",
"id": "block_001",
"components": [
{
"type": "TEXT_INPUT",
"id": "input_001",
"label": "{{ t(signin:fields.username.label) }}",
"required": true,
"placeholder": "{{ t(signin:fields.username.placeholder) }}"
},
{
"type": "PASSWORD_INPUT",
"id": "input_002",
"label": "{{ t(signin:fields.password.label) }}",
"required": true,
"placeholder": "{{ t(signin:fields.password.placeholder) }}"
},
{
"type": "ACTION",
"id": "action_001",
"label": "{{ t(signin:buttons.submit.label) }}"
}
]
},
{
"type": "DIVIDER",
"id": "divider_001",
"label": "{{ t(signin:divider.or.label) }}"
},
{
"type": "ACTION",
"id": "action_002",
"label": "{{ t(signin:buttons.continue.with.sms.otp.label) }}"
}
]
},
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
"identifier": "username",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
"identifier": "password",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor"
},
"onSuccess": "node_006"
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor"
},
"properties": {
"senderId": "<SENDER_ID>"
},
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_003",
"label": "{{ t(sms.otp:verify.heading) }}"
},
{
"type": "TEXT",
"id": "text_003",
"label": "{{ t(sms.otp:verify.heading.label) }}",
"variant": "HEADING_01"
},
{
"type": "OTP_INPUT",
"id": "otp_001",
"label": "{{ t(sms.otp:verify.otp.input.label) }}",
"length": 6,
"required": true
},
{
"type": "ACTION",
"id": "action_003",
"label": "{{ t(sms.otp:verify.buttons.submit) }}"
},
{
"type": "ACTION",
"id": "action_004",
"label": "{{ t(sms.otp:verify.buttons.resend) }}"
}
]
},
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
"identifier": "otp",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor"
}
"properties": {
"senderId": "<SENDER_ID>"
},
"onSuccess": "node_006"
},
{
"id": "node_007",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "HEADING",
"id": "heading_007",
"label": "{{ t(sms.otp:error.heading) }}"
},
{
"type": "TEXT_INPUT",
"id": "text_007",
"label": "{{ t(sms.otp:error.message ) }}"
},
{
"type": "ACTION",
"id": "action_007",
"label": "{{ t(sms.otp:error.buttons.retry) }}"
}
]
},
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
},
{
"id": "node_006",
"type": "END"
}
]
}Non-Verbose Mode{
"nodes": [
+ {
+ "id": "node_000",
+ "type": "START",
+ "onSuccess": "node_001"
+ },
{
"id": "node_001",
"type": "PROMPT",
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
+ "identifier": "username",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
+ "identifier": "password",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor",
- "properties": {}
},
+ "onSuccess": "node_006"
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor",
- "properties": {
- "senderId": "<SENDER_ID>"
- }
},
+ "properties": {
+ "SENDER_ID": "<SENDER_ID>"
+ },
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
+ "identifier": "otp",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor",
- "properties": {}
},
+ "properties": {
+ "SENDER_ID": "<SENDER_ID>"
+ },
+ "onSuccess": "node_006"
},
{
"id": "node_007",
"type": "PROMPT",
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
},
{
"id": "node_006",
"type": "END"
}
]
}click to expand updated json{
"nodes": [
{
"id": "node_000",
"type": "START",
"onSuccess": "node_001"
},
{
"id": "node_001",
"type": "PROMPT",
"inputs": [
{
"ref": "input_001",
"type": "TEXT_INPUT",
"identifier": "username",
"required": true
},
{
"ref": "input_002",
"type": "PASSWORD_INPUT",
"identifier": "password",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "node_004"
},
{
"ref": "action_002",
"nextNode": "node_002"
}
]
},
{
"id": "node_004",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor"
},
"onSuccess": "node_006"
},
{
"id": "node_002",
"type": "TASK_EXECUTION",
"executor": {
"name": "SendSMSExecutor"
},
"properties": {
"senderId": "<SENDER_ID>"
},
"onSuccess": "node_003",
"onFailure": "node_007"
},
{
"id": "node_003",
"type": "PROMPT",
"inputs": [
{
"ref": "otp_001",
"type": "OTP_INPUT",
"identifier": "otp",
"required": true
}
],
"actions": [
{
"ref": "action_003",
"nextNode": "node_005"
},
{
"ref": "action_004",
"nextNode": "node_002"
}
]
},
{
"id": "node_005",
"type": "TASK_EXECUTION",
"executor": {
"name": "VerifyOTPExecutor"
}
"properties": {
"senderId": "<SENDER_ID>"
},
"onSuccess": "node_006"
},
{
"id": "node_007",
"type": "PROMPT",
"actions": [
{
"ref": "action_007",
"nextNode": "node_002"
}
]
},
{
"id": "node_006",
"type": "END"
}
]
} |
Beta Was this translation helpful? Give feedback.
-
|
@ThaminduDilshan is there any specific reason for using the Reason When resolving strings, we can easily detect i18n keys by checking whether a value starts with Using WDYT? Also, if do we need a space between |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I suggest a small addition to the component metadata of Actions. {
"type": "ACTION",
"id": "action_001",
"label": "{{ t(signin:buttons.submit.label) }}",
+ "variant": "PRIMARY",
+ "eventType": "SUBMIT"
}Why
Complete `auth_flow_config_basic_with_prompt.json` {
"id": "auth_flow_config_basic_with_prompt",
"type": "AUTHENTICATION",
"nodes": [
{
"id": "start",
"type": "START",
"onSuccess": "prompt_credentials"
},
{
"id": "prompt_credentials",
"type": "PROMPT",
"meta": {
"components": [
{
"type": "TEXT",
"id": "text_001",
"label": "{{ t(signin:heading.label) }}",
"variant": "HEADING_1"
},
{
"type": "BLOCK",
"id": "block_001",
"components": [
{
"type": "TEXT_INPUT",
"id": "input_001",
"label": "{{ t(signin:fields.username.label) }}",
"required": true,
"placeholder": "{{ t(signin:fields.username.placeholder) }}"
},
{
"type": "TEXT_INPUT",
"id": "input_002",
"label": "{{ t(signin:fields.password.label) }}",
"required": true,
"placeholder": "{{ t(signin:fields.password.placeholder) }}"
},
{
"type": "ACTION",
"id": "action_001",
"label": "{{ t(signin:buttons.submit.label) }}",
"variant": "PRIMARY",
"eventType": "SUBMIT"
}
]
}
]
},
"inputs": [
{
"ref": "input_001",
"identifier": "username",
"type": "TEXT_INPUT",
"required": true
},
{
"ref": "input_002",
"identifier": "password",
"type": "PASSWORD_INPUT",
"required": true
}
],
"actions": [
{
"ref": "action_001",
"nextNode": "basic_auth"
}
]
},
{
"id": "basic_auth",
"type": "TASK_EXECUTION",
"executor": {
"name": "BasicAuthExecutor"
},
"onSuccess": "authenticated"
},
{
"id": "authenticated",
"type": "AUTHENTICATION_SUCCESS"
}
]
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Related Feature Issue
#458
Problem Summary
Currently thunder only supports a pure backend based flow definition where an authentication/ registration flow can be defined in a graph representation in a json file. The flow execution engine takes the graph as the input and traverse through the nodes based on flow inputs.
However this representation is not user friendly and we need to have a step based drag and drop UI composer to define/ edit flows. This requires the introduction of a flow management API along with the management service.
Proposed Approach
The idea is to keep a single flow representation for both backend and frontend that will support both the backend graph execution as well as the frontend step view representation. This requires the introduction of a new UI node that will be responsible for storing and rendering UI steps during flow creation and execution.
With this;
New Node Type: UI_INTERACTION
There'll be a new dedicated UI node for handling UI representations/ layouts. The suggestion is to define a new special node type as
UI_INTERACTIONwhich contains auiDefinitionfor end-user UI. This can store the step view/ representation.UI_INTERACTION Node Structure
{ "id": "login_view", "type": "UI_INTERACTION", "uiDefinition": { "components": [ { "id": "title_1", "category": "DISPLAY", "type": "TYPOGRAPHY", "variant": "H3", "config": { "text": "auth.login.title" } }, { "id": "form_credentials", "category": "BLOCK", "type": "FORM", "config": {}, "components": [ { "id": "input_username", "category": "FIELD", "type": "INPUT", "variant": "TEXT", "config": { "type": "text", "label": "auth.username.label", "placeholder": "auth.username.placeholder", "required": true, "identifier": "username" } }, { "id": "input_password", "category": "FIELD", "type": "INPUT", "variant": "PASSWORD", "config": { "type": "password", "label": "auth.password.label", "placeholder": "auth.password.placeholder", "required": true, "identifier": "password" } }, { "id": "btn_continue", "category": "ACTION", "type": "BUTTON", "variant": "PRIMARY", "config": { "type": "submit", "text": "auth.continue.button" }, "action": { "type": "NEXT", "next": "basic_auth" } } ] }, { "id": "btn_google", "category": "ACTION", "type": "BUTTON", "variant": "SOCIAL", "config": { "type": "button", "text": "auth.google.button", "image": "assets/images/icons/google.svg" }, "action": { "type": "NEXT", "next": "google_auth" } } ] }, "next": ["choose_method"] }Example
Consider a multi step authentication scenario where you can either login with Username/Password or Google.
Now the flow composer will have the following UI.
The related graph definition is given below. This will be the same graph representation that gets submitted from the UI flow composer as well as the one being processed by the flow execution engine.
{ "id": "auth_flow_basic_google", "type": "AUTHENTICATION", "nodes": [ { "id": "login_view", "type": "UI_INTERACTION", "uiDefinition": { "components": [ { "id": "title_1", "category": "DISPLAY", "type": "TYPOGRAPHY", "variant": "H3", "config": { "text": "auth.login.title" } }, { "id": "form_credentials", "category": "BLOCK", "type": "FORM", "config": {}, "components": [ { "id": "input_username", "category": "FIELD", "type": "INPUT", "variant": "TEXT", "config": { "type": "text", "label": "auth.username.label", "placeholder": "auth.username.placeholder", "required": true, "identifier": "username" } }, { "id": "input_password", "category": "FIELD", "type": "INPUT", "variant": "PASSWORD", "config": { "type": "password", "label": "auth.password.label", "placeholder": "auth.password.placeholder", "required": true, "identifier": "password" } }, { "id": "btn_continue", "category": "ACTION", "type": "BUTTON", "variant": "PRIMARY", "config": { "type": "submit", "text": "auth.continue.button" }, "action": { "type": "NEXT", "next": "basic_auth" } } ] }, { "id": "btn_google", "category": "ACTION", "type": "BUTTON", "variant": "SOCIAL", "config": { "type": "button", "text": "auth.google.button", "image": "assets/images/icons/google.svg" }, "action": { "type": "NEXT", "next": "google_auth" } } ] }, "next": ["choose_method"] }, { "id": "choose_method", "type": "DECISION", "next": ["basic_auth", "google_auth"] }, { "id": "basic_auth", "type": "TASK_EXECUTION", "executor": { "name": "BasicAuthExecutor" }, "next": ["authenticated"] }, { "id": "google_auth", "type": "TASK_EXECUTION", "executor": { "name": "GoogleOIDCAuthExecutor" }, "next": ["authenticated"] }, { "id": "authenticated", "type": "AUTHENTICATION_SUCCESS" } ] }Technical Questions for Discussion
uiDefinitionfirst level element.flow/execute)?Alternative Approaches
We discussed an alternative idea where we need to keep the graph view for the backend execution engine and define a separate step based flow definition to be used in the frontends. The flows are defined using a UI-friendly step-based format and internally compiled into a graph-based execution model.
This UI based step representation also needs to preserve the location and size of the components to construct the same view during next visit in the flow composer UI. Additionally the engine needs to store step mappings for the applicable nodes and should be returned along with the flow execution response. However this UI representation needs to be treated as an optional verbose output that can be enabled/ disabled.
Consider a multi step authentication scenario where you can either login with Username/Password or Google.
The flow composer will have a UI similar to the following.
This will be equivalent to the following step representation.
{ "steps": [ { "id": "view_v0h6", "type": "VIEW", "size": { "width": 350, "height": 632 }, "position": { "x": 0, "y": 330 }, "data": { "components": [ { "category": "DISPLAY", "type": "TYPOGRAPHY", "id": "typography_2zvn", "variant": "H3", "config": { "text": "Login to Thunder" } }, { "category": "BLOCK", "type": "FORM", "config": {}, "id": "form_18eu", "components": [ { "category": "FIELD", "type": "INPUT", "variant": "TEXT", "config": { "type": "text", "hint": "", "label": "Username", "required": true, "placeholder": "Enter your username", "identifier": "username" }, "id": "input_h31x" }, { "category": "FIELD", "type": "INPUT", "variant": "PASSWORD", "config": { "identifier": "password", "type": "password", "hint": "", "label": "Password", "required": true, "placeholder": "Enter your password", "identifier": "password" }, "id": "input_qij9" }, { "category": "ACTION", "type": "BUTTON", "id": "button_rf4v", "variant": "PRIMARY", "config": { "type": "submit", "text": "Login" }, "action": { "type": "EXECUTOR", "executor": { "name": "BasicAuthExecutor" }, "next": "END" } } ] }, { "category": "ACTION", "type": "BUTTON", "id": "button_ydw5", "variant": "SOCIAL", "config": { "type": "button", "text": "Continue with Google", "image": "assets/images/icons/google.svg" }, "action": { "type": "NEXT", "next": "ID_k28d" } } ] } }, { "id": "ID_k28d", "type": "EXECUTION", "size": { "width": 200, "height": 99 }, "position": { "x": 580, "y": 730 }, "data": { "action": { "type": "EXECUTOR", "executor": { "name": "GoogleOIDCAuthExecutor", "meta": { "idpName": "Google" } }, "next": "END" } } }, { "id": "END", "type": "END", "size": { "width": 350, "height": 253 }, "position": { "x": 900, "y": 408 }, "data": { "action": { "type": "EXECUTOR", "executor": { "name": "AuthAssertExecutor" } } } } ], "flowType": "AUTHENTICATION" }Above step representation needs to be transformed to the below graph model with UI elements. The flow management component needs to perform this. The engine should be able to fetch and return the related UI elements during node executions.
{ "id": "custom_auth_flow", "type": "AUTHENTICATION", "nodes": [ { "id": "choose_auth", "type": "DECISION", "next": [ "basic_auth", "google_auth" ] }, { "id": "basic_auth", "type": "TASK_EXECUTION", "executor": { "name": "BasicAuthExecutor" }, "next": [ "authenticated" ] }, { "id": "google_auth", "type": "TASK_EXECUTION", "inputData": [ { "name": "nonce", "type": "string", "required": false } ], "properties": { "idpId": "<google-idp-id>" }, "executor": { "name": "GoogleOIDCAuthExecutor" }, "next": [ "authenticated" ] }, { "id": "authenticated", "type": "AUTHENTICATION_SUCCESS" } ] }This approach has a dual-representation model where:
This has some major drawbacks with the complex translation logic and requirement for storing two flow representations.
Architecture and Components
Security Considerations
N/A
Implementation Complexity
Medium (3-6 weeks)
Areas of Thunder that will be impacted
Questions for Community Input
No response
Beta Was this translation helpful? Give feedback.
All reactions