jolly-tiger-57705
01/31/2022, 11:27 AMcsrf_token
cookie is transmitted OK and I'm not attaching any csrf_token
in the POST data:
const onRegister = () => {
return Kratos.completeSelfServiceRegistrationFlowWithPasswordMethodRaw(
{
flow: router.query.flow?.toString(),
body: { password: "password", email: "<mailto:email@example.pl|email@example.pl>", name: { first: "first", last: "last" } }
})
.then(() => {
console.log("OK")
}).catch(e => console.error("ERROR", e))
}
Kratos error
level=error msg=An error occurred while handling a request audience=application error=map[debug: details:map[docs:<https://www.ory.sh/kratos/docs/debug/csrf> hint:The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token). reject_reason:The HTTP Cookie Header was set and a CSRF token was sent but they do not match. We recommend deleting all cookies for this domain and retrying the flow.] message:the request was rejected to protect you from Cross-Site-Request-Forgery reason:The request was rejected to protect you from Cross-Site-Request-Forgery (CSRF) which could cause account takeover, leaking personal information, and other serious security issues. status:Forbidden status_code:403] http_request=map[headers:map[accept:*/* accept-encoding:gzip, deflate, br accept-language:en,pl;q=0.9,en-US;q=0.8 connection:keep-alive content-length:76 content-type:application/json cookie:csrf_token_82b119fa58a0a1cb6faa9738c1d0dbbf04fcc89a657b7beb31fcde400ced48ab=04yNxJpTkHv9VY0ChiMar1V0IX8vpt5XcPCzOHZS37c= origin:<http://localhost:3001> referer:<http://localhost:3001/> sec-ch-ua:" Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97" sec-ch-ua-mobile:?0 sec-ch-ua-platform:"Linux" sec-fetch-dest:empty sec-fetch-mode:cors sec-fetch-site:same-site user-agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36] host:localhost:4433 method:POST path:/self-service/registration/methods/password query:flow=f4d1c01f-0f74-47d4-8d7b-a37e15404d3d remote:[::1]:43640 scheme:http] http_response=map[status_code:403] service_name=Ory Kratos service_version=v0.8.2-alpha.1
I'm generating ts-fetch client, credentials set to 'include', using next.js
I just don't know how to set the csrf_token
so it matches the cookie.high-optician-2097
jolly-tiger-57705
01/31/2022, 11:46 AMlet params: ConfigurationParameters = {
basePath: "<http://localhost:4433>",
credentials: 'include',
}
export default new PublicApi(new Configuration(params))
high-optician-2097
csrf_token: "..."
.catch(err => err.response.data)
for the full output. For CSRF errors, it should include a detailed explanation what's missing.jolly-tiger-57705
01/31/2022, 11:52 AMhigh-optician-2097
init...
it returns a number of nodes in ui.nodes
and one of them is a node with name "csrf_token". you have to use that onejolly-tiger-57705
01/31/2022, 12:32 PMinitializeSelfServiceRegistrationViaBrowserFlowRaw
returns a redirection, there's no body with csrf_token inside.import { useRouter } from 'next/router'
...
const onRegisterStart = () => {
return Kratos.initializeSelfServiceRegistrationViaBrowserFlowRaw()
.then(({ raw }) => {
router.push(raw.url)
}).catch(e => console.error(e))
}
This redirects to the right URL with the flow id in query.magnificent-energy-493
high-optician-2097
getSelfServiceRegistration...
jolly-tiger-57705
01/31/2022, 12:54 PMui.nodes
in the responsehigh-optician-2097
jolly-tiger-57705
01/31/2022, 1:22 PMconst onRegister = () => {
return Kratos.getSelfServiceRegistrationFlowRaw({ id: router.query.flow?.toString() || "" })
.then(r => r.raw.json())
.then(r => {
console.log("R", r.ui.nodes[0])
console.log("V", r.ui.nodes[0].attributes.value)
return Kratos.completeSelfServiceRegistrationFlowWithPasswordMethodRaw(
{
flow: router.query.flow?.toString(),
body: {
csrf_token: r.ui.nodes[0].attributes.value,
password: "password", traits: { email: "<mailto:email@email.com|email@email.com>", name: { first: "fir", last: "las" } }
}
})
})
.then(() => {
console.log("B")
}).catch(e => console.error(e))
}
I fear I oversimplify things. Can body be passed as JSON like this?damp-salesclerk-26574
02/01/2022, 3:55 PMjolly-tiger-57705
02/01/2022, 5:36 PMhigh-optician-2097
jolly-tiger-57705
02/01/2022, 6:01 PMhigh-optician-2097
And the flows do not contain the names of the functions that need to be called. That would save you a lot of explaining :Dcould you elaborate? :)
damp-salesclerk-26574
02/01/2022, 6:06 PMgetSelfServiceRegistrationFlow
in our Vue app to fetch the registration form data.jolly-tiger-57705
02/01/2022, 6:06 PMhigh-optician-2097