Hi, do I need have frontend and backend in docker? Now I have backend and SuperTokens in docker co...
w
Hi, do I need have frontend and backend in docker? Now I have backend and SuperTokens in docker compose and frontend in another repository and I have cors error: Access to fetch at 'http://localhost/auth/session/refresh' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field st-auth-mode is not allowed by Access-Control-Allow-Headers in preflight response. My settings: app.enableCors({ origin: [
${process.env.WEB_DOMAIN}
], allowedHeaders: ['content-type', ...supertokens.getAllCORSHeaders()], methods: ['GET', 'PATCH', 'POST', 'DELETE'], credentials: true, }); app.useGlobalFilters(new AuthFilter()); //appInfo apiBasePath: '/auth', websiteBasePath: '', WEB_DOMAIN = http://localhost:3000 Sorry for a lot of questions 😅
r
Hey. Please make sure to update the frontend and backend SDKs to the latest version.
w
Ok
This didn't help. I have the same error
My sign up function:
const submitAccountData = useCallback( async ({ email, password }: UserDataType, { resetForm }: FormType) => { setIsLoading(true); try { let response = await emailPasswordSignUp({ formFields: [ { id: "email", value: email! }, { id: "password", value: password! } ] }) console.log(response); if (response.status === "FIELD_ERROR") { response.formFields.forEach((formField: { id: string, error: string }) => setValuesFields(formField.error)); } else if (!!email) { const exist = await doesEmailExist({ email }); if (!!exist.doesExist) { setValuesFields("Email already exists. Please sign in instead"); showCreateForm(); showLoginForm(); } } const res = await sendVerificationEmail(); if (res.status === "EMAIL_ALREADY_VERIFIED_ERROR") { // This can happen if the info about email verification in the session was outdated. // Redirect the user to the home page showCreateForm(); showLoginForm(); } else { // email was sent successfully. resetForm(initialValues); setValuesFields(data?.NavForm?.successInfoRegistration); } } catch (e: any) { setValuesFields(e.isSuperTokensGeneralError === true ? e.message : data?.error); } setIsLoading(false); }
r
can you show me the response headers in the OPTIONS API call?
w
What should look console.log?
app.enableCors return void
r
network tab
w
aaa ok
r
make sure that you have updated the backend SDK please.
w
I've 13.0.2 now. Earlier 12.1.6
@rp_st what maybe do you know something? 🤔
r
I’m not sure. My best guess is that you haven’t updated the backend SDK properly
w
Why? I use yarn add and in package I have 13.0.2 version.
r
The cors error is saying that you are missing the st-auth-mode header in the allowed headers
That’s added by our latest backend SDK
So if that error is still coming, then it means you are somehow not running the backend SDK
w
Hm strange I tested in Postman before adding frontend api and I didn't have errors 🤔 in appInfo I have the same values 🤔and port 3000 is ok.
r
I’m not sure
w
I see. This is strange error..
@rp_st what did you write that you're not sure. What do you have assumptions? Maybe I can check either of them🤔
r
I think the issue is that the OPTIONS API is not retruning correctly and might be erroring out.,. Do you see any error stack trace on the backend?
w
No, I don't see in both supertokens (only INFO) and backend (nothing) container.
I can send links to repositories if it's needed.
r
I don't have time right now for that. Sorry.
w
It's progress! I added st-auth-mode in allowedHeaders and I have this errors:
fetch.js?cf7f:758 POST http://localhost/auth/session/refresh 401 (Unauthorized)
and
recipeImplementation.js?0566:171 POST http://localhost/auth/user/email/verify/token 400 (Bad Request)
r
you shouldnt need to add that cause our SDK should add it on its own
w
but I got response object from const response = await emailPasswordSignUp({ formFields: [ { id: "email", value: email! }, { id: "password", value: password! } ] })
r
can you double check the version of the backend sdk being used
check your package-lock.json
w
I know. I wanted to check what will happen
ok
I have yarn.lock :) I check there :)
r
yup
w
I have 1 supertokens-node there
r
which version?
w
13.0.2
r
yeaa.. im not sure whats going wrong here
does your CORS look something like this?
r
where is your cors setting?
r
it seems fine. Can you print out what
supertokens.getAllCORSHeaders()
returns?
w
ok
[ 'rid', 'fdi-version', 'anti-csrf' ]
r
yea. So you are definitely using an older version of the sdk
which includes the
st-auth-mode
value as well
delete your yarn.lock, node_modules, cache.. and reinstall everything
w
ok
I'm building container
So PATCH instead of PUT in cors method id ok if I don't use put and I use patch?
xddd failed to solve: failed to compute cache key: "/yarn.lock" not found: not found I cannot delete yarn.lock. I do yarn install and delete node_modules and I use docker compose
I'm ending
[ 'rid', 'fdi-version', 'anti-csrf', 'authorization', 'st-auth-mode' ] but I even have errors
r
right. So now the other errors need to be debugged.
w
recipeImplementation.js?0566:171 POST http://localhost/auth/user/email/verify/token 400 (Bad Request)
r
are you callingt his API manually?
w
but I get this body: fetchResponse : Response body : ReadableStream locked : false [[Prototype]] : ReadableStream bodyUsed : false headers : Headers [[Prototype]] : Headers ok : true redirected : false status : 200 statusText : "OK" type : "cors" url : "http://localhost/auth/signup" [[Prototype]] : Response status : "OK" user : email : "my email" id : "f556c9d2-5c01-434b-93c7-2f842ff73590" timeJoined : 1676466481143
in frontend ui I have Try again or check your internet connection.
I send code
async ({ email, password }: UserDataType, { resetForm }: FormType) => { setIsLoading(true); try { const response = await emailPasswordSignUp({ formFields: [ { id: "email", value: email! }, { id: "password", value: password! } ] }) console.log(response); if (response.status === "FIELD_ERROR") { response.formFields.forEach((formField: { id: string, error: string }) => setValuesFields(formField.error)); } else if (!!email) { const exist = await doesEmailExist({ email }); if (!!exist.doesExist) { setValuesFields("Email already exists. Please sign in instead"); showCreateForm(); showLoginForm(); } } const res = await sendVerificationEmail(); if (res.status === "EMAIL_ALREADY_VERIFIED_ERROR") { // This can happen if the info about email verification in the session was outdated. // Redirect the user to the home page showCreateForm(); showLoginForm(); } else { // email was sent successfully. resetForm(initialValues); setValuesFields(data?.NavForm?.successInfoRegistration); } } catch (e: any) { setValuesFields(e.isSuperTokensGeneralError === true ? e.message : data?.error); } setIsLoading(false); }
Email wasn't sent.
@rp_st I needed delete [] in origin for cors yet. Now is working :)
8 Views