Hello, I created an UI for SuperTokens in SvelteKi...
# general
d
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?
r
- You need to call supertokens.init on app load (I assume you are using supertokens-website repo). - Are you using axios?
d
Yes
Ok, I'll try to init supertokens in layout instead of component
r
You also need to add axios interceptors.
d
Yes, I did that
r
for all axios instances that you import / create
ah ok
d
Ok, got it. I'll test it and come back soon
Nothing happens still
r
hmm
d
I have my _layout and login template nested in this layout. Should I init supertokens in both files?
r
- Can I see the response header for the consume code API? - A screenshot of the cookies section in your browser
> . Should I init supertokens in both files? You should make sure this is always called on app load regardless of which page the user is on
d
Btw, it's SSR app, maybe it can cause problems
Ok
r
Ah yea. You need to call the init function only when on the client side
d
Interesting
r
so check for something like
Copy code
if (typeof window !== "undefined") {
  supertokens.init({...});
}
d
SuperTokens def has access to window object, because it was throwing error about it and then I changed my code
r
I see.
d
Let me check everything again and then I'll send you response headers
Still nothing happens
r
Can I see the response headers in chrome?
From the network tab
And a screenshot of the cookie store in chrome
d
1 sec
r
Can I see your appInfo object on the backend and the supertokens.init call config on the frontend?
d
Of course, what is an appinfo object?
r
On the backend, when you call supertokens.init, you must be passing an object for appInfo
Whatโ€™s the value of that
d
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" },
onMount(() => { SuperTokens.init({ apiDomain: $config.superTokensApiUrl, apiBasePath: "/auth", }); });
wait
$config.superTokensApiUrl is http://localhost:3001
r
Hmm ok
d
What if something happens in my store and it cannot determine api url on front
r
Are you sure that the init function is being called before the axios call is being made for consuming the code?
Not sure what store you are referring to
d
Nevermind, it seems to work fine, because SuperTokens would throw an error otherwise
Yes
I'll try to init supertokens without getting value from store and see what happens
r
What is the output of await session.doesSessionExist() after the API call?
d
On front?
r
Yes
d
Could you please provide some snippet or ref?
I mean, how can I get session object in my code?
r
Please see our docs for how to check it a session exists on the frontend
r
Yes
the "plain Javascript" code tab
If you call that function after making the axios call, what does it return?
await SuperTokens.doesSessionExist()
d
Yes, one second
It returns false
r
hmm
so the only explanation for this is that it's not doing the interception
d
What is strange is that first time I accidentally called it without await and it returned promise and then refresh request happened
But returned 401
r
Yea.. that's expected.
d
But with await it returns false, and refresh doesn't happen
r
Though the result should be 200 cause you have the cookies set
> and refresh doesn't happen Cause it already thinks the session deosn't exist on the frontend..
What API domain are you querying?
d
On front? Yes
/auth
r
Can I see the code that you use to make the API call?
d
Yes, which route are you interested in?
r
the API which consumes the code
d
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); } };
r
Is this querying http://locaohost:3001?
Also, have you added the interceptors to
axiosInstance
?
d
const axiosInstance = axios.create({ baseURL: $config.superTokensBackendURL, timeout: 10000, headers: { rid: $config.superTokensRID }, });
r
Can I see the request headers too please?
d
superTokensBackendURL: "http://localhost:3001/auth",
r
not the OPTIONs request.
the POST request
d
oh sorry
r
Can you remove the
headers: { rid: $config.superTokensRID },
and make the call again and then send the request screenshot again?
d
Completely remove it?
r
Yes.
Just for now
d
Ok
r
i want to make sure that the interceptor is actually running
d
Request Headers
r
This is for the POST API?
Can i also see the response headers?
d
Sure
r
the whole thing.. resopnse + request headers.
d
This one?
r
no
like this
but without the rid thing
d
Without rid in axios init
r
thanks
so the interceptor is not getting applied
d
Hmm
But I call function
r
Can you add the interceptor to the axiosInstance?
Copy code
const axiosInstance = axios.create({
        baseURL: $config.superTokensBackendURL,
        timeout: 10000,
        headers: { rid: $config.superTokensRID },
    });
SuperTokens.addAxiosInterceptors(axiosInstance);
And then try
d
Sure
With rid?
r
Yes
d
Yes, I have cookies now
r
Ok great!
Does it work as expected?
d
And doesSessionExist returns true
r
ok awesome
d
It seems like it's working
Great man, thanks
r
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.
d
I mean, I follow them
Look at the snippet in docs
import axios from "axios"; import SuperTokens from 'supertokens-website'; SuperTokens.addAxiosInterceptors(axios);
To make it work I had to change it to import axios from "axios"; const axiosInstance = axios.create({ baseURL: $config.superTokensBackendURL, timeout: 10000, headers: { rid: $config.superTokensRID }, }); SuperTokens.addAxiosInterceptors(axiosInstance);
Anyway, thanks for your support
r
Not sure what you mean. ๐Ÿ˜… . Any feedback on how we can make that section of the docs more clear though?
d
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
r
Oh i see.
Understood
Well.. i wonder how to make this clear in the docs. haha..
d
Yeah, it would be cool to add little note or smh to make sure people use this function properly
r
Yea.. makes sense. Thanks!
d
No problem, thank you too ๐Ÿ‘
Now I faced another problem, you said that I should call supertokens init function only on client side to make window available for it. But SvelteKit architecture requires to fetch session on server side to make it available for all routes, is there any possibility to init supertokens on server-side?
r
not really. The frontend SDK should be inited only on the frontend.
But have a look at our nextjs docs for server side rendering and sessions
you can take inspiration from that and see if that works for you
d
Ok, thanks
Do I have to call .addAxiosInterceptors(axiosInstance) if I use node-fetch?
r
You shouldn't be using our frontend website on the backend.
But you don't have to add it to
fetch
. However, if this
fetch
is on the backend, the behaviour of the SDK interceptor is not defined well..
458 Views