Title
p

paschal

07/16/2022, 6:28 AM
Hey all, Any idea how to implement SuperTokens with Chrome extensions? I am stuck trying to get it to work.
r

rp

07/16/2022, 6:29 AM
Hey! One way would be to override the Session recipe issue simple JWT tokens instead of cookie based session. On the frontend, you could store the JWT in localstorage and it would work. An example app for how to change the session recipe to do this is: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-jwt-localstorage
p

paschal

07/16/2022, 6:33 AM
Thank you for your quick response. I am using NextJs. The switch will be made on
SuperTokens.init
right?
r

rp

07/16/2022, 6:33 AM
yes. correct. On the backend config
p

paschal

07/16/2022, 6:51 AM
Thank you. I seem to have successfully made the switch on NextJS. I guess I have to call import
useSessionContext
from the chrome extension, right?
r

rp

07/16/2022, 6:51 AM
Since you are using JWT based auth now, the frontend's useSessionContext will not work. You have to save and handle the JWT on your own on the frontend.
p

paschal

07/16/2022, 6:54 AM
Oh, thank you for your quick response. I have zero experience with authentication. Any example code on handling the JWT?
r

rp

07/16/2022, 6:54 AM
So first, have you changed the backend code to send a JWT in the response (as shown in the example app)?
p

paschal

07/16/2022, 6:56 AM
r

rp

07/16/2022, 6:56 AM
the pre and post API hook change applies to the frontend
So you have applied the frontend changes to the backend
that's incorrect
p

paschal

07/16/2022, 7:00 AM
r

rp

07/16/2022, 7:00 AM
yes thats the backend changes
p

paschal

07/16/2022, 7:46 AM
I am contemplating writing a separate node server for the chrome extension and letting the Nextjs app be. Seems like the perfect way to not break things. With my limited knowledge, I assume that the chrome extension and the Nextjs app can't share sessions but users registered on the app should be able to log in on the extension without having to register again, right?
r

rp

07/16/2022, 8:41 AM
Yes. Correct.
And you can manage the extension’s session in some other way perhaps.
p

paschal

07/16/2022, 9:11 AM
Awesome, thank you. While trying it on NextJs, I would get this:
TypeError: getCurves is not a function
On the server, I would get throw a can't get an undefined error at:
var signingKey = key.getPublicKey()
r

rp

07/16/2022, 9:15 AM
Hmmm. Can you delete node_modules and package lock and reinstall the libs?
And please check that you are not initialising the backend config on the frontend
p

paschal

07/16/2022, 9:24 AM
Yes, I am not calling the backend in the frontend, only
import { useSessionContext } from 'supertokens-auth-react/recipe/session'
is called from the frontend. My guess is that it has something to do with the defined
jwksUri: appInfo.apiDomain + "/auth/jwt/jwks.json",
I can see the error is from:
function getJWTKey(header, callback) {
  console.log({ header })
  client.getSigningKey(header.kid, function (err, key) {
    if (err) {
      console.log(err)
    }
    console.log({ client, error: err, keyR: key })
    var signingKey = key.getPublicKey();
    callback(err, "");
  });
}
The header would return:
{
  header: {
    kid: '0cc30e35-b021-42b9-826f-2f45ae7de044',
    typ: 'JWT',
    alg: 'RS256'
  }
}
However, there is an error when
client.getSigningKey
is called. Here is the error:
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (/Users/mac/Desktop/programs/guihq/app/with-supertokens-app/node_modules/jwks-rsa/src/wrappers/request.js:39:37)
Any idea how to fix this? The error with
getCurves
disappeared when I deleted node_modules and cleared the browser cache.
r

rp

07/16/2022, 10:00 AM
This has come before. I don’t recall the fix of the top of my head, but if you open an issue about this, we can get back to you