bug: Can't sync Logto client with tokens got by Experience API

[david-shiko]

Describe the bug

Hello!

I successfully logged in via the Experience API and obtained all the tokens: access token, refresh token, ID token, etc.

Required behavior: Logto SDK usage should work the same as after a regular login, especially for token refreshing.

Problem:
I explored the internal Logto React Native SDK code and manually injected tokens into the Logto store, and set the global Logto state flag to true to imitate this behavior, but it's still not behaving as expected.

Is there a way to make the SDK recognize an already authenticated session from an Experience API flow?

P.S. Original question — probably discussions are the wrong place for questions about the SDK :)
https://github.com/orgs/logto-io/discussions/8490

Expected behavior

Required behavior: Logto SDK usage should work the same as after a regular login, especially for token refreshing.

How to reproduce?

login in via the Experience API

Environment

Logto Cloud

Screenshots

No response

[simeng-li]

Hi,

To better understand your setup and provide accurate guidance, could you help clarify a few things:

1. When you mention “manually injecting tokens into the Logto store,” could you elaborate on what exactly you did? For example, which store or internal APIs are you using, and how are the tokens being set?
2. Could you share a bit more about your current code structure? If you’re already obtaining tokens without using the Logto SDK, what is your intended role for the SDK in this flow?
3. Just to clarify expectations, Experience API (interaction session under the Logto domain) and the client-side authentication session (managed by the SDK) are two separate concepts. When you refer to “an already authenticated session from a custom Experience API flow,” could you explain how you’re connecting these two in your current implementation?

[david-shiko]

import { useContext } from 'react';
import { useLogto, Prompt, LogtoContext, LogtoClient, } from '@logto/rn';
// @ts-expect-error: Direct import from internal lib/utils is not in the public declaration.
import { buildAccessTokenKey } from '@logto/client/lib/utils/index.js';
import * as WebBrowser from 'expo-web-browser';
import type { TokenResponse } from "app/core/API/auth"


const injectLogtoTokens = async (tokens: TokenResponse, clientProtected: LogtoClient,) => {
  const client = clientProtected as any // Ignore error with protected class member
  if (!client || !client.storage) {
    srcLog.error('❌ Logto client storage is not available');
    return false;
  }
  try {
    const accessTokenKey = buildAccessTokenKey();
    await client.storage.setItem('idToken', tokens.id_token);
    if (tokens.refresh_token) {
      await client.storage.setItem('refreshToken', tokens.refresh_token);
    }
    const accessTokenMap = { 
      [accessTokenKey]: {
        token: tokens.access_token,
        scope: tokens.scope,
        expiresAt: Math.floor(Date.now() / 1000) + tokens.expires_in, // now in seconds + expires at
      }
    };
    await client.storage.setItem('accessTokenMap', JSON.stringify(accessTokenMap));
    return true;
  } catch (e) {
    srcLog.error('❌:', e);
    return false;
  }
};

export const useLogtoAuth = () => {
  /**
   * Call to the backend which are imlements all the logic with logto
   * because direct request to logto form app will cause cookie issues
   */
  const { client, setIsAuthenticated } = useContext(LogtoContext);

  const handleLogin = async (email: string, password: string) => {
      const tokens = await authApi.signIn(email, password); // TokenResponse
      await injectLogtoTokens(tokens, client);
      setIsAuthenticated(true); // Note: real state update will be on next rerender
  };

type TokenResponse = {
    access_token: String;
    token_type: String;
    expires_in: number;
    refresh_token?: String;
    id_token?: String;
    scope?: String;
}

2. SDK still could be usefull, for refreshing tokens for example or for account management (directly with logto).

3. When you refer to “an already authenticated session from a custom Experience API flow,” could you explain how you’re connecting these two in your current implementation?
   I not connected it yet, it is just tokens obtained by my backend (which are mostly just the proxy to Logto via and experience API).

P.S. 1 big note: I used experience API because moving user to the browser space and back is a bad practcie from the UI and product points. He may accidentally leave the app and continue to use the browser :)