useEffect(() => {
    const checkAuthentication = async () => {
      setAuthChecking(true);
  
      try {
        // Check for existing auth token
        const hasAuthCookie = getAuthTokenFromCookies() !== null;
  
        if (hasAuthCookie) {
          setIsAuthenticated(true);
          setAuthChecking(false);
          return;
        }
  
        // If no auth token, try Telegram authentication
        const { user, error: telegramError } = useTelegram();
        console.log("Telegram user data:", user);

        if (telegramError) {
          console.error("Telegram authentication error:", telegramError);
          setAuthChecking(false);
          return;
        }
  
        if (!user) {
          console.error("No Telegram user data available");
          setAuthChecking(false);
          return;
        }

  
        // Send Telegram user data to your backend for verification
        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/telegram`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ 
            telegramUser: user,
            initData: window.Telegram?.WebApp.initData 
          }),
        });
  
        if (!response.ok) {
          console.error("Telegram authentication failed:", response.statusText);
          setAuthChecking(false);
          return;
        }
  
        const data = await response.json();
  
        // Save JWT token
        const jwt = data.jwt;
        const expiryDate = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24 hours
        document.cookie = `authToken=${jwt}; expires=${expiryDate.toUTCString()}; path=/; SameSite=Strict`;
        localStorage.setItem("authToken", jwt);
  
        setIsAuthenticated(true);
      } catch (error) {
        console.error("Authentication error:", error);
      } finally {
        setAuthChecking(false);
      }
    };
  
    checkAuthentication();
  }, []);

'use client';

import { useEffect, useState } from 'react';
import { useLaunchParams } from '@telegram-apps/sdk-react';

interface TelegramUser {
  id?: number;
  first_name?: string;
  last_name?: string;
  username?: string;
  photo_url?: string;
  auth_date?: number;
  hash?: string;
}

const useTelegram = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [user, setUser] = useState<TelegramUser | null>(null);

  useEffect(() => {
    try {
      // Only run on client side
      if (typeof window === 'undefined') {
        setIsLoading(false);
        return;
      }

      const launchParams = useLaunchParams();
      console.log('launchParams', launchParams);
      
      if (launchParams) {
        setUser(launchParams);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to initialize Telegram');
    } finally {
      setIsLoading(false);
    }
  }, []);

  return {
    user,
    isLoading,
    error,
    tg: typeof window !== 'undefined' ? window.Telegram?.WebApp : null
  };
};

export default useTelegram;

Authentication error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.