Automate Sign-in Flow

Enhance user satisfaction with automated sign-in using Appetize! Automate the process to save time and reduce friction.

Overview

Automating the sign-in flow refers to the process of enabling your mobile application to perform the sign-in or authentication process automatically, without requiring manual intervention from the user. Instead of users having to enter their credentials (e.g., username and password) each time they access the app, automation allows the app to handle this process programmatically.

There are a lot of use cases where this could be invaluable e.g. for call center agents, reducing the time to access the right screen can boost productivity and improve customer service.

There are various ways to achieve sign-in automation, but in this document we will focus on our two recommended approaches:

1. Launch Parameters

2. AppRecorder (UI Automation)

Option 1: Launch Parameters

With launch parameters, developers can pass authentication information as part of the app's URL or via our JavaScript SDK when opening it. The app then extracts the provided credentials and automatically signs the user in.

Pros	Cons
Most seamless experience for users	Requires mobile development work

Preparing your Application:

• Make use of Launch Params to pass user credentials (e.g. username/password or authentication token) to your Application.

Example of passing in Username and password

&params={"username":"{the user name}","password":"{the user password}"}

Android (Kotlin)

The data will be passed as extras into the intent that launches your app e.g.

val username = intent.getStringExtra("username")
val password = intent.getStringExtra("password")
// Start your authentication flow as usual
signInUser(username: username, password: password)

iOS (Swift)

The data passed will be stored in the shared defaults object e.g.

let username = UserDefaults.standard.string(forKey: "username")
let password = UserDefaults.standard.string(forKey: "password")
// Start your authentication flow as usual
signInUser(username: username, password: password)

• Make use of Deep Links to automatically navigate to the appropriate screen to reduce the time to load e.g. if your app has a welcome screen or an onboarding flow, you could skip that by launching directly into the login screen e.g.

https://appetize.io/app/{public_key}?launchUrl=yourapp://signin

Some Additional Considerations:

Determine how you will pass the credentials to the Appetize client and session:

• Credentials via Input Fields

• Credentials via Query Parameters

• Persisting credentials when the Launch Page (page that embeds the Appetize iframe) reloads

Option 2: AppRecorder (UI Automation)

Using our UI automation functionality, developers can script the steps a user takes during the sign-in process. These steps are then replayed automatically whenever the app is launched, mimicking the user's interactions to achieve sign-in.

Pros	Cons
No development work required to imitate user behavior.	Generally slightly slower and less streamlined compared to Option 1.
Can also be used in conjunction with our other features such as Deep Links or Launch Params to get an even more streamlined experience (especially useful if the apps already have existing support for deep links)

For the best stability and to to facilitate the auto sign-in process, ensure your mobile application has all the necessary accessibility identifiers or resource identifiers set for the sign-in elements, such as the username input field, password input field, and sign-in button.

• Set up your Launch with our JavaScript SDK.

• Determine how to retrieve the credentials e.g. via inputs on your Launch Page e.g.

<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" tabindex="1">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" tabindex="2">
<a id="start_session" type="submit" tabindex="3">Start New Session</a>

const startSessionButton = document.getElementById('start_session');
const usernameField = document.getElementById('username');
const passwordField = document.getElementById('password');

• If you have a custom button to start the session, add a function to start the Appetize session

startSessionButton.addEventListener('click', async function(event) {
    if(!window.client) { return; }
    try {
        await window.client.startSession();
    } catch (error) {
        console.error(error);
    }
});

• Observe any session change events to invoke the automated steps to authenticate the user

client.on("session", async session => {
    console.log('session started!')
    try {
         // Get username and password values
        var username = usernameField.value;
        var password = passwordField.value;
        await login(session, username, password);
    } catch (error) {
        console.error(error);
    }
});

• Run the automated steps to authenticate the user with the credentials that was provided. See Touch Interactions for more samples on how to interact with the session:

These automated steps are just an example and need to be adjusted to match your actual application

async function login(session, username, password) {
    // type username
     await session.tap({
        element: {
            attributes: {
                // android example
                'resource-id': 'username_field'
            }
        }
    });
    await session.type(username)
    
    // type password
    await session.tap({
        element: {
            attributes: {
                // iOS example
                accessibilityIdentifier: 'password_field'
            }
        }
    });
    await session.type(password)
    
    // tap login button
    await session.tap({ 
        element: { 
            attributes: { 
                text: 'Login' 
            } 
        }
    });
}

For a more complete example on how to automate the sign-in flow with our JavaScript SDK, see our Pass Credentials Launch Page in our Sample Repository.