Step 5: Listen for State Changes

⏱ 5 min read

React to authentication state changes in real-time.

Auth State Changed Event

Listen for authentication state changes:


transcodes.on('AUTH_STATE_CHANGED', (payload) => {
  if (payload.isAuthenticated) {
    console.log('User logged in:', payload.user.email);
  } else {
    console.log('User logged 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;
  user?: {
    id: string;
    email: string;
    createdAt: string;
  };
}

All Available Events

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

Token Refresh Event

Listen for automatic token refreshes:


transcodes.on('TOKEN_REFRESHED', (payload) => {
  console.log('New token available:', payload.token);
  // Update your API client with new token
});

Error Event

Handle authentication errors:


transcodes.on('ERROR', (payload) => {
  console.error('Auth error:', payload.message);
  // Show error message to user
});

Framework Integration

React


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

Vue


<!-- Vue Composition API -->
<template>
  <div>
    <p v-if="isAuthenticated">Welcome, {{ user.email }}!</p>
    <p v-else>Please sign in</p>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const user = ref(null);
const isAuthenticated = ref(false);
 
const handleAuthChange = (payload) => {
  isAuthenticated.value = payload.isAuthenticated;
  user.value = payload.user || null;
};
 
onMounted(() => {
  transcodes.on('AUTH_STATE_CHANGED', handleAuthChange);
});
 
onUnmounted(() => {
  transcodes.off('AUTH_STATE_CHANGED', handleAuthChange);
});
</script>

Vanilla JS


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

Check Current Auth Status

Get the current authentication status without waiting for events:


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

Sign Out

Sign out the current user:


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

Remove Event Listeners

Clean up event listeners when no longer needed:


const handler = (payload) => {
  console.log('Auth changed:', payload);
};
 
// Add listener
transcodes.on('AUTH_STATE_CHANGED', handler);
 
// Remove listener
transcodes.off('AUTH_STATE_CHANGED', handler);

What’s Next

Event handling complete! Next step: - Step 6: Server-Side Integration - Secure your backend - Option: Auth Console Panel - No-code solution