Server show signed in & refreshed token, yet, <Unauthenticated> is triggered

"use client";

import LoaderSpinner from "@/components/LoaderSpinner";
import React from "react";
import Feed from '@/components/credo/Feed';
import StandardHeader from "@/components/StandardHeader";
import { UpgradeRequired } from "@/components/UpgradeRequired";
import { CreateTwirp } from "@/components/credo/CreateTwirp";
import { AnalyticsTracker } from "@/components/app/AnalyticsTracker";
//import { Authenticated, AuthLoading, Unauthenticated } from "@/providers/ConvexAuthProvider";
import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";


const CredoPage: React.FC = () => {

  // if (!userInfo.convexUser) {
  //   return <UpgradeRequired feature="Credo" subscriptionLevel={0} />;
  // }

  return (
    <div className="flex flex-col h-full">
      <AuthLoading>
        <LoaderSpinner />
      </AuthLoading>

      <Authenticated>
        <AnalyticsTracker />
        <StandardHeader headerText="Credo" outline={false} />
        <div className="flex-grow overflow-y-auto px-4">
          <Feed />
        </div>
        <div className="p-4 border-t">
          <CreateTwirp />
        </div>
      </Authenticated>
      <Unauthenticated>
        <p>Not Authenticated</p>
      </Unauthenticated>
    </div>
  );
}

export default CredoPage;

"use client";

import LoaderSpinner from "@/components/LoaderSpinner";
import React from "react";
import Feed from '@/components/credo/Feed';
import StandardHeader from "@/components/StandardHeader";
import { UpgradeRequired } from "@/components/UpgradeRequired";
import { CreateTwirp } from "@/components/credo/CreateTwirp";
import { AnalyticsTracker } from "@/components/app/AnalyticsTracker";
//import { Authenticated, AuthLoading, Unauthenticated } from "@/providers/ConvexAuthProvider";
import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";


const CredoPage: React.FC = () => {

  // if (!userInfo.convexUser) {
  //   return <UpgradeRequired feature="Credo" subscriptionLevel={0} />;
  // }

  return (
    <div className="flex flex-col h-full">
      <AuthLoading>
        <LoaderSpinner />
      </AuthLoading>

      <Authenticated>
        <AnalyticsTracker />
        <StandardHeader headerText="Credo" outline={false} />
        <div className="flex-grow overflow-y-auto px-4">
          <Feed />
        </div>
        <div className="p-4 border-t">
          <CreateTwirp />
        </div>
      </Authenticated>
      <Unauthenticated>
        <p>Not Authenticated</p>
      </Unauthenticated>
    </div>
  );
}

export default CredoPage;

export const getCurrentUser = query({
  args: {},
  handler: async (ctx) => {
    debug("getCurrentUser:","start");

    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      return null;
    }
    debug("getCurrentUser->identity:",JSON.stringify(identity));

    const user = await ctx.db
      .query('users')
      .filter(q => q.eq(q.field('email'), identity.email))
      .first();

    if (!user) {
      return null;
    }
    debug("getCurrentUser->user:",JSON.stringify(user));

    // Check admin status
    const isAdmin = await ctx.db
      .query("admins")
      .withIndex("by_userId")
      .filter(q => q.eq(q.field("userId"), user._id))
      .first();

    debug("getCurrentUser->isAdmin:",JSON.stringify(isAdmin));

    debug("getCurrentUser:","done");
    return {
      _id: user._id,
      email: user.email,
      phone: user.phone,
      imageUrl: user.imageUrl,
      bgImageUrl: user.bgImageUrl,
      bgImageStorageId: user.bgImageStorageId,
      bgImageOpacity: user.bgImageOpacity,
      clerkId: user.clerkId, // TODO: Remove after migration to Convex Auth
      name: user.name,
      username: user.username,
      bio: user.bio,
      credits: user.credits,
      ghostArtist: user.ghostArtist,
      ghostWriter: user.ghostWriter,
      totalViews: user.totalViews,
      subscriptionLevel: user.subscriptionLevel,
      isAnonymous: user.isAnonymous,
      isAdmin: !!isAdmin, // Set based on the presence of an admin record
      unreadMessages: user.unreadMessages,
      emailVerificationTime: user.emailVerificationTime,
      phoneVerificationTime: user.phoneVerificationTime,
      lastLoginDate: user.lastLoginDate,
    };
  },
});

export const getCurrentUser = query({
  args: {},
  handler: async (ctx) => {
    debug("getCurrentUser:","start");

    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      return null;
    }
    debug("getCurrentUser->identity:",JSON.stringify(identity));

    const user = await ctx.db
      .query('users')
      .filter(q => q.eq(q.field('email'), identity.email))
      .first();

    if (!user) {
      return null;
    }
    debug("getCurrentUser->user:",JSON.stringify(user));

    // Check admin status
    const isAdmin = await ctx.db
      .query("admins")
      .withIndex("by_userId")
      .filter(q => q.eq(q.field("userId"), user._id))
      .first();

    debug("getCurrentUser->isAdmin:",JSON.stringify(isAdmin));

    debug("getCurrentUser:","done");
    return {
      _id: user._id,
      email: user.email,
      phone: user.phone,
      imageUrl: user.imageUrl,
      bgImageUrl: user.bgImageUrl,
      bgImageStorageId: user.bgImageStorageId,
      bgImageOpacity: user.bgImageOpacity,
      clerkId: user.clerkId, // TODO: Remove after migration to Convex Auth
      name: user.name,
      username: user.username,
      bio: user.bio,
      credits: user.credits,
      ghostArtist: user.ghostArtist,
      ghostWriter: user.ghostWriter,
      totalViews: user.totalViews,
      subscriptionLevel: user.subscriptionLevel,
      isAnonymous: user.isAnonymous,
      isAdmin: !!isAdmin, // Set based on the presence of an admin record
      unreadMessages: user.unreadMessages,
      emailVerificationTime: user.emailVerificationTime,
      phoneVerificationTime: user.phoneVerificationTime,
      lastLoginDate: user.lastLoginDate,
    };
  },
});

/**
 * A utility function for logging debug information in development environments.
 * 
 * This function logs messages to the console, but only when the application
 * is running in a development environment. It's useful for debugging and
 * tracking application flow without cluttering production logs.
 * 
 * @param {string} name - The name or identifier for the debug message.
 *                        This could be a component name, function name,
 *                        or any string that helps identify where the debug
 *                        message is coming from.
 * 
 * @param {string} event - The actual debug message or event description.
 *                         This should contain the information you want to log.
 * 
 * @example
 * // Usage in a component
 * debug("UserProfile", "Fetching user data");
 * 
 * @example
 * // Usage in a function
 * debug("calculateTotalPrice", `Input values: ${price}, ${quantity}`);
 * 
 * @returns {void}
 * 
 * @remarks
 * - This function only logs messages when NODE_ENV is set to 'development'.
 * - In production builds, this function will not output anything, ensuring
 *   no debug messages are accidentally exposed in production environments.
 * - The output format is: "<name>: <event>"
 */
export function debug(name: string, event: string): void {
  if (process.env.NODE_ENV === 'development') {
    console.log(`${name}: ${event}`);
  }
}

/**
 * A utility function for logging debug information in development environments.
 * 
 * This function logs messages to the console, but only when the application
 * is running in a development environment. It's useful for debugging and
 * tracking application flow without cluttering production logs.
 * 
 * @param {string} name - The name or identifier for the debug message.
 *                        This could be a component name, function name,
 *                        or any string that helps identify where the debug
 *                        message is coming from.
 * 
 * @param {string} event - The actual debug message or event description.
 *                         This should contain the information you want to log.
 * 
 * @example
 * // Usage in a component
 * debug("UserProfile", "Fetching user data");
 * 
 * @example
 * // Usage in a function
 * debug("calculateTotalPrice", `Input values: ${price}, ${quantity}`);
 * 
 * @returns {void}
 * 
 * @remarks
 * - This function only logs messages when NODE_ENV is set to 'development'.
 * - In production builds, this function will not output anything, ensuring
 *   no debug messages are accidentally exposed in production environments.
 * - The output format is: "<name>: <event>"
 */
export function debug(name: string, event: string): void {
  if (process.env.NODE_ENV === 'development') {
    console.log(`${name}: ${event}`);
  }
}

const authConfig = {
    providers: [
      {
        domain: process.env.NEXT_PUBLIC_CLERK_DOMAIN as string,
        applicationID: "convex",
      },
    ]
  };
  
  export default authConfig;

const authConfig = {
    providers: [
      {
        domain: process.env.NEXT_PUBLIC_CLERK_DOMAIN as string,
        applicationID: "convex",
      },
    ]
  };
  
  export default authConfig;