Hello, I created an UI for SuperTokens in SvelteKit for passwordless recipe and everything seems to work fine, but after I send code to /code/consume it returns 200 with data, but nothing happens, my cookies doesn't change. Should I do anything else, than just init supertokens?

Hello, I created an UI for SuperTokens in SvelteKit for passwordless recipe and everything seems to work fine, but after I send code to /code/consume it returns 200 with data, but nothing happens, my cookies doesn't change. Should I do anything else, than just init supertokens?

Maybe this happens because I init SuperTokens in my component?

- You need to call supertokens.init on app load (I assume you are using supertokens-website repo). - Are you using axios?

Yes

You also need to add axios interceptors.

Yes, I did that

for all axios instances that you import / create

Ok, got it. I'll test it and come back soon

hmm

I have my _layout and login template nested in this layout. Should I init supertokens in both files?

- Can I see the response header for the consume code API? - A screenshot of the cookies section in your browser

Btw, it's SSR app, maybe it can cause problems

Ah yea. You need to call the init function only when on the client side

Interesting

so check for something like

if (typeof window !== "undefined") {
  supertokens.init({...});
}

SuperTokens def has access to window object, because it was throwing error about it and then I changed my code

I see.

Let me check everything again and then I'll send you response headers

Can I see the response headers in chrome?

1 sec

Can I see your appInfo object on the backend and the supertokens.init call config on the frontend?

Of course, what is an appinfo object?

On the backend, when you call supertokens.init, you must be passing an object for appInfo

appInfo: { // learn more about this on https://supertokens.com/docs/session/appinfo appName: "SuperTokensTest", apiDomain: "http://localhost:3001", websiteDomain: "http://localhost:3000", apiBasePath: "/auth", websiteBasePath: "/auth" },

Hmm ok

What if something happens in my store and it cannot determine api url on front

Are you sure that the init function is being called before the axios call is being made for consuming the code?

Nevermind, it seems to work fine, because SuperTokens would throw an error otherwise

What is the output of await session.doesSessionExist() after the API call?

On front?

Yes

Could you please provide some snippet or ref?

Please see our docs for how to check it a session exists on the frontend

You mean this - https://supertokens.com/docs/passwordless/common-customizations/sessions/checking-session-front-end

Yes

Yes, one second

hmm

What is strange is that first time I accidentally called it without await and it returned promise and then refresh request happened

Yea.. that's expected.

But with await it returns false, and refresh doesn't happen

Though the result should be 200 cause you have the cookies set

On front? Yes

Can I see the code that you use to make the API call?

Yes, which route are you interested in?

the API which consumes the code

const consumeCode = async () => { const codeRegexp = code.replace(/[^0-9]/g, ""); if (!codeTimeout && codeRegexp.length === 6) { console.log(code); console.log(codeRegexp); console.log("should send code"); await axiosInstance .post("/signinup/code/consume", { preAuthSessionId: $config.superTokensPreAuthSessionId, deviceId: $config.superTokensDeviceId, userInputCode: codeRegexp, }) .then(async (response) => { const test = await SuperTokens.doesSessionExist() console.log(test) console.log(response); }) .catch((error) => { console.log(error); }); codeTimeout = true; setTimeout(() => { codeTimeout = false; }, 5000); } };

Is this querying http://locaohost:3001?

const axiosInstance = axios.create({ baseURL: $config.superTokensBackendURL, timeout: 10000, headers: { rid: $config.superTokensRID }, });

Can I see the request headers too please?

superTokensBackendURL: "http://localhost:3001/auth",

not the OPTIONs request.

oh sorry

Can you remove the

headers: { rid: $config.superTokensRID },

and make the call again and then send the request screenshot again?

Completely remove it?

Yes.

Ok

i want to make sure that the interceptor is actually running

Request Headers

This is for the POST API?

Sure

the whole thing.. resopnse + request headers.

This one?

no

Without rid in axios init

thanks

Hmm

Can you add the interceptor to the axiosInstance?

const axiosInstance = axios.create({
        baseURL: $config.superTokensBackendURL,
        timeout: 10000,
        headers: { rid: $config.superTokensRID },
    });
SuperTokens.addAxiosInterceptors(axiosInstance);

Sure

Yes

Yes, I have cookies now

Ok great!

And doesSessionExist returns true

ok awesome

It seems like it's working

Please just make sure you follow all the steps here for "plain javascript" code tab: https://supertokens.com/docs/passwordless/quick-setup/frontend Step number 4 had this where you had to add the axios interceptors.

I mean, I follow them

Not sure what you mean. 😅 . Any feedback on how we can make that section of the docs more clear though?

Yes, I tried to follow your tutorial and did exactly what is written in step 4, but it turns out that I should call .addAxiosInterceptors() on axios Instance not import

Oh i see.

Yeah, it would be cool to add little note or smh to make sure people use this function properly

Yea.. makes sense. Thanks!

No problem, thank you too 👍

not really. The frontend SDK should be inited only on the frontend.

Ok, thanks

You shouldn't be using our frontend website on the backend.