Files
next-template/src/components/default/auth/buttons/server/sign-in-with-apple.tsx

66 lines
1.9 KiB
TypeScript

'use server';
import { signInWithApple } from '@/lib/queries';
import {
SubmitButton,
type SubmitButtonProps,
} from '@/components/default/forms';
import { SupabaseServer } from '@/utils/supabase';
import { FaApple } from 'react-icons/fa';
import { type ComponentProps } from 'react';
import { cn } from '@/lib/utils';
export type SignInWithAppleProps = {
submitButtonProps?: SubmitButtonProps;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className'>;
textClassName?: ComponentProps<'p'>['className'];
textProps?: Omit<ComponentProps<'p'>, 'className'>;
iconClassName?: ComponentProps<'svg'>['className'];
iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
};
export const SignInWithApple = async ({
submitButtonProps,
formClassName,
formProps,
textClassName,
textProps,
iconClassName,
iconProps,
} : SignInWithAppleProps) => {
const supabase = await SupabaseServer();
const handleSignInWithApple = async () => {
try {
if (!supabase) throw new Error('Supabase client not found');
const result = await signInWithApple(supabase);
if (result.error)
throw new Error(`Error signing in with Microsoft: ${result.error.message}`);
else if (result.data.url) window.location.href = result.data.url;
} catch (error) {
console.error(error);
}
};
return (
<form
action={handleSignInWithApple}
className={cn('my-4', formClassName)}
{...formProps}
>
<SubmitButton
pendingText='Signing in...'
className={cn('w-full', submitButtonProps?.className)}
{...submitButtonProps}
>
<div className='flex items-center gap-2'>
<FaApple className={cn('size-5', iconClassName)} {...iconProps} />
<p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
Sign In with Apple
</p>
</div>
</SubmitButton>
</form>
);
};