Skip to content

Problem with Create Login (sign up) #87

@2u841r

Description

@2u841r
Error: Objects are not valid as a React child (found: object with keys {code, message}). 
If you meant to render a collection of children, use an array instead.

The Problem:
The error "Objects are not valid as a React child" was occurring because:
Inconsistent Error Format: The signUp and signIn actions in actions.ts were returning errors in two different formats:
Object format: { error: { code: "AUTH_ERROR", message: "..." } } (lines 23-27 and 62-66)

error: {
code: "AUTH_ERROR",
message: "Too many signups. Try again later",
},
};

error: {
code: "AUTH_ERROR",
message: "Too many attempts. Try again later",
},
};

String format: { error: "Invalid username or password..." } (other error cases)
React Rendering Issue: The LoginForm component in auth.client.tsx was trying to render state?.error directly as a React child (line 79), but when error was an object, React couldn't render it.

{state?.error && (
<div className="text-sm text-red-500">{state.error}</div>

Screenshot:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions