Step 4: Auth state events

⏱ 3 min

React to authentication state changes in real-time

Auth State Changed Event


transcodes.on('AUTH_STATE_CHANGED', (payload) => {
  if (payload.isAuthenticated) {
    console.log('Member signed in:', payload.member?.email);
  } else {
    console.log('Member signed out');
  }
});

This image shows the TypeScript definitions (.d.ts file) that enable type-safe programming with the framework:

Installation Guide with Event Listeners

Event Payload


{
  isAuthenticated: boolean;
  accessToken: string | null;
  expiresAt: number | null;
  member: Member | null;
}

All Available Events

Event	When Fired	Payload (summary)
`AUTH_STATE_CHANGED`	Login, logout, or initial auth check	`{ isAuthenticated, member, ... }`
`TOKEN_REFRESHED`	Access token automatically renewed	`{ accessToken, expiresAt }`
`TOKEN_EXPIRED`	Token expired (before refresh)	`{ expiredAt }`
`ERROR`	Authentication error occurred	`{ code, message, context? }`

Framework Examples

React


import { useState, useEffect } from 'react';
 
function useAuth() {
const [member, setMember] = useState(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
 
useEffect(() => {
const handleAuthChange = (payload) => {
setIsAuthenticated(payload.isAuthenticated);
setMember(payload.member || null);
};
 
    transcodes.on('AUTH_STATE_CHANGED', handleAuthChange);
 
    return () => {
      transcodes.off('AUTH_STATE_CHANGED', handleAuthChange);
    };
 
}, []);
 
return { member, isAuthenticated };
}
 
// Usage
function App() {
const { member, isAuthenticated } = useAuth();
 
return (
 
<div>
  {isAuthenticated ? <p>Welcome, {member?.email}!</p> : <p>Please sign in</p>}
</div>
);
}

Vue


<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const member = ref(null);
const isAuthenticated = ref(false);
 
const handleAuthChange = (payload) => {
isAuthenticated.value = payload.isAuthenticated;
member.value = payload.member || null;
};
 
onMounted(() => {
transcodes.on('AUTH_STATE_CHANGED', handleAuthChange);
});
 
onUnmounted(() => {
transcodes.off('AUTH_STATE_CHANGED', handleAuthChange);
});
 
</script>

Vanilla JS


function updateUI(payload) {
  const memberElement = document.getElementById('member-info');
  
  if (payload.isAuthenticated) {
    memberElement.textContent = `Welcome, ${payload.member?.email}!`;
  } else {
    memberElement.textContent = 'Please sign in';
  }
}
 
transcodes.on('AUTH_STATE_CHANGED', updateUI);

Check Current Auth Status


async function checkAuth() {
  const isAuth = await transcodes.token.isAuthenticated();
 
  if (isAuth) {
    const member = await transcodes.token.getCurrentMember();
    console.log('Current member:', member);
  }
}

Sign Out


await transcodes.token.signOut();
// AUTH_STATE_CHANGED event will fire with isAuthenticated: false

History Log

Record actions for audit logs using trackUserAction(). Events appear in the Audit Logs panel


// Login success
if (result.success) {
  await transcodes.trackUserAction({
    tag: 'user:login',
    status: true,
    metadata: { method: 'passkey' },
  });
}
 
// Sign out
await transcodes.trackUserAction({
  tag: 'user:logout',
  status: true,
});

Tag	Use Case
`user:login`	Member logged in (audit tag)
`user:logout`	Member signed out (audit tag)
`user:register`	New member registration (audit tag)

See Audit API for full trackUserAction reference

What’s Next

Next: Step 5: Verify JWT on the server