Run route.load and access return value only once when navigating to page

Hey, I am working on a route where before rendering the route, basic middleware needs to run to check if the client should have access to the route by checking the query parameters of the url and redirect if not. During this check I need to decrypt a query parameter, which can only be done on the server as I don't wanna share my secret key used to decrypt it with the client but I also would like to pass parts of the decrypted data to the route component to render on the page.

Here is a small example:

const getEmail = () => {
  "use server";
  const query = getQuery();
  if (query.state) {
      try {
          const state = auth.decryptPayload(query.state);
          if (state.email && state.code) {
              return state.email;
          } else {
              throw new Error();
          }
      } catch {
          throw redirect("/login");
      }
  } else {
      return redirect("/login");
  }
};

export const route = {
  load: () => getEmail()
};

export default function Verify() {
  const email = createAsync(() => getEmail());
  
  return (
    <div>email()</div>
  );
}

const getEmail = () => {
  "use server";
  const query = getQuery();
  if (query.state) {
      try {
          const state = auth.decryptPayload(query.state);
          if (state.email && state.code) {
              return state.email;
          } else {
              throw new Error();
          }
      } catch {
          throw redirect("/login");
      }
  } else {
      return redirect("/login");
  }
};

export const route = {
  load: () => getEmail()
};

export default function Verify() {
  const email = createAsync(() => getEmail());
  
  return (
    <div>email()</div>
  );
}

To do this I would like the

route.load

route.load

function to run

getEmail

getEmail

once to do the middleware checks and decrypt the data to return parts of it to the page component so that the server function

getEmail

getEmail

only needs to run once when directly loading the page (and directly render the email without calling the server function once the page has loaded on the client) or when navigating to the page from a different route (only run server function).

How can I do this with solid start? Right now it loads the page and the email isn't rendering at all as it seems like the query parameters are empty when

getQuery

getQuery

is called for some reason?

Also, the server function returns a redirect to

/login

/login

, as it should when the query parameters don't match but it doesn't navigate to

/login

/login

, I guess because its a status code 200 response instead of 3xx.

SolidJS•2y ago•

16 replies

florian

Run route.load and access return value only once when navigating to page

const getEmail = () => {
  "use server";
  const query = getQuery();
  if (query.state) {
      try {
          const state = auth.decryptPayload(query.state);
          if (state.email && state.code) {
              return state.email;
          } else {
              throw new Error();
          }
      } catch {
          throw redirect("/login");
      }
  } else {
      return redirect("/login");
  }
};

export const route = {
  load: () => getEmail()
};

export default function Verify() {
  const email = createAsync(() => getEmail());
  
  return (
    <div>email()</div>
  );
}

const getEmail = () => {
  "use server";
  const query = getQuery();
  if (query.state) {
      try {
          const state = auth.decryptPayload(query.state);
          if (state.email && state.code) {
              return state.email;
          } else {
              throw new Error();
          }
      } catch {
          throw redirect("/login");
      }
  } else {
      return redirect("/login");
  }
};

export const route = {
  load: () => getEmail()
};

export default function Verify() {
  const email = createAsync(() => getEmail());
  
  return (
    <div>email()</div>
  );
}

To do this I would like the

route.load

route.load

function to run

getEmail

getEmail

once to do the middleware checks and decrypt the data to return parts of it to the page component so that the server function

getEmail

getEmail

getQuery

getQuery

is called for some reason?

Also, the server function returns a redirect to

/login

/login

, as it should when the query parameters don't match but it doesn't navigate to

/login

/login

, I guess because its a status code 200 response instead of 3xx.

Run route.load and access return value only once when navigating to page

Run route.load and access return value only once when navigating to page

Similar Threads

Similar Threads

Similar Threads