fix(web): auth UX polish batch — guest button, oauth labels
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled

Three launch-visible friction fixes:

#3: "Continuar como invitado" (anonymous sign-in) removed. claudemesh
    requires an account — mesh membership, invite issuance, and audit
    trails are all tied to a user.id. Flipping the toggle is enough:
    the AnonymousLogin component is gated by
    `authConfig.providers.anonymous` in login.tsx, so disabling the
    flag makes the button disappear from both /login and /register.

#4: OAuth buttons now show proper brand labels. Was rendering lowercase
    "github" / "google" / "apple" via capitalize CSS (which users read
    as "is this broken?"). Now renders "Continue with GitHub" /
    "Continue with Google" / "Continue with Apple" next to the existing
    brand icons. Also swapped layout: was `grow basis-28` (side-by-side
    chips), now `w-full justify-center` (stacked full-width buttons) —
    matches claude.com login styling more closely.

#6: Session hydration race on /dashboard — NON-ISSUE verified. The
    0-mesh redirect runs in a Server Component AFTER
    /dashboard/layout.tsx's getSession() gate. Server api.ts forwards
    cookies to the Hono backend, so no client-side auth state is in
    play. No fix needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-04-05 14:55:09 +01:00
parent 5bffdb1d30
commit e8ad7a5b19
2 changed files with 12 additions and 3 deletions

View File

@@ -17,7 +17,8 @@ export const authConfig = authConfigSchema.parse({
password: toBool(env.NEXT_PUBLIC_AUTH_PASSWORD, true),
magicLink: toBool(env.NEXT_PUBLIC_AUTH_MAGIC_LINK, false),
passkey: toBool(env.NEXT_PUBLIC_AUTH_PASSKEY, true),
anonymous: toBool(env.NEXT_PUBLIC_AUTH_ANONYMOUS, true),
// claudemesh requires auth — mesh membership is tied to an account
anonymous: toBool(env.NEXT_PUBLIC_AUTH_ANONYMOUS, false),
// v0.1.0: GitHub + Google. Apple deferred until we need it.
oAuth: [SocialProvider.GOOGLE, SocialProvider.GITHUB],
},

View File

@@ -29,6 +29,12 @@ export const SocialIcons: Record<SocialProviderType, Icon> = {
[SocialProviderType.APPLE]: Icons.Apple,
};
const PROVIDER_LABELS: Record<SocialProviderType, string> = {
[SocialProviderType.GITHUB]: "GitHub",
[SocialProviderType.GOOGLE]: "Google",
[SocialProviderType.APPLE]: "Apple",
};
const SocialProvider = ({
provider,
isSubmitting,
@@ -49,7 +55,7 @@ const SocialProvider = ({
variant="outline"
type="button"
size="lg"
className="relative grow basis-28 gap-2"
className="relative w-full justify-center gap-2"
disabled={isSubmitting}
onClick={onClick}
>
@@ -58,7 +64,9 @@ const SocialProvider = ({
) : (
<>
<Icon className="size-5 dark:brightness-125" />
<span className="leading-none capitalize">{provider}</span>
<span className="leading-none">
Continue with {PROVIDER_LABELS[provider]}
</span>
</>
)}