We finally fixed the sign in and sign out stuff with our client components not updating

This commit is contained in:
Gabriel Brown 2025-05-30 11:19:22 -05:00
parent 28569c4f4e
commit 969e101d21
5 changed files with 89 additions and 64 deletions

View File

@ -49,9 +49,14 @@ const ProfilePage = () => {
confirmPassword: string;
}) => {
try {
await resetPassword(values);
} catch {
toast.error('Error resetting password!: ');
const result = await resetPassword(values);
if (!result.success) {
toast.error(`Error resetting password: ${result.error}`)
}
} catch (error) {
toast.error(
`Error resetting password!: ${error as string ?? 'Unknown error'}`
);
}
}

View File

@ -1,13 +1,31 @@
'use client';
import Link from 'next/link';
import { getUser, signIn } from '@/lib/actions';
import { FormMessage, type Message, SubmitButton } from '@/components/default';
import { signIn } from '@/lib/actions';
import { SubmitButton } from '@/components/default';
import { Input, Label } from '@/components/ui';
import { redirect } from 'next/navigation';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context/auth';
import { useEffect } from 'react';
const Login = () => {
const router = useRouter();
const { isAuthenticated, refreshUserData } = useAuth();
// Redirect if already authenticated
useEffect(() => {
if (isAuthenticated) {
router.push('/');
}
}, [isAuthenticated, router]);
const handleSignIn = async (formData: FormData) => {
const result = await signIn(formData);
if (result?.success) {
await refreshUserData();
router.push('/');
}
};
const Login = async (props: { searchParams: Promise<Message> }) => {
const searchParams = await props.searchParams;
const user = await getUser();
if (user.success) redirect('/profile');
return (
<form className='flex-1 flex flex-col min-w-64'>
<h1 className='text-2xl font-medium'>Sign in</h1>
@ -35,12 +53,12 @@ const Login = async (props: { searchParams: Promise<Message> }) => {
placeholder='Your password'
required
/>
<SubmitButton pendingText='Signing In...' formAction={signIn}>
<SubmitButton pendingText='Signing In...' formAction={handleSignIn}>
Sign in
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
);
};
export default Login;

View File

@ -1,8 +1,23 @@
'use client';
import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
import { getUser, getProfile, updateProfile as updateProfileAction, getSignedUrl } from '@/lib/actions';
import { type User, type Profile, createClient } from '@/utils/supabase';
import React, {
type ReactNode,
createContext,
useContext,
useEffect,
useState,
} from 'react';
import {
getProfile,
getSignedUrl,
getUser,
updateProfile as updateProfileAction,
} from '@/lib/actions';
import {
type User,
type Profile,
createClient,
} from '@/utils/supabase';
import { toast } from 'sonner';
type AuthContextType = {
@ -41,30 +56,29 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
}
setUser(userResponse.data);
// Get profile data
const profileResponse = await getProfile();
if (!profileResponse.success) {
setProfile(null);
setAvatarUrl(null);
return;
}
setProfile(profileResponse.data);
// Get avatar URL if available
if (profileResponse.data.avatar_url) {
const avatarResponse = await getSignedUrl({
bucket: 'avatars',
url: profileResponse.data.avatar_url,
});
if (avatarResponse.success) {
setAvatarUrl(avatarResponse.data);
}
}
} catch (error) {
console.error('Error fetching user data:', error);
toast.error('Failed to load user data');
} finally {
setIsLoading(false);
@ -73,8 +87,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
useEffect(() => {
const supabase = createClient();
fetchUserData().catch((error) => {
console.error('Error fetching user data:', error);
console.error('💥 Initial fetch error:', error);
});
const {
@ -90,13 +105,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
}
});
const intervalId = setInterval(() => {
void fetchUserData();
}, 1 * 60 * 1000);
return () => {
subscription.unsubscribe();
clearInterval(intervalId);
};
}, []);
@ -140,6 +150,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
};
const refreshUserData = async () => {
console.log('Manual refresh triggered');
await fetchUserData();
};

View File

@ -13,14 +13,20 @@ import {
DropdownMenuTrigger,
} from '@/components/ui';
import { useAuth } from '@/components/context/auth';
import { useRouter } from 'next/navigation';
import { signOut } from '@/lib/actions';
import { User } from 'lucide-react';
const AvatarDropdown = () => {
const { profile, avatarUrl, isLoading } = useAuth();
const { profile, avatarUrl, isLoading, refreshUserData } = useAuth();
const router = useRouter();
const handleSignOut = async () => {
await signOut();
const result = await signOut();
if (result?.success) {
await refreshUserData();
router.push('/sign-in');
}
};
const getInitials = (name: string | null | undefined): string => {

View File

@ -7,7 +7,6 @@ import { headers } from 'next/headers';
import { redirect } from 'next/navigation';
import type { User } from '@/utils/supabase';
import type { Result } from './index';
import { revalidatePath } from 'next/cache';
export const signUp = async (formData: FormData) => {
const name = formData.get('name') as string;
@ -47,7 +46,9 @@ export const signUp = async (formData: FormData) => {
}
};
export const signIn = async (formData: FormData) => {
export const signIn = async (
formData: FormData,
): Promise<Result<null>> => {
const email = formData.get('email') as string;
const password = formData.get('password') as string;
const supabase = await createServerClient();
@ -56,11 +57,10 @@ export const signIn = async (formData: FormData) => {
email,
password,
});
if (error) {
return encodedRedirect('error', '/sign-in', error.message);
return { success: false, error: error.message };
} else {
return redirect('/');
return { success: true, data: null };
}
};
@ -98,43 +98,27 @@ export const forgotPassword = async (formData: FormData) => {
};
export const resetPassword = async (
formData: FormData | {password: string, confirmPassword: string}
) => {
let password = '';
let confirmPassword = '';
if (formData instanceof FormData) {
password = formData.get('password') as string;
confirmPassword = formData.get('confirmPassword') as string;
} else {
password = formData.password;
confirmPassword = formData.confirmPassword;
}
export const resetPassword = async ({
password,
confirmPassword,
}: {
password: string,
confirmPassword: string
}): Promise<Result<null>> => {
if (!password || !confirmPassword) {
encodedRedirect(
'error',
'/reset-password',
'Password and confirm password are required',
);
return { success: false, error: 'Password and confirm password are required!' };
}
const supabase = await createServerClient();
if (password !== confirmPassword) {
encodedRedirect('error', '/reset-password', 'Passwords do not match');
return { success: false, error: 'Passwords do not match!' };
}
const { error } = await supabase.auth.updateUser({
password: password,
password,
});
if (error) {
encodedRedirect('error', '/reset-password', 'Password update failed');
return { success: false, error: `Password update failed: ${error.message}` };
}
encodedRedirect('success', '/reset-password', 'Password updated');
return { success: true, data: null };
};
@ -165,10 +149,11 @@ export const resetPasswordFromEmail = async (formData: FormData) => {
encodedRedirect('success', '/reset-password', 'Password updated');
};
export const signOut = async () => {
export const signOut = async (): Promise<Result<null>> => {
const supabase = await createServerClient();
await supabase.auth.signOut();
return redirect('/sign-in');
const { error } = await supabase.auth.signOut();
if (error) return { success: false, error: error.message }
return { success: true, data: null };
};
export const getUser = async (): Promise<Result<User>> => {