SolidJS•5mo ago

context provider's values are not being updating after useContext gets user session info.

I am trying to use a context provider to be able to easily call my users data from any of the pages/routes. Originally, when I would try to read the data from my useAuth.user it would return "undefined" which lead me to adding a default value in AuthContextData. Now it inly shows the default data and it does not update the user or isLoading. I do not know what I am doing wrong,

const defaultAuthContextValue: AuthContextData = {
  user: () => {
    return null;
},
  isLoading: () => true, 
};
const AuthContext = createContext<AuthContextData>(defaultAuthContextValue);
export const AuthProvider: Component<{ children: JSX.Element }> = (props) => {
  const [user, setUser] = createSignal<Models.User<Models.Preferences> | null>(
    null
  );
  const [isLoading, setIsLoading] = createSignal(true);
  onMount(async () => {
    try {
      const session = await account.getSession("current");
      if (session) {
        const currentUser = await account.get();
        console.log("🚀 ~ onMount ~ currentUser:", currentUser);

        setUser(currentUser);
      }
    } catch (error) {
      console.log("No active session found");
    } finally {
      setIsLoading(false); // Set loading to false when done
    }
  });
  return (
    <AuthContext.Provider
      value={{
        user,
        isLoading,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

const defaultAuthContextValue: AuthContextData = {
  user: () => {
    return null;
},
  isLoading: () => true, 
};
const AuthContext = createContext<AuthContextData>(defaultAuthContextValue);
export const AuthProvider: Component<{ children: JSX.Element }> = (props) => {
  const [user, setUser] = createSignal<Models.User<Models.Preferences> | null>(
    null
  );
  const [isLoading, setIsLoading] = createSignal(true);
  onMount(async () => {
    try {
      const session = await account.getSession("current");
      if (session) {
        const currentUser = await account.get();
        console.log("🚀 ~ onMount ~ currentUser:", currentUser);

        setUser(currentUser);
      }
    } catch (error) {
      console.log("No active session found");
    } finally {
      setIsLoading(false); // Set loading to false when done
    }
  });
  return (
    <AuthContext.Provider
      value={{
        user,
        isLoading,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

testing in the login page

const Login: Component<{}> = (props) => {
  let user = useAuth.user;
  let isLoading = useAuth.isLoading;

const Login: Component<{}> = (props) => {
  let user = useAuth.user;
  let isLoading = useAuth.isLoading;

Routes:

<Route>
        <AuthProvider>
            <Route path="/login" component={Login} />
            <Route path="/other" component={other} />
        </AuthProvider>
      </Route>

<Route>
        <AuthProvider>
            <Route path="/login" component={Login} />
            <Route path="/other" component={other} />
        </AuthProvider>
      </Route>

2 Replies

Madaxen86•5mo ago

Looks very “React-like” 😁 Have a look at createResource. This will remove 90% of your code as it automatically gives you the fetching state: https://docs.solidjs.com/reference/basic-reactivity/create-resource Or have a look at the with-auth example of solid-start. You do not need a Context but can use createAsync with cache, have an encrypted, httponly cookie etc. https://github.com/solidjs/solid-start/tree/main/examples/with-auth/src

GitHub

solid-start/examples/with-auth/src at main · solidjs/solid-start

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

ZeroNPOP•5mo ago

Using createResource fixed my problems. Thank you! For anyone's future reference, I removing <AuthProvider> and basiclly all the code I had in my context file. The only code I need

const [session, { mutate: updateSession }] = createResource(
  async () => {
    try {
      const session = await account.getSession("current");
      if (session) {
        const user = await account.get();
        return { session, user };
      } else {
        return null;
      }
    } catch (error) {
      console.log("No active session found");
      return null;
    }
  },
  {
    initialValue: null,
  }
);
export { session, updateSession };

const [session, { mutate: updateSession }] = createResource(
  async () => {
    try {
      const session = await account.getSession("current");
      if (session) {
        const user = await account.get();
        return { session, user };
      } else {
        return null;
      }
    } catch (error) {
      console.log("No active session found");
      return null;
    }
  },
  {
    initialValue: null,
  }
);
export { session, updateSession };

Gaming

Programming

context provider's values are not being updating after useContext gets user session info.