Hi I'm using Supertokens for passwordless authenti...
# support-questions
a
Hi I'm using Supertokens for passwordless authentication. My backend is Node JS and Frontend is Angular. Im able to signup using the signinup and consume api call. But the issue is that I'm not able to create a session. Neither the cookie is getting stored in browser after the consume api call. when I checked the response header the set-cookie parameter is there. But its not storing the cookie. And When Im running the function getAccessTokenPayloadSecurely(), it throws the error session doesnt exist.
n
Hi I'm using Supertokens for passwordless authentication. My backend is Node JS and Frontend is Angular. Im able to signup using the signinup and consume api call. But the issue is that I'm not able to create a session. Neither the cookie is getting stored in browser after the consume api call. when I checked the response header the set-cookie parameter is there. But its not storing the cookie. And When Im running the function getAccessTokenPayloadSecurely(), it throws the error session doesnt exist.
r
hey! What version of the node SDK are you using?
You can run it with debug logs and show us the logs
Copy code
DEBUG=com.supertokens node app.js
works for the latest version of the node sdk
a
Hi Im using this version v14.18.0
r
no i mean the supertokens-node version
a
"^9.1.2"
r
great. So please run it with the debug logs as shown above and show us the log output on startup + after you call the sign in API
a
Just a small doubt, Do we have to write the api fetch func for signup/ consume etc in node as well. Because when I saw the doc, it meant that it will automatically fetch the api call.
n
The SDK adds the APIs for you
a
So only in frontend its required to be called right ?
n
Correct
a
Im so sorry to bother you, but this is my first time working with node js. Can you tell me where I have to put this for debugging?
DEBUG=com.supertokens node app.js
n
We are happy to help, when you start your node server (using
node index.js
for example) you use the
DEBUG=com.supertokens
before that ( In the example I gave that would become
DEBUG=com.supertokens node index.js
)
a
The term 'com.supertokens' is not recognized is the error which Im getting
n
Can you share the full command you are using?
a
com.supertokens node index.js
n
The command should be
DEBUG=com.supertokens node index.js
a
I tired this as well
n
Same error?
a
yeah DEBUG=com.supertokens : The term 'DEBUG=com.supertokens' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + DEBUG=com.supertokens node index.js + ~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (DEBUG=com.supertokens:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
r
Are you using windows?
a
yeah
r
Copy code
SET DEBUG=com.supertokens
node index.js
run them as two separate commands
a
yeah its working, now what I have to do ?
r
what is the output?
a
Where can we see the output ?
r
on your terminal
a
Only this much API Server listening on port 3000
r
hmm
a
Do we have to do something to set the cookie or something ?
n
Can you send the code snippet for calling SuperTokens.init on the frontend and backend? (Stripping any API keys if you have used any)
a
Copy code
ngOnInit(): void {
    SuperTokens.init({
      apiDomain: 'http://localhost:3000',
      apiBasePath: '/auth',
    });
  }
Frontend
Backend : `supertokens.init({ framework: "express", supertokens: { // These are the connection details of the app you created on supertokens.com connectionURI: "", apiKey: "", }, appInfo: { // learn more about this on https://supertokens.com/docs/session/appinfo appName: "demo-app", apiDomain: "http://localhost:3000", websiteDomain: "http://localhost:4200", apiBasePath: "/auth", websiteBasePath: "/auth", }, recipeList: [ Passwordless.init({ flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", contactMethod: "EMAIL", createAndSendCustomEmail: async (input) => { let htmlBody = getEmailBody( APP_NAME, Math.ceil(input.codeLifetime / 1000 / 60), input.urlWithLinkCode, input.userInputCode, input.email ); await mailTransporter.sendMail({ html: htmlBody, to: input.email, from:
Team Supertokens <${process.env.NODEMAILER_USER}>
, sender: process.env.NODEMAILER_USER, subject:
Login to ${APP_NAME}
, }); }, }), Session.init(), // initializes session features ], });`
n
Are you using fetch for making requests on the frontend?
a
Not fetch, Using http Sample req :
Copy code
login(email){
    let headers = new HttpHeaders()
      .set('rid', 'passwordless');
    let url = 'http://localhost:3000/auth/signinup/code';
    return this.http.post(url,email, {headers});
  }

  consume(data){
    let headers = new HttpHeaders()
      .set('rid', 'passwordless');
    let url = 'http://localhost:3000/auth/signinup/code/consume';
    return this.http.post(url,data, {headers});
  }
n
So for session management to work we rely on interception which currently only supports
fetch
or
axios
a
Ok got it, Do you have any example for using fetch or axios using supertokens?
n
Our documentation has examples on how to enable interception using supertokens: https://supertokens.com/docs/passwordless/quick-setup/frontend For actually making the requests Google is your best friend :p
a
Sure thanks for the help!
Hi , I was able to store the cookie using axios. Thanks for the help.
n
Happy to help
a
I wanted to know when we send the mail for passwordless authentication, So there is a button right on click of which it should directly login us instead of providing OTP. Do we have to write any api call for that part ?
I didnt find that in the doc , thats why I asked .
Because when Im clicking on the button its again taking me back to login page.
r
That shouldn't happen
What are the API calls being made when you click on the button, and what is the output of those APi calls?
n
You are using an angular frontend correct? Can you explain what your flow is?
r
no i mean when you click on the button, the browser page is opened.. on that page, what are the APi calls being made and what is the output of them?
a
Right now Im not calling any api. Thats why I asked , do we have to write any api call for that button login. Because for logging in through OTP I'm writing the calls.
n
So the general idea is to call the
createCode
endpoint to start the flow and generate the code/link depending on what you chose during SuperTokens.init. On the screen that is opened when the user clicks on the screen/ the screen where you want the user to enter the code you call the
consumeCode
API
After calling the consume code API if the API does not throw any errors, the user is logged in
a
These are the calls right for passworless one
r
you need to call the /code/consume API
using the fields from the magic link
a
Yeah thats through OTP right, I want directly click on button instead of OTP.
For that which call has to be made ?
r
that same APi is for magic link as well
a
then where can I get this linkcode ? "linkCode": "b10lbT_SnDC4flA6Fn7pE5TtG5k5NfigLef4QMBeGA8"
Copy code
{
  "preAuthSessionId": "kFmkPQEAJtACiT2w/K8fndEuNm+XozJXSZSlWEr+iGs=",
  "linkCode": "b10lbT_SnDC4flA6Fn7pE5TtG5k5NfigLef4QMBeGA8"
}
r
it will be in the URL of the magic link.
preAuthSessionId will be in the query param
linkCode will be in the URL after the "#" symbol
a
Here this is the magic link right the bottom one. I can only see the preAuthSessionId in this.
Ok got it.
So I have to write this call where in frontend or backend ?
n
Frontend
a
But the mail body is being created in backend right ? That is where we have this login button.
n
So im not sure what your flow is, in the mail you will have a button that will redirect the user to the magic link location right?
a
Yeah
Its fine, I will figure that out. Thanks for the help!
r
The button will open the browser. So it will open a page on your frontend app.
n
So if you are redirecting the user, the final URL will open in the browser. In which case you will need to read the information from the URL and call the API from the frontend
r
On that page, you need to call the API
a
Ok Got it! Thanks.
Hi , Once I click on the magic link button it will open a new tab right and the user id will be shown in that page after logging in. I wanted to know is there any api call or function to automatically discover in the previous tab if login has been done in other tab.
r
In the previous tab, you can always check if await Session.doesSessionExist() at an interval
a
Ok
For something like this we can do this Session.doesSessionExist() at an interval right ?
r
Yes
n
Sure, that shouldnt cause any issues
a
Or any other better way you would suggest ?
n
Checking for doesSessionExist on an interval is fine
a
Sure thanks!
Hi , just wanted to know , how long does the session exist for supertokens ?
a
Thanks
Do you guys support Firebase ?
r
can you be more specific please?
a
I want to try to self host it and store my data into google firebase.
n
To clarify, you want to self host SuperTokens core and then store user information to firebase?
a
Yeah
Is it supported ?
n
We dont support it directly, but you could use the override feature in the backend SDKs to store the information to firestore (or realtime db) yourself. SuperTokens core would still use either MySQL or PostgreSQL though
a
Ok got it.
Hi, I needed one help from you guys. Can you please tell me how to get these details { "preAuthSessionId": "kFmkPQEAJtACiT2w/K8fndEuNm+XozJXSZSlWEr+iGs=", "linkCode": "b10lbT_SnDC4flA6Fn7pE5TtG5k5NfigLef4QMBeGA8" }
When I saw the demo app of yours, it was saving in the local storage
r
yup
a
Is there any way I can also store it
r
you can store it in localstrorage as well
these are returned from the API when you create a new code
a
Ok got it. thanks
5 Views