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

5 min read

By: Rotem Brosh

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

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.

Android Cloud Land App

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.

sign-in

                          

Cloud Land

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.

sign-up

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.

app

                           

app

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).

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.

account details

account details

                          

password

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.

App ID service instance

*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

Be the first to hear about news, product updates, and innovation from IBM Cloud