SolidJS•6mo ago

Return error when try to setting session

when i trying to set SolidStart Session with firestore databse is returning Cannot access "node:async_hooks.AsyncLocalStorage" in client code. and not show pop up google login with firebase.

onMount(async () => {
    "use server";
    const sessionUser = await getUser();
    if (sessionUser) {
      setUser(sessionUser);
      console.log(sessionUser)
    } else {
      const local = localStorage.getItem("users");
      if (local) {
        try {
          const userData: UserData = JSON.parse(local);
          if (userData && typeof userData === "object") {
            setUser(userData);
          }
        } catch (error) {
          console.error("Error parsing user data from localStorage:", error);
        }
      }
    }
  });

onMount(async () => {
    "use server";
    const sessionUser = await getUser();
    if (sessionUser) {
      setUser(sessionUser);
      console.log(sessionUser)
    } else {
      const local = localStorage.getItem("users");
      if (local) {
        try {
          const userData: UserData = JSON.parse(local);
          if (userData && typeof userData === "object") {
            setUser(userData);
          }
        } catch (error) {
          console.error("Error parsing user data from localStorage:", error);
        }
      }
    }
  });

when

"use server";
    const sessionUser = await getUser();
    if (sessionUser) {
      setUser(sessionUser);
      console.log(sessionUser)

"use server";
    const sessionUser = await getUser();
    if (sessionUser) {
      setUser(sessionUser);
      console.log(sessionUser)

isn't apply the code still working and not return error. session.ts

export async function getUser(): Promise<UserData | null> {
  "use server";
  const session = await useSession({
    password: import.meta.env.VITE_SESSION_SECRET
  });
  const id = session.data.id;
  if (!id) return null;

  try {
    const userDoc = await getDoc(doc(db, "users", id));
    if (userDoc.exists()) {
      return userDoc.data() as UserData;
    } else {
      console.error("No such user!");
      return null;
    }
  } catch (error) {
    console.error("Error getting user:", error);
    return null;
  }
}

export async function getUser(): Promise<UserData | null> {
  "use server";
  const session = await useSession({
    password: import.meta.env.VITE_SESSION_SECRET
  });
  const id = session.data.id;
  if (!id) return null;

  try {
    const userDoc = await getDoc(doc(db, "users", id));
    if (userDoc.exists()) {
      return userDoc.data() as UserData;
    } else {
      console.error("No such user!");
      return null;
    }
  } catch (error) {
    console.error("Error getting user:", error);
    return null;
  }
}

3 Replies

peerreynders•6mo ago

There are quite a number of mismatches (e.g. 'use server' in onMount, accessing localStorage on the server) here but given that you are using Firebase perhaps have a look at this first: - article - repo. The general (non-firebase) approach is captured within the with-auth example Sometimes you have to be careful how you partition your modules in order to avoid pulling in server code into the client. https://discord.com/channels/722131463138705510/1249053112925425664/1249442503262736464

MDN Web Docs

Window: localStorage property - Web APIs | MDN

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

SolidJS Todo App with Firebase - Code.Build 💻

I figured SolidJS would be just like React, but it’s not. It’s way better. I had a few learning curves but got my app up and

GitHub

solid-start/examples/with-auth/src/lib/index.ts at 678d9acbc0bb669f...

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

Brendonovich•6mo ago

fwiw there's nothing inherently wrong with "use server" in onMount, you just have to be careful

peerreynders•6mo ago

just have to be careful.

Putting technical feasibility aside … I would expect

onMount(async () => {
  'use server'
  // …
});

onMount(async () => {
  'use server'
  // …
});

to raise a red flag during code review. Given how often support questions regarding server code being pulled into the client crop up, it seems prudent to make the bundler's life as easy as possible when it comes to separating server and client code. The other issue is not aligning with product architecture and intent. onMount() exist to service the needs of the component instance. Here we are dealing with an application level 'use server' that should really be accessible either via cache distribution or context.

Gaming

Programming

Return error when try to setting session