Session Management
Handle auth state, logout, token refresh, multi-tab sync, and cleanup
Session Management
The DOM Package stores customer session tokens, refreshes them automatically, and keeps authentication state synchronized across browser tabs.
Listening for Auth State Changes
Register a callback to receive the current TiquoSession, or null when there is no authenticated session. The callback is invoked immediately with the currently cached state and again after login, logout, profile/session changes, token refresh, or a synchronized change from another tab.
const unsubscribe = tiquo.onAuthStateChange((session) => {
if (session) {
console.log('Customer signed in:', session.user.email);
} else {
console.log('Customer signed out');
}
});
// Later, to stop listening:
unsubscribe();The callback does not receive a { type: 'LOGIN' } event object. If tokens are being restored from storage, the immediate callback can be null; the callback runs again when the session has loaded. You can also call await tiquo.getUser() when the caller needs an explicit initial result.
Logging Out
await tiquo.logout();This revokes the session on the server, clears stored tokens from localStorage, and broadcasts the logout event to other tabs so they can update their UI.
Token Management
The SDK manages tokens automatically:
- Storage: Access and refresh tokens are stored in
localStorage - Automatic refresh: The SDK refreshes the access token 5 minutes before it expires, using the Refresh Token endpoint
- Token rotation: Each refresh rotates both the access and refresh tokens
- Multi-tab sync: Login, logout, and token refresh events are broadcast to all open tabs via the
BroadcastChannelAPI
You generally do not need to manage tokens yourself. For advanced DOM Package integrations, the public token methods are:
const accessToken = tiquo.getAccessToken();
const refreshToken = tiquo.getRefreshToken();
// Replace the current tokens with externally issued customer tokens.
tiquo.initWithTokens(accessToken, refreshToken);getAccessToken() and getRefreshToken() return string | null. Treat both values as credentials: do not log them, include them in URLs, expose them to third-party scripts, or send them to an untrusted backend. The Hosted Package manages its session internally and does not expose raw token getters.
Multi-Tab Synchronization
When enableTabSync is set to true by default, the SDK uses the BroadcastChannel API to keep all tabs in sync. The following events are broadcast:
| Event | Description |
|---|---|
LOGIN | A customer signed in on another tab |
LOGOUT | A customer signed out on another tab |
SESSION_UPDATE | Session data was updated |
TOKEN_REFRESH | Tokens were refreshed on another tab |
This means if a customer signs in on one tab, all other tabs automatically pick up the session without the customer needing to refresh the page.
Set enableTabSync: false when creating Tiquo if an application deliberately needs isolated tab sessions. Browsers without BroadcastChannel continue to authenticate normally without cross-tab updates.
Cleanup
When the application shell that owns the SDK instance unmounts, call destroy() to clean up event listeners, iframe observers, timers, and the BroadcastChannel:
tiquo.destroy();