Shimano
Shimano
PostsComments
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Thank you very much for your explanation!
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
And sorry if I am blabbing too much... 🫣
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
I am afraid that I don't quite understand you - as I've said I am a noob. Would you recommend using sessions rather than context for auth? My idea was that I have a token and some user info stored in storage (I am using cookieStorage from solid-primitives). User tries to login, the server makes a request to a backend service (a simple REST API with JWT auth). If it succeedes - the creds are valid - a JWT is returned and thus saved into cookies. Logout is simple - auth cookies are wiped and the user is redirected to the login page. When an authorized request to the REST API needs to be made, I just get it from the auth provider - if there is a token stored - and call it with that. I haven't thought about token validity expiring midway - meaning the token is valid for the page load but then becomes expired and the call to the backend is made - will work on that later if it comes to it. I wanted to use SSR for isolating the REST API since even the "public APIs" could be abused and the REST API calling some external services could be abused. This way I have only the frontend server exposed - yes the user can still abuse it somewhat but not the API directly. I am planning to implement another auth method directly for the API using a special token and I will expose selected endpoints - all of which will be secured by the API token auth.
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Thanks!
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Ok, thanks for your time and help! Have a good one!
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Also I cannot find the docs for redirect anywhere... 🤔 Only in https://docs.solidjs.com/solid-start/advanced/session but I get that the docs are still beta...
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
In desperation I've tried to work with sessions - it kinda works too but it won't redirect me using the throw redirect("/"). Dunno but I will try it with a provider instead of sessions. If you have an example how to use it with session, I would appreciate that very much aswell!
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Oh. My. God. You are my hero... 😄
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Hmm, will try and I'll let you know... brb
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Umm, can you please elaborate? You mean in the component declaration? The children? Sorry for my noobiness... 😓
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Well it throws the error even when I just declare auth.
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
app.tsx: 
// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import "./app.css";
import NavBar from "./components/NavBar";
import { AuthProvider } from "./components/AuthProvider";

export default function App() {
  return (
    <Router
      root={(props) => (
        <AuthProvider>
          <MetaProvider>
            <NavBar />
            <Title>App</Title>
            <Suspense>{props.children}</Suspense>
          </MetaProvider>
        </AuthProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import "./app.css";
import NavBar from "./components/NavBar";
import { AuthProvider } from "./components/AuthProvider";

export default function App() {
  return (
    <Router
      root={(props) => (
        <AuthProvider>
          <MetaProvider>
            <NavBar />
            <Title>App</Title>
            <Suspense>{props.children}</Suspense>
          </MetaProvider>
        </AuthProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
Usage in a component: 
const LoginForm: Component = () => {
  const auth = useAuth();
  const loggedIn = auth.user() !== null;
  // yada yada
  return <></>
}

export default LoginForm;
const LoginForm: Component = () => {
  const auth = useAuth();
  const loggedIn = auth.user() !== null;
  // yada yada
  return <></>
}

export default LoginForm;
28 replies
SSolidJS
Created by Shimano on 5/14/2024 in #support
Confused with SolidStart and context provider
AuthProvider.tsx: 
import { useNavigate } from "@solidjs/router";
import {
  createContext,
  createSignal,
  useContext,
  type ParentComponent,
  type Accessor,
} from "solid-js";

type AuthContextT = {
  user: Accessor<string | null>;
  token: Accessor<string | null>;
  logInFn: (username: string, password: string) => Promise<void>;
  logOutFn: () => Promise<void>;
};

const AuthContext = createContext<AuthContextT>();

const AuthProvider: ParentComponent = ({ children }) => {
  const navigate = useNavigate();

  const [user, setUser] = createSignal<string | null>(null);
  const [token, setToken] = createSignal<string | null>(null);

  const logInFn = async (username: string, password: string) => {
    setUser(username);
    setToken("some token");
    navigate("/");
    return;
  };

  const logOutFn = async () => {
    setUser(null);
    setToken(null);
    navigate("/login");
    return;
  };
  return (
    <AuthContext.Provider
      value={{
        user,
        token,
        logInFn,
        logOutFn,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = (): AuthContextT => {
  const providedAuthContext = useContext(AuthContext);
  if (providedAuthContext === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return providedAuthContext;
};

export { AuthProvider, useAuth };
import { useNavigate } from "@solidjs/router";
import {
  createContext,
  createSignal,
  useContext,
  type ParentComponent,
  type Accessor,
} from "solid-js";

type AuthContextT = {
  user: Accessor<string | null>;
  token: Accessor<string | null>;
  logInFn: (username: string, password: string) => Promise<void>;
  logOutFn: () => Promise<void>;
};

const AuthContext = createContext<AuthContextT>();

const AuthProvider: ParentComponent = ({ children }) => {
  const navigate = useNavigate();

  const [user, setUser] = createSignal<string | null>(null);
  const [token, setToken] = createSignal<string | null>(null);

  const logInFn = async (username: string, password: string) => {
    setUser(username);
    setToken("some token");
    navigate("/");
    return;
  };

  const logOutFn = async () => {
    setUser(null);
    setToken(null);
    navigate("/login");
    return;
  };
  return (
    <AuthContext.Provider
      value={{
        user,
        token,
        logInFn,
        logOutFn,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = (): AuthContextT => {
  const providedAuthContext = useContext(AuthContext);
  if (providedAuthContext === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return providedAuthContext;
};

export { AuthProvider, useAuth };
28 replies