important-fall-74969
02/01/2022, 3:29 PMcsrf_token
when working on the registration flow. We are trying to configure our frontend (Vue
) with Kratos using the quickstart example with Kratos running in docker. We have replaced port 4455
in the Kratos config with our frontend port, and changed the registration routes to match our sign-up page.
On our registration page we call initializeSelfServiceRegistrationFlowForBrowsers
passing in the returnTo
string and this returns with status 200
and gives us the csrf_token
as part of the data.ui.nodes
along with the other form nodes. We can also see the cookie in the Set-Cookie Response Header, however it appears they are different from the ones in the form attributes. Are the cookie and form tokens different because they are values in a pair?
When testing the same part of the React example app, we can see that there is a Location Header
in the browser call and the csrf_token
cookie is being set as a cookie when clicking the Sign up button. However, we are not getting the same behaviour in our app. We cannot see a Location
Header, and although we see a Set-Cookie
header, the cookie does not seem to be being set in the browser.
Also, when we call submitSelfServiceRegistrationFlow
passing in the csrf_token
that was initially included in the data.ui.nodes
response from initializeSelfServiceRegistrationFlowForBrowsers
we get a 403
error:
"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."
How can we make sure that the tokens match?
Our config:
version: v0.7.1-alpha.1
dsn: memory
serve:
public:
base_url: <http://127.0.0.1:4433/>
cors:
enabled: true
admin:
base_url: <http://kratos:4434/>
selfservice:
default_browser_return_url: <http://127.0.0.1:8084/>
whitelisted_return_urls:
- <http://127.0.0.1:8084>
methods:
password:
enabled: true
flows:
error:
ui_url: <http://127.0.0.1:8084/error>
settings:
ui_url: <http://127.0.0.1:8084/settings>
privileged_session_max_age: 15m
recovery:
enabled: true
ui_url: <http://127.0.0.1:8084/recovery>
verification:
enabled: true
ui_url: <http://127.0.0.1:8084/verification>
after:
default_browser_return_url: <http://127.0.0.1:8084/>
logout:
after:
default_browser_return_url: <http://127.0.0.1:8084/login>
login:
ui_url: <http://127.0.0.1:8084/login>
lifespan: 10m
registration:
lifespan: 10m
ui_url: <http://127.0.0.1:8084/sign-up>
after:
password:
hooks:
-
hook: session
log:
level: debug
format: text
leak_sensitive_values: true
secrets:
cookie:
- PLEASE-CHANGE-ME-I-AM-VERY-INSECURE
cipher:
- 32-LONG-SECRET-NOT-SECURE-AT-ALL
ciphers:
algorithm: xchacha20-poly1305
hashers:
argon2:
parallelism: 1
memory: 128MB
iterations: 2
salt_length: 16
key_length: 16
identity:
default_schema_url: file:///etc/config/kratos/identity.schema.json
courier:
smtp:
connection_uri: <smtps://test:test@mailslurper:1025/?skip_ssl_verify=true>
lemon-mouse-24294
02/01/2022, 4:09 PM/selfservice/registration/browser
and only add return_to
query param to the URL. This way you will get Set-Cookie
with CSRF tokens on the first redirect and you would need to add cookies to all your backend calls as well.important-fall-74969
02/01/2022, 4:20 PMinitializeSelfServiceRegistrationFlowForBrowsers
and submitSelfServiceRegistrationFlow
in our Vue frontend. Similar to the React example here https://github.com/ory/kratos-selfservice-ui-react-nextjs/blob/master/pages/registration.tsxlemon-mouse-24294
02/01/2022, 4:29 PM/selfservice/registration/browser
call somewhere (this is what you are seeing in the sample React app?) which should set all the cookies you need.submitSelfServiceRegistrationFlow
and getSelfServiceRegistrationFlow
(which you are calling as well?)jolly-tiger-57705
02/01/2022, 5:43 PMfreezing-solstice-24704
02/01/2022, 6:18 PMgetSelfServiceRegistratinFlow
is the part that is failing for us.
We initially check if a flow ID is set, if it is not set we redirect the browser to http://127.0.0.1:4433/self-service/registration/browser to get a flow ID and a cookie.
Once we get redirected back to our sign-in page, the cookie is successfully being set in the browser and we now have a flow ID.
If we pass this flow ID into getSelfServiceRegistratinFlow
we get the following error: “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.”
We’re simply passing in the flow ID to getSelfServiceRegistratinFlow
. There are parameters to pass a cookies into this function, but we aren’t doing that yet as we don’t seem to have access to them in our Vue code using Vue.$cookies
so we’re at a bit of a loss.lemon-mouse-24294
02/01/2022, 6:57 PM/selfservice/registration/browser
.enough-winter-51484
02/01/2022, 6:58 PMconst response = await this.sdk.initializeSelfServiceRegistrationFlowForBrowsers(undefined, {
withCredentials: true,
});
You have to add it for every sdk function. Or in the base options when you create a new instance of the SDK.important-fall-74969
02/02/2022, 10:26 AMincludeCredentials
option but keep getting CORS errors 😞 so without the the includeCredentials
option it's not going to work at all with the cookie?enough-winter-51484
02/02/2022, 10:43 AMserve:
public:
base_url: <http://localhost:8081>
cors:
enabled: true
allowed_origins:
- <http://localhost>
- <http://localhost:8080>
allowed_methods:
- POST
- GET
- PUT
- PATCH
- DELETE
allowed_headers:
- Authorization
- Cookie
- Content-Type
exposed_headers:
- Content-Type
- Set-Cookie
important-fall-74969
02/02/2022, 12:56 PMallowed_origins
in the config but I think we had missed the first entry without the port.enough-winter-51484
02/02/2022, 1:28 PMfreezing-solstice-24704
02/02/2022, 1:31 PM<http://127.0.0.1:8084>
which gave us CORS errors. Adding <http://127.0.0.1>
as well seemed to have fixed our CORS errors, which meant we could use includeCredentials
without getting CORS errors!