Skip to content

Make auth UI in urbackend/react configurable #297

@Nitin-kumar-yadav1307

Description

@Nitin-kumar-yadav1307

Description

The current authentication UI in urbackend/react is too hardcoded. It would be better if the SDK allowed basic branding and login flow customization instead of forcing a fixed setup.

Problems Observed

  • Authentication method selection is not customizable.
  • Users cannot restrict the app to only GitHub login.
  • Users cannot restrict the app to only Google login.
  • Users cannot use email/password only and bypass social login.
  • The UI colors are not customizable.
  • The login/sign-up pages do not allow showing a custom brand name.

Expected Behavior

The SDK should allow developers to:

  • Enable or disable GitHub login independently.
  • Enable or disable Google login independently.
  • Enable or disable email/password authentication independently.
  • Customize theme colors used in the authentication UI.
  • Pass a custom brand name, logo, or application title for login and sign-up screens.
  • Override default labels and text shown on authentication pages.
  • Keep sensible defaults while allowing customization when needed.

Why This Matters

Most applications require at least basic white-label support. The current authentication experience feels locked to a single design and a fixed set of login providers, making the SDK less flexible for real-world projects and harder to adopt in production environments.

Suggested Enhancement

Add configuration options to the React SDK for:

  • Enabled authentication providers
  • Email/password-only mode
  • Theme customization (colors, branding)
  • Brand name and logo support
  • Custom authentication page labels and text

Example API (Conceptual)

<AuthProvider
  providers={{
    github: true,
    google: false,
    emailPassword: true,
  }}
  branding={{
    appName: "My App",
    logo: "/logo.png",
    primaryColor: "#4F46E5",
  }}
  labels={{
    signInTitle: "Welcome Back",
    signUpTitle: "Create Your Account",
  }}
/>

This would provide a more flexible, white-label authentication experience while maintaining backward compatibility through default settings.

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions