It seems like the post-login token ingestion / con...
# support-questions
q
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
Hey @qoby what do you mean by "post-login token ingestion" ?
Are you talking about passwordless magic link?
q
yeah, exactly
r
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
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
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
thats the link in the email
n
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
apiBasePath or web base? /auth
n
apiBasePath
q
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
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
@nkshah2 just looking through that code, why not unhash with something like: new URL(window.location.hash.substring(1), window.location.origin)
n
No specific reason, just wanted to keep it simple for an example app
q
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
Yeah that should work
q
@rp you mentioned "override the function that sends the email", are you talking about
recipeList smsDelivery.override.sendSms
?
r
There is also emailDelivery.override.sendEmail. Use that one
q
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
Do you mean an example of returning a custom urlWithLinkCode for the email?
q
yeah, is that the right idea?
r
What do you want to do?
If I understand, you want to modify the magic link to inject the hash right?
q
Right, based on your advice above
r
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
thank you!
2 Views