Bring back ability to find out provider for profile page

apps/next/src/app/(auth)/profile/page.tsx

@@ -14,6 +14,7 @@ import { Card, Separator } from '@gib/ui';
 
 const Profile = async () => {
   const preloadedUser = await preloadQuery(api.auth.getUser, {});
+  const preloadedUserProvider = await preloadQuery(api.auth.getUserProvider, {});
   return (
     <main className="container mx-auto px-4 py-12 md:py-16">
       <div className="mx-auto max-w-3xl">
@@ -32,9 +33,8 @@ const Profile = async () => {
           <ProfileHeader preloadedUser={preloadedUser} />
           <AvatarUpload preloadedUser={preloadedUser} />
           <Separator className="my-6" />
-          <UserInfoForm preloadedUser={preloadedUser} />
-          <Separator className="my-6" />
-          <ResetPasswordForm preloadedUser={preloadedUser} />
+          <UserInfoForm preloadedUser={preloadedUser} preloadedProvider={preloadedUserProvider} />
+          <ResetPasswordForm preloadedProvider={preloadedUserProvider} />
           <Separator className="my-6" />
           <SignOutForm />
         </Card>

apps/next/src/components/layout/auth/profile/header.tsx

@@ -14,7 +14,9 @@ const ProfileHeader = ({ preloadedUser }: ProfileCardProps) => {
   const user = usePreloadedQuery(preloadedUser);
   return (
     <CardHeader>
-      <CardTitle className="text-xl">Account Settings</CardTitle>
+      <CardTitle className="text-xl">
+        Account Settings
+      </CardTitle>
       <CardDescription>
         Update your profile information and manage your account preferences
       </CardDescription>

apps/next/src/components/layout/auth/profile/reset-password.tsx

@@ -66,12 +66,12 @@ const formSchema = z
     path: ['confirmPassword'],
   });
 
-type ResetFormProps = {
-  preloadedUser: Preloaded<typeof api.auth.getUser>;
+interface ResetFormProps {
+  preloadedProvider: Preloaded<typeof api.auth.getUserProvider>;
 };
 
-export const ResetPasswordForm = ({ preloadedUser }: ResetFormProps) => {
-  const user = usePreloadedQuery(preloadedUser);
+export const ResetPasswordForm = ({ preloadedProvider }: ResetFormProps) => {
+  const userProvider = usePreloadedQuery(preloadedProvider);
   const [loading, setLoading] = useState(false);
 
   const changePassword = useAction(api.auth.updateUserPassword);
@@ -104,12 +104,13 @@ export const ResetPasswordForm = ({ preloadedUser }: ResetFormProps) => {
     }
   };
   // Only show password reset for email/password auth users
-  if (!user?.email) {
+  if (userProvider !== 'email') {
     return null;
   }
 
   return (
     <>
+      <Separator />
       <CardHeader>
         <CardTitle>Change Password</CardTitle>
         <CardDescription>

apps/next/src/components/layout/auth/profile/user-info.tsx

@@ -40,12 +40,14 @@ const formSchema = z.object({
   }),
 });
 
-type UserInfoFormProps = {
+interface UserInfoFormProps {
   preloadedUser: Preloaded<typeof api.auth.getUser>;
+  preloadedProvider: Preloaded<typeof api.auth.getUserProvider>;
 };
 
-export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
+export const UserInfoForm = ({ preloadedUser, preloadedProvider }: UserInfoFormProps) => {
   const user = usePreloadedQuery(preloadedUser);
+  const userProvider = usePreloadedQuery(preloadedProvider);
   const [loading, setLoading] = useState(false);
 
   const updateUser = useMutation(api.auth.updateUser);
@@ -132,7 +134,7 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
                       {...field}
                       type="email"
                       placeholder="john@example.com"
-                      disabled={!user?.email}
+                      disabled={userProvider !== 'email'}
                     />
                   </FormControl>
                   <FormDescription>

packages/backend/convex/auth.ts

@@ -25,13 +25,25 @@ const getUserById = async (
   if (!user) throw new ConvexError('User not found.');
   return user;
 };
-const isSignedIn = async (ctx: QueryCtx): Promise<Doc<'users'> | null> => {
-  const userId = await getAuthUserId(ctx);
-  if (!userId) return null;
+const getAuthAccountById = async (ctx: QueryCtx, userId: Id<'users'>) => {
   const user = await ctx.db.get(userId);
-  if (!user) return null;
-  return user;
+  if (!user) throw new ConvexError('User not found.');
+  const authAccount = await ctx.db
+    .query('authAccounts')
+    .withIndex('userIdAndProvider', (q) => q.eq('userId', userId))
+    .first();
+  if (!authAccount) throw new ConvexError('Auth account not found');
+  return authAccount;
 };
+export const getUserProvider = query({
+  args: { userId: v.optional(v.id('users')) },
+  handler: async (ctx, args) => {
+    const userId = args.userId ?? (await getAuthUserId(ctx));
+    if (!userId) return null;
+    const authAccount = await getAuthAccountById(ctx, userId);
+    return authAccount.provider;
+  },
+});
 
 export const getUser = query({
   args: { userId: v.optional(v.id('users')) },