https://supertokens.com/ logo
Join Discord
Powered by
CORS issue when using ngrok
# support-questions-legacy
z
This is the response I get when I click the Sign In With Google button or Facebook (see attached images). My frontend is still hosted locally: http://localhost:3000 But my backend is forwarded with: https://fccd-****ngrok.io Supertokens Code: Backend Node (config.ts):
Copy code
export const SuperTokensConfig: TypeInput = {
  supertokens: {
    connectionURI: "http://127.0.0.1:3567",
  },
  appInfo: {
    appName: "SuperTokens Demo App",
    apiDomain: "https://fccd-****.ngrok.io",
    websiteDomain: "http://localhost:3000",
},
...
Frontend React(config.tsx):
Copy code
export const SuperTokensConfig = {
    appInfo: {
        appName: "SuperTokens Demo App",
        apiDomain: "https://fccd-****.ngrok.io",
        websiteDomain: "http://localhost:3000",
    },
Cors:
Copy code
app.use(
  cors({
    origin: "http://localhost:3000",
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
    methods: ["GET", "PUT", "POST", "DELETE"],
    credentials: true,
  })
);
Ngrok web interface:
Browser Console:
r
you need to add the right URL (the ngrok one) to the backend's allowed origin
right now, it's just 
http://localhost:3000
z
Copy code
const allowedOrigins = ["http://localhost:3000", "https://****.ngrok.io"];
app.use(
  cors({
    origin: function (origin:any, callback) {
      if (allowedOrigins.indexOf(origin) !== -1) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by CORS'))
      }
    },
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
    methods: ["GET", "PUT", "POST", "DELETE"],
    credentials: true,
  })
);
I still get cors errors after adding the ngrok url
Reverting the apiDomain back to localhost:3001 gives no cors errors. So it's definitely ngrok.
On refresh:
On sign in:
r
the error is the same thing.. it's still trying to use ngrok
z
Well it should right? I forwarded my backend which is localhost:3001 to ngrok, which returns the ngrok url.
which I should replace my apiDomain/backend url with
As you can see I added the ngrok url beside the websiteDomain.
Copy code
const allowedOrigins = ["http://localhost:3000", "https://****.ngrok.io"];
I actually don't get this part, I just followed. But shouldn't we just pass the frontend URL to the origin and not the backend (the ngrok)?
r
hm. So the frontend is being loaded on localhost:3000 on the browser?
in that case, yea. Not sure why the browser needs the ngrok link.. that's very strange
oh right
the entire header is missing
i think you need to also configure this header on AWS too. It might be stripping away the header that is added by the cors lib
set it to localhost:3000
z
I don't use AWS
I thought maybe it's the cors() library so I asked chatgpt to do it manually
Copy code
app.options("*", (req, res) => {
  // Set the CORS headers for the preflight request
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "content-type,fdi-version,rid,st-auth-mode"
  );
  res.header("Access-Control-Allow-Credentials", "true"); // This is for cookies, authentication, etc.
  res.sendStatus(200);
});

// For actual requests (GET, POST, etc.), you'll also need to set the CORS headers:
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header(
    "Access-Control-Allow-Headers",
    "content-type,fdi-version,rid,st-auth-mode"
  );
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});
Authentication is working now
r
i don't think it's the issue with the cors lib
oh! ok
z
although it's a bit buggy
I think so too. Maybe we're just missing something.
r
maybe. Not sure. But if it works, then well.. it works
z
Thank you so much!
Update. It works but just a little bit. It lets me through, everything's fine the first time. It's logging the userInfo (get email with id) requests. Then I sign out. I click sign in, I get a cors error like before, I click sign in the second time, it lets me in, but this time i get cors errors for the userInfo requests saying 401 unauthorized. I'm doing this ngrok thing so that I can use my machine instead of paying for cloud computing (im running ai models with python as child-process) since this is just the testing phase and I got no budget. Im just a student. Looks like I really need to spend money then. Or I'll find alternatives to ngrok, maybe ngrok's the problem lol.
Plus all my socket.io stuff got cors errors too
r
Not sure. CORS error is sort of out of scope with supertokens here.
z
No im not asking for help anymore just vented out my frustrations 😂. I'll find another way.
52 Views
PreviousNext
Powered by