Implement Sign-in Page using shadcn login-04

[0xdevcollins]

Description

Create a modern sign-in page for Boundless Bounties using the shadcn component login-04.

Requirements

• Use npx shadcn@latest add login-04 to generate the component structure.
• Sign-up Redirect: The "Sign Up" link should redirect users to https://www.boundlessfi.xyz/auth?mode=signup.
• Authentication Providers:
  • GitHub: Existing implementation in components/login/sign-in.tsx should be migrated/integrated.
  • Google: Add support for Google sign-in.
  • Better Auth Magic Link: Add support for email-based magic link sign-in using Better Auth.

Technical Context

• Component should be placed or updated in components/login/sign-in.tsx.
• The main auth page is at app/(auth)/auth/page.tsx.
• Use authClient from lib/auth-client.ts for authentication logic.

References

• Shadcn UI: login-04
• Redirect URL: https://www.boundlessfi.xyz/auth?mode=signup

[linear]

BOU-90

[coderabbitai]

🔗 Related PRs

#16 - Add GitHub Authentication via Better Auth [merged]
#17 - feat: Built BountyCard component with shadcn composition [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 100 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Luluameh]

@Luluameh has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello.
Can I handle this?
I am a frontend developer with 4 years experience.
ETA 3 hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Luluameh to this issue.

[Miracle656]

@Miracle656 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I'd like to build this. Migrating to a shadcn login block while integrating multiple auth providers is straightforward if you know the pieces — and I do.

Relevant experience:

• Used shadcn UI blocks including login components, and know how to scaffold with npx shadcn@latest add and then customize without fighting the generated structure
• Integrated GitHub and Google OAuth in Next.js apps using Better Auth and similar auth libraries
• Implemented magic link / passwordless email auth flows
• Familiar with authClient patterns for client-side auth calls in Next.js App Router

What I'd deliver:

• Run npx shadcn@latest add login-04 and adapt the output into components/login/sign-in.tsx
• Migrate existing GitHub sign-in from the current implementation cleanly into the new component
• Add Google sign-in using authClient from lib/auth-client.ts
• Add Better Auth magic link sign-in with email input and submission handling
• "Sign Up" link redirects to https://www.boundlessfi.xyz/auth?mode=signup
• Wire everything into app/(auth)/auth/page.tsx
• Clean, consistent UI across all three providers using the login-04 design

I'll review the existing components/login/sign-in.tsx and lib/auth-client.ts before writing anything to make sure the migration is clean and nothing gets broken. Ready to start.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Miracle656 to this issue.

[laryhills]

@laryhills has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, I'd like to apply for this issue! 🔐

About Me
I'm a frontend engineer with 6+ years of experience building authentication flows and integrating multiple auth providers. I've implemented authentication, and designed sign-in pages with smooth UX.

Plan

• Generate login-04 component structure using npx shadcn@latest add login-04
• Integrate existing GitHub auth from components/login/sign-in.tsx into shadcn component
• Add Google OAuth provider: configure credentials, implement sign-in handler using authClient
• Implement Better Auth magic link: email input, send link handler, validate token flow
• Add sign-up redirect: "Sign Up" link directs to https://www.boundlessfi.xyz/auth?mode=signup
• Use authClient from lib/auth-client.ts for all authentication logic
• Handle loading states for each provider, error messaging for failed auth
• Ensure responsive design across mobile/desktop viewports

ETA
4-8hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @laryhills to this issue.

[Ugasutun]

@Ugasutun has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I can take this on! I’m familiar with shadcn/ui and Better Auth, so I can get the login-04 layout set up and wire up the GitHub, Google, and Magic Link logic quickly. I'll make sure the sign-up redirect is correct and everything matches the existing authClient setup.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ugasutun to this issue.

[SamixYasuke]

@SamixYasuke has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello, I'd love to work on this task, I'm certain i'll deliver, thanks.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SamixYasuke to this issue.

[icedoutskay]

@icedoutskay has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Can I take up this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @icedoutskay to this issue.