Redirecting on protected routes

Hey! Is there any recommended way to do route protecting on the server with SSR?

For example, I need to redirect users from protected routes to the previous URL, if exists on

router

router

.

Here's my current implementation:

type Session = { token: string | undefined };

const OPTIONS: SessionConfig = {
  password: process.env.SESSION_SECRET,
};

export const getSession = async () => {
  return await useSession<Session>(OPTIONS);
};

export const redirectUnauthenticated = cache(async (url: string) => {
  "use server";
  const session = await getSession();
  if (session.data.token === undefined) {
    throw redirect(url);
  }
  return {};
}, "redirectUnauthenticated");

export const createRedirectUnauthenticated = (url: string = "/login") => {
  createAsync(() => redirectUnauthenticated(url));
};

export default function Page() {
  createRedirectUnauthenticated("/login?redirect=/profile");

  return ...
}

type Session = { token: string | undefined };

const OPTIONS: SessionConfig = {
  password: process.env.SESSION_SECRET,
};

export const getSession = async () => {
  return await useSession<Session>(OPTIONS);
};

export const redirectUnauthenticated = cache(async (url: string) => {
  "use server";
  const session = await getSession();
  if (session.data.token === undefined) {
    throw redirect(url);
  }
  return {};
}, "redirectUnauthenticated");

export const createRedirectUnauthenticated = (url: string = "/login") => {
  createAsync(() => redirectUnauthenticated(url));
};

export default function Page() {
  createRedirectUnauthenticated("/login?redirect=/profile");

  return ...
}

However, this implementation is not the best because it shows the

Page

Page

to an unauthorized user for a few milliseconds before redirecting.

In addition, if using the snippet below for the

Page

Page

route, it won't show the

Page

Page

to user for a few milliseconds before redirecting, but it can run the

preload

preload

at any state of my app, which will break all redirects and always redirect to

/login?redirect=/profile

/login?redirect=/profile

instead of the

?redirect

?redirect

parameter:

export const route = {
  preload: () => createRedirectUnauthenticated("/login?redirect=/profile"),
} satisfies RouteDefinition;

export const route = {
  preload: () => createRedirectUnauthenticated("/login?redirect=/profile"),
} satisfies RouteDefinition;

Before, I tried using

useNavigate

useNavigate

, but the code needs to be run on the client in this case. However, I need to perform this check on the server first.

Also, as I mentioned before, I want always to redirect the unauthorized user to the previous URL. I tried doing it with

event?.router?.previousUrl

event?.router?.previousUrl

from

getRequestEvent()

getRequestEvent()

redirectUnauthenticated

redirectUnauthenticated

function, but it's always returns

undefied

undefied

.

How can I solve this issue correctly?

zobweytOP•7/14/24, 6:02 PM

I've also:

read https://docs.solidjs.com/solid-start/advanced/auth#protected-routes
viewed https://github.com/solidjs/solid-start/tree/main/examples/with-auth
viewed https://github.com/Christopher2K/swapify/blob/main/swapify_web/src/lib/auth/auth-services.ts
searched this discord

GitHub

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

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

GitHub

swapify/swapify_web/src/lib/auth/auth-services.ts at main · Christo...

Contribute to Christopher2K/swapify development by creating an account on GitHub.

Madaxen86•7/14/24, 9:51 PM

The first link you’ve shared is the way to go.
You can add

createAsync(…,{deferStream: true })

this should prevent the page from streaming before the promise has resolved and should also prevent the page from being shown for a few milliseconds.

MMadaxen86 The first link you’ve shared is the way to go. You can add createAsync(…,{defe...

zobweytOP•7/14/24, 10:06 PM

createAsync(…,{deferStream: true })

it did not help with this issue

zobweytOP•7/14/24, 10:10 PM

MMadaxen86 The first link you’ve shared is the way to go. You can add createAsync(…,{defe...

zobweytOP•7/14/24, 11:12 PM

The first link you’ve shared is the way to go.

but even there the age will be shown for a few milliseconds

MMadaxen86 The first link you’ve shared is the way to go. You can add createAsync(…,{defe...

zobweytOP•7/14/24, 11:21 PM

it actually shows the page for a few milliseconds when it's first time invoked

zobweytOP•7/14/24, 11:22 PM

then it's cached

zobweytOP•7/14/24, 11:22 PM

but isn't there a better way to do it?

zobweytOP•7/14/24, 11:22 PM

feels like such a simple feature

Madaxen86•7/15/24, 6:19 AM

To be more strict you can wrap your children in a Show component:

zobweytOP•7/15/24, 12:38 PM

so in solid start it’s not possible to protect the routes? only the content of them?

MMadaxen86 To be more strict you can wrap your children in a Show component: ```ts … cons...

zobweytOP•7/15/24, 12:38 PM

i’m not sure that this is gonna work because this code is run on the client and isLoggedIn would be undefined there all the time

zobweytOP•7/15/24, 1:13 PM

now, if I first open protected as an unauthorized user, i will be redirected to , but if I sign in on the login page, it will redirect me and won't be updated. so circular redirection is possible

Madaxen86•7/15/24, 1:15 PM

The default config of solid start uses streaming. So the server will start streaming the response (content of the page) before the async data has resolved.
You can change that if you want but only for the whole app:

https://docs.solidjs.com/solid-start/reference/server/create-handler

Zzobweyt i’m not sure that this is gonna work because this code is run on the client and ...

Madaxen86•7/15/24, 1:17 PM

It will also work on the client as solid will create an api route which is then called by createAsnyc. So that code runs only on the server and is safe.

MMadaxen86 It will also work on the client as solid will create an api route which is then...

zobweytOP•7/15/24, 1:20 PM

yeah, it works, but now there's a problem with redirection

zobweytOP•7/15/24, 1:21 PM

so here are my actions

zobweytOP•7/15/24, 1:23 PM

and if i go to the protected route when i'm not authorized, it will:

redirect me to the (logs
```
false
```
```
false
```
)
i'll sign in, and it will redirect me to the (logs
```
false
```
```
false
```
)
since hasn't been updated for some reason, it will redirect me back to , which will redirect me to the
```
/
```
```
/
```
if i again try to reach , it'll work fine (logs
```
true
```
```
true
```
)

zobweytOP•7/15/24, 1:23 PM

so the problem is with redirects

zobweytOP•7/15/24, 2:16 PM

so it works now!!

MMadaxen86 To be more strict you can wrap your children in a Show component: ```ts … cons...

zobweytOP•7/15/24, 2:16 PM

thanks a lot!!

Madaxen86•7/15/24, 2:55 PM

In your login action you need to call revalidate(redirectUnauthorized.key) once login is successful. This will update the cached value. (Also in logout obviously…)

MMadaxen86 In your login action you need to call revalidate(redirectUnauthorized.key) once ...

zobweytOP•7/15/24, 5:20 PM

it updates already without doing it