Is there any way to authenticate all pages except a list in the `_app.tsx` file when using next? I ...

deuszera

08/12/2023, 1:16 PM

Is there any way to authenticate all pages except a list in the

_app.tsx

file when using next? I am using custom built UI and tried code like this on the `_app.tsx`:

Copy code

const AUTHORIZED_UNLOGGED_URLS = [
  '/signin',
  '/signup',
  '/password-recover',
]

function App ({ Component, pageProps }: AppProps): React.ReactElement | null {

  useEffect(() => {
    void (async () => {
      if (await SessionJS.doesSessionExist()) {
        if (AUTHORIZED_UNLOGGED_URLS.includes(window.location.pathname)) {
          window.location.href = '/'
        }
      } else if (!AUTHORIZED_UNLOGGED_URLS.includes(window.location.pathname)) {
        window.location.href = '/signin'
      }
    })()
  }, [])
...

...but the thing is that when logging out,

SessionJS.doesSessionExist()

still returns true after it's run immediatelly after running

SessionJS.signOut

. So this results in more than 1 redirect and failed behavior, needing to reload the page in order to fall to the signin/ page again.

rp_st

08/12/2023, 1:17 PM

Hey.

rp_st

08/12/2023, 1:18 PM

I think this question has 2 parts

rp_st

08/12/2023, 1:18 PM

First let’s deal with the session issue

rp_st

08/12/2023, 1:18 PM

Can I see how you are calling the sign out function?

deuszera

08/12/2023, 1:18 PM

Copy code

async function handleLogout (): Promise<void> {
    await Session.signOut()
    window.location.href = '/signin'
  }

deuszera

08/12/2023, 1:18 PM

this in another component

deuszera

08/12/2023, 1:19 PM

Session and SessionJS in both cases are from

Copy code

import Session from 'supertokens-web-js/recipe/session'

rp_st

08/12/2023, 1:19 PM

Right. So after you call signOut, the session still exists? If so, can I see the sign out function call request and response headers?

deuszera

08/12/2023, 1:20 PM

let me see

deuszera

08/12/2023, 1:20 PM

it's all frontend code in the components, how could I do that?

rp_st

08/12/2023, 1:21 PM

Network tab

deuszera

08/12/2023, 1:21 PM

ah, okay

deuszera

08/12/2023, 1:23 PM

okay, I'm gonna paste here now the headers of the request and the response, respectivelly, for the POST 200 call to

/api/auth/signout

deuszera

08/12/2023, 1:23 PM

Copy code

POST /api/auth/signout HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/116.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
fdi-version: 1.16,1.17
rid: session
st-auth-mode: cookie
Origin: http://localhost:3000
Connection: keep-alive
Cookie: st-last-access-token-update=1691846499260; sAccessToken=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsInZlcnNpb24iOiIyIn0%3D.eyJ1c2VySWQiOiJkZXYtdWlkIiwiZXhwaXJ5VGltZSI6MTY5MTg1MDA5OTI1MCwidGltZUNyZWF0ZWQiOjE2OTE4NDY0OTkyNTAsInNlc3Npb25IYW5kbGUiOiJkMWNkOGQxYy0xNDI4LTQ5NjMtYWFjYS1lNjNmZDkwNzkxODciLCJyZWZyZXNoVG9rZW5IYXNoMSI6IjVmMDQ3NmQ0NDg3NzhjNWIwMmU5MWI0NTc5MjgxZjU5YmRiNThhOTkwYzc2MzkxNmQ2NDNjMGI3MzJkYTMyNzUiLCJ1c2VyRGF0YSI6e319.dzfEdMr3QSMmHecLkDrWluczQvdC7LHd4n3qTgJ5ZR6N2bYfGNrU6aPIyxbM1xHn9vheEdo08Q9yayQNOH7urijnBz5rp55wAzhrXSyoJ6N1eWAfZzg3%2FCWnxE891PWYbmBBQD0S7kTdbCtHK3ve%2BMWkL16ihLCqR%2FYQTrY8lNUfHF9cJJE%2FfhK3Z6cT1R4r15uTDBjli5wdLCFbrFLIUGOyQ68Zjlk4nPl8VXSfdoyr%2BC2hCw%2BLOETquTT0SqnR94%2FtimySVepj4svZS8W2cdyPfIvwrEDdfcwL7jLVfvQnOKZ6eCB5%2FAECOm0N2%2F0IsuybT0SojdMSWSFt57mVGQ%3D%3D; sIdRefreshToken=0987a698-ce3b-4ed5-940c-a37890a34bc4; sFrontToken=eyJ1aWQiOiJkZXYtdWlkIiwiYXRlIjoxNjkxODUwMDk5MjUwLCJ1cCI6e319
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Content-Length: 0

deuszera

08/12/2023, 1:23 PM

Copy code

HTTP/1.1 200 OK
Set-Cookie: sAccessToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly; SameSite=Lax
sRefreshToken=; Path=/api/auth/session/refresh; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly; SameSite=Lax
sIdRefreshToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly; SameSite=Lax
id-refresh-token: remove
Access-Control-Expose-Headers: id-refresh-token
Content-Type: application/json; charset=utf-8
ETag: "rqm6itsib3f"
Content-Length: 15
Vary: Accept-Encoding
Date: Sat, 12 Aug 2023 13:21:42 GMT
Connection: keep-alive
Keep-Alive: timeout=5

rp_st

08/12/2023, 1:24 PM

What’s the frontend SDK version? And what’s the backend SDK version?

rp_st

08/12/2023, 1:24 PM

And which backend SDK is being used?

deuszera

08/12/2023, 1:24 PM

Copy code

"supertokens-node": "^9.0.0",
    "supertokens-web-js": "^0.7.2",

rp_st

08/12/2023, 1:24 PM

Right. These aren’t compatible.

deuszera

08/12/2023, 1:24 PM

I'm using next with custom built UI

deuszera

08/12/2023, 1:25 PM

really? is the -node one out of date?

rp_st

08/12/2023, 1:25 PM

Yup.

rp_st

08/12/2023, 1:26 PM

You will have to upgrade to node SDK version 15.0 (see our Changelog. Several breaking changes)

deuszera

08/12/2023, 1:26 PM

alright

rp_st

08/12/2023, 1:27 PM

Or, you will have to downgrade the frontend SDK to version 0.1.6

deuszera

08/12/2023, 1:27 PM

you saw the bug in the headers I posted? could you please explain to me if so?

rp_st

08/12/2023, 1:27 PM

If you are updating the backend SDK, it will also require an update to the core along with it.

rp_st

08/12/2023, 1:27 PM

There is no bug. It’s just that it’s from an older backend SDK and the newer frontend doesn’t support such old backend SDKs

deuszera

08/12/2023, 1:28 PM

got it

deuszera

08/12/2023, 1:31 PM

I don't have supertokens-core in my package.json. Is that right?

rp_st

08/12/2023, 1:31 PM

Yea. It’s a different micro service.

deuszera

08/12/2023, 1:32 PM

alright

deuszera

08/12/2023, 1:36 PM

updated, restarted my build and it's solved. Thank you so much for being so helpful 🙌

deuszera

08/12/2023, 1:36 PM

I didn't found the changelog tho, could you please help me with that?

rp_st

08/12/2023, 1:37 PM

It’s on our GitHub for node SDK

deuszera

08/12/2023, 1:38 PM

got it. thanks again!

2 Views

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).