Merge pull request #15 from ElfenB:fix-auth-for-web

fix: user profile display and auth methods
ElfenB · Mar 10, 2024 · f90604b · f90604b
2 parents ad8b4ab + 8413baa
commit f90604b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -21,8 +21,8 @@ import { Chats } from "./pages/Chats";
 import { Login } from "./pages/Login";
 import { OfferDetails } from "./pages/OfferDetails";
 import { Overview } from "./pages/Overview";
-
 import { Personal } from "./pages/Personal";
+
 import { Settings } from "./pages/Settings";
 /* Theme variables */
 import "./theme/variables.css";

diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
@@ -55,7 +55,8 @@ export function UserProfile() {
             return (
               <IonItem key={d}>
                 <IonLabel>
-                  {d}: {user[d]}
+                  {/* Stringify to also show boolean values */}
+                  {d}: {JSON.stringify(user[d]).replace(/"/g, "")}
                 </IonLabel>
               </IonItem>
             );

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -6,7 +6,7 @@ import { isNative } from "../utils/isNative";
 
 export function Login() {
   const { t } = useTranslation();
-  const { loginWithRedirect } = useAuth0();
+  const { loginWithPopup, loginWithRedirect } = useAuth0();
 
   const handleLogin = async () => {
     await loginWithRedirect({
@@ -31,7 +31,7 @@ export function Login() {
       <IonContent>
         <h3>{t("welcomemessage")}</h3>
 
-        <IonButton onClick={isNative ? handleLogin : () => loginWithRedirect()}>{t("label.login")}</IonButton>
+        <IonButton onClick={isNative ? handleLogin : () => loginWithPopup()}>{t("label.login")}</IonButton>
       </IonContent>
     </IonPage>
   );

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
@@ -4,6 +4,7 @@ import { IonButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToo
 import { useTranslation } from "react-i18next";
 import { BackButton } from "../components/BackButton";
 import { UserProfile } from "../components/UserProfile";
+import { isNative } from "../utils/isNative";
 
 // This should reflect the URL added earlier to your "Allowed Logout URLs" setting
 // in the Auth0 dashboard.
@@ -41,7 +42,7 @@ export function Settings() {
           <IonTitle>{t("label.settings")}</IonTitle>
 
           <IonButtons slot="end">
-            <IonButton color="danger" onClick={handleLogout}>
+            <IonButton color="danger" onClick={isNative ? handleLogout : () => logout()}>
               {t("label.logout")}
             </IonButton>
           </IonButtons>