Hi guys trying to explore if supertokens is the right soluti

Question

Hi guys trying to explore if supertokens is the right solution for us right now we have our own `authentication` solution but we are searching for a more secure solution with session management the only thing whats not really clear for me if we can use our existing UI We have a multistep register form build with chakra ui react hook form

nkshah2 · Answer

Hi < EdwinN1337> Yes you can use your own UI and call our APIs manually to achieve this

EdwinN1337 · Answer

Great Guess I overlooked in docs theb

EdwinN1337 · Answer

Couldn t find it

nkshah2 · Answer

In the docs for frontend there should be an option for Plain Javascript which points out how to use SuperTokens with custom UI

EdwinN1337 · Answer

There is no recipe guide available right

EdwinN1337 · Answer

Only this https supertokens com docs website modules html

EdwinN1337 · Answer

ah got it https supertokens com blog adding social login to your website with supertokens

EdwinN1337 · Answer

thanks

nkshah2 · Answer

< EdwinN1337> You can follow the docs by selecting the recipe you want to use on this page https supertokens com docs guides

EdwinN1337 · Answer

I m trying to get a custom UI going i ve got a nextjs app > followed the docs all good

EdwinN1337 · Answer

Inside the emailpassword recipe im trying to log the input response

EdwinN1337 · Answer

to see if all works

EdwinN1337 · Answer

Not sure what i m doing wrong but it seems like this is not called

EdwinN1337 · Answer

there are the endpoint I can use right for email password

EdwinN1337 · Answer

i ve tried `rid=emailpassword` no luck either

nkshah2 · Answer

So rid should definitely be emailpassword Can you try throwing an error from inside the signInPOST function and see if that works correctly Just to first make sure that the function is being called

nkshah2 · Answer

Also can you post the code for where you call supertokens init for the backend config

EdwinN1337 · Answer

Ah it works sorry Probably misspelled `rid`

EdwinN1337 · Answer

Thanks

nkshah2 · Answer

Happy to help

EdwinN1337 · Answer

Another question can t find it in the docs

EdwinN1337 · Answer

```js Passwordless init flowType MAGIC LINK contactMethod EMAIL validateEmailAddress async email => validate email console log validateEmailAddress email return OK createAndSendCustomEmail async email urlWithLinkCode => await sendEmail to email emailMarkup emailMarkup url urlWithLinkCode subject Inloggen bij De Lokalist ``` The validateEmailAddress method is called before createAndSendCustomEmail

EdwinN1337 · Answer

But I have no clue what the response should be when e mail is validated

nkshah2 · Answer

Ah right yes the documentation doesnt make it clear So `validateEmailAddress` returns a `string` or `undefined` If you return a `string` the SDK assumes there was a validation error and uses the string as the error message Returning `undefined` means that the email is valid

EdwinN1337 · Answer

thanks again

EdwinN1337 · Answer

loving it sofart

nkshah2 · Answer

Thanks We appreciate it

EdwinN1337 · Answer

Hmm so i ve got the validation and sending email with magic link working> When I click on the magic link http localhost 4000 api auth verify rid=passwordless preAuthSessionId=mRd5fGLxSP TeV2GjQDLmXbrtzIELZ15JkBKdDJ0UbA= ocu9zA6u873CqmheofK0eXzNFncEgwC4tE0v9Il44ys= What is the next step Docs is unclear about that

nkshah2 · Answer

Can you enable logging and send us the output here You can refer to the troubleshooting guide to know how to do that https supertokens com docs emailpassword troubleshooting how to troubleshoot

EdwinN1337 · Answer

ahh

EdwinN1337 · Answer

022 05 23T11 49 53 465Z com supertokens t 2022 05 23T11 49 53 465Z message middleware Not handling because no recipe matched file `

EdwinN1337 · Answer

makes sence i switched to passwordless got a dashboard app running with magic link

nkshah2 · Answer

Can you post the full logs including logs generated when your server started

EdwinN1337 · Answer

`dashboard dev 2022 05 23T11 49 53 446Z com supertokens t 2022 05 23T11 49 53 446Z message session init refreshTokenPath api auth session refresh file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build recipe session recipe js 168 18 sdkVer 9 2 1 dashboard dev 2022 05 23T11 49 53 446Z com supertokens t 2022 05 23T11 49 53 446Z message session init sessionExpiredStatusCode 401 file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build recipe session recipe js 171 18 sdkVer 9 2 1 dashboard dev 2022 05 23T11 49 53 463Z com supertokens t 2022 05 23T11 49 53 463Z message middleware Started file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build supertokens js 158 26 sdkVer 9 2 1 dashboard dev 2022 05 23T11 49 53 464Z com supertokens t 2022 05 23T11 49 53 464Z message middleware requestRID is undefined file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build supertokens js 172 26 sdkVer 9 2 1 dashboard dev 2022 05 23T11 49 53 464Z com supertokens t 2022 05 23T11 49 53 464Z message middleware Checking recipe ID for match passwordless file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build supertokens js 220 34 sdkVer 9 2 1 `

EdwinN1337 · Answer

`dashboard dev 2022 05 23T11 49 53 465Z com supertokens t 2022 05 23T11 49 53 465Z message middleware Not handling because no recipe matched file C Users edwin Desktop Projects lokalist monorepo v2 node modules supertokens node lib build supertokens js 243 30 sdkVer 9 2 1 `

nkshah2 · Answer

There should be more logs on server start You should see something along the lines of `Started SuperTokens with debug logging supertokens init called `

EdwinN1337 · Answer

ah ye here s the full one

EdwinN1337 · Answer

here

nkshah2 · Answer

So a few things ` apiBasePath api auth websiteBasePath api auth ` You shouldnt use the same base paths for both the website and the api layer since you are using NextJs The `rid` header in the request headers should match the recipe you are trying to use Once you click on the magic link on your frontend you will need to call the ` consume` route for Passwordless https app swaggerhub com apis supertokens FDI 1 13 2 Passwordless 20Recipe passwordlessSignInUpConsume The API expects a `linkCode` which is the location hash after you click on the magic link

EdwinN1337 · Answer

ahh clear the consume best would be to use some kind of polling right

EdwinN1337 · Answer

wait for the link to be clicked

nkshah2 · Answer

Yep that will prevent automatic calls to your APIs if a mail client opens the URL internally which is likely

nkshah2 · Answer

So the link will open the ` auth verify` route on your frontend That route can have a button Confirm or something similar and then when the user clicks it you can call the ` consume` API

EdwinN1337 · Answer

ah right and how do I get the `linkCode` not really sure if I get that

EdwinN1337 · Answer

ah nvm

EdwinN1337 · Answer

got it

nkshah2 · Answer

http localhost 4000 api auth verify rid=passwordless preAuthSessionId=mRd5fGLxSP TeV2GjQDLmXbrtzIELZ15JkBKdDJ0UbA= ocu9zA6u873CqmheofK0eXzNFncEgwC4tE0v9Il44ys= In this URL that you sent you can use the hash

EdwinN1337 · Answer

any specific thing I have to do here Or I can leave it to the defaults

EdwinN1337 · Answer

`getLinkDomainAndPath`

nkshah2 · Answer

Ill need a little more context where are you trying to add this

EdwinN1337 · Answer

ah its changing the magic link url

EdwinN1337 · Answer

sometimes i have to click more in the docs before asking

EdwinN1337 · Answer

I ll try it out again thnx

nkshah2 · Answer

Happy to help feel free to ask questions if you have them

EdwinN1337 · Answer

Will do

EdwinN1337 · Answer

` Once you click on the magic link on your frontend you will need to call the consume route for Passwordless https app swaggerhub com apis supertokens FDI 1 13 2 Passwordless 20Recipe passwordlessSignInUpConsume The API expects a linkCode which is the location hash after you click on the magic link` Blegh not sure if I get this right > shouldnt the middleware handle this link and redirect close browser

EdwinN1337 · Answer

i cant override ` api auth verify` Where do I build `Confirm` button

nkshah2 · Answer

Right so the magic link is actually meant for your frontend not your backend Basically when the user clicks the link on their email they need to be redirected somewhere

nkshah2 · Answer

Which means that the user would land on your website on some page with the path ` auth verify` On this page you can have a button that the user will click and then you will need to call the API manually

EdwinN1337 · Answer

ah but the path is ` api auth verify `

EdwinN1337 · Answer

it shouild be `auth verify`

nkshah2 · Answer

The path is ` api ` because your `websiteBasePath` is ` api auth`

nkshah2 · Answer

Which is what I meant by you shouldnt use the same base paths for both your api and website

nkshah2 · Answer

If you change the website base path then the magic link will use that instead

EdwinN1337 · Answer

yeah i did change it weird ```js appName Lokalist Dashboard apiDomain process env NEXT PUBLIC FRONTEND URL websiteDomain process env NEXT PUBLIC FRONTEND URL apiBasePath api auth websiteBasePath auth ```

EdwinN1337 · Answer

thats why i was confused i cant change the `api auth`

nkshah2 · Answer

So in the logs you sent earlier when you call SuperTokens init in your API layer you are passing `apiBasePath api auth websiteBasePath api auth `

nkshah2 · Answer

I would double check that

EdwinN1337 · Answer

I ve changed that restarted server

EdwinN1337 · Answer

`dashboard dev 2022 05 23T12 44 10 053Z com supertokens t 2022 05 23T12 44 10 053Z message appInfo appName Lokalist Dashboard apiDomain http localhost 4000 websiteDomain http localhost 4000 apiBasePath api auth websiteBasePath auth `

EdwinN1337 · Answer

ah nice

nkshah2 · Answer

I mean in this step

EdwinN1337 · Answer

yeah the problem is

EdwinN1337 · Answer

u have to restart server

EdwinN1337 · Answer

woops

EdwinN1337 · Answer

with nextjs

nkshah2 · Answer

Ah p Happens to the best of us

EdwinN1337 · Answer

thanks

nkshah2 · Answer

Well now if you trigger the email then the URL should use ` auth` and not ` api auth`

nkshah2 · Answer

Happy to help

EdwinN1337 · Answer

after this is done we swapped our `magic link` implementation from our dashboard to > supertokens what s left is to replace custom auth from our ios android web apps monorepo capacitor nextjs hasura stack

EdwinN1337 · Answer

i might come back with some questions due to custom UI

nkshah2 · Answer

Ah awesome And yep feel free to ask them We do have docs for web with Hasura as well if you need them

EdwinN1337 · Answer

i saw > only problem which might occur is that supertokens is using httpOnly cookies interceptors on the web we use fetch

EdwinN1337 · Answer

but on our capacitor apps we need to use the native `http` plugin so no fetch or axios

EdwinN1337 · Answer

if we want to use session cookies httpOnly

EdwinN1337 · Answer

but confident willl figure our

EdwinN1337 · Answer

out

nkshah2 · Answer

Ah right let us know if you need help with anything there

EdwinN1337 · Answer

Is this the linkcode

nkshah2 · Answer

Everything after the ` ` yes You can use `window location hash` to access it easily

EdwinN1337 · Answer

ah d

nkshah2 · Answer

Make sure to remove the ` ` symbol before sending it to the API

EdwinN1337 · Answer

Works What s the exact flow for frontend Do I have to query ` apiBasePath signup email exists` Wait for response to have `STATUS=OK EXIST=true` and if so i can start using `import getUserId doesSessionExist from supertokens website `

EdwinN1337 · Answer

have to listen to some event to know user clicked on button and is logged in

nkshah2 · Answer

Not sure what you mean by flow do you mean what to do after signing in

nkshah2 · Answer

`doesSessionExist` is available to use at any time after the sign in up process is complete the function will return true

EdwinN1337 · Answer

ye i ment something like this

EdwinN1337 · Answer

```js const data = useQuery session doesSessionExist enabled isSubmitting refetchInterval 1000 onSuccess data => if data setIsSubmitting false ```

nkshah2 · Answer

I m not familiar with the syntax but it would work similar to any other async operation If your logic needs an active session then you d check for it before performing it