diff --git a/apps/react/src/components/nav-user.controller.ts b/apps/react/src/components/nav-user.controller.ts index 9735a71..05e7384 100644 --- a/apps/react/src/components/nav-user.controller.ts +++ b/apps/react/src/components/nav-user.controller.ts @@ -17,10 +17,6 @@ export class NavUserController extends Controller<{ } } - authorize() { - zitadel.authorize(); - } - signout() { zitadel.signout(); } diff --git a/apps/react/src/components/nav-user.tsx b/apps/react/src/components/nav-user.tsx index 80fefc8..6a8b167 100644 --- a/apps/react/src/components/nav-user.tsx +++ b/apps/react/src/components/nav-user.tsx @@ -18,62 +18,11 @@ import { useController } from "@/libraries/controller.ts"; import { NavUserController } from "./nav-user.controller.ts"; export function NavUser() { - const [{ user }, loading, { authorize, signout }] = useController(NavUserController); + const [{ user }, loading, { signout }] = useController(NavUserController); const { isMobile } = useSidebar(); - - console.log({authorize}) - if (loading === true || user === undefined) { - return ( - - - - - - - - CN - - - Guest - guest@fixture.none - - - - - - - - - - CN - - - Guest - guest@fixture.none - - - - - authorize()}> - - Sign in - - - - - - ); + return null; } - return ( diff --git a/apps/react/src/router.tsx b/apps/react/src/router.tsx index 2e78808..c8e2770 100644 --- a/apps/react/src/router.tsx +++ b/apps/react/src/router.tsx @@ -1,5 +1,6 @@ -import { createRootRoute, createRoute, createRouter } from "@tanstack/react-router"; +import { createRootRoute, createRoute, createRouter, redirect } from "@tanstack/react-router"; +import { zitadel } from "./services/zitadel.ts"; import { AppView } from "./views/app.view.tsx"; import { CallbackView } from "./views/auth/callback.view.tsx"; import { LoginView } from "./views/auth/login.view.tsx"; @@ -22,6 +23,15 @@ const login = createRoute({ const app = createRoute({ id: "app", getParentRoute: () => root, + beforeLoad: async () => { + const user = await zitadel.userManager.getUser(); + if (user === null) { + throw redirect({ to: "/login" }); + } + if (user.expired === true) { + throw redirect({ to: "/login" }); + } + }, component: AppView, }); diff --git a/apps/react/src/services/zitadel.ts b/apps/react/src/services/zitadel.ts index 50abd02..647b2b8 100644 --- a/apps/react/src/services/zitadel.ts +++ b/apps/react/src/services/zitadel.ts @@ -2,7 +2,7 @@ import { createZitadelAuth, type ZitadelConfig } from "@zitadel/react"; const config: ZitadelConfig = { authority: "https://auth.valkyrjs.com", - client_id: "347982179092987909", + client_id: "348172463709945862", redirect_uri: "http://localhost:5173/callback", post_logout_redirect_uri: "http://localhost:5173", response_type: "code", diff --git a/apps/react/src/views/app.controller.ts b/apps/react/src/views/app.controller.ts deleted file mode 100644 index 12fc82a..0000000 --- a/apps/react/src/views/app.controller.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Controller } from "../libraries/controller.ts"; -import { router } from "../router.tsx"; -import { zitadel } from "../services/zitadel.ts"; - -export class AppController extends Controller<{ - authenticated: boolean; -}> { - async onInit() { - return { - authenticated: await this.#getAuthenticatedState(), - }; - } - - async #getAuthenticatedState(): Promise { - const user = await zitadel.userManager.getUser(); - if (user === null) { - router.navigate({ to: "/login" }); - return false; - } - return true; - } - - signout() { - zitadel.signout(); - } -} diff --git a/apps/react/src/views/app.view.tsx b/apps/react/src/views/app.view.tsx index 8b83ee8..7bb352f 100644 --- a/apps/react/src/views/app.view.tsx +++ b/apps/react/src/views/app.view.tsx @@ -3,18 +3,8 @@ import { Outlet } from "@tanstack/react-router"; import { AppSidebar } from "@/components/app-sidebar.tsx"; import { SiteHeader } from "@/components/site-header.tsx"; import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar.tsx"; -import { useController } from "@/libraries/controller.ts"; - -import { AppController } from "./app.controller.ts"; export function AppView() { - const [{ authenticated }, loading] = useController(AppController); - if (loading === true) { - return Loading ...; - } - if (authenticated === false) { - return Unauthenticated; - } return ( Promise } & React.ComponentProps<"div">) { +export function LoginForm({ className, ...props }: React.ComponentProps<"div">) { return ( { e.preventDefault(); - const email = e.currentTarget.elements.namedItem("email"); - if (email instanceof HTMLInputElement) { - passkey(email.value); - } + zitadel.authorize(); }} > @@ -35,11 +28,7 @@ export function LoginForm({ - Email - - - - Login + Login with Zitadel Or diff --git a/apps/react/src/views/auth/login.controller.ts b/apps/react/src/views/auth/login.controller.ts deleted file mode 100644 index e9ebedd..0000000 --- a/apps/react/src/views/auth/login.controller.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Controller } from "../../libraries/controller.ts"; - -export class LoginController extends Controller { - async passkey(email: string) { - const result = await fetch("https://auth.valkyrjs.com/v2/sessions", { - method: "POST", - headers: { - "content-type": "application/json", - }, - body: JSON.stringify({ - checks: { - user: { - loginName: email, - }, - }, - challenges: { - webAuthN: { - domain: "auth.valkyrjs.com", - userVerificationRequirement: "USER_VERIFICATION_REQUIREMENT_REQUIRED", - }, - }, - }), - }); - - console.log(await result.text()); - } -} diff --git a/apps/react/src/views/auth/login.view.tsx b/apps/react/src/views/auth/login.view.tsx index 2abd2c2..a9d9508 100644 --- a/apps/react/src/views/auth/login.view.tsx +++ b/apps/react/src/views/auth/login.view.tsx @@ -1,13 +1,10 @@ -import { useController } from "../../libraries/controller.ts"; import { LoginForm } from "./components/login-form.tsx"; -import { LoginController } from "./login.controller.ts"; export function LoginView() { - const [, , { passkey }] = useController(LoginController); return ( - + );