Implement clean OAuth login with gr.LoginButton and improve UI design

- Add hf_oauth: true to README.md for HuggingFace Spaces OAuth integration
- Replace custom token input with official gr.LoginButton for seamless authentication
- Remove cluttered UI elements: instructions dropdown, unnecessary labels, tab bar when logged out
- Hide tabs until user is authenticated, show clean login screen first
- Implement OAuth flow with proper user creation and session management
- Extract user info from OAuth request context (preferred_username, sub, email, etc.)
- Maintain backward compatibility with existing user database structure
- Clean, minimal login interface that matches modern OAuth patterns

This provides a much cleaner, professional authentication experience.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

README.md

@@ -8,6 +8,7 @@ app_port: 7860
 pinned: false
 license: mit
 short_description: AI-powered digital pet inspired by Digimon World 1
+hf_oauth: true
 ---
 
 # 🥚 DigiPal - Your AI Digital Pet

digipal/ui/gradio_interface.py

@@ -65,12 +65,12 @@ class GradioInterface:
             user_state = gr.State(None)
             token_state = gr.State(None)
             
-            # Main interface tabs with proper tab switching
-            with gr.Tabs(selected="auth_tab") as main_tabs:
-                
-                # Authentication Tab
-                with gr.Tab("Login", id="auth_tab") as auth_tab:
-                    auth_components = self._create_authentication_tab()
+            # Authentication Interface (visible by default)
+            with gr.Column(visible=True) as auth_container:
+                auth_components = self._create_authentication_tab()
+            
+            # Main interface tabs (hidden until login)
+            with gr.Tabs(selected="egg_tab", visible=False) as main_tabs:
                 
                 # Egg Selection Tab
                 with gr.Tab("Choose Your Egg", id="egg_tab") as egg_tab:
@@ -83,7 +83,7 @@ class GradioInterface:
             # Event handlers
             self._setup_event_handlers(
                 auth_components, egg_components, main_components,
-                user_state, token_state, main_tabs
+                user_state, token_state, main_tabs, auth_container
             )
         
         self.app = interface
@@ -104,19 +104,10 @@ class GradioInterface:
                 with gr.Column(scale=1):
                     pass  # Empty column for centering
                 
-                with gr.Column(scale=2, elem_classes=["auth-form"]):
-                    gr.HTML("<h3>Login with HuggingFace</h3>")
-                    
-                    token_input = gr.Textbox(
-                        label="HuggingFace Token",
-                        placeholder="Enter your HuggingFace token...",
-                        type="password",
-                        elem_classes=["token-input"]
-                    )
-                    
-                    login_btn = gr.Button(
-                        "Login",
-                        variant="primary",
+                with gr.Column(scale=2, elem_classes=["auth-form"]):                    
+                    login_btn = gr.LoginButton(
+                        value="Sign in with HuggingFace",
+                        size="lg",
                         elem_classes=["login-btn"]
                     )
                     
@@ -128,24 +119,8 @@ class GradioInterface:
                 with gr.Column(scale=1):
                     pass  # Empty column for centering
             
-            # Instructions
-            gr.HTML("""
-                <details class="instructions-details">
-                    <summary>How to get a HuggingFace Token</summary>
-                    <div class="instructions">
-                        <ol>
-                            <li>Go to <a href="https://huggingface.co/settings/tokens" target="_blank">HuggingFace Tokens</a></li>
-                            <li>Click "New token"</li>
-                            <li>Give it a name like "DigiPal"</li>
-                            <li>Select "Read" permissions</li>
-                            <li>Copy the token and paste it above</li>
-                        </ol>
-                    </div>
-                </details>
-            """)
         
         return {
-            'token_input': token_input,
             'login_btn': login_btn,
             'auth_status': auth_status
         }
@@ -414,14 +389,13 @@ class GradioInterface:
     
     def _setup_event_handlers(self, auth_components: Dict, egg_components: Dict, 
                             main_components: Dict, user_state: gr.State, 
-                            token_state: gr.State, main_tabs: gr.Tabs):
+                            token_state: gr.State, main_tabs: gr.Tabs, auth_container: gr.Column):
         """Set up event handlers for all interface components."""
         
         # Authentication handlers
         auth_components['login_btn'].click(
-            fn=self._handle_login,
+            fn=self._handle_oauth_login,
             inputs=[
-                auth_components['token_input'],
                 user_state,
                 token_state
             ],
@@ -429,7 +403,8 @@ class GradioInterface:
                 auth_components['auth_status'],
                 user_state,
                 token_state,
-                main_tabs
+                main_tabs,
+                auth_container
             ]
         )
         
@@ -591,6 +566,133 @@ class GradioInterface:
             outputs=[main_components['status_info']]
         )
     
+    def _handle_oauth_login(self, current_user: Optional[str], current_token: Optional[str]) -> Tuple:
+        """Handle OAuth login with HuggingFace."""
+        try:
+            # Check if user is authenticated via OAuth
+            request = gr.request()
+            if hasattr(request, 'user') and request.user:
+                # User is authenticated via OAuth
+                user_info = request.user
+                
+                # Extract username from OAuth info
+                username = user_info.get('preferred_username', user_info.get('name', 'Unknown'))
+                user_id = user_info.get('sub', username)
+                
+                # Create or update user in database
+                auth_result = self._create_oauth_user(user_id, username, user_info)
+                
+                if auth_result and auth_result.status == AuthStatus.SUCCESS:
+                    self.current_user_id = auth_result.user.id
+                    
+                    # Check if user has existing DigiPal
+                    existing_pet = self.digipal_core.load_existing_pet(auth_result.user.id)
+                    
+                    if existing_pet:
+                        # User has existing pet, go to main interface
+                        status_msg = f'<div class="success">Welcome back, {auth_result.user.username}!</div>'
+                        
+                        return (
+                            status_msg,
+                            auth_result.user.id,
+                            "oauth_authenticated",
+                            gr.update(selected="main_tab", visible=True),  # Show main tabs
+                            gr.update(visible=False)  # Hide auth container
+                        )
+                    else:
+                        # New user, go to egg selection
+                        status_msg = f'<div class="success">Welcome, {auth_result.user.username}! Choose your first egg.</div>'
+                        
+                        return (
+                            status_msg,
+                            auth_result.user.id,
+                            "oauth_authenticated",
+                            gr.update(selected="egg_tab", visible=True),  # Show tabs with egg selection
+                            gr.update(visible=False)  # Hide auth container
+                        )
+                else:
+                    return (
+                        '<div class="error">Failed to create user account</div>',
+                        current_user,
+                        current_token,
+                        gr.update(visible=False),  # Keep main tabs hidden
+                        gr.update(visible=True)   # Keep auth container visible
+                    )
+            else:
+                # User not authenticated, show login prompt
+                return (
+                    '<div class="info">Please sign in with your HuggingFace account</div>',
+                    current_user,
+                    current_token,
+                    gr.update(visible=False),  # Keep main tabs hidden
+                    gr.update(visible=True)   # Keep auth container visible
+                )
+                
+        except Exception as e:
+            logger.error(f"OAuth authentication error: {e}")
+            return (
+                '<div class="error">Authentication failed. Please try again.</div>',
+                current_user,
+                current_token,
+                gr.update(visible=False),  # Keep main tabs hidden
+                gr.update(visible=True)   # Keep auth container visible
+            )
+    
+    def _create_oauth_user(self, user_id: str, username: str, oauth_info: Dict) -> Optional[AuthResult]:
+        """Create or update user from OAuth information."""
+        try:
+            from ..auth.models import User, AuthResult, AuthStatus
+            from datetime import datetime
+            
+            # Extract user data from OAuth info
+            email = oauth_info.get('email')
+            full_name = oauth_info.get('name', username)
+            avatar_url = oauth_info.get('picture')
+            
+            # Check if user exists
+            existing_user = self.auth_manager.get_user(user_id)
+            now = datetime.now()
+            
+            if existing_user:
+                # Update existing user
+                existing_user.username = username
+                existing_user.last_login = now
+                user = existing_user
+            else:
+                # Create new user
+                user = User(
+                    id=user_id,
+                    username=username,
+                    email=email,
+                    full_name=full_name,
+                    avatar_url=avatar_url,
+                    created_at=now,
+                    last_login=now
+                )
+            
+            # Save to database
+            self.auth_manager.db.execute_update(
+                '''INSERT OR REPLACE INTO users 
+                   (id, username, huggingface_token, created_at, last_login) 
+                   VALUES (?, ?, ?, ?, ?)''',
+                (user.id, user.username, "oauth_authenticated", 
+                 user.created_at.isoformat(), user.last_login.isoformat())
+            )
+            
+            # Create session
+            session = self.auth_manager.session_manager.create_session(user, "oauth_authenticated")
+            
+            logger.info(f"OAuth user created/updated: {username}")
+            return AuthResult(
+                status=AuthStatus.SUCCESS,
+                user=user,
+                session=session
+            )
+            
+        except Exception as e:
+            logger.error(f"Error creating OAuth user: {e}")
+            return None
+
     def _handle_login(self, token: str, current_user: Optional[str], current_token: Optional[str]) -> Tuple:
         """Handle user login with HuggingFace authentication."""
         if not token or not token.strip():
@@ -598,7 +700,8 @@ class GradioInterface:
                 '<div class="error">Please enter a valid HuggingFace token</div>',
                 current_user,
                 current_token,
-                gr.update(selected="auth_tab")  # Stay on auth tab
+                gr.update(visible=False),  # Keep main tabs hidden
+                gr.update(visible=True)   # Keep auth container visible
             )
         
         # Authenticate user using official HuggingFace Hub methods
@@ -619,7 +722,8 @@ class GradioInterface:
                     status_msg,
                     auth_result.user.id,
                     token.strip(),
-                    gr.update(selected="main_tab")  # Go to main tab
+                    gr.update(selected="main_tab", visible=True),  # Show main tabs
+                    gr.update(visible=False)  # Hide auth container
                 )
             else:
                 # New user, go to egg selection
@@ -629,7 +733,8 @@ class GradioInterface:
                     status_msg,
                     auth_result.user.id,
                     token.strip(),
-                    gr.update(selected="egg_tab")  # Go to egg tab
+                    gr.update(selected="egg_tab", visible=True),  # Show tabs with egg selection
+                    gr.update(visible=False)  # Hide auth container
                 )
         else:
             error_msg = f'<div class="error">Login failed: {auth_result.error_message}</div>'
@@ -637,7 +742,8 @@ class GradioInterface:
                 error_msg,
                 current_user,
                 current_token,
-                gr.update(selected="auth_tab")  # Stay on auth tab
+                gr.update(visible=False),  # Keep main tabs hidden
+                gr.update(visible=True)   # Keep auth container visible
             )
     
     def _handle_egg_selection(self, egg_type: EggType, user_id: Optional[str]) -> Tuple: