use devise instead auth0

app/javascript/src/components/Navbar.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { useAuth0 } from "@auth0/auth0-react";
-
-import XStakeLogo from "../images/logo.png";
-import { useAppContext } from "../contexts/AppContext";
-
-export const Navbar = () => {
-  const { setSideNavExpanded } = useAppContext();
-
-  const handleExpandSideNav = () => {
-    setSideNavExpanded((prevState) => !prevState);
-  };
-
-  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();
-
-  return (
-    <nav className="fixed w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
-      <button
-        className="w-10 h-10 xl:hidden"
-        onClick={() => handleExpandSideNav()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-full w-full"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 6h16M4 12h16M4 18h16"
-          />
-        </svg>
-      </button>
-      <img
-        src={XStakeLogo}
-        alt="XStake Logo"
-        width={64}
-        placeholder="blurred"
-      />
-      <h1 className="text-2xl font-bold">XStake</h1>
-      <div className="w-full h-full flex items-center justify-end">
-        {isAuthenticated ? (
-          <button
-            className="cursor-pointer hover:bg-gray-100 h-full px-4 font-bold"
-            onClick={() => logout({ returnTo: window.location.origin })}
-          >
-            Sair
-          </button>
-        ) : (
-          <button
-            className="cursor-pointer hover:bg-gray-100 h-full px-4 font-bold"
-            onClick={loginWithRedirect}
-          >
-            Entrar
-          </button>
-        )}
-      </div>
-    </nav>
-  );
-};

app/javascript/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import XStakeLogo from "../../images/logo.png";
+import { useApp } from "../../contexts/AppProvider";
+import { useCurrentUser } from "../../contexts/UserProvider";
+
+const linkStyles =
+  "cursor-pointer hover:bg-gray-100 h-full px-4 font-bold flex items-center";
+
+export const Navbar = () => {
+  const { setSideNavExpanded } = useApp();
+  const handleExpandSideNav = () => {
+    setSideNavExpanded((prevState) => !prevState);
+  };
+
+  const { isAuthenticated } = useCurrentUser();
+
+  const csrfToken =
+    document
+      .querySelector('meta[name="csrf-token"]')
+      ?.getAttribute("content") ?? "";
+
+  return (
+    <nav className="fixed w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
+      <button
+        className="w-10 h-10 xl:hidden"
+        onClick={() => handleExpandSideNav()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-full w-full"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+      <img
+        src={XStakeLogo}
+        alt="XStake Logo"
+        width={64}
+        placeholder="blurred"
+      />
+      <h1 className="text-2xl font-bold">XStake</h1>
+      <div className="w-full h-full flex items-center justify-end">
+        {isAuthenticated ? (
+          <form className="h-full" method="post" action="/users/sign_out">
+            <input className={linkStyles} type="submit" value="Sair" />
+            <input
+              type="hidden"
+              name="authenticity_token"
+              defaultValue={csrfToken}
+            />
+            <input type="hidden" name="_method" value="delete" />
+          </form>
+        ) : (
+          <form className="h-full" method="post" action="/users/sign_in">
+            <input className={linkStyles} type="submit" value="Entrar" />
+            <input
+              type="hidden"
+              name="authenticity_token"
+              defaultValue={csrfToken}
+            />
+          </form>
+        )}
+      </div>
+    </nav>
+  );
+};

app/javascript/src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export * from "./Navbar";

app/javascript/src/components/SideNav.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import cx from "classnames";
 import { Link } from "react-router-dom";
 
-import { useAppContext } from "../contexts/AppContext";
+import { useApp } from "../contexts/AppProvider";
 
 type MenuItem = {
   label: string;
@@ -25,7 +25,7 @@ const MenuItems: MenuItem[] = [
 ];
 
 export const SideNav = () => {
-  const { sideNavExpanded, setSideNavExpanded } = useAppContext();
+  const { sideNavExpanded, setSideNavExpanded } = useApp();
 
   const handleCloseSideNav = () => {
     setSideNavExpanded(false);

app/javascript/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./Navbar";
+export * from "./SideNav";