Merge pull request #301 from Nitin-kumar-yadav1307/fix-auth-ui-customization

fix: improve auth UI customization options in react sdk

Author: yash-pouranik

examples/react-sdk-demo/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { UrAuth, ProtectedRoute, GuestRoute, useUser, UrUserButton } from '@urbackend/react';
+import { UrAuth, ProtectedRoute, GuestRoute, useUser, useAuth, UrUserButton } from '@urbackend/react';
 import './App.css';
 
 // Mini router component for the demo
@@ -28,7 +28,22 @@ function App() {
     return (
       <GuestRoute fallback={LoadingFallback} onRedirect={() => navigate('/')}>
         <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: '#f8fafc' }}>
-          <UrAuth providers={['google', 'github']} theme="light" />
+          <UrAuth
+            providers={{
+              github: true,
+              google: true,
+              emailPassword: true,
+            }}
+            branding={{
+              appName: "My Custom App",
+              logo: "https://vite.dev/logo.svg",
+              primaryColor: "#4F46E5",
+            }}
+            labels={{
+              signInTitle: "Welcome back to Custom App",
+              signInButton: "Proceed to App",
+            }}
+          />
         </div>
       </GuestRoute>
     );
@@ -43,7 +58,8 @@ function App() {
 }
 
 function Dashboard() {
-  const { user, logout } = useUser();
+  const { user } = useUser();
+  const { logout } = useAuth();
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: '#f8fafc', padding: '24px' }}>
@@ -66,8 +82,8 @@ function Dashboard() {
       }}>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '32px' }}>
-          {user?.avatarUrl ? (
-            <img src={user.avatarUrl} alt="Avatar" style={{ width: '64px', height: '64px', borderRadius: '0', objectFit: 'cover' }} />
+          {typeof user?.avatarUrl === 'string' && user?.avatarUrl ? (
+                <img src={user.avatarUrl } alt="Avatar" style={{ width: '64px', height: '64px', borderRadius: '0', objectFit: 'cover' }} />
           ) : (
             <div style={{ width: '64px', height: '64px', borderRadius: '0', background: 'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px', fontWeight: 600, color: '#64748b' }}>
               {user?.name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase()}

package-lock.json

@@ -83,9 +83,74 @@ interface GuestRouteProps {
  */
 declare const GuestRoute: React.FC<GuestRouteProps>;
 
+type AuthProvider = 'google' | 'github';
+type ThemeMode = 'light' | 'dark';
+interface AuthColors {
+    background: string;
+    surface: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    inputBackground: string;
+    primary: string;
+    primaryText: string;
+    footerBackground: string;
+    dividerText: string;
+    socialButtonBackground: string;
+}
+interface AuthBranding {
+    brandName?: string;
+    appName?: string;
+    title?: string;
+    subtitle?: string;
+    logo?: React.ReactNode | string;
+    primaryColor?: string;
+}
+interface AuthLabels {
+    loginTab: string;
+    signupTab: string;
+    loginTitle: string;
+    signupTitle: string;
+    forgotTitle: string;
+    resetTitle: string;
+    loginButton: string;
+    signupButton: string;
+    forgotButton: string;
+    resetButton: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    passwordLabel: string;
+    passwordPlaceholder: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    otpLabel: string;
+    otpPlaceholder: string;
+    forgotPasswordLink: string;
+    socialDivider: string;
+    googleButton: string;
+    githubButton: string;
+    footerSigninPrompt: string;
+    footerSignupPrompt: string;
+    footerForgotPrompt: string;
+    noAuthMethods: string;
+    signInTitle?: string;
+    signUpTitle?: string;
+    signInTab?: string;
+    signUpTab?: string;
+    signInButton?: string;
+    signUpButton?: string;
+}
 interface UrAuthProps {
-    providers?: ('google' | 'github')[];
-    theme?: 'light' | 'dark';
+    providers?: AuthProvider[] | {
+        google?: boolean;
+        github?: boolean;
+        emailPassword?: boolean;
+    };
+    enableEmailPassword?: boolean;
+    theme?: ThemeMode;
+    colors?: Partial<AuthColors>;
+    branding?: AuthBranding;
+    labels?: Partial<AuthLabels>;
     onSuccess?: () => void;
 }
 declare const UrAuth: React.FC<UrAuthProps>;