{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["admonition","tabs"]},"redocly_category":"Guides","product":"Identity Management","type":"markdown"},"seo":{"title":"Login with push (web to mobile approve)","description":"Everything about Mosaic Journeys, SDKs, and APIs","siteUrl":"https://developer.transmitsecurity.com/"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"login-with-push-web-to-mobile-approve","__idx":0},"children":["Login with push (web to mobile approve)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mosaic enables a \"web to mobile\" authentication and approval flow that uses a mobile device to authenticate into a web app. Instead of starting and completing the process in a web browser, the user receives a push notification on their preregistered iOS or Android device. From the push notification, they're prompted to validate a one-time passcode (OTP) to authenticate and approve the action in the mobile app. After completing authentication, the user can seamlessly return to the web app and continue their operations."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This approach enhances security by introducing a second factor (the OTP) that validates the user's identity on a trusted mobile device, making it a preferred method for securing sensitive operations, such as logins, approving transactions, or authorizing account changes (e.g., updating a mailing address)."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide explains how to implement authentication with push notifications using ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/journeys_intro"},"children":["Journeys"]}," and Orchestration SDKs. To learn more about SDKs integration, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_web"},"children":["Orchestration quickstarts"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":1},"children":["How it works"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a user requests to log in to the web app, the web app invokes a journey that passes this request to Mosaic (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-7-implement-web-to-mobile-request"},"children":["Step 7"]},"). In response, Mosaic sends a push notification to the preregistered mobile device (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-4-implement-mobile-app-registration"},"children":["Step 4"]},") which triggers the mobile journey (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-5-implement-mobile-app-approval"},"children":["Step 5"]},"). The user then enters the OTP displayed on the web into their mobile device, and once the code is successfully validated, the flow completes and the user is logged into the web app."]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"sequenceDiagram\n participant U as User\n participant W as Web app\n participant WIDO as Web Orchestration SDK\n participant M as Mosaic\n participant MIDO as Mob. Orchestration SDK\n participant B as Mob. Auth. SDK\n participant Mob as Mobile app\nU -->> W: login\nW ->> WIDO: startJourney()\nnote over W, M: Web login journey\nM ->> Mob: push notification\npar\nW -->> W: (Spinner) Waiting for mobile app\nW -->> WIDO: Polling\nand\nM ->> W: Display OTP code\nMob -->> Mob: Parse notification\nMob ->> MIDO: startMobileApproveJourney() with params\nnote over Mob, M: Mobile approval journey\nU ->> Mob: Enter OTP\nMob ->> MIDO: submitClientResponse() with OTP\nM -->> M: Validate OTP\nend\nnote over W, M: Web login journey complete (access token)\nW -->> U: logged in\n","diagramHtml":"Mobile appMob. Auth. SDKMob. Orchestration SDKMosaicWeb Orchestration SDKWeb appUserMobile appMob. Auth. SDKMob. Orchestration SDKMosaicWeb Orchestration SDKWeb appUserWeb login journeyMobile approval journeypar​Web login journey complete (access token)loginstartJourney()push notification(Spinner) Waiting for mobile appPollingDisplay OTP codeParse notificationstartMobileApproveJourney() with paramsEnter OTPsubmitClientResponse() with OTPValidate OTPlogged in","diagramHtmlDark":"Mobile appMob. Auth. SDKMob. Orchestration SDKMosaicWeb Orchestration SDKWeb appUserMobile appMob. Auth. SDKMob. Orchestration SDKMosaicWeb Orchestration SDKWeb appUserWeb login journeyMobile approval journeypar​Web login journey complete (access token)loginstartJourney()push notification(Spinner) Waiting for mobile appPollingDisplay OTP codeParse notificationstartMobileApproveJourney() with paramsEnter OTPsubmitClientResponse() with OTPValidate OTPlogged in"},"children":["sequenceDiagram\n participant U as User\n participant W as Web app\n participant WIDO as Web Orchestration SDK\n participant M as Mosaic\n participant MIDO as Mob. Orchestration SDK\n participant B as Mob. Auth. SDK\n participant Mob as Mobile app\nU -->> W: login\nW ->> WIDO: startJourney()\nnote over W, M: Web login journey\nM ->> Mob: push notification\npar\nW -->> W: (Spinner) Waiting for mobile app\nW -->> WIDO: Polling\nand\nM ->> W: Display OTP code\nMob -->> Mob: Parse notification\nMob ->> MIDO: startMobileApproveJourney() with params\nnote over Mob, M: Mobile approval journey\nU ->> Mob: Enter OTP\nMob ->> MIDO: submitClientResponse() with OTP\nM -->> M: Validate OTP\nend\nnote over W, M: Web login journey complete (access token)\nW -->> U: logged in\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-start","__idx":2},"children":["Before you start"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the Admin Portal, create an application and then create or select two ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["User authentication clients"]}," configured for ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["OIDC"]}," within it: one with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client type"]}," set to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Web app"]}," and one with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client type"]}," set to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Native app"]},". Obtain both client IDs (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/create_new_application"},"children":["Create applications"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/manage_clients#oidc-flow"},"children":["Manage clients"]},"). If using ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/sso_orchestration/sso_config_service"},"children":["SSO and Federation"]}," service, use its client IDs instead. Make sure to execute the flow within the context of the same Mosaic application."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-configure-push-notification-channels","__idx":3},"children":["Step 1: Configure push notification channels"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Admin Portal"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["one-time configuration"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before you add a new login type to your application, configure the push notifications settings for your app (",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Admin Portal"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Applications"]}," > your app > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Authentication methods"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Push notifications"]},")."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Apple"]},": in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Apple Push Notifications Service (APN)"]},", provide the Apple push key, APN key ID, and Team ID which can be obtained from your Apple developer account."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Android"]},": in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Firebase Cloud Messaging (FCM)"]},", provide the Firebase service account key that can be obtained in the Google Cloud console."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mosaic supports multiple push notification configurations for Apple devices only. This is because APNs requires explicitly the app’s bundle ID to verify the destination app. In contrast, Android (FCM) doesn’t require a package ID—the push token already includes the app identity, and validation is handled via the FCM server key."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-build-journeys","__idx":4},"children":["Step 2: Build journeys"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Admin portal"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["one-time configuration"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Journeys handle the business logic responsible for this flow. To facilitate journey development, you can build your journeys based the following journey templates (",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Admin Portal"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["B2C Identity"]}," or ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["B2B Identity"]}," ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["based on your setup"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Journeys"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Templates"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Guides"]},"):"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#1-mobile-app-registration-journey"},"children":["Web to mobile flow: mobile app registration journey"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-mobile-approve-journey"},"children":["Web to mobile flow: mobile approve journey"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web to mobile flow: web login journey"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Store the journey IDs as you will need them later."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To support you in following this guide, we recommend generating code for each journey from the journey editor, making sure you choose the format that matches your working environment (",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/journey-editor-tool-button.6a4af32fb50429b4c2a371250e9d83bcbbcf505136a4635497e32aa10817cb2e.d044259d.png","width":"25","style":{"verticalAlign":"middle"}},"children":[]}," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Integration code"]},"). For more about generating code, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/code_generation"},"children":["Code generation for local testing"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-mobile-app-registration-journey","__idx":5},"children":["1. Mobile app registration journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This client SDK journey runs on the user's mobile device and ensures the device is ready to be used for authentication in the web to mobile flow. It includes the following actions:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Obtains the user's email (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/get_info_from_client"},"children":["Collect information"]}," step)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Checks if the user exists and creates a new user (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/create_user"},"children":["Create user"]}," step) if necessary."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cryptographically binds a mobile device to the user record (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/register_device"},"children":["Register or Update Device"]}," step) and registers a push token for this device. The user context for the device registration journey is provided by the journey itself. This step ensures Mosaic can recognize this device as trusted for push notifications."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Depending on results, successfully completes the journey (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/complete_journey"},"children":["Complete journey"]}," step) or rejects access (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/reject_access"},"children":["Reject access"]}," step)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-mobile-approve-journey","__idx":6},"children":["2. Mobile approve journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This mobile approval journey automatically validates the registered device and then facilitates the OTP validation as part of the approval granting in the mobile app. It includes the following actions:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/validate_otp"},"children":["Validate OTP"]}," step, which prompts the user to enter the OTP in the mobile app's user interface. This step then validates the code against the one generated by the web journey."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Depending on results, successfully completes the journey (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/complete_journey"},"children":["Complete journey"]}," step) or rejects access (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/reject_access"},"children":["Reject access"]}," step)."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mosaic allows accessing parameters sent from the initiating web journey using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@policy.getMobileApproveParameters()"]},". For example, you can set the external user identifier to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@policy.getMobileApproveParameters().external_user_id"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/auth_web_to_mobile_mobile_approve_params.d92846b872694ff58915b8d6173766c4157b7847f10b242f146af02ac1ea5506.6f9096f8.png","alt":""},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["approval_data"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["JSON object containing the transaction details to approve as specified in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web login journey"]}," in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/transaction_signing_mobile_approve"},"children":["Web to mobile transaction signing"]}," step. For details about transaction signing, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#transaction-signing"},"children":["Transaction signing"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["additional_data"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["JSON object containing additional data passed from the web journey."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["correlation_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ID of the flow obtained from Web login journey that helps relate user interactions, if available."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["device_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ID of the user's mobile device running the mobile approve flow."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["external_user_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["External user ID specified in the Web login journey, if known."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["journey_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Web login journey ID."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["user_id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["User ID specified in the Web login journey, if known."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once the user approves the action by validating the OTP in the mobile app, this will resume the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web login journey"]},"—the user can return back to the browser to complete the flow. The web login journey will reject access unless the user authenticated on mobile."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-web-login-journey","__idx":7},"children":["3. Web login journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This client SDK journey runs in the browser app and starts the web to mobile authentication flow. It includes the following actions:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Obtains an external user ID (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/login_form"},"children":["Login form"]}," step) and enables web to mobile authentication."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initiates the web to mobile authentication flow (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/authenticate_mobile_approve"},"children":["Web to mobile authentication"]}," step) and logs in the user after they approve the request on mobile."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["(Optional) If you enabled the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Display Web OTP"]}," option in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/authenticate_mobile_approve"},"children":["Web to Mobile Authentication"]}," step, you must also add a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/validate_otp"},"children":["Validate OTP"]}," step to the mobile approve journey. This ensures the user enters and validates the code displayed in the web journey as part of the authentication flow."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Depending on results, successfully completes the journey (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/complete_journey"},"children":["Complete journey"]}," step) or rejects access (",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/reject_access"},"children":["Reject access"]}," step)."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Having created a journey from the \"Web to mobile flow: web login journey\" template, link it to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-mobile-approve-journey"},"children":["mobile approve journey"]},". To do this, in the Web to mobile authentication step locate the Mobile journey drop-down and select the mobile approve journey you've created before."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In case of successful journey completion, user access token will become available with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@policy.userContext()"]},"."]},{"$$mdtype":"Tag","name":"figure","attributes":{"style":{"margin":"0"}},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/assets/web2mobile-web-login.e48304ceae2f988fbd54f6e215b957c3056b6f1622353e927d084eab2cbd4503.6f15bb72.png","target":"_blank"},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/web2mobile-web-login.e48304ceae2f988fbd54f6e215b957c3056b6f1622353e927d084eab2cbd4503.6f15bb72.png","alt":"Web login journey","style":{"maxWidth":"100%"}},"children":[]}]},{"$$mdtype":"Tag","name":"figcaption","attributes":{"style":{"color":"grey","fontStyle":"italic","fontSize":"14px"}},"children":["Click to open the image in a dedicated tab."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-add-mobile-sdks","__idx":8},"children":["Step 3: Add mobile SDKs"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["mobile client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To run this flow, your integration needs the Orchestration SDK (for ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/identityOrchestration-ios-sdk-docs/documentation/identityorchestration/"},"children":["iOS"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/ido-android-api-reference/index.html"},"children":["Android"]},") and Authentication SDK (for ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/authentication-ios-sdk-docs/documentation/tsauthenticationsdk/"},"children":["iOS"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/authentication-android-docs/"},"children":["Android"]},") to enable your application to use mobile biometrics and invoke journeys."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure to initialize mobile SDKs within the context of the same client ID."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For Android, see instructions here:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Adding to project: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/android_sdk_guide/#step-1-installation"},"children":["Orchestration SDK"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/be_auth_biometrics_android/#step-1-add-sdk-to-your-project"},"children":["Authentication SDK"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initializing: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/android_sdk_guide/#step-2-initialize-sdk"},"children":["Orchestration SDK"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/be_auth_biometrics_android/#step-2-initialize-the-sdk"},"children":["Authentication SDK"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For iOS, see instructions here:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Loading: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/ios_sdk_guide/#step-1-installation"},"children":["Orchestration SDK"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/be_auth_biometrics_ios/#step-1-add-sdk-to-your-project"},"children":["Authentication SDK"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initializing: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/ios_sdk_guide/#step-2-initialize-sdk"},"children":["Orchestration SDK"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/be_auth_biometrics_ios/#step-2-initialize-the-sdk"},"children":["Authentication SDK"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-implement-mobile-app-registration","__idx":9},"children":["Step 4: Implement mobile app registration"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["mobile client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement the client-side code needed to register a mobile app on the device (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#1-mobile-app-registration-journey"},"children":["Mobile app registration"]}," journey). Note that this code must be executed on the first run of the mobile app."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Registration is a prerequisite to authenticating with push notifications. Mosaic cannot send push notifications to a user's device unless the user exists and their mobile app was registered."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In a nutshell, you have to implement:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#1-registering-a-device-token"},"children":["Registering a device token"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-starting-the-journey"},"children":["Starting the journey"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-collecting-users-email"},"children":["Collecting user's email"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#4-registering-mobile-biometrics"},"children":["Registering biometrics"]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Implementation tips"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, implement a switch (or other routing mechanism) that invokes a handler responsible for a specific journey step (returned in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.journeyStepId"]}," parameter). Each handler processes data, displays whatever UI is needed, and calls ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitClientResponse()"]}," when the interaction is concluded."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The journey loops back to the switch unless Mosaic signals journey completion by setting the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["journeyStepId"]}," property to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Rejection.type"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Success.type"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.token"]}," property contains a JWT token as a proof of journey completion."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more guidance on mobile development with the Orchestration SDK, refer to these quickstarts: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_android"},"children":["Android"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_ios"},"children":["iOS"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-registering-a-device-token","__idx":10},"children":["1. Registering a device token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement a controller for registering the mobile device as a target for push notifications and setting the push token in the Orchestration SDK. Design your app in the way that this code gets executed right after the SDK initialization. This step is needed to later receive push notifications in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-mobile-approve-journey"},"children":["Mobile approve journey"]},". See a sample code below:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" import UIKit\n import UserNotifications\n\n @main\n class AppDelegate: UIResponder, UIApplicationDelegate {\n\n var window: UIWindow?\n\n func application(\n _ application: UIApplication,\n didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?\n ) -> Bool {\n\n // Request notification authorization\n UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in\n if granted {\n debugPrint(\"[DEBUG]: Permission granted for notifications.\")\n DispatchQueue.main.async {\n // Register for remote notifications\n application.registerForRemoteNotifications()\n }\n } else {\n debugPrint(\"[DEBUG] Notification permission denied: \\(error?.localizedDescription ?? \"No error information\")\")\n }\n }\n\n return true\n }\n\n // Called when the user grants permission and the app successfully registers for notifications\n func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {\n // Convert the token to a string\n let token = deviceToken.map { String(format: \"%02.2hhx\", $0) }.joined()\n debugPrint(\"[DEBUG] Device token: \\(token)\")\n\n // Provide push token to the Orchestration SDK\n do {\n try TSIdo.setPushToken(token)\n } catch {\n debugPrint(\"[DEBUG] Error while setting push token: \\(error)\")\n }\n }\n\n // Called if the registration fails\n func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {\n debugPrint(\"[DEBUG] Failed to register for remote notifications: \\(error.localizedDescription)\")\n }\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" // Register token\n TSIdo.initializeSDK(context)\n Firebase.messaging.token.addOnCompleteListener {\n if (it.isSuccessful) {\n // Set the FCM registration token\n TSIdo.setPushToken(it.result)\n } else {\n Log.w(TAG, \"Fetching FCM registration token failed\", it.exception)\n }\n }\n\n // To handle push token updates\n class MyFirebaseMessagingService : FirebaseMessagingService() {\n override fun onNewToken(token: String) {\n super.onNewToken(token)\n // Pass the token to IDO SDK, make sure it was already initialized\n if (tsIdoWasInitialized) {\n TSIdo.setPushToken(token)\n }\n }\n }\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-starting-the-journey","__idx":11},"children":["2. Starting the journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement a handler that starts the journey on the first application run. Use the following call to start the journey:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" do {\n try TSIdo.startJourney(journeyId: \"YOUR_JOURNEY_ID\")\n } catch {\n debugPrint(\"[DEBUG] Failed to start journey: \\(error)\")\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" TSIdo.startJourney(\"YOUR_JOURNEY_ID\", startJourneyOptions, callback)\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-collecting-users-email","__idx":12},"children":["3. Collecting user's email"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement code that obtains user's email from a form and passes it to the Orchestration SDK."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" // Presenting view controller\n let formViewController = FormViewController()\n navigationController?.pushViewController(formViewController, animated: true)\n\n // Inside the View Controller:\n @IBAction func onSubmitForm() {\n // Collect the form data\n let email = emailInput.text\n\n // Convert form data to JSON format\n let formData = {\n email: \"john@doe.com\"\n }\n\n // Submit the data to the SDK\n TSIdo.submitClientResponse(clientResponseOptionId: .clientInput, data: formData)\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" // Stores the collected email\n // The data will look like this:\n // {\n // \"email\": \"john@doe.com\"\n // }\n data class RegistrationData(val full_name: String, val email: String)\n\n fun submitRegistrationData() {\n // Assumes the UI shows EditText - etCollectEmail, to collect the email\n val responseData = RegistrationData(binding.etCollectEmail.text.toString())\n\n // Submits data to the SDK\n TSIdo.submitClientResponse(TSIdoClientResponseOptionType.ClientInput.type, responseData, callback)\n }\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"4-registering-mobile-biometrics","__idx":13},"children":["4. Registering mobile biometrics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement collection and registration of user's biometrics."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" guard let userId = response.data?[\"user_identifier\"] as? String else {\n return debugPrint(\"[DEBUG]: No user identifier found in response\")?\n }\n\n // Registers biometric credentials on the device using the Authentication SDK\n TSAuthentication.shared.registerNativeBiometrics(username: userId) { result in\n switch result {\n case .success(let response):\n\n var data: [String: Any] = [\n \"publicKey\": response.publicKey,\n \"publicKeyId\": response.publicKeyId,\n \"os\": \"ios\"\n ]\n\n if let attestation = response.attestation {\n data[\"attestation\"] = attestation\n }\n\n // Submits the registration result back to the journey using the Orchestration SDK\n do {\n try TSIdo.submitClientResponse(clientResponseOptionId: .clientInput, data: data)\n } catch {\n debugPrint(\"[DEBUG] Failed to submit biometric registration result: \\(error)\")\n }\n case .failure(let error):\n debugPrint(\"[DEBUG] Error: \\(error)\")\n do {\n try TSIdo.submitClientResponse(clientResponseOptionId: .fail)\n } catch {\n debugPrint(\"[DEBUG] Failed to submit biometric registration failure: \\(error)\")\n }\n }\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" data class BiometricsRegistrationResult(val publicKeyId: String, val publicKey: String, val os: String = \"Android\")\n ...\n private fun registerBiometricsAndSubmit() {\n val userId = idoResponse.responseData?.optString(\"user_identifier\")\n userId?.let {\n TSAuthentication.registerNativeBiometrics(context, it, object: TSAuthCallback{\n override fun error(error: TSBiometricsRegistrationError) {\n //handle registration error\n }\n\n override fun success(result: TSBiometricsRegistrationResult) {\n Log.d(TAG, \"Biometrics registration success\")\n TSIdo.submitClientResponse(TSIdoClientResponseOptionType.ClientInput.type, BiometricsRegistrationResult(result.keyId(), result.publicKey()), callback)\n }\n })\n }\n }\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5-implement-mobile-app-approval","__idx":14},"children":["Step 5: Implement mobile app approval"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["mobile client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement client-side code that processes the push notification sent by Mosaic and executes the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-mobile-approve-journey"},"children":["Mobile approval journey"]}," with the parameters retrieved from notification."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In a nutshell, you have to implement:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#1-processing-push-notification-and-starting-mobile-approve-journey"},"children":["Processing push notification and starting mobile approve jourey"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-authenticating-with-mobile-biometrics"},"children":["Authenticating with mobile biometrics"]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Implementation tips"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, implement a switch (or other routing mechanism) that invokes a handler responsible for a specific journey step (returned in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.journeyStepId"]}," parameter). Each handler processes data, displays whatever UI is needed, and calls ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitClientResponse()"]}," when the interaction is concluded."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The journey loops back to the switch unless Mosaic signals journey completion by setting the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["journeyStepId"]}," property to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Rejection.type"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Success.type"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.token"]}," property contains a JWT token as a proof of journey completion."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more guidance on mobile development with the Orchestration SDK, refer to these quickstarts: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_android"},"children":["Android"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_ios"},"children":["iOS"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-processing-push-notification-and-starting-mobile-approve-journey","__idx":15},"children":["1. Processing push notification and starting mobile approve journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following code to read the push notification payload and retrieve parameters for invoking the mobile journey."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Unlike regular journeys, Mobile approve journeys are invoked with a special SDK call: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startMobileApproveJourney()"]},"."]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" // Called when the user taps the notification or interacts with it\n func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void\n ) {\n // Get the custom data associated with the notification.\n let userInfo = response.notification.request.content.userInfo\n\n // Read the approval payload\n guard let approvalPayload = userInfo[\"data\"] as? [String: Any] else {\n debugPrint(\"[DENUG]: No approval data found in push notification\")\n return\n }\n\n // Start mobile approve journey providing push notification approval payload\n TSIdo.startMobileApproveJourney(payload: approvalPayload)\n\n debugPrint(\"[DEBUG]: approvalPayload: \\(approvalPayload)\")\n\n completionHandler()\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" class MyFirebaseMessagingService : FirebaseMessagingService() {\n override fun onMessageReceived(remoteMessage: RemoteMessage) {\n Log.d(TAG, \"Push notification received from: ${remoteMessage.from}\")\n remoteMessage.data?.let {\n Log.d(TAG, \"building notification\")\n //build notification and use remoteMessage.data to invoke TSIdo.startMobileApproveJourney() API\n }\n }\n }\n ...\n //after the user tapped the notification, startMobileApproveJourney api should be invoked with the data received in the\n //firebase message - approvalPayload = remoteMessage.data\n TSIdo.startMobileApproveJourney(approvalPayload,\n TSIdoStartJourneyOptions(null, \"\"), callback)\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-authenticating-with-mobile-biometrics","__idx":16},"children":["2. Authenticating with mobile biometrics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, to support authenticating with mobile biometrics, implement the following on the client side. See Mosaic Authentication SDK reference for ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/authentication-ios-sdk-docs/documentation/tsauthenticationsdk/tsauthentication/"},"children":["iOS"]}," or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://transmitsecurity.github.io/authentication-android-docs/"},"children":["Android"]}," for more details."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"swift","key":"swift"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":" // Authentication challenge provided by the journey\n guard let challenge = serverResponse?.data[\"biometrics_challenge\"] as? String else {\n return\n }\n\n // Authenticates the user with their biometric credentials using the Authentication SDK\n TSAuthentication.shared.authenticateNativeBiometrics(username: \"[USER_ID]\", challenge: challenge) { result in\n switch result {\n case .success(let response):\n let data: [String: Any] = [\n \"publicKeyId\": response.publicKeyId,\n \"signedChallenge\": response.signature,\n \"userIdentifier\": \"[USER_ID]\"\n ]\n\n // Submits the authentication result to the journey using the Orchestration SDK\n do {\n try TSIdo.submitClientResponse(clientResponseOptionId: .clientInput, data: data)\n } catch {\n debugPrint(\"[DEBUG] Failed to submit biometric authentication result: \\(error)\")\n }\n case .failure(let error):\n debugPrint(\"[DEBUG] Error: \\(error)\")\n do {\n try TSIdo.submitClientResponse(clientResponseOptionId: .fail)\n } catch {\n debugPrint(\"[DEBUG] Failed to submit biometric authentication failure: \\(error)\")\n }\n }\n }\n","lang":"swift"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"kotlin","key":"kotlin"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":" data class BiometricsAuthenticationResult(val publicKeyId: String, val userIdentifier: String, val signedChallenge: String)\n ...\n private fun authenticateBiometrics() {\n val userIdentifier = idoResponse.responseData?.optString(\"user_identifier\")\n val challenge = idoResponse.responseData?.optString(\"biometrics_challenge\")\n activity?.let {\n TSAuthentication.authenticateNativeBiometrics(it, userIdentifier, challenge, BiometricPromptTexts(\"[TITLE], \"[SUB_TITLE]\", \"[NEGATIVE_BUTTON_TEXT]),\n object: TSAuthCallback {\n override fun error(error: TSBiometricsAuthError) {\n //handle error\n }\n\n override fun success(result: TSBiometricsAuthResult) {\n Log.d(TAG, \"Biometrics authentication success\")\n TSIdo.submitClientResponse(TSIdoClientResponseOptionType.ClientInput.type, BiometricsAuthenticationResult(result.keyId(), userIdentifier, result.signature()), callback)\n }\n })\n }\n }\n","lang":"kotlin"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-6-add-web-sdk","__idx":17},"children":["Step 6: Add web SDK"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["web client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To run this flow from the web app, you need integration with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/sdk-ref/idosdk/overview"},"children":["Orchestration SDK"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In particular, you'll need to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["load or install the SDK (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/web_sdk_guide/#step-1-load-sdk"},"children":["Web"]},")."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["initialize the SDK (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/sdk/web_sdk_guide/#step-2-initialize-sdk"},"children":["Web"]},")."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ensure that the Web SDK is initialized within the Client ID that belongs to the same application as the client ID used to initialize the Mobile SDKs."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-7-implement-web-to-mobile-request","__idx":18},"children":["Step 7: Implement web to mobile request"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["web client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement the client-side code for the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web login"]}," journey. In a nutshell, you have to implement:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#1-starting-the-journey"},"children":["Starting the journey"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-collecting-users-email"},"children":["Collecting user's email"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-invoking-web-to-mobile-authentication"},"children":["Invoking web to mobile authentication"]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Implementation tips"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, implement a switch (or other routing mechanism) that invokes a handler responsible for a specific journey step (returned in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.journeyStepId"]}," parameter). Each handler processes data, displays whatever UI is needed, and calls ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitClientResponse()"]}," when the interaction is concluded."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The journey loops back to the switch unless Mosaic signals journey completion by setting the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["journeyStepId"]}," property to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Rejection.type"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Success.type"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["idoServiceResponse.token"]}," property contains a JWT token as a proof of journey completion."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more guidance on web development with the Orchestration SDK, refer to this quickstart: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/quick_start_web"},"children":["Web"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-starting-the-journey","__idx":19},"children":["1. Starting the journey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Starting a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web login journey"]}," is usually a response to a user interaction, such as clicking a login button."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const idoResponse = await window.tsPlatform.ido.startJourney(\n 'YOUR_JOURNEY'\n );\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-collecting-users-email","__idx":20},"children":["2. Collecting user's email"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement obtaining user's email. For example, your application should present a form that collects a user email and passes it the Orchestration SDK."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"function handleGetInformationFromClient(idoResponse) {\n // Generate the form's HTML\n const formHtml = `
\n \n \n
`;\n\n // Render the form\n document.body.innerHTML = formHtml;\n\n document.querySelector('#updateForm').addEventListener('submit', function(event) {\n event.preventDefault();\n\n // Collect the form data\n const form = event.target;\n const formData = new FormData(form);\n\n // The data will look like this:\n // {\n // \"email\": \"john@doe.com\"\n // }\n const data = Object.fromEntries(formData.entries());\n\n // Submit the data to the SDK\n window.tsPlatform.ido.submitClientResponse(ClientResponseOptionType.ClientInput, data);\n });\n}\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-invoking-web-to-mobile-authentication","__idx":21},"children":["3. Invoking web to mobile authentication"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement the handler for the Web to Mobile Authentication journey step. Your client side should account for the following:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the user has more than one device registered, the SDK will return the list of user's devices. Present a screen to let user decide which device to use for authentication."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Implement polling. To avoid being rate limited, make sure to poll in accordance with the polling interval set in the journey settings (2-5 seconds)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["While the journey polls SDK for the mobile journey outcome, present a spinner or any other UI element to notify the user that the process is on hold and will resume later."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Implement ability to cancel authentication."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Implement ability to resend a push notification."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This flow completes successfully and the user is granted access to the web app only if they have authenticated on the mobile device (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-mobile-approve-journey"},"children":["Mobile approve journey"]},")."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"function handleWebToMobileAuthentication(idoResponse) {\n // Check if devices are present in the idoResponse\n if (idoResponse.data.devices) {\n // If devices are present, handle device selection\n handleDeviceSelection(idoResponse);\n } else {\n // If devices are not present, handle polling\n handlePolling(idoResponse);\n }\n}\n\nfunction handleDeviceSelection(idoResponse) {\n const html = `\n
\n

Select a device

\n \n \n
\n `;\n\n document.body.innerHTML = html;\n\n document\n .querySelector(\"#select_device_button\")\n .addEventListener(\"click\", () => {\n const deviceCode = document.querySelector(\"#device_select\").value;\n\n // Submit the selected device code to the SDK\n window.tsPlatform.ido.submitClientResponse(\n ClientResponseOptionType.ClientInput,\n {\n selected_device_code: deviceCode,\n }\n );\n });\n}\n\nfunction handlePolling(idoResponse) {\n const pollingInterval = idoResponse.data.polling_interval * 1000; // Convert seconds to milliseconds\n const resendAttemptsLeft = idoResponse.data.resend_attempts_left;\n\n const html = `\n
\n

Waiting for Approval

\n

Please approve the transaction on your mobile device.

\n \n \n
\n `;\n\n document.body.innerHTML = html;\n\n document.querySelector(\"#cancel_button\").addEventListener(\"click\", () => {\n // Submit the cancel response to the SDK\n window.tsPlatform.ido.submitClientResponse(ClientResponseOptionType.Cancel);\n });\n\n document.querySelector(\"#resend_button\").addEventListener(\"click\", () => {\n // Check if there are resend attempts left\n if (resendAttemptsLeft > 0) {\n // Submit the resend response to the SDK\n window.tsPlatform.ido.submitClientResponse(ClientResponseOptionType.Resend);\n }\n });\n\n setTimeout(() => {\n // Submit a response back to the SDK\n // As long as the mobile device has not approved, we will keep receiving the same idoResponse with polling data\n window.tsPlatform.ido.submitClientResponse(ClientResponseOptionType.ClientInput, {});\n }, pollingInterval);\n}\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"transaction-signing","__idx":22},"children":["Transaction signing"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["transaction signing"]}," with push notifications by swapping the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/authenticate_mobile_approve"},"children":["Web to mobile athentication"]}," step with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/transaction_signing_mobile_approve"},"children":["Web to mobile transaction signing"]}," step in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-web-login-journey"},"children":["Web login journey"]}," and passing along the transaction details for the user to approve in the mobile journey. The approval data is a JSON object, its fields may include expressions. The keys and values of approval data can only contain digits, characters and special symbols: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-._"]},". For example:"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Signing artifacts"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the user approves the transaction on their mobile device, the web journey output includes signing artifacts (for example, the approval data, signed data, signature, and public key). Retain these data as evidence of the approval for later audit and independent verification. You can view the output in ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/journey_analytics"},"children":["Journey Analytics"]},". For field definitions, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/transaction_signing_offline_verification"},"children":["Offline transaction signing verification"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"{\n \"amount\": clientData.transactionAmount,\n \"currency\": \"USD\",\n \"payee\": clientData.payee\n}\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"figure","attributes":{"style":{"margin":"0"}},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/assets/transaction_signing_web_to_mobile_ex1.86708994410850bf98a22d636ff7b5b8b1f7c2ff3a503b3e3c0203fe7714f04d.6f9096f8.png","target":"_blank"},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/transaction_signing_web_to_mobile_ex1.86708994410850bf98a22d636ff7b5b8b1f7c2ff3a503b3e3c0203fe7714f04d.6f9096f8.png","alt":"Web to mobile step settings in editor","style":{"maxWidth":"100%"}},"children":[]}]},{"$$mdtype":"Tag","name":"figcaption","attributes":{"style":{"color":"grey","fontStyle":"italic","fontSize":"14px"}},"children":["Click to open the image in a dedicated tab."]}]},{"$$mdtype":"Tag","name":"style","attributes":{},"children":["\n section article ol li {\n margin-top: 6px !important;\n }\n\n th {\n min-width: 155px;\n }\n"]}]},"headings":[{"value":"Login with push (web to mobile approve)","id":"login-with-push-web-to-mobile-approve","depth":1},{"value":"How it works","id":"how-it-works","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Step 1: Configure push notification channels","id":"step-1-configure-push-notification-channels","depth":2},{"value":"Step 2: Build journeys","id":"step-2-build-journeys","depth":2},{"value":"1. Mobile app registration journey","id":"1-mobile-app-registration-journey","depth":3},{"value":"2. Mobile approve journey","id":"2-mobile-approve-journey","depth":3},{"value":"3. Web login journey","id":"3-web-login-journey","depth":3},{"value":"Step 3: Add mobile SDKs","id":"step-3-add-mobile-sdks","depth":2},{"value":"Step 4: Implement mobile app registration","id":"step-4-implement-mobile-app-registration","depth":2},{"value":"1. Registering a device token","id":"1-registering-a-device-token","depth":3},{"value":"2. Starting the journey","id":"2-starting-the-journey","depth":3},{"value":"3. Collecting user's email","id":"3-collecting-users-email","depth":3},{"value":"4. Registering mobile biometrics","id":"4-registering-mobile-biometrics","depth":3},{"value":"Step 5: Implement mobile app approval","id":"step-5-implement-mobile-app-approval","depth":2},{"value":"1. Processing push notification and starting mobile approve journey","id":"1-processing-push-notification-and-starting-mobile-approve-journey","depth":3},{"value":"2. Authenticating with mobile biometrics","id":"2-authenticating-with-mobile-biometrics","depth":3},{"value":"Step 6: Add web SDK","id":"step-6-add-web-sdk","depth":2},{"value":"Step 7: Implement web to mobile request","id":"step-7-implement-web-to-mobile-request","depth":2},{"value":"1. Starting the journey","id":"1-starting-the-journey","depth":3},{"value":"2. Collecting user's email","id":"2-collecting-users-email","depth":3},{"value":"3. Invoking web to mobile authentication","id":"3-invoking-web-to-mobile-authentication","depth":3},{"value":"Transaction signing","id":"transaction-signing","depth":2}],"frontmatter":{"excludeFromSearch":true,"markdown":{"toc":{"depth":2}},"title":"Login (journey-based)","seo":{"title":"Login with push (web to mobile approve)"}},"lastModified":"2026-08-31T15:44:55.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/user/auth_web_to_mobile_otp","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}