Implementing a "Remember Me" Flow

The "Remember Me" functionality enhances the user sign-in experience by remembering details about the user from their previous session.

This reduces friction by being able to suggest a login ID to use or the authentication method the user last used, eliminating the need for them to recall either of these.

How "Remember Me" Works

By default, Descope stores information about the user's most recent sign-in (such as loginId, authMethod, and name) in the browser's localStorage.

This data is, by default, automatically cleared upon user logout.

To adjust this behavior, Descope's SDK provides two optional parameters as part of our client SDKs:

• storeLastAuthenticatedUser: Set to false to disable storing the user's last authentication details.
• keepLastAuthenticatedUserAfterLogout: Set to true to persist user details after logout.

Example:

<AuthProvider storeLastAuthenticatedUser={false} keepLastAuthenticatedUserAfterLogout={true}>
    {/* Your app components here */}
</AuthProvider>

Refer to the Descope SDK Documentation for further implementation details.

Implementing "Remember Me" in a Flow

Once you've configured the SDK in the way you prefer, you can implement the "Remember Me" functionality within your authentication flow.

Here is an example of how to structure your flow with the lastAuth context keys:

1. Check if the User is Remembered

Begin your flow by adding a condition to check if the lastAuth.loginId value is present:

2. Display a Welcome Back Screen

If the user is remembered (lastAuth.loginId is not empty), add a welcome-back screen displaying the user's remembered details, along with a button to continue signing in:

Utilizing the User's Last Authentication Name

The lastAuth.name key can be used to provide a personalized welcome message when users revisit your log-in page.

This key follows a fallback mechanism in case certain user details are unavailable, prioritizing fields in this order:

1. Display Name
2. Login ID
3. Email
4. Phone

3. Identify the Last Authentication Method

For the "Sign In" button, create conditions based on lastAuth.authMethod. This allows you to automatically route the user to the authentication method they previously used:

4. Connect Conditions to Authentication Methods

Finally, connect each condition to the corresponding authentication methods within the Flow Editor. The structure should resemble: