Anywhere that I could find a example of using Vani...
# support-questions
s
Anywhere that I could find a example of using Vanilla JS to create custom UI?
r
hey @Swiftzerr yea
It uses our supertokens-web-js SDK to provide social + email password example
s
thanks this works really well. I have another question though. If I am using another NodeJS framework for backend, what do I put in the "framework" field of
supertokens.init()
?
r
Which framework are you using? If you see the nodeJS code tabs in the quick setup > backend section for your recipe, you can see sub tabs for each framework.
If we don't have the framework that you are using, then you can open an issue about it on our github
s
Well Im using Nuxt 3, which uses Nitro as its server. Nitro is built on top of h3 (https://github.com/unjs/h3).
I think i could use a modified version of the nextjs one
but it will be hard
r
Gotcha. So you can open an issue about this, or you can add support for this yourself. In order to add support for this, you have to: - Implement the BaseRequest and BaseResponse interfaces (https://github.com/supertokens/supertokens-node/blob/master/lib/ts/framework/request.ts and https://github.com/supertokens/supertokens-node/blob/master/lib/ts/framework/response.ts) - Implement the middleware and errorHandler (for example here is for express: https://github.com/supertokens/supertokens-node/blob/master/lib/ts/framework/express/framework.ts#L145) - Implement the verifySession middleware (for example, here is for express: https://github.com/supertokens/supertokens-node/blob/master/lib/ts/recipe/session/framework/express.ts#L22)
s
looks like someone has already made one (https://github.com/supertokens/supertokens-node/pull/297). I dont know what their status is but I dont want to open another one
since they did alot of work
r
Hmm right. That PR is outdated. That’s why there are so many file changes. The actual number of file changes should be 3-4
c
Hello @rp, is there any news on this issue, we have our api service on Nitro right now and we would want to use supertokens to handle auth. If there could be any help that would be awesome. If I can help getting anything done, I'll be happy to do so. I still don't know many things about h3 tho.
r
Hey. No updates on h3 support yet unfortunately. But please feel free to work on top of the existing PR. Is this what you are looking for?
c
If I can help to get it to work I'll happily do so, but I don't know a lot about both supertokens and h3/nitro. How could I proceed to help ?
r
A good starting point for understanding supertokens is to run our demo app and play around with it. Maybe using an express server.
Once you understand how supertokens works, we can talk 🙂
c
Hum, okay I'll see what I can do.
r
👍
c
I may open another PR as it seems this one is far from being up to date.
r
Yup. Makes sense
c
@rp Is the
errorHandler
method any useful seems like a few other frameworks like koa and awslambda don't use it.
I'll go sleep now 😄
r
Hey @Call in the errorHandler is meant to handle supertokens specific errors thrown by use of getSession function - like try refresh token or unauthorised error.
For frameworks in which the user’s API is wrapped around the supertokens middleware, the error handler is not needed cause any error thrown by the user’s API can be caught by the supertokens middleware and handled in there (like in aws lambda or koa)
On the other hand, in frameworks like express, middleware’s don’t wrap the user’s api. That is, calling the next function in a middleware doesn’t give the result of that to the middleware. Therefore to handle errors thrown by the user’s API, we need another middleware (errorHandler) which the user has to add after all of their routes.
c
Hmm then it seems unnecessary for h3 right?
I am not entirely sure about the behavior h3 follows. I'll make an errorHandler any way.
@rp Do I need to create the file in
/framework
by hand? Seems like the build command does not add any files here (e.g. for express: https://github.com/supertokens/supertokens-node/tree/master/framework/express)
r
Yes you do need to add it by hand. You can just copy / paste the files from the other framework and change the import path.
c
Do I need to push the build ?
r
Yes. You do.
Run npm run build-pretty
c
@rp Maybe opening a new thread would be better but I wonder how to configure supertokens when you have multiple api domains for multiple services. For example, we use
https://<service>.api.bibliopus.app/
.
Maybe setting up an auth service like
auth.bibliopus.app
and then redirecting users to services could work ? I am not entirely sure about the best approach here
The docs seems to only cover the case where you have a unique apiDomain that you need to validate your requests from
r
Right yea. Redirecting the users would work well. And you could share one session across all sub domains as well.
c
I'm not sure about how to implement something like that yet. Maybe having a multiple domain configuration example could help.
r
We have docs for how to share a session across sub domains. It's a simple config. If you want to to redirection cross domains (where the base domains are different), that would require a bit more work.
c
Thanks I'll check that out
We are using nuxt3 + capacitor for our front-end (mobile app) and I am trying to make all that work together, not picking the simple route for myself 😅
r
Hmmm. There is a capacitor example created by @Rob Schilder. The link is somewhere on this discord. Have a look at that perhaps
c
Yeah I've already came across it and using it to help, pretty good start
But I'm still having errors with
Error: Since your API and website domain are different, for sessions to work, please use https on your apiDomain and dont set cookieSecure to false.
r
What values have you set for apiDomain, websiteDomain, and have you given any specific configs for session.init?
c
the issue is that we don't have a frontend other than the capacitor app so using:
Copy code
js
    appInfo: {
      // learn more about this on https://supertokens.com/docs/session/appinfo
      appName: 'Bibliopus',
      apiDomain: config.public.url, // this is the server domain (http://localhost:4000)
      websiteDomain: 'app.bibliopus', // this is the capacitor id and I think this is not right at all
      apiBasePath: '/auth',
      websiteBasePath: '/auth',
    },
r
Right. So I would suggest that you should set the website domain to be the same as your api domain. And set cookieSameSite in session.init to none
In terms of sending email links that contain your website domain, you can override the sendEmail functions in the recipes and change the email link’s domain to your capacitor app’s domain (for deep linking)
We don’t yet support non http webisteDomain which is part of the this problem. But we will do it soonish (in a few months time)
c
Okay thanks, will try that!
So, at this point I don't have errors when launching my server, but the middleware does not add any endpoint.
Does that mean that the h3 compatibility middleware is not working ?
Or should I do something else at this step ?
Here is the whole nitro plugin (entry point to h3)
I don't like posting screenshots 😅
r
Yea. It might be an issue with the h3 middleware code. You may have to debug what’s going on.
Consider enabling backend debug logs and seeing what it prints out
r
glad to hear it helped you!
c
So, I activated logs and for the record, here is what I get:
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.595Z com.supertokens {t: "2023-01-16T18:53:18.595Z", message: "appInfo: {"appName":"Bibliopus","apiDomain":"http://localhost:4000","websiteDomain":"http://localhost:4000","apiBasePath":"/auth","websiteBasePath":"/auth"}", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:338:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.595Z com.supertokens {t: "2023-01-16T18:53:18.595Z", message: "framework: h3", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:340:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.599Z com.supertokens {t: "2023-01-16T18:53:18.599Z", message: "session init: antiCsrf: VIA_CUSTOM_HEADER", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:199:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.599Z com.supertokens {t: "2023-01-16T18:53:18.599Z", message: "session init: cookieDomain: undefined", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:200:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.599Z com.supertokens {t: "2023-01-16T18:53:18.599Z", message: "session init: cookieSameSite: none", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:201:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.600Z com.supertokens {t: "2023-01-16T18:53:18.600Z", message: "session init: cookieSecure: false", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:202:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.600Z com.supertokens {t: "2023-01-16T18:53:18.600Z", message: "session init: refreshTokenPath: /auth/session/refresh", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:203:18" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:53:18.600Z com.supertokens {t: "2023-01-16T18:53:18.600Z", message: "session init: sessionExpiredStatusCode: 401", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:206:18" sdkVer: "12.1.5"}
When I navigate to "/":
Copy code
sh
@bibliopus/books:dev: 2023-01-16T18:57:07.540Z com.supertokens {t: "2023-01-16T18:57:07.540Z", message: "middleware: Started", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:225:26" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T18:57:07.541Z com.supertokens {t: "2023-01-16T18:57:07.540Z", message: "middleware: Not handling because request path did not start with config path. Request path: /favicon.ico", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:232:30" sdkVer: "12.1.5"}
And that is it. No routes are added
r
So the middleware does run. Cause the last message says “middleware: not handling because request path…”
Can you call and api that’s supposed to be exposed by the middleware? Like POST /auth/session/refresh and see what the output is?
(Assuming that you have done session.init on the backend)
c
This is in the recipeList property:
Copy code
js
      Session.init({
        cookieSameSite: 'none',
      }), // initializes session features
So should be initialized
So it seems going to POST /auth/session/refresh produces quite a lot of logs. (note that I get a 404 in the end)
(wait for it I need to do seperate messages it is a bit long)
r
Hmm. This probably means that you may not be handling response from our middleware correctly. Id have to see how you have implemented the middleware.
c
Here are the logs:
Copy code
sh
@bibliopus/books:dev: 2023-01-16T19:19:08.504Z com.supertokens {t: "2023-01-16T19:19:08.504Z", message: "middleware: Started", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:225:26" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.505Z com.supertokens {t: "2023-01-16T19:19:08.505Z", message: "middleware: requestRID is: undefined", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:239:26" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.505Z com.supertokens {t: "2023-01-16T19:19:08.505Z", message: "middleware: Checking recipe ID for match: thirdpartypasswordless", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:287:34" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.505Z com.supertokens {t: "2023-01-16T19:19:08.505Z", message: "middleware: Checking recipe ID for match: session", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:287:34" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.506Z com.supertokens {t: "2023-01-16T19:19:08.505Z", message: "middleware: Request being handled by recipe. ID is: /session/refresh", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:292:38" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T19:19:08.506Z com.supertokens {t: "2023-01-16T19:19:08.506Z", message: "refreshSession: Started", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipeImplementation.js:295:26" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.507Z com.supertokens {t: "2023-01-16T19:19:08.507Z", message: "refreshSession: UNAUTHORISED because idRefreshToken from cookies is undefined", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipeImplementation.js:298:30" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.507Z", message: "errorHandler: Started", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:316:26" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: Error is from SuperTokens recipe. Message: Session does not exist. Are you sending the session tokens in the request as cookies?", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:318:30" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: Checking recipe for match: thirdpartypasswordless", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:324:34" sdkVer: "12.1.5"}
Copy code
sh
@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: Checking recipe for match: session", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:324:34" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: Matched with recipeID: session", file: "/home/colin/projects/open-source/supertokens-node/lib/build/supertokens.js:328:38" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: returning UNAUTHORISED", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:133:34" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.508Z com.supertokens {t: "2023-01-16T19:19:08.508Z", message: "errorHandler: Clearing cookies because of UNAUTHORISED response", file: "/home/colin/projects/open-source/supertokens-node/lib/build/recipe/session/recipe.js:139:38" sdkVer: "12.1.5"}

@bibliopus/books:dev: 2023-01-16T19:19:08.509Z com.supertokens {t: "2023-01-16T19:19:08.509Z", message: "Sending response to client with status code: 401", file: "/home/colin/projects/open-source/supertokens-node/lib/build/utils.js:88:14" sdkVer: "12.1.5"}
r
Ok. So this is helpful
c
So from this it seems the error code does not seem to match ?
r
It tells me that lots of things are done correctly, but perhaps a few things are wrong
Maybe you are not handling the response stuff correctly from h3’s point of view
Can you make a PR that I can see? I’ll comment in it sometime this week.
c
I can do the PR, I already have my branch "ready".
r
Great. Looking forward to it.
And thanks for the work so far. I’m super excited to add h3 support to our SDK. Thank you.
c
No problem, I've been kind of bothering you too haha
Here is another one, " Issue this PR against the latest non released version branch." the last tag seems to be 12.1.5 and the latest branch 12.1, what branch do I need to issue against ?
And since h3/nitro support leads to nuxt server route support I think this could be helpful for a few people
Okay I've create the PR, feel free to change anything that is wrong about it or ask me to do it. https://github.com/supertokens/supertokens-node/pull/477
r
Ok thanks.
hey @Call in i left a few comments in the PR.
c
Looked into it, will work on it later today
r
Great.
p
@Call in Do you continue on h3 because it doesn't work ?
2 Views