Skip to main content
View as Markdown

Install skill

Give your AI coding agent the applicaster-custom-login-ui skill so it can build this integration on its own.

1. Install it

Run this in your terminal, from your project root:

npx skills add https://docs.applicaster.com --skill applicaster-custom-login-ui

In the agent picker, select your agent.

2. Use it

In your agent, paste this prompt (or just ask it to build the integration using the installed skill):

Use the applicaster-custom-login-ui skill to help me implement the Applicaster "Implementing Login Flow with custom UI" guide. Ask me about the requirements first, then build.

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(JSON.stringify({
  "access_token": "<ACCESS_TOKEN>",
  "expires_in": <EXPIRY_IN_SECONDS>,
  "refresh_token": "<REFRESH_TOKEN>",
  "refresh_url": "<REFRESH_URL>",
  "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