But I prefer the next js to not refresh sessions, revoke, etc.

I see. And are you calling next js apis via

fetch

/

axios

? or using getServerSideProps?

I use fetch in the browser and there are no problems there. The question is re getServerSideProps that should be able to get the access token payload

So in that case, there are two options: 1) You need to use

getSession

in

getServerSideProps

as per our docs, which would cause refreshing etc.. 2) On the frontend, post sign up / in, you can get the access token payload via

Session.getAccessTokenPayloadSecurely()

function, and then save that in cookies and that will be sent to nextjs. But this has several security + syncing issue. So i would recommend going with method (1). To do that though, you would need to set

cookieDomain

on the backend as shown in the link you had posted earlier.

Using the 1st method you suggested, is there an sdk or apis that allow query without causing refresh to the session?

You can do it manually. If you see this: https://supertokens.com/docs/thirdpartyemailpassword/nextjs/session-verification/in-ssr The code inside

getServerSideProps

is:

js
try {
        // getSession will do session verification for us
        session = await Session.getSession(context.req, context.res)
    } catch (err) {
        if (err.type === Session.Error.TRY_REFRESH_TOKEN) {
            
            // in this case, the session is still valid, only the access token has expired.
            // The refresh token is not sent to this route as it's tied to the /api/auth/session/refresh API paths.
            // So we must send a "signal" to the frontend which will then call the 
            // refresh API and reload the page.

            return { props: { fromSupertokens: 'needs-refresh' } }
            // or return {fromSupertokens: 'needs-refresh'} in case of getInitialProps
        } else if (err.type === Session.Error.UNAUTHORISED) {

            // user is logged out. Since this is for a protected route,
            // we can simple send an empty prop object. Alternatively,
            // you can pass anything else you would like here.
            return { props: {} }
            // or return {} in case of getInitialProps
        } else {
            throw err
        }
    }

So in the block for

err.type === Session.Error.TRY_REFRESH_TOKEN

, instead of doing

return { props: { fromSupertokens: 'needs-refresh' } }

, you can just do whatever else you want?

What's the use case where you don't want it to refresh the session? Cause it will happen automatically if you have followed the nextjs setup guide.

I want the session to be managed only by our api. Our nextjs, both on the browser and the server-side, is just a "client" that is not really holding or mutating state.

I see.

So in case you get

err.type === Session.Error.TRY_REFRESH_TOKEN

, what will you do in there? Show a generic something went wrong error? Also, if you do send back

return { props: { fromSupertokens: 'needs-refresh' } }

to the frontend, the frontend will attempt to manually refresh the session which will call your API (not nextjs backend). So in a way, nextjs is not actually doing the refreshing.. it's just telling the frontend to refresh and then reload the page.

Hmm you're right. getSession by itself doesn't mutate the session?

It doesn't in most cases.. just one case when you use the access token for the first time post refreshing the session. As of now, there is no way to prevent that cause it's an implementation detail. But it will not modify any of your custom payload, or the session handle, the userId expiry.. just certain implementation detail flag.

Sounds great because that should not affect our backend state. Thank you very much!

It won't affect the backend state 🙂

Does anyone has preferred providers for sending SMS for passwordless auth?

We plan on using Twilio for our SuperTokens service.

Hello, I am using angular for the frontend and wanted to use supertokens but cant find any docs of anyone implementing it to help me understand, did anyone have success implementing supertokens with angular?

hey @User we don't have angluar UI yet. You will have to build the UI and call the APIs exposed by the backend SDK yourself. The APIs can be found here: https://supertokens.io/docs/fdi

What login features do you want? Depending on that, I can summarise what APIs need to be called.

I want to use login with password and save that to a mongo database, during signup call an api and save the response as an aditional field to the created user

Okay! So for the backend stuff, you can use one of our SDKs (node / python / golang supported). For frontend, you will need to: - Use the emailpassword APIs in the API list here (https://supertokens.io/docs/fdi) - For session management, you can use supertokens-website SDK. To setup the supertokens-website SDK, you should follow https://supertokens.com/docs/emailpassword/quick-setup/frontend (Plain Javascript code tabs) To setup the backend SDK, you should follow: https://supertokens.com/docs/emailpassword/quick-setup/backend

so in the frontend we initialize supertokens with SuperTokens.init(...) and then the requests with the forms are with fetch to our backend?

Yes. Exacrtly

and on the frontend, you want to initialise the supertokens-website SDK as per the guide above - to help with session management.

But the login UI and the API calls for that, you will have to make yourself - from the API spec above.

Another idea is to use react only for the pages in which you want to show the login UI.

ok, if I understand correctly what differs for react is that we build the UI and make the requests manually

Yes. Exactly.

Didn't know we could use both angular and react XD

Ah yea.. you can. Just create a separate html page for login related UI and in that, use a react project that uses our supertokens-auth-react SDK.