Skip to content
By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post
About re:Post

Amazon Connect Streams in React Native

0

Hello all,

We are planning to create a mobile app for Amazon Connect that will work as the CCP, and we are having difficulty finding a solution, our users connect to Amazon Connect by using MSAL.

We tried to create a React application, but when running inside the mobile Webview, the popup for login doesn't open and we can't use it. Does someone know if it is possible to integrate Amazon Connect Streams in a React Native app? How can we do that since the initCCP method requires an HTML element?

Thank you.

Topics
Front-End Web & MobileBusiness Applications
Tags
Amazon ConnectFront-End Web & Mobile
Language
English

asked 2 years ago401 views

1 Answer
0

Integrating Amazon Connect Streams directly into a React Native app presents some challenges, as the Connect Streams API is designed for web applications and requires HTML elements. However, there are alternative approaches you can consider for creating a mobile app that integrates with Amazon Connect:

  1. Native Integration: Instead of using Amazon Connect Streams, you can integrate Amazon Connect's in-app and web calling capabilities natively into your React Native mobile application. This approach uses the Amazon Connect StartWebRTCContact API to create the contact, and then utilizes the Amazon Chime client library for iOS or Android to join the call.

  2. Custom Implementation: You could build a custom communications widget from scratch using Amazon Connect APIs and Amazon Chime SDK client APIs. This would allow you to integrate the functionality directly into your React Native application without relying on the web-based Connect Streams.

  3. WebView Workaround: If you still prefer to use Connect Streams, you might be able to embed a WebView in your React Native app and load a web page that initializes the CCP. However, this approach may have limitations, especially regarding authentication popups in mobile WebViews.

  4. Authentication Handling: For the MSAL (Microsoft Authentication Library) login issue, you might need to implement a custom authentication flow that works within the mobile app context, possibly using native MSAL libraries for iOS and Android instead of relying on web-based popups.

Given the complexities involved, especially with authentication and the need for native mobile capabilities, it's recommended to explore the native integration options using Amazon Connect's APIs and the Amazon Chime SDK. This approach would likely provide a more seamless and robust solution for a mobile app compared to trying to adapt the web-based Connect Streams to a React Native environment.

Remember to handle authentication carefully and consider using AWS services like Amazon Cognito to manage user access securely in your mobile application.

Sources
Integrate in-app, web, video calling and screen sharing natively into your mobile application - Amazon Connect
Set up in-app, web, video calling, and screen sharing capabilities - Amazon Connect

answered 2 years ago

EXPERT

reviewed 2 years ago

  • Wast
    2 years ago

    Options 1 and 2 won't work for us since we want to use Amazon Connect to use a real phone number, our agents will use the Mobile CCP to talk to the customer's real phone number. We tried option 3, but because we are using Msal we need to pass those options when initializing the CCP: loginPopup: true, loginPopupAutoClose: true, loginOptions: { autoClose: true, height: 600, width: 400, top: 0, left: 0, }, loginUrl: loginUrl, And the loginPopup true doesn't work as expected in the Webview; For option 4, we can log in the user on Microsoft Msal, but we can't pass the token to the InitCCP and because of that it still needs to open the loginPopup which won't work fine on mobile.

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Relevant content