@mxenabled/react-native-widget-sdk

MX React Native Widget SDK

Usage no npm install needed!

<script type="module">
  import mxenabledReactNativeWidgetSdk from 'https://cdn.skypack.dev/@mxenabled/react-native-widget-sdk';
</script>

README

MX React Native Widget SDK

About this project

The purpose of this project is to enable you to quickly load and configure MX widgets for your intended purpose. After installing this project via npm, you will be able to import and load MX widgets in your React Native application, and configure them to your needs.

The rest of this document outlines how you can install and setup the SDK, as well as how you can use each component and configure it for a given flow.

Signing up for the MX API

Before getting started, you will need to have your MX client id and API key. Go to https://dashboard.mx.com if you don't have that information or you would like to sign up.

Installing and setting up the SDK

Open a terminal and run the commands below at the root of your project to install and setup the SDK:

npm install --save @mxenabled/react-native-widget-sdk

Setup the SDK and link its dependencies:

npx mx-widget-sdk-setup

Once the steps above have been completed, you will be able to import components from the @mxenabled/react-native-widget-sdk package and render them in your application:

import React from "react"

import { ConnectWidget } from "@mxenabled/react-native-widget-sdk"

export default function App() {
  return (
    <ConnectWidget proxy="https://myserver.com/generate-sso-url?userId=123" />
  )
}

Getting an SSO URL

TODO

Components and props

TODO

OAuth redirects

In order to properly handle OAuth redirects from the Connect widget back to your application, you will need to do three things:

  • Update your application and enable deeplinking from native code into the React Native layer. See https://reactnative.dev/docs/linking for instructions on how to do that.
  • Ensure you application has a scheme. You can install and use https://www.npmjs.com/package/uri-scheme to manage your application's schemes.
  • Provde your application's scheme to the widget component with the uiMessageWebviewUrlScheme prop.
<ConnectWidget uiMessageWebviewUrlScheme="sampleScheme" />

Development

This package is written in TypeScript, so if you're developing your application in TypeScript you will be able to leverage all of the type definitions that are included in the npm package.