Skip to main content

Implementing Login Flow with custom UI

note

Implementing Login Flow with custom UI is currently only supported for mobile devices.

While our login flow feature comes bundled with it's own UI and cutomistaion options, there are cases that it won't be enough and customers will like to take full control of the login flow UI.

A common scenario to implement your own UI is when you would like to use a third party login provider with Apple, Facebook, Google, mobile SMS etc. As the default login flow only supports email/password login, building your own custom UI is a way to integrate your own providers.

Implementation details​

You'll need to implement the following:

  • A website that holds your custom UI
  • Refresh token URL
  • Delete account URL

Login flow website​

The implementation is a regular website. You can choose your own framework. The only requirement that you need to implement is once you identify that the user is successfully logged you'll need to send the following javascript code:

window.ReactNativeWebView.postMessage(
  ReactNativeWebView.postMessage(JSON.stringify({
    "access_token": "<ACCESS_TOKEN>",
    "expires_in": <EXPIRY_IN_SECONDS>,
    "refresh_token": "<REFRESH_TOKEN>",
    "refresh_url": "<REFRESH_TOKEN>",
    "status": 200
})))
note
  • You will need to host your implementation on your own servers (hosting should be severed using https).
  • The app will serve your implementation inside a webview. it's the implementor's responsibility to make sure it "looks good on the device".

Refresh token URL​

Implement the refresh token URL as described here

Implement Delete Account URL​

Implement the delete URL as described here