Cookie based auth review.

Hi all!
I just wanted to confirm if my "solution" works fines, break no rules etc. as it's really important for me. I don't want to make mistake that will cost me a lot in the future. If anyone like, please tell me if my approach is legit, alternatively leave your suggestions please! I'll be grateful.
main.tsx:

const queryClient = new QueryClient();

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: { queryClient: undefined! },
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ queryClient }} />
    </QueryClientProvider>
  );
}

const queryClient = new QueryClient();

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: { queryClient: undefined! },
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ queryClient }} />
    </QueryClientProvider>
  );
}

routes/login/index.tsx:

export const Route = createFileRoute("/login/")({
  component: LoginComponent,
  beforeLoad: async ({ context }) => {
    try {
      const data = await context.queryClient.ensureQueryData({
        queryKey: ["user"],
        queryFn: getUser,
        staleTime: Infinity,
      });
      console.log("data:", data);
      if (data) {
        throw redirect({
          to: "/dashboard",
        });
      }
    } catch (e) {
      if (e?.isRedirect) {
        throw redirect({
          to: "/dashboard",
        });
      }
    }
  },
});

function LoginComponent() {
  const navigate = Route.useNavigate();
  const { loginMutation } = useLogin();

  const loginUser = async () => {
    loginMutation(
      { email: "foo", password: "bar" },
      {
        onSuccess: async () => {
          await navigate({ to: "/dashboard" });
        },
      }
    );
  };

  return (
    <div className="p-2 grid gap-2 place-items-center">
      login page
      <button onClick={loginUser}>LOGIN USER</button>
    </div>
  );
}

export const Route = createFileRoute("/login/")({
  component: LoginComponent,
  beforeLoad: async ({ context }) => {
    try {
      const data = await context.queryClient.ensureQueryData({
        queryKey: ["user"],
        queryFn: getUser,
        staleTime: Infinity,
      });
      console.log("data:", data);
      if (data) {
        throw redirect({
          to: "/dashboard",
        });
      }
    } catch (e) {
      if (e?.isRedirect) {
        throw redirect({
          to: "/dashboard",
        });
      }
    }
  },
});

function LoginComponent() {
  const navigate = Route.useNavigate();
  const { loginMutation } = useLogin();

  const loginUser = async () => {
    loginMutation(
      { email: "foo", password: "bar" },
      {
        onSuccess: async () => {
          await navigate({ to: "/dashboard" });
        },
      }
    );
  };

  return (
    <div className="p-2 grid gap-2 place-items-center">
      login page
      <button onClick={loginUser}>LOGIN USER</button>
    </div>
  );
}

TanStack•13mo ago•

1 reply

scornful-crimson

Cookie based auth review.

const queryClient = new QueryClient();

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: { queryClient: undefined! },
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ queryClient }} />
    </QueryClientProvider>
  );
}

const queryClient = new QueryClient();

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: { queryClient: undefined! },
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} context={{ queryClient }} />
    </QueryClientProvider>
  );
}

routes/login/index.tsx:

export const Route = createFileRoute("/login/")({
  component: LoginComponent,
  beforeLoad: async ({ context }) => {
    try {
      const data = await context.queryClient.ensureQueryData({
        queryKey: ["user"],
        queryFn: getUser,
        staleTime: Infinity,
      });
      console.log("data:", data);
      if (data) {
        throw redirect({
          to: "/dashboard",
        });
      }
    } catch (e) {
      if (e?.isRedirect) {
        throw redirect({
          to: "/dashboard",
        });
      }
    }
  },
});

function LoginComponent() {
  const navigate = Route.useNavigate();
  const { loginMutation } = useLogin();

  const loginUser = async () => {
    loginMutation(
      { email: "foo", password: "bar" },
      {
        onSuccess: async () => {
          await navigate({ to: "/dashboard" });
        },
      }
    );
  };

  return (
    <div className="p-2 grid gap-2 place-items-center">
      login page
      <button onClick={loginUser}>LOGIN USER</button>
    </div>
  );
}

export const Route = createFileRoute("/login/")({
  component: LoginComponent,
  beforeLoad: async ({ context }) => {
    try {
      const data = await context.queryClient.ensureQueryData({
        queryKey: ["user"],
        queryFn: getUser,
        staleTime: Infinity,
      });
      console.log("data:", data);
      if (data) {
        throw redirect({
          to: "/dashboard",
        });
      }
    } catch (e) {
      if (e?.isRedirect) {
        throw redirect({
          to: "/dashboard",
        });
      }
    }
  },
});

function LoginComponent() {
  const navigate = Route.useNavigate();
  const { loginMutation } = useLogin();

  const loginUser = async () => {
    loginMutation(
      { email: "foo", password: "bar" },
      {
        onSuccess: async () => {
          await navigate({ to: "/dashboard" });
        },
      }
    );
  };

  return (
    <div className="p-2 grid gap-2 place-items-center">
      login page
      <button onClick={loginUser}>LOGIN USER</button>
    </div>
  );
}

Cookie based auth review.

Similar Threads

Cookie based auth review.

Similar Threads

Similar Threads

Similar Threads