MaveriX89 Comments - Answer Overflow

MaveriX89

Explore posts from servers

•Created by MaveriX89 on 1/22/2025 in #support

Exception thrown when invoking useNavigate within Router root layout

Just adding more additional context here. The NavbarLink components are just <A> elements from @solidjs/router wrapped under <li> tags. And for reference, here is my Login.tsx:

import { action, createAsync, redirect, useNavigate, useSubmission } from "@solidjs/router";
import { createEffect, Show } from "solid-js";

import { Button } from "~/components/ui/button";
import { TextField, TextFieldInput, TextFieldLabel } from "~/components/ui/text-field";

import Logo from "../assets/logo_login.svg";
import { authClient } from "../lib/auth-client";
import { getAuthState } from "../lib/queries";
import { convertToRecord, isNil } from "../lib/utils";

type SignInForm = {
  readonly username: string;
  readonly password: string;
};

const authenticate = action(async (data: FormData) => {
  const response = await authClient.signIn.username(convertToRecord<SignInForm>(data));

  if (response.error) throw new Error(response.error.message);

  throw redirect("/dashboard");
});

export default function SignIn() {
  const navigate = useNavigate();
  const auth = createAsync(() => getAuthState());
  const authenticating = useSubmission(authenticate);

  createEffect(() => {
    if (!isNil(auth())) {
      navigate("/dashboard");
    }
  });

  return (
    <div class="h-full flex flex-col items-center justify-center gap-6">
      <img src={Logo} width="200" />
      <form action={authenticate} method="post" class="flex flex-col gap-6 w-[300px]">
        <TextField>
          <TextFieldLabel class="mb-2">Username</TextFieldLabel>
          <TextFieldInput name="username" autocomplete="username" />
        </TextField>
        <TextField>
          <TextFieldLabel class="mb-2">Password</TextFieldLabel>
          <TextFieldInput name="password" type="password" autocomplete="current-password" />
        </TextField>
        <Button class="button" type="submit" disabled={authenticating.pending}>
          {authenticating.pending ? "Authenticating..." : "Sign In"}
        </Button>
      </form>
      <Show when={authenticating.error}>
        <p style={{ color: "red" }} role="alert" id="error-message">
          {authenticating.error?.message}
        </p>
      </Show>
    </div>
  );
}

import { action, createAsync, redirect, useNavigate, useSubmission } from "@solidjs/router";
import { createEffect, Show } from "solid-js";

import { Button } from "~/components/ui/button";
import { TextField, TextFieldInput, TextFieldLabel } from "~/components/ui/text-field";

import Logo from "../assets/logo_login.svg";
import { authClient } from "../lib/auth-client";
import { getAuthState } from "../lib/queries";
import { convertToRecord, isNil } from "../lib/utils";

type SignInForm = {
  readonly username: string;
  readonly password: string;
};

const authenticate = action(async (data: FormData) => {
  const response = await authClient.signIn.username(convertToRecord<SignInForm>(data));

  if (response.error) throw new Error(response.error.message);

  throw redirect("/dashboard");
});

export default function SignIn() {
  const navigate = useNavigate();
  const auth = createAsync(() => getAuthState());
  const authenticating = useSubmission(authenticate);

  createEffect(() => {
    if (!isNil(auth())) {
      navigate("/dashboard");
    }
  });

  return (
    <div class="h-full flex flex-col items-center justify-center gap-6">
      <img src={Logo} width="200" />
      <form action={authenticate} method="post" class="flex flex-col gap-6 w-[300px]">
        <TextField>
          <TextFieldLabel class="mb-2">Username</TextFieldLabel>
          <TextFieldInput name="username" autocomplete="username" />
        </TextField>
        <TextField>
          <TextFieldLabel class="mb-2">Password</TextFieldLabel>
          <TextFieldInput name="password" type="password" autocomplete="current-password" />
        </TextField>
        <Button class="button" type="submit" disabled={authenticating.pending}>
          {authenticating.pending ? "Authenticating..." : "Sign In"}
        </Button>
      </form>
      <Show when={authenticating.error}>
        <p style={{ color: "red" }} role="alert" id="error-message">
          {authenticating.error?.message}
        </p>
      </Show>
    </div>
  );
}

I make heavy use of the getAuthState query which you can see here:

import { query } from "@solidjs/router";

import { authClient } from "./auth-client";
import { isNil } from "./utils";

export const getAuthState = query(async () => {
  const session = await authClient.getSession();

  return isNil(session) || isNil(session.data)
    ? null
    : {
        user: session.data.user,
        session: session.data.session,
        error: session.error,
      };
}, "authState");

import { query } from "@solidjs/router";

import { authClient } from "./auth-client";
import { isNil } from "./utils";

export const getAuthState = query(async () => {
  const session = await authClient.getSession();

  return isNil(session) || isNil(session.data)
    ? null
    : {
        user: session.data.user,
        session: session.data.session,
        error: session.error,
      };
}, "authState");

From the looks of it, I do see the url change in my app showing that it went to /login -- however, everytime it does, the <ErrorBoundary> fallback component kicks in and displays instead of the Login page I defined above due to that thrown exception.

2 replies

Gaming

Programming