hey everyone, so i'm getting a little bit confused. i'm currently looking at the

react-spa

example within

@ory/Elements

in

Dashboard.tsx

there is a

.toSession()

within

useEffect()

for checking if the user is logged in. which makes total sense, you want to lock that page 😛 Here is where i'm getting confused,

Settings.tsx

which i also see should be behind a session check, do not have any checks, it only checks if there is a

flowId

set isn't that a flaw? 🤔

Yes, that could very well be. The examples are a little outdated, I think.

Gotcha :) I'm using the example to convert it to TanStack Router. It's still react based but router is different and they have something called: authentication routes. Right now it looks like there is repeating code which I don't see is needed. For example the .toSession part. So now I have something to work with I think :)

@hundreds-psychiatrist-38730 i also did this to experiment with kratos. You can create an auth context to store the session, have the login&logout methods in there too so the session is updated when those happen. Then you define a

_secured.tsx

route that checks

context.session.active

. and just returns

Outlet

. All secured pages go under

src/routes/_secured/

🙂

ya @witty-fountain-21673 i got that already.

import {createFileRoute, Outlet, redirect} from '@tanstack/react-router'

export const Route = createFileRoute('/_auth')({
  beforeLoad: ({ context }) => {

    if (!context?.auth?.session?.active) {
      throw redirect({
        to: '/login'
      })
    }
  },
  component: AuthLayout,
})

function AuthLayout() {
  return (
    <Outlet />
  )
}

is my

_auth.tsx

in this case. my "struggle" is the part around

setSession()

etc. 🙂

From what I remember, the flow wont be created if there isn’t a valid session in the browser so while there isn’t an explicit session check, the request to create a new settings flow should fail in the absence of a session. @hundreds-psychiatrist-38730

seen my question from yesterday? 🙂 somewhat related to this 🙂

I haven’t. I’ll check

so ya, my problem i guess is i need to change the logic around the whole

toSession()

Right now, i have a tsx file

auth.tsx

where i build an interface and export a function

useAuth()

(like tanstack router suggest to do in their routes system). that context is basically loaded on every page. and here is my problem, in that context i run a

useEffect()

that contains the big part that set the user session, create logout flow. So if i'm not loggedin, it does 2 requests to

/whoami

i get a 401 unauth back which makes sense. But there might be some pages i don't need to check authentication on, e.g.

/about

but the context will still do it. I tried wrap

.toSession()

promise around a if statement

if (session?.active) {}

but then login wouldn't really work. So i was kinda thinking, does it make sense to wrap that code in

bool

e.g. named

isAuthenticated

then from my login page, do this

const submitFlow = (values: z.infer<typeof formSchema>) => {
      // something unexpected went wrong and the flow was not set
      if (!flow) return navigate({to: "/login"})

      const body = {
        csrf_token: values.csrf_token,
        identifier: values.email,
        method: "password",
        password: values.password
      } as UpdateLoginFlowBody

      // we submit the flow to Ory with the form data
      sdk
        .updateLoginFlow({ flow: flow.id, updateLoginFlowBody: body })
        .then(() => {
          // we successfully submitted the login flow, so lets redirect to the dashboard
          <auth.tsx>.isAuthenticated = true
          navigate({ to: "/dashboard", replace: true })
        })
        .catch(sdkErrorHandler)
    }

Then, I guess when redirected to

/dashboard

it will run the code in my

useEffect()

to then do

.toSession() etc..

does it make sense?

ut there might be some pages i don’t need to check authentication on, e.g.

/about

but the context will still do it.

read my comment above about

_.secured.tsx

and

routes/_secured/

ya

Yes but it simply wont exist for an unsecured page right?