[Bug]: Fixes-magic link issues

[JMR825]

Description

This PR updates the placeholder Magic Link component on the login page to fully implement passwordless authentication using Supabase. It implements user email collection, adds client-side data validation constraints, integrates the native signInWithOtp dispatch flow, and implements defensive environment checks to handle runtime evaluation differences gracefully

Related Issues

closes #105

Type of Change

bug fixed.

Screenshots

if no email is provided
magic email msg from supabase

[vercel]

@JMR825 is attempting to deploy a commit to the participationcorner2025-8967's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

📝 Summary

The provided pull request diff introduces significant changes to the MagicLinkOption component, including the addition of email validation, error handling, and Supabase integration. The changes also update the supabase.client.ts and supabase.server.ts files to handle environment variables and create Supabase clients.

📂 Files Changed

• .gitignore: Added /src/ to the ignore list.
• app/blocks/login-page/magic-link-option.tsx: Updated the MagicLinkOption component to include email validation, error handling, and Supabase integration.
• app/utils/supabase.client.ts: Updated the getSupabaseBrowserClient function to handle environment variables and create a Supabase client.
• app/utils/supabase.server.ts: Updated the getSupabaseServerClient function to handle environment variables and create a Supabase client.

🎭 Code Poem

Code changes abound, with care and might,
Supabase integration, shining bright.
Email validation, errors in sight,
Magic link option, now a delight.

🚨 Bugs & Architectural Violations

* The `MagicLinkOption` component is placed in the correct directory (`app/blocks/`). * However, the use of `import.meta.env` may not be compatible with all environments. It's recommended to use a more robust method for handling environment variables. * The `getSupabaseClient` function in `magic-link-option.tsx` has a similar implementation to the `getSupabaseBrowserClient` function in `supabase.client.ts`. Consider extracting a separate utility function to avoid code duplication. * The `style` attribute is used to set the color of the error message. Consider using a CSS class instead to maintain consistency with the rest of the codebase. * The `MagicLinkOption` component does not have any accessibility attributes (e.g., `aria-hidden`, `role`). Consider adding these attributes to improve accessibility.

💡 Suggestions & Best Practices

* Consider using a more robust method for handling environment variables, such as using a library like `dotenv` or `env-var`. * Extract a separate utility function to handle Supabase client creation to avoid code duplication. * Use CSS classes instead of the `style` attribute to maintain consistency with the rest of the codebase. * Add accessibility attributes (e.g., `aria-hidden`, `role`) to the `MagicLinkOption` component to improve accessibility. * Consider using a more robust method for handling errors, such as using a library like `error-handler` or `error-boundary`. * Use a consistent naming convention throughout the codebase (e.g., use either camelCase or PascalCase for variable and function names).