https://supertokens.com/ logo
Join Discord
Powered by
Hey all, Any idea how to implement SuperTokens wi...
# support-questions
p
Hey all, Any idea how to implement SuperTokens with Chrome extensions? I am stuck trying to get it to work.
r
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
Thank you for your quick response. I am using NextJs. The switch will be made on 
SuperTokens.init
right?
r
yes. correct. On the backend config
p
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
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
Oh, thank you for your quick response. I have zero experience with authentication. Any example code on handling the JWT?
r
So first, have you changed the backend code to send a JWT in the response (as shown in the example app)?
p
r
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
r
yes thats the backend changes
p
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
Yes. Correct.
And you can manage the extension’s session in some other way perhaps.
p
Awesome, thank you. While trying it on NextJs, I would get this:
Copy code
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
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
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:
Copy code
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:
Copy code
{
  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:
Copy code
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
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
103 Views
PreviousNext
Powered by