How-tos

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
December 7, 2018

Highly Available Applications with IBM Cloud Foundry

To properly deploy an application in a cloud environment and ensure maximum responsiveness, your app needs to be deployed in a certain (and easy) way that maximizes the chance of an instance always being ready to respond to a user request. This article will explain how to deploy your Cloud Foundry applications in the IBM Cloud such that you reach your target application availability.

Continue reading

December 5, 2018

Cloud Foundry Container-to-Container Networking

If you're like many developers who are deploying applications to Cloud Foundry, you probably don't think about networking too often. After all, as a PaaS, Cloud Foundry takes care of all the routing and connectivity for you. There is one feature, however, you might consider before writing your next app: container-to-container networking.

Continue reading

November 29, 2018

Mobile Foundation on IBM Cloud: Your Mobile App Security is Our Concern

Security features provided by Mobile Foundation on IBM Cloud simplify various aspects of Mobile security, enabling developers to build hack-proof apps. This post covers a list of critical security requirements that Mobile Foundation addresses.

Continue reading