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; confirmPassword: string;
}) => { }) => {
try { try {
await resetPassword(values); const result = await resetPassword(values);
} catch { if (!result.success) {
toast.error('Error resetting password!: '); 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 Link from 'next/link';
import { getUser, signIn } from '@/lib/actions'; import { signIn } from '@/lib/actions';
import { FormMessage, type Message, SubmitButton } from '@/components/default'; import { SubmitButton } from '@/components/default';
import { Input, Label } from '@/components/ui'; 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 ( return (
<form className='flex-1 flex flex-col min-w-64'> <form className='flex-1 flex flex-col min-w-64'>
<h1 className='text-2xl font-medium'>Sign in</h1> <h1 className='text-2xl font-medium'>Sign in</h1>
@ -35,12 +53,12 @@ const Login = async (props: { searchParams: Promise<Message> }) => {
placeholder='Your password' placeholder='Your password'
required required
/> />
<SubmitButton pendingText='Signing In...' formAction={signIn}> <SubmitButton pendingText='Signing In...' formAction={handleSignIn}>
Sign in Sign in
</SubmitButton> </SubmitButton>
<FormMessage message={searchParams} />
</div> </div>
</form> </form>
); );
}; };
export default Login; export default Login;

View File

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

View File

@ -13,14 +13,20 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui'; } from '@/components/ui';
import { useAuth } from '@/components/context/auth'; import { useAuth } from '@/components/context/auth';
import { useRouter } from 'next/navigation';
import { signOut } from '@/lib/actions'; import { signOut } from '@/lib/actions';
import { User } from 'lucide-react'; import { User } from 'lucide-react';
const AvatarDropdown = () => { const AvatarDropdown = () => {
const { profile, avatarUrl, isLoading } = useAuth(); const { profile, avatarUrl, isLoading, refreshUserData } = useAuth();
const router = useRouter();
const handleSignOut = async () => { 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 => { const getInitials = (name: string | null | undefined): string => {

View File

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