Use your own branded UI for user sign-in with App ID

Share this post:

With IBM Cloud App ID’s Cloud Directory feature, you can create a user registry, and add sign-up and email/password sign-in to your mobile or web app. Cloud Directory comes with a pre-built sign-in widget that you can use, or if you prefer to use your own branding, you can replace it with your own custom UI. This blog will show you how to use Cloud Directory APIs and add your own custom sign-in screen to an Android application. You can find the Android Cloud Land App on GitHub.

Here is the custom sign-in screen I created for my fictional Cloud Land app. Users can sign-in with an email and password, and reset their password if they forget it. They can also click sign-up to create a new account. When users click the sign-in button, I used the App ID ROP (resource owner password) API to obtain access and id tokens. For sign-up and forgot password, I used App ID APIs to launch the App ID pre-built sign-up and forgot password screens from my custom sign-in screen.


For user sign-up, Cloud Directory comes with a pre-built email verification flow that you can leverage. If ‘email verification’ is turned on in the Cloud Directory settings page, users who sign-up for an account will need to verify their email. However, you may want to allow users to continue to use your app after they’ve signed-up, even if they haven’t yet verified their email address. You can do this by selecting ‘Yes’ in the Cloud Directory setting below.

In my sample app, you’ll see that once users signs-up, they can proceed from the login screen to a screen that asks for their food preference. Still, you can block users from performing specific actions before they verify their email. In the sample, I blocked users from selecting their food preference.


I did this using the email_verified property in the user’s id token to determine if the user verified his email address. If email verification is turn on, this property will be available, and will be set to true or false based on whether the user verified his email address. (*If email verification is turned off, this property will not be presented in the id token).

In the Cloud Land app I also used App ID Cloud Directory APIs to allow users to change their account details and password, launching App ID’s prebuilt screens for these functions.


That’s it! Go ahead and try it. Simply create a new App ID service instance in IBM Cloud and replace the App-ID-tenantId in the credentials.xml of the sample with your tenantId.  You can find your tenantId value in the App ID service credentials tab.

*If your App ID instance is not deployed in US-South, change the region value in the MainActivity file.


Android Cloud Land App on GitHub.

For more information, check our full documentation.

If you have questions, feel free to contact us

The App ID Team


More How-tos stories
February 13, 2019

Simplify and Automate Deployments Using GitOps with IBM Multicloud Manager 3.1.2

Use Argo CD, a GitOps continuous delivery tool for Kubernetes, and IBM Multicloud Manager to achieve declarative and automated deployment of applications to multiple Kubernetes clusters.

Continue reading

February 11, 2019

Solving Business Problems with Splunk on IBM Cloud Kubernetes Service

In this tutorial, we will install Splunk Connect for Kubernetes into an existing Splunk instance. Splunk Connect for Kubernetes provides a way to import and search your Kubernetes logging, object, and metrics data in Splunk.

Continue reading

February 8, 2019

A How-To for Migrating Redis to IBM Cloud Databases for Redis

If you’re moving your data over to IBM Cloud Databases for Redis, you’ll need to take some steps to successfully migrate all of your data. We’ve got you covered. In this post, we’ll show you a quick way to start migrating your data across to Databases for Redis, whether your database is on-premise or in the cloud.

Continue reading