Hey <@498057949541826571> We want to integrate Supertokens into our Next js project. However, we ar...
h
Hey @rp_st We want to integrate Supertokens into our Next js project. However, we are confused about getSSRToken. As seen in the screenshot, we expect the middleware to check the session and redirect it to the /auth path if the session does not exist. However, even if we log in to locahost:4001/auth/dashboard on the backend and delete the relevant user's session from the interface. getSSRToken returns us the session object as valid. How can we check whether the relevant session token is valid on the Next JS Server side?
r
hey @hasancanbuyukask3180 when you say "delete the relevant user's session from the interface", what do you mean? Deleting the session from the user management dashboard interface?
h
Yes @rp_st , we delete it via the user management dashboard.
r
right. So session verification is statless in supertokens. Which means that when you delete them offline, they will only get reflected in the user's browser when it tries and does a refresh (refresh api will fail). So to solve this, you have two options: - https://supertokens.com/docs/session/common-customizations/sessions/access-token-blacklisting - Or, implement your own caching method for keeping track of revoked sessions.
h
Hey @rp_st When I called get SSR as in the screenshot, it started returning undefined as it should be because there was no session. But now when the relevant logic works and NextResponse.redirect('http://localhost:4000/auth') is directed to the following path. Since the logic I showed with the arrow is True, it first goes back to Auth and then back to the path it came from. What needs to happen is to open the email password screen for me to log in again.
As seen in the video, it redirects to /auth, but when the UI screen should appear, it returns to path again.
r
right. So, this happens cause the frontend state still indicates that a session exists, even though it doesn't
In the impl of
getSSRSession
, we need to correct the value we set for
hasToken
. Instead of doing
hasToken: err.type !== Session.Error.UNAUTHORISED
, it should be
hasToken: parsedCookies["sAccessToken] !== undefined
And when you use
getSSRSession
, if
!session && hasToken
, then you want to render the
<TryRefreshComponent />
instead of redirecting to the auth page (as shown here: https://supertokens.com/docs/thirdpartyemailpassword/nextjs/app-directory/protecting-route#modify-home-page-to-check-for-sessions--cust)
this is a good catch. It's a case we had missed in our docs.
When you render
TryRefreshComponent
, it will try and do a refresh and realise that there is no session and then also clear the frontend state indicating a session doesn't exit and then when it redirects to the auth page, it will stay there.
h
@rp_st However, as we talked about yesterday, you cannot use the JSX component in the middleware in Next JS.
r
hmm right.
well, then you can redirect the user to a page that renders just
TryRefreshComponent
.
h
I created a dummy endpoint and rendered only that component. However, as can be seen, it entered an endless loop. @rp_st
r
did you revoke the session before calling this route?
revoke on the backend i mean
h
I revoke it via User Dashboard. And in our Api project (written in Go), VerifySession is called before every request on the middleware side.
r
what is doint the redirect?
you want to do the redirect to try refresh component if
hasToken
is true and
session
is undefined
h
We don't have a special redirect, probably the TryRefreshComponent manages this redirect.
r
in case
hasToken
is false and
session
is undefined, you want to redirect to the
/auth
page
h
Correct! But as you said, for testing purposes, we directed you to a route where only the Try Refresh Component component was rendered.
r
and ofc, if you are redirecting to
/hasan
, you want to just render the component and not do a session check. So in the middleware, you have to make an exception for if the current path is
/hasan
, you don't do getSSRToken
and likewise for
/auth/*
routes - you don't want to call getSSRToken for those routes in the middleware.
h
There is a conflict here.
r
Which is?
h
I want to call the "getSSRToken" function in the "/auth" paths because I redirect to this path only if the conditions "!session !hasToken" are satisfied. Within the project, there are numerous pages, and I'm attempting to manage these operations through middleware to avoid adding the boilerplate code such as Try Refresh Component to each page individually.
Wait..
r
why do you want to call getSSRToken in paths that start with /auth? Those are paths in which a session does not have to exist for them to work (for example the login page)
h
I think I solved the problem via middleware. Thanks for your support!
r
Oh okay! Can you share how?
h
I've updated the allowed routes, added a few checks during rendering, and resolved the issue. However, as a minor piece of feedback, your documentation for Next.js 13 is currently missing. I would like to offer support in updating those areas when I have the time.
r
That sounds great!!
just to confirm, you are doing it the way we discussed right? Or something else entirely?