https://supertokens.com/ logo
q

qoby

07/11/2022, 2:06 PM
It seems like the post-login token ingestion / confirmation isn't working, I'm presuming its because we're using HashRouter (routes are /#/foo). Has anyone had this problem?
r

rp

07/11/2022, 2:07 PM
Hey @qoby what do you mean by "post-login token ingestion" ?
Are you talking about passwordless magic link?
q

qoby

07/11/2022, 2:07 PM
yeah, exactly
r

rp

07/11/2022, 2:12 PM
I see. So the issue is that it's not routing to the right page? Or that it's not being able to pick up the right code from the URL?
Are you using react on the frontend or somethign else?
@nkshah2 can help here.
q

qoby

07/11/2022, 2:30 PM
Thanks @rp – yeah, its React with react-router-dom. It ends up with a blank screen on /#/auth/verify and doesn't forward off to any other urls
n

nkshah2

07/11/2022, 2:33 PM
Right, so the problem here is that the SDK uses the location hash for passwordless in the magic link flow But because the hash router has the path as part of the URL hash, the SDK logic fails. When you initialise SuperTokens you can pass custom handlers for the Window API to handle this You can use the logic from this file: https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-thirdpartypasswordless-electron/src/windowHandler.ts And then pass that when calling
SuperTokens.init
similar to
Copy code
SuperTokens.init({
    // ...
    windowHandler: getWindowHandler, // Refer to src/windowHandler.ts
    // ...
});
Out of curiosity, what is the full URL of the /auth/verify page where you get stuck?
q

qoby

07/11/2022, 2:39 PM
thats the link in the email
n

nkshah2

07/11/2022, 2:40 PM
Right, whats the
apiBasePath
set to for both your frontend and backend?
If you arent sure what that is, you can send the
appInfo
object you pass when calling SuperTokens init on the backend and frontend
q

qoby

07/11/2022, 2:41 PM
apiBasePath or web base? /auth
n

nkshah2

07/11/2022, 2:41 PM
apiBasePath
q

qoby

07/11/2022, 2:46 PM
I think that's right – I messed it up trying to push a hash into the web base path, since it was linking /auth/verify and not /#/auth/verify
That might be a minor bug, websiteBasePath: /#/auth yields a /verify link in email, but websiteBasePath: /auth yields /auth/verify
r

rp

07/11/2022, 3:07 PM
Hmm. That’s odd. Can you open an issue about that please?
Also, you should keep the websiteBasePath without a hash
And then override the function that’s sends the email to inject a hash in the final URL that goes in the email
Then on the frontend, you want to override the windowHandler on the frontend to get the code from the url correctly as seen here: https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-thirdpartypasswordless-electron/src/windowHandler.ts
q

qoby

07/11/2022, 3:21 PM
@nkshah2 just looking through that code, why not unhash with something like: new URL(window.location.hash.substring(1), window.location.origin)
n

nkshah2

07/11/2022, 3:22 PM
No specific reason, just wanted to keep it simple for an example app
q

qoby

07/11/2022, 3:24 PM
I'm probably missing something obvious, but I think it can be rewritten like getSearch() { return (new URL(window.location.hash.substring(1), window.location.origin)).search; }, getHash() { return (new URL(window.location.hash.substring(1), window.location.origin)).hash; }, getPathName() { return (new URL(window.location.hash.substring(1), window.location.origin)).pathname; },
n

nkshah2

07/11/2022, 3:27 PM
Yeah that should work
q

qoby

07/11/2022, 4:07 PM
@rp you mentioned "override the function that sends the email", are you talking about
recipeList smsDelivery.override.sendSms
?
r

rp

07/11/2022, 4:08 PM
There is also emailDelivery.override.sendEmail. Use that one
q

qoby

07/11/2022, 4:08 PM
oops yes, thank you
Do you know if there are any examples of custom urlWithLinkCode in github? I'm looking but not finding much
nor in docs
n

nkshah2

07/11/2022, 4:15 PM
Do you mean an example of returning a custom urlWithLinkCode for the email?
q

qoby

07/11/2022, 4:20 PM
yeah, is that the right idea?
r

rp

07/11/2022, 4:21 PM
What do you want to do?
If I understand, you want to modify the magic link to inject the hash right?
q

qoby

07/11/2022, 4:24 PM
Right, based on your advice above
r

rp

07/11/2022, 4:24 PM
If yes, you can do it like this;
Copy code
ts
Passwordless.init({
    emailDelivery: {
        override: (oI) => {
            return {
                ...oI,
                sendEmail: async function (input) {
                    let magicLink = input.urlWithLinkCode // this is like {websiteDomain}/{websiteBasePath}/verify#<one time use code>
                    // you can parse the URL using the URL lib and modify the link however you like
                    // and then you can assign it back to input
                    input.urlWithLinkCode = magicLink
                    return oI.sendEmail(input);
                }
            }
        }
    }
})
So you can break down the link into domain and path. Then reform it with a
#
in the middle (so that the hash router understands it)
q

qoby

07/11/2022, 4:31 PM
thank you!
2 Views