https://supertokens.com/ logo
f

funk101

05/20/2022, 4:19 AM
I just posted to production. Been developing localhost with nextjs. When in production I'm getting this error:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I'm wondering if it has something to do with
NextCors
middleware? Any ideas?
a

Ahnaf

05/20/2022, 4:27 AM
hi
So that means in prod, when your frontend sends a request to Nextjs
and Nextjs responses with a 3xx code
hence, the redirect
but
on OPTIONS requests, it shouldnt respond with 3xx
rather, it should be a 2xx
f

funk101

05/20/2022, 4:29 AM
sorry, false alarm, here is the code I thought might be the answer... await NextCors(req, res, { methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"], origin: "*", //process.env.NEXT_PUBLIC_HOST, credentials: true, allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()], }); I changed "origin" to "*" instead of the commented out code
a

Ahnaf

05/20/2022, 4:29 AM
Hm
f

funk101

05/20/2022, 4:29 AM
here is the other part to error
POST https://finicky.pet/api/auth/session/refresh net::ERR_FAILED
a

Ahnaf

05/20/2022, 4:29 AM
Does the NEXT_PUBLIC_HOST end with a "/" ?
f

funk101

05/20/2022, 4:29 AM
so, I assume it's in supertokens auth
which is where that NextCors code is
a

Ahnaf

05/20/2022, 4:30 AM
.
f

funk101

05/20/2022, 4:31 AM
here's the firefox error `
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://finicky.pet/api/auth/session/refresh. (Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://finicky.pet/api/auth/session/refresh. (Reason: CORS request did not succeed). Status code: (null).`
a

Ahnaf

05/20/2022, 4:32 AM
Let me try pinging the api
What method does it use?
HTTP method
f

funk101

05/20/2022, 4:33 AM
methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
r

rp

05/20/2022, 4:33 AM
You should add an origin btw. Not use *
a

Ahnaf

05/20/2022, 4:33 AM
Yeah
Cuz bad security in prod
f

funk101

05/20/2022, 4:33 AM
ok, so back to orig. config
origin: process.env.NEXT_PUBLIC_HOST,
a

Ahnaf

05/20/2022, 4:33 AM
Getting a 500 with options
An options preflight should always have a 2xx for CORS to succeed
r

rp

05/20/2022, 4:34 AM
with nextjs, you don't even need CORS if your frontend and backend have the same domain
a

Ahnaf

05/20/2022, 4:34 AM
Yop
f

funk101

05/20/2022, 4:34 AM
well, just going by the supertokens example
cause it's new to me
a

Ahnaf

05/20/2022, 4:34 AM
*unless u are cringe like me and decide to host the frontend separately cuz why tf not*
im new to supertokens as well
r

rp

05/20/2022, 4:35 AM
Is the browser making an OPTIONS request?
a

Ahnaf

05/20/2022, 4:35 AM
It should, cuz it's firefox
It says it received a preflight response which is a redirect, which should mean its sending an OPTIONS
f

funk101

05/20/2022, 4:36 AM
I have my _app.js wrapped in IF THAT means anything
r

rp

05/20/2022, 4:36 AM
that's odd. it shouldn't send an OPTIONS call if the domain is the same
that shouldn't make a diff
f

funk101

05/20/2022, 4:37 AM
my _app.js
Copy code
if (typeof window !== "undefined") {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  SuperTokensReact.init(frontendConfig());
}

const EmailPasswordAuthNoSSR = dynamic(
  new Promise((res) => res(EmailPassword.EmailPasswordAuth)),
  { ssr: false }
);

export default function App({ Component, pageProps }) {
  const securityLevel = Component.securityLevel;
  const getLayout = Component.getLayout || ((page) => page);

  if (securityLevel === "full") {
    return (
      <EmailPasswordAuthNoSSR>
        {getLayout(<Component {...pageProps} />)}
      </EmailPasswordAuthNoSSR>
    );
  } else {
    return (
      <EmailPasswordAuthNoSSR requireAuth={false}>
        {getLayout(<Component {...pageProps} />)}
      </EmailPasswordAuthNoSSR>
    );
  }
}
r

rp

05/20/2022, 4:38 AM
What is the value of api domain and website domain on the frontend config?
f

funk101

05/20/2022, 4:39 AM
Copy code
export const appInfo = {
  // learn more about this on https://supertokens.com/docs/emailpassword/appinfo
  appName: "finicky.pet-v4",
  apiDomain: process.env.NEXT_PUBLIC_HOST,
  websiteDomain: process.env.NEXT_PUBLIC_HOST,
  apiBasePath: "/api/auth",
  websiteBasePath: "/auth",
};
r

rp

05/20/2022, 4:39 AM
what what is the value of
process.env.NEXT_PUBLIC_HOST
?
a

Ahnaf

05/20/2022, 4:40 AM
I asked that as well
I was wondering what it was
Because that could be the culprit
f

funk101

05/20/2022, 4:40 AM
a

Ahnaf

05/20/2022, 4:40 AM
http??
But your API is https
wait, why dont u change the next public host to https?
change it to this
Because the API u are trying to ping is on HTTPS, and when u are visiting ur site i think that's probably ur HTTPS frontend as well
f

funk101

05/20/2022, 4:41 AM
sorry, it is https
a

Ahnaf

05/20/2022, 4:41 AM
Oh okay
f

funk101

05/20/2022, 4:42 AM
there's a supertokens redirect on frontendconfig() but should not have been touched in this landing page
a

Ahnaf

05/20/2022, 4:42 AM
But here's my question
if its redirecting on prod, why not local?
r

rp

05/20/2022, 4:42 AM
What have you added in the origin part of the cors config?
a

Ahnaf

05/20/2022, 4:42 AM
Because if some sort of redirect was actually coded, it shouldve redirected on local as well
f

funk101

05/20/2022, 4:42 AM
Copy code
appInfo,
    recipeList: [
      EmailPasswordReact.init({
        getRedirectionURL: async (context) => {
          if (context.action === "SUCCESS") {
            if (context.redirectToPath !== undefined) {
              // navigate back to where the user was before authenticated
              return context.redirectToPath;
            }
            return "/dashboard";
          }
          return undefined;
        },
r

rp

05/20/2022, 4:42 AM
this
f

funk101

05/20/2022, 4:43 AM
this is /api/auth/[[...path]].js
r

rp

05/20/2022, 4:43 AM
your website is actually on www.finicky.pet So your websiteDomain should be www.finicky.pet everywhere
a

Ahnaf

05/20/2022, 4:43 AM
And the only type of unwanted/unpredictable redirect i know of is when u send the request to an HTTP server, but it redirects to HTTPS. It might be that the frontend is sending the request to http and the server is redirecting it to https on frontend
f

funk101

05/20/2022, 4:43 AM
Copy code
supertokens.init(backendConfig());

export default async function superTokens(req, res) {
  // NOTE: We need CORS only if we are querying the APIs from a different origin
  await NextCors(req, res, {
    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
    origin: process.env.NEXT_PUBLIC_HOST,
    credentials: true,
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
  });

  await superTokensNextWrapper(
    async (next) => {
      await middleware()(req, res, next);
    },
    req,
    res
  );
  if (!res.writableEnded) {
    res.status(404).send("Not found");
  }
}
a

Ahnaf

05/20/2022, 4:43 AM
Just a hypothesis
might be wrong
r

rp

05/20/2022, 4:44 AM
and allowed origin on backend should be www.finicky.pet too
a

Ahnaf

05/20/2022, 4:44 AM
so its not the same domain everywhere?
f

funk101

05/20/2022, 4:44 AM
so can I use
process.env.NEXT_PUBLIC_HOST
?
r

rp

05/20/2022, 4:44 AM
you need to use www.finicky.pet as the websiteDomain.
a

Ahnaf

05/20/2022, 4:45 AM
Which is the NEXT_PUBLIC_HOST
f

funk101

05/20/2022, 4:45 AM
RIGHT
r

rp

05/20/2022, 4:45 AM
If process.env.NEXT_PUBLIC_HOST !== www.finicky.pet, then you cant use process.env.NEXT_PUBLIC_HOST
a

Ahnaf

05/20/2022, 4:45 AM
So just change that
f

funk101

05/20/2022, 4:45 AM
appName: "finicky.pet-v4", apiDomain: process.env.NEXT_PUBLIC_HOST, websiteDomain: process.env.NEXT_PUBLIC_HOST, apiBasePath: "/api/auth", websiteBasePath: process.env.NEXT_PUBLIC_HOST,
r

rp

05/20/2022, 4:45 AM
yup.. but the apiDomain needs to be finicky.pet
f

funk101

05/20/2022, 4:45 AM
what about "apiBasePath", that's prolly good as is
a

Ahnaf

05/20/2022, 4:46 AM
um
@rp
r

rp

05/20/2022, 4:46 AM
cause that's where your API is.. unless it can work on www.finicky.pet/api/.. as well
a

Ahnaf

05/20/2022, 4:46 AM
the api
is also returning www.finicky.pet
here's the redirect
u sending requestt to finicky.pet, redirecting to www.finicky.pet
r

rp

05/20/2022, 4:46 AM
well yea.. so then just update process.env.NEXT_PUBLIC_HOST to https://www.finicky.pet
a

Ahnaf

05/20/2022, 4:46 AM
That's probaby the culprit
f

funk101

05/20/2022, 4:46 AM
(is that Postman)?
a

Ahnaf

05/20/2022, 4:47 AM
No, firefox devtools
i was checking if there was any redirects there
f

funk101

05/20/2022, 4:47 AM
let you know in a sec
a

Ahnaf

05/20/2022, 4:47 AM
and there's one
that's because you are sending the request to finicky.pet, but its redireting to www.finicky.pet
do this @funk101
f

funk101

05/20/2022, 4:49 AM
still failing
a

Ahnaf

05/20/2022, 4:49 AM
Is the API domain set to same?
Make sure every single domain you have is set to www.finicky.pet
f

funk101

05/20/2022, 4:49 AM
no
/api/auth
a

Ahnaf

05/20/2022, 4:49 AM
im talking about the domain
the api domain
f

funk101

05/20/2022, 4:49 AM
yes, set to same
a

Ahnaf

05/20/2022, 4:50 AM
next public host is now https://www.finicky.pet/ ?
Could you try removing the / ?
https://www.finicky.pet
no slash at the end
r

rp

05/20/2022, 4:50 AM
The / shouldn't matter
a

Ahnaf

05/20/2022, 4:50 AM
because ive had issues with that once
Im just sayibng from my experienc when i used next
single slash ruined 4 hours
;-;
f

funk101

05/20/2022, 4:51 AM
there is no "/" in env. variable on vercel
r

rp

05/20/2022, 4:51 AM
It's still not querying www.finicky.pet/
which means the apiDomain set on the frontend is still finicky.pet/
f

funk101

05/20/2022, 4:53 AM
how's that possible? I just committed to vercel, and set the env. variable to https://www.finicky.pet
they are all using process.env.NEXT_PUBLIC_HOST
which is the env variable
if you poke around the static pages there's no error, but go to the signin page it err's out
Copy code
supertokens.init(backendConfig());

export default async function superTokens(req, res) {
  // NOTE: We need CORS only if we are querying the APIs from a different origin
  await NextCors(req, res, {
    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
    origin: process.env.NEXT_PUBLIC_HOST,
    credentials: true,
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
  });

  await superTokensNextWrapper(
    async (next) => {
      await middleware()(req, res, next);
    },
    req,
    res
  );
  if (!res.writableEnded) {
    res.status(404).send("Not found");
  }
}
r

rp

05/20/2022, 5:00 AM
that's on your site
so please make sure it's updated correctly.
f

funk101

05/20/2022, 5:01 AM
so it should show "https://www.finicky.pet" right?
r

rp

05/20/2022, 5:01 AM
yup
and same for websiteDomain
f

funk101

05/20/2022, 5:02 AM
vercel...
Copy code
NEXT_PUBLIC_HOST

Production

VALUE

https://www.finicky.pet

Updated 14m ago



NAME
NEXT_PUBLIC_HOST
VALUE
https://www.finicky.pet
ENVIRONMENT
​
Production
​
Preview
Select Custom Branch

​
Development
maybe needs to propagate, or something?
r

rp

05/20/2022, 5:03 AM
no idea
maybe the version i have is cached
try rebuilding your app.
Cause the env vars for the frontend are injected into the app during building time
f

funk101

05/20/2022, 5:05 AM
rebuilding...
ok, different error...
_app-376a5bb26884a74a.js:1          POST https://www.finicky.pet/api/auth/session/refresh 401
actually, I think we're error free
r

rp

05/20/2022, 5:07 AM
yup.. that's expected
f

funk101

05/20/2022, 5:08 AM
no, can't get to signin page
redirects back to home
why so?
r

rp

05/20/2022, 5:09 AM
not sure
are you doing some manual redirection on the /auth route?
f

funk101

05/20/2022, 5:09 AM
yeah, keep getting that error 401 /auth/session/refresh
um, no
r

rp

05/20/2022, 5:10 AM
Can you enable debug logging on the frontend and show me the output?
f

funk101

05/20/2022, 5:11 AM
frontendConfig() ?
r

rp

05/20/2022, 5:11 AM
yea see the docs please
f

funk101

05/20/2022, 5:17 AM
don't know I did it right. This is in frontendConfig()...
Copy code
return {
    enableDebugLogs: true,
    appInfo,
    recipeList: [
      EmailPasswordReact.init({
        getRedirectionURL: async (context) => {
          if (context.action === "SUCCESS") {
            if (context.redirectToPath !== undefined) {
              // navigate back to where the user was before authenticated
              return context.redirectToPath;
            }
            return "/dashboard";
          }
          return undefined;
        },
r

rp

05/20/2022, 5:19 AM
this is fine
f

funk101

05/20/2022, 5:19 AM
where's the output? console?
r

rp

05/20/2022, 5:19 AM
it should be yae
what version of the frontend SDK are you using?
f

funk101

05/20/2022, 5:20 AM
I just installed last week
r

rp

05/20/2022, 5:20 AM
which version?
f

funk101

05/20/2022, 5:20 AM
"supertokens-auth-react": "^0.20.5", "supertokens-node": "^9.2.0",
r

rp

05/20/2022, 5:21 AM
upgrade supertokens-auth-react to 0.21.3
"^0.21.3"
f

funk101

05/20/2022, 5:24 AM
ok, building on vercel
ok done
home page(statice)
This is when trying to access SignIn page...
see those?
r

rp

05/20/2022, 5:44 AM
You are wrapping your whole app with
EmailPasswordAuthNoSSR
?
f

funk101

05/20/2022, 5:44 AM
yes
I'm using the development URI's is that an issue?
*URI and API Key
r

rp

05/20/2022, 5:56 AM
no that's not an issue
hwo is your home page being rendered? Is it wrapped around
EmailPasswordAuthNoSSR
too?
with requireAuth={false} ?
f

funk101

05/20/2022, 5:58 AM
_app.js is wrapped, which means every page
Copy code
if (typeof window !== "undefined") {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  SuperTokensReact.init(frontendConfig());
}

const EmailPasswordAuthNoSSR = dynamic(
  new Promise((res) => res(EmailPassword.EmailPasswordAuth)),
  { ssr: false }
);

export default function App({ Component, pageProps }) {
  const securityLevel = Component.securityLevel;
  const getLayout = Component.getLayout || ((page) => page);

  if (securityLevel === "full") {
    return (
      <EmailPasswordAuthNoSSR>
        {getLayout(<Component {...pageProps} />)}
      </EmailPasswordAuthNoSSR>
    );
  } else {
    return (
      <EmailPasswordAuthNoSSR requireAuth={false}>
        {getLayout(<Component {...pageProps} />)}
      </EmailPasswordAuthNoSSR>
    );
  }
}
r

rp

05/20/2022, 5:58 AM
What is the value of securityLevel?
f

funk101

05/20/2022, 5:59 AM
it's set in the pages. So a page like home page would have no security level, so does not require auth
but, the dashboard pages have this logic...
Dashboard.securityLevel = securityLevel("full");
r

rp

05/20/2022, 5:59 AM
hmm. Can you print something out in your home page component? Does that get printed out?
f

funk101

05/20/2022, 6:00 AM
just show you what displays on home page?
r

rp

05/20/2022, 6:00 AM
i mean right now, the home page is just empty
f

funk101

05/20/2022, 6:00 AM
yes, they are all just placeholder pages,
just shows the header, title, and footer
r

rp

05/20/2022, 6:01 AM
ah right.. ok. i thought there was some issue with that
f

funk101

05/20/2022, 6:01 AM
no
if you click on the avataar an choose signin, you'll get redirected to home
that's the issue
r

rp

05/20/2022, 6:01 AM
can i see the code the for auth page?
f

funk101

05/20/2022, 6:02 AM
Copy code
const SuperTokensComponentNoSSR = dynamic(
  new Promise((res) => res(SuperTokens.getRoutingComponent)),
  { ssr: false }
);

export default function Auth() {
  // if the user visits a page that is not handled by us (like /auth/random), then we redirect them back to the auth page.
  useEffect(() => {
    if (SuperTokens.canHandleRoute() === false) {
      redirectToAuth();
    }
  }, []);

  return <SuperTokensComponentNoSSR />;
}
Auth.getLayout = function getLayout(page) {
  return (
    <Layout
      pageTitle="Finicky.Pet"
      contentTitle=""
      metaDescription="Your online marketplace for buying and selling new and used pet items!"
      canonical="/"
    >
      <SingleColumnLayout>{page}</SingleColumnLayout>
    </Layout>
  );
};
that's
auth/[[...path]].js
r

rp

05/20/2022, 6:04 AM
Is
Layout
redirecting? Cause it has
canonical="/"
im not sure
f

funk101

05/20/2022, 6:04 AM
no
but I'll change that and re commit
is it that
redirectToAuth()
in useEffec()?
r

rp

05/20/2022, 6:07 AM
Can you also remove
getRedirectionURL
and see what happens?
redirectToAuth() should navigate to /auth page..
oh right.. what is the value of appInfo.websiteBasePath?
f

funk101

05/20/2022, 6:08 AM
that's in frontendConfig() right?
r

rp

05/20/2022, 6:08 AM
you wanna remove
appInfo.websiteBasePath
cause by default it is /auth
you are setting it to something else i think
f

funk101

05/20/2022, 6:09 AM
yes ,I though you guys said to change it to process...NEXT_PUBLIC_HOST?
r

rp

05/20/2022, 6:09 AM
no.. websiteDomain should be that
websiteBasePath should be "/auth"
f

funk101

05/20/2022, 6:10 AM
rebuilding, not changed redirectionURL yet
that's prolly gonna do it, makes sense
r

rp

05/20/2022, 6:11 AM
yup
f

funk101

05/20/2022, 6:11 AM
yup
sweet I think we're cool, got to remove debug now
thanks again for your help
3 Views