Cleanup after implementing initial logto funtions.

backend/internal/handlers/logto.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"fmt"
 	"net/http"
 	"os"
 
@@ -44,18 +45,97 @@ func getLogtoConfig() *client.LogtoConfig {
 }
 
 // HomeHandler shows auth state and sign-in/sign-out links
+// Note: The /service/auth endpoint is for debugging purposes only
 func HomeHandler(ctx *gin.Context) {
 	session := sessions.Default(ctx)
 	logtoClient := client.NewLogtoClient(getLogtoConfig(), &SessionStorage{session: session})
-	authState := "You are not logged in to this website. :("
+	
+	var debugInfo string
+	debugInfo = "<h1>Logto Auth Debugging Page</h1>"
+	
+	// Basic auth state
 	if logtoClient.IsAuthenticated() {
-		authState = "You are logged in to this website! :)"
+		debugInfo += "<div style='color: green; font-weight: bold;'>Authentication Status: Logged In ✓</div>"
+		
+		// Get ID Token claims
+		idTokenClaims, err := logtoClient.GetIdTokenClaims()
+		if err != nil {
+			debugInfo += "<div style='color: red;'>Error fetching ID token claims: " + err.Error() + "</div>"
+		} else {
+			debugInfo += "<h2>ID Token Claims</h2>"
+			debugInfo += "<pre style='background-color: #f5f5f5; padding: 10px; overflow: auto; max-height: 400px;'>"
+			
+			// Display claims in a simpler format
+			debugInfo += "<table style='width: 100%; border-collapse: collapse;'>"
+			debugInfo += "<tr><th style='text-align: left; padding: 5px; border-bottom: 1px solid #ddd;'>Claim</th><th style='text-align: left; padding: 5px; border-bottom: 1px solid #ddd;'>Value</th></tr>"
+			
+			// Display the raw claims directly without any checks that might cause linter errors
+			debugInfo += fmt.Sprintf("<tr><td>sub</td><td>%v</td></tr>", idTokenClaims.Sub)
+			debugInfo += fmt.Sprintf("<tr><td>name</td><td>%v</td></tr>", idTokenClaims.Name)
+			debugInfo += fmt.Sprintf("<tr><td>email</td><td>%v</td></tr>", idTokenClaims.Email)
+			debugInfo += fmt.Sprintf("<tr><td>issuer</td><td>%v</td></tr>", idTokenClaims.Iss)
+			debugInfo += fmt.Sprintf("<tr><td>audience</td><td>%v</td></tr>", idTokenClaims.Aud)
+			debugInfo += fmt.Sprintf("<tr><td>expires at</td><td>%v</td></tr>", idTokenClaims.Exp)
+			debugInfo += fmt.Sprintf("<tr><td>issued at</td><td>%v</td></tr>", idTokenClaims.Iat)
+			
+			debugInfo += "</table>"
+			debugInfo += "</pre>"
+		}
+		
+		// Try to get access token info
+		hasAccessToken := false
+		var accessTokenErr error
+		_, accessTokenErr = logtoClient.GetAccessToken("")
+		if accessTokenErr == nil {
+			hasAccessToken = true
+		}
+		
+		debugInfo += "<h2>Access Token Information</h2>"
+		if hasAccessToken {
+			debugInfo += "<div><strong>Access Token:</strong> Present (not displayed for security)</div>"
+		} else {
+			debugInfo += "<div>No resource-specific access token available</div>"
+		}
+		
+		// Session information
+		debugInfo += "<h2>Session Information</h2>"
+		debugInfo += "<pre style='background-color: #f5f5f5; padding: 10px;'>"
+		
+		// Get all keys from the session
+		for _, key := range []string{"idToken", "accessToken", "refreshToken", "expiresAt"} {
+			value := session.Get(key)
+			debugInfo += "<div><strong>" + key + ":</strong> "
+			if value == nil {
+				debugInfo += "Not set"
+			} else if strValue, ok := value.(string); ok {
+				if len(strValue) > 100 {
+					debugInfo += strValue[:100] + "..."
+				} else {
+					debugInfo += strValue
+				}
+			} else {
+				debugInfo += "Set (non-string value)"
+			}
+			debugInfo += "</div>"
+		}
+		debugInfo += "</pre>"
+	} else {
+		debugInfo += "<div style='color: red; font-weight: bold;'>Authentication Status: Not Logged In ✗</div>"
+		debugInfo += "<div>Sign in to see detailed authentication information</div>"
 	}
-	homePage := "<h1>Hello Logto</h1>" +
+	
-		"<div>" + authState + "</div>" +
+	// Config information (excluding secrets)
-		`<div><a href="/service/auth/sign-in">Sign In</a></div>` +
+	debugInfo += "<h2>Logto Configuration</h2>"
-		`<div><a href="/service/auth/sign-out">Sign Out</a></div>`
+	debugInfo += "<div><strong>Endpoint:</strong> " + os.Getenv("LOGTO_ENDPOINT") + "</div>"
-	ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
+	debugInfo += "<div><strong>App ID:</strong> " + os.Getenv("LOGTO_APP_ID") + "</div>"
+	debugInfo += "<div><strong>Redirect URI:</strong> " + os.Getenv("LOGTO_REDIRECT_URI") + "</div>"
+	
+	// Add links for authentication actions
+	debugInfo += "<h2>Authentication Actions</h2>"
+	debugInfo += `<div><a href="/service/auth/sign-in" style="display: inline-block; margin: 10px 0; padding: 8px 16px; background-color: #4285f4; color: white; text-decoration: none; border-radius: 4px;">Sign In</a></div>`
+	debugInfo += `<div><a href="/service/auth/sign-out" style="display: inline-block; margin: 10px 0; padding: 8px 16px; background-color: #f44336; color: white; text-decoration: none; border-radius: 4px;">Sign Out</a></div>`
+	
+	ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(debugInfo))
 }
 
 // SignInHandler starts the Logto sign-in flow

frontend/src/app/components/AuthStatus.tsx

@@ -41,58 +41,6 @@ export default function AuthStatus() {
           </button>
         )}
       </div>
-
-      <style jsx>{`
-        .auth-status {
-          margin: 2rem 0;
-          padding: 1.5rem;
-          border-radius: 8px;
-          background-color: #f8f9fa;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .auth-info {
-          margin-bottom: 1rem;
-        }
-
-        .user-info {
-          margin-top: 0.5rem;
-          padding: 0.75rem;
-          background-color: #e9ecef;
-          border-radius: 4px;
-        }
-
-        .auth-actions {
-          margin-top: 1rem;
-        }
-
-        button {
-          padding: 0.5rem 1rem;
-          border: none;
-          border-radius: 4px;
-          cursor: pointer;
-          font-weight: 500;
-          transition: background-color 0.2s;
-        }
-
-        .login-button {
-          background-color: #4285f4;
-          color: white;
-        }
-
-        .logout-button {
-          background-color: #ea4335;
-          color: white;
-        }
-
-        button:hover {
-          opacity: 0.9;
-        }
-
-        .loading {
-          opacity: 0.7;
-        }
-      `}</style>
     </div>
   );
 }

frontend/src/app/components/HealthStatus.tsx

@@ -51,25 +51,6 @@ export default function HealthStatus() {
           </p>
         </div>
       )}
-      <style jsx>{`
-        .health-status {
-          padding: 1rem;
-          border-radius: 0.5rem;
-          border: 1px solid #eaeaea;
-          margin-top: 1rem;
-        }
-        .status-ok {
-          color: green;
-          font-weight: bold;
-        }
-        .status-error {
-          color: red;
-          font-weight: bold;
-        }
-        .error {
-          color: red;
-        }
-      `}</style>
     </div>
   );
 }

frontend/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/app/page.tsx

@@ -16,33 +16,6 @@ export default function Home() {
         <h2>Backend Health</h2>
         <HealthStatus />
       </section>
-
-      <style jsx>{`
-        .container {
-          max-width: 800px;
-          margin: 0 auto;
-          padding: 2rem;
-        }
-        h1 {
-          margin-bottom: 2rem;
-          color: #333;
-          font-size: 2.5rem;
-          text-align: center;
-        }
-        h2 {
-          color: #555;
-          margin-bottom: 1rem;
-          border-bottom: 1px solid #eee;
-          padding-bottom: 0.5rem;
-        }
-        section {
-          margin-bottom: 2rem;
-          background-color: white;
-          padding: 1rem;
-          border-radius: 8px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        }
-      `}</style>
     </main>
   );
 }