Cotter
  • 🚀Getting Started
  • Features & Concepts
    • 💬Sign In with Email/Phone Number
    • 🔐Sign In with Device
      • How it works
    • 🧬Sign In with WebAuthn
  • 📌Quickstart Guides
    • All Guides & Tutorials
    • HTML – Sign in with Email/Phone
    • React – Sign in with Email/Phone
    • React – WebAuthn
    • ▲ Next.js
    • Angular
    • Webflow
    • Bubble.io
    • Python SDK for a CLI
    • React Native – Sign in with Device
    • iOS – Sign in with Device
    • Flutter – Sign in with Device
  • 📘SDK Reference
    • Web
      • Sign In with Email/Phone Number
        • Customize the Form
        • Checking the email or phone before sending a verification code
        • Sending Code or Link via WhatsApp
        • Styling
        • Older SDK
          • Customize the Form
      • Sign in with Social Login
        • Getting Access Tokens from Social Login Providers
        • Github Instructions
        • Google Instructions
      • Sign In with WebAuthn
        • Register WebAuthn for a logged-in user
      • Sign In with Device
        • Steps for Pop Up Authentication Prompt
        • Advanced Customization for Login Form
        • Advanced Customization for Pop Up Authentication Prompt
      • Getting Access Token and Logged-In User Info
      • Sending Successful Form Submission
      • FAQ & Troubleshooting
    • React Native
      • Installation
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
        • Add a new Trusted Device
        • Remove Trusted Device
      • Sign In with Email/Phone Number
      • Getting Stored OAuth Tokens and User Information
      • FAQ
      • Older SDK Versions
        • Sign in with Email/Phone
        • Sending Code via WhatsApp
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
          • Add a new Trusted Device
          • Customization
    • Flutter
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
      • Sign in with Email/Phone Number
      • Getting the Logged-in User
      • Getting OAuth Tokens
      • Signing a User Out
    • iOS
      • Sign In with Email/Phone Number
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Push Notification
        • Check if Trusted Device is Enrolled
        • Add a New Trusted Device
        • Remove Trusted Device
      • Older Versions
        • Biometric/Pin
    • Android
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Check if Trusted Device is Enrolled
        • Add a new Trusted Device
        • Remove Trusted Device
        • Customization
      • Sign In with Email/Phone Number
      • Biometric/Pin
        • Advanced Methods
        • Customization
        • Setting Strings
        • Styling
      • Older SDK Version
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
    • Python (for CLI)
    • API for Other Mobile Apps or CLI
      • Verify Email/Phone Number
        • Handling URL Scheme
    • Backend: Handling Response
  • 🛡️ Protecting Your Account
    • Only Allow Your Website/App to Use Your API Key
    • Rate Limit
    • Enable reCAPTCHA to Protect Against Automated Abuse
  • 🗝️ Getting Access Token
    • Cotter's OAuth 2.0 Tokens Specification
    • Getting the Tokens
      • Get Tokens during Authentication
      • Using the Refresh Token
    • Storing and Removing Tokens
    • Renewing Expired Tokens
    • Verifying JWT Tokens
    • Requesting Custom Fields on your JWT Token
    • Older API
      • Using HTTP Requests
      • Getting the Tokens
        • During Authentication
          • During Email/Phone Verification
        • During enrolling Trusted Devices
  • 🔌API Reference
    • User API
      • User Object
    • OAuth Tokens API
      • Verify JWT Token using API (serverless)
      • Requesting Custom Claims on your Access Token
      • Older API
    • OAuth Tokens from Social Login
    • Event Object
    • Reset PIN API
  • Older API
    • Validating Cotter's Identity Token
    • Validating Cotter's Event Response
Powered by GitBook
On this page
  • Understand the Flow
  • 1. Customize the header title of each screen
  • 2. Customize Pin-Enrollment Enter Pin Screen
  • Advanced Customization
  • 3. Customize PinEnrollmentSuccess page
  • 4. Customize PinVerification and PinReset Screen
  • 4. Customize Alert Dialogs.
  • 5. Customize Biometric Prompt
  • Complete Example
  • Screen Names Reference
  1. SDK Reference
  2. Android
  3. Biometric/Pin

Customization

PreviousAdvanced MethodsNextSetting Strings

Last updated 4 years ago

You can customize your screen texts, colors, images, and buttons.

See a below.

Understand the Flow

There are 4 flows:

  • PinEnrollment: This flow allows the user to register their PIN for the first time, then register their biometrics

  • PinVerification: This is used to verify the user's biometrics or use PIN.

  • PinReset : This is used to reset user's pin if they forgot the pin by sending a code to their email or phone number.

  • PinChange : This is used to change the user's pin if they know what the current pin is.

1. Customize the header title of each screen

  • Screen names for Pin Enrollment flow: PinEnrollmentEnterPin ,PinEnrollmentReEnterPin

  • Screen names for Pin Verification flow: PinVerification

  • Screen names for Pin Reset flow: PinReset , PinResetEnterPin , PinResetReEnterPin

  • Screen names for Pin Change flow: PinChangeVerifyPin , PinChangeEnterPin , PinChangeReEnterPin

To customize the Header of each screen, call Cotter.strings.setHeaders(<ScreenName>, <YourHeader>).

Do this right after your call Cotter.init, before starting any flow.

Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0",
  getString(R.string.user_id), // user id
  getString(R.string.api_key_id), // api key id
  getString(R.string.api_secret_key)); // api secret key

  // Setting strings for Headers
  Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Activate PIN");
  Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Confirm PIN");
  Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verification");
  Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Change PIN");
  Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Confirm New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
  Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Activate New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Confirm New PIN");

2. Customize Pin-Enrollment Enter Pin Screen

This is the first screen on the PinEnrollment flow.

To set the text for a specific element on a screen, specify the screen name, the name of the element, and the value.

The syntax is like the following:

Cotter.strings.set___<ScreenName>___Strings(Strings.__<ElementName>__, <ValueYouWant>)

For example, if you want to update the Title to "Enter PIN":

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.Title, "Enter PIN");

Put this below Cotter.init before you start any flow.

Advanced Customization

Setting the colors

As shown in the picture, there are 3 main colors that you can set:

  • ColorAccent

  • ColorPrimary

  • ColorDanger

Cotter.colors.setColorPrimary("#5E9051");
Cotter.colors.setColorAccent("#53228B");
Cotter.colors.setColorDanger("#B00020");

Error Text Views

There are 3 different places where errors may pop up:

  • PinEnrollmentEnterPin: Error happens when the PIN is too weak, with the error Strings.ErrorCombination. To update:

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.ErrorCombination, "Your PIN is too weak!");
  • PinEnrollmentReEnterPin: Error happens when the PIN is not the same as the PIN entered originally, with the error Strings.ErrorNoMatch. To update:

Cotter.strings.setPinEnrollmentReEnterPinStrings(Strings.ErrorNoMatch, "Your PINs don't match");
  • PinVerification: Error happens when the user entered an invalid PIN, with the error Strings.ErrorInvalid. To update:

Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "Invalid PIN");

3. Customize PinEnrollmentSuccess page

To change the image, add the image in your /drawable directory, and add the following:

Cotter.colors.setSuccessImage(R.drawable.check);

4. Customize PinVerification and PinReset Screen

// PinVerification
Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");

// PinReset
Cotter.strings.setPinReset(Strings.Title, "Verification Code");
Cotter.strings.setPinReset(Strings.Subtitle, "We have sent the code to");
Cotter.strings.setPinReset(Strings.ResendCode, "Reset Code");
Cotter.strings.setPinReset(Strings.ErrorInvalid, "The code you entered is wrong");

4. Customize Alert Dialogs.

There are 2 places where an AlertDialog will pop-up:

  • PinEnrollmentEnterPin: AlertDialog pop up when the user clicks 'X' to exit the screen.

  • PinVerification: On a very rare occasion, the signature generated by the biometrics may be invalid. In which case, the AlertDialog will pop up.

To update the AlertDialog strings on the PinEnrollmentEnterPin screen:

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogTitle, "Are you sure you don't want to setup PIN?");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogSubtitle, "Setting up your PIN is important to secure your account.");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogPositiveButton, "Setup PIN");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogNegativeButton, "Next Time");

5. Customize Biometric Prompt

There are 2 screens where the BiometricPrompt will pop up:

  • PinEnrollmentSuccess: when Pin Enrollment is successful, user can then enroll their biometrics

  • PinVerification: When user's default authentication method is biometrics, user will be prompted to verify their biometrics when an authentication is required.

Complete Example

See the full list of API for:

MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Initialize Cotter
        Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0","<your user id>", "<your api key id>", "<your api secret key>");
        
        // ------ Setting strings for Headers ------ //
        Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Aktivasi PIN");
        Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Konfirmasi PIN");
        Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verifikasi");
        Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Ganti PIN");
        Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Konfirmasi PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
        Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Aktivasi PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Konfirmasi PIN Baru");
       

        // ----- SETTING STRINGS FOR PIN VERIFICATION -----//
        // Pin Verification page
        Cotter.strings.setPinVerificationStrings(Strings.Title, "Masukkan PIN");
        Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");
        Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "PIN tidak sesuai.");
        // Biometric prompt
        Cotter.strings.setPinVerificationStrings(Strings.BiometricTitle, "Verifikasi");
        Cotter.strings.setPinVerificationStrings(Strings.BiometricSubtitle,
                "Sentuh sensor sidik jari untuk melanjutkan");
        Cotter.strings.setPinVerificationStrings(Strings.BiometricNegativeButton, "Input PIN");
        // Alert dialog when biometric signature is not valid
        Cotter.strings.setPinVerificationStrings(Strings.DialogTitle, "Biometric kamu tidak bisa diverifikasi");
        Cotter.strings.setPinVerificationStrings(Strings.DialogSubtitle, "Kamu boleh masukkan PIN atau coba lagi.");
        Cotter.strings.setPinVerificationStrings(Strings.DialogPositiveButton, "Input PIN");
        Cotter.strings.setPinVerificationStrings(Strings.DialogNegativeButton, "Coba lagi");
        // ----- END SETTING STRINGS FOR PIN VERIFICATION -----//


        // Setting colors
        Cotter.colors.setColorPrimary("#5E9051");
        Cotter.colors.setColorAccent("#53228B");
        Cotter.colors.setColorDanger("#B00020");
}

public void openPinEnrollment(View view) {
    Cotter.PinEnrollment.startFlow(view, <CallbackScreen>.class, "PIN_ENROLLMENT");
}

public void openPinVerification(View view) {
    Cotter.user.setUserInformation("Emily", "hello@gmail.com", "EMAIL");
    Cotter.PinVerification.startFlow(view, <CallbackScreen>.class, "LOGIN");
}

Screen Names Reference

For the full list of colors that you can set, see .

To edit the texts, it's the same as the instructions before. See the below.

For the full list of images that you can set, see .

📘
Setting strings
Complete Example
Complete Example
Setting Colors and Images
Setting Colors and Images
Setting colors and images
PinEnrollment Flow
PinVerification and PinReset screen
Pin Enrollment Flow