Hey there supertokens community 👋 I stumbled upon supertokens and am pretty excited to use it in a side project of mine! TL;DR:

getRoutingComponent()

does not render in chrome extension, but does when run via

npm start

or

npm run build && serve -s {{path}}

My current project involves a chrome extension running a react app in its popup. It is in this react app that I would like users to register or login using supertokens. To this end, I followed your getting started guide. As a minimal example, I simply initialize

SuperTokens

and call

getRoutingComponent()

, which IIUC, returns an element that renders the login/registration UI. That being said, when I use

npm start

or

npm run build && serve -s {{path}},

I do see the login UI being rendered. When turning on debug logs and logging the return value of

getRoutingComponent()

, I do see

SuperTokens

being initialized as well as the return value of the function call not being

null

. Instead, I can see it is of type

react.element

with a props

path

of

index.html

and

supertokensInstance

being the supertokens instance. This led me to the conclusion that soemthing's wrong with my configuration since it's working with both the devserver and as a production build being served. I've searched for similar use cases and indeed found some who were using supertokens in a chrome extension but nothing comparable here

hey @deezy5456

🙉 😍 thanks a bunch

hi

I'm currently debugging a bit and it seems like the app is running within the url of

chrome-extension://{{ either random string or some hash }}

, whereas the value of websitedomain I used to initialize SuperTokens was referring to a specific website

yeah, that's what I wanted to say, it's likely an issue with url.

Just tried it out and am now getting an error from

normalizedURLDomain.js

hmm, I think there is no way around that with the released version :/

I think you can hack around this by overriding the window handler object in the frontend supertokens.init

that's true, there's always a way around almost everything in js 🙂

Hmm. Maybe

> There should be a function which allows you to get the current url and in that you can modify the chrome:// part and replace it with http:// and maybe then it will work Funny enough, I already had a look at this but since I've admittedly invested less than an hour into setting this up and debugging, I figured I'd first go through the code and understand what the domain really does. At least at first glance, I thought this might be used for CSP and CORS validation, so I didn't follow through on that thought (yet)

Ok great! So it’s working now?

Yes, it's rendering, now I'll just have to figure out how to perform the callbak to the extension 🙃 sorry for my blatant stupidty. I just have never dealt with chrome extensions before and am discovering my unknown unknowns

Sure. Will let you know In case we have something that can help you 🙂

Great thanks!

hey @deezy5456 , did you end up figuring a way to callback to the extension?

Not really :/ I finally resorted to chrome‘s identity API which features a proxying callbacks back to the extension

Managed to get it working! Adding an explanation in case anyone is doing something similar to us. I add http:// to the start of my callback url (chrome-extension://...). When this callback url is returned after successfully logging in, the : (colon) in chrome-extension:// is removed. So in my chrome extension, I run the following code which checks the tabs for this url, and updates it if it matches.

// This event is fired each time the URL of a tab changes
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      let newUrl = changeInfo.url;
      if (newUrl.includes('http://chrome-extension//<id>/options.html')) {
        const stringSplit = newUrl.split('?')
        const queryParams = stringSplit[1]
        chrome.tabs.update(tabId, {url: `chrome-extension://<id>/options.html?${queryParams}`})
      }
      console.log(newUrl)
  });

hey @djarran thanks for this. Would you be so kind enough to make an issue about this in our supertokens-auth-react SDK and also answer the issue with the above explanation? Github issues are way easier to find than discord conversations.