Unauthorized whoami react self service ui

ORY Kratos
#1

Hey Guys,

i’m new in the ory community and im trying to implement a react self service ui in react.
The login and registration flows are working but now when i try to call the /sessions/whoami endpoint i get a 401 response.
The Kratos log says:
level=error msg=An error occurred while handling a request func=github.com/ory/herodot.DefaultErrorReporter.func1 file=/go/pkg/mod/github.com/ory/[email protected]/error_reporter.go:24 audience=application error=map[debug: message:The request could not be authorized reason:No valid session cookie found. status:Unauthorized status_code:401 trace:
But when i look in chome dev tools store there is an ory_kratos_session cookie

image
image1025×73 5.47 KB

I am using the @oryd/kratos npm package in version 0.5.3-alpha.1. and Kratos in verion v0.5.3-alpha.1 in docker on my local machine
Did i missed something?

#2

Looks like the session cookie is not properly sent to the endpoint. Are you using CORS or something similar?

#3

Yes i’m using cors in the kratos config with the following configuration.

serve:
  public:
    base_url: http://127.0.0.1:4433/
    cors:
      enabled: true
      allowed_origins:
        - http://127.0.0.1:3000
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Cookie
      exposed_headers:
        - Content-Type
        - Set-Cookie

When i disable cors i get the following error on every request.

Access to XMLHttpRequest at 'http://127.0.0.1:4433/self-service/login/flows?id=e45f2917-0da2-4cfe-a1a6-0d5bf5156946' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

#4

Can you confirm that the cookie is actually send to the whoami endpoint? You can see all the cookies send in the network tab in the dev tools when you select the request.

#5

Unfortunately it seems like the cookies aren’t set in the reqest headers.
Im using the PublicApi from @oryd/kratos-client:v0.5.3-alpha.1.

 kratos
      .whoami()
      .then((res) => console.log("RESULT", res))
      .catch((err) => console.error("ERROR", err));

Am i missing something? Or do i need to specify the cookies myself?

My headers:

Request

GET /sessions/whoami HTTP/1.1
Host: 127.0.0.1:4433
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://127.0.0.1:3000
Connection: keep-alive
Referer: http://127.0.0.1:3000/

Response

HTTP/1.1 401 Unauthorized
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://127.0.0.1:3000
Access-Control-Expose-Headers: Content-Type, Set-Cookie
Content-Type: application/json
Set-Cookie: csrf_token=J3LVWTuAimboXTjWPQ1GoTEV3PzuDuX/EXL4GTmBJnk=; Path=/; Domain=127.0.0.1; Max-Age=31536000; HttpOnly
Vary: Origin
Vary: Cookie
Date: Thu, 12 Nov 2020 11:07:53 GMT
Content-Length: 137
#6

I have crated a small demo repository to demonstrate this behaviour.

#7

You could try:

const kratos = new PublicApi(
    new Configuration({
      basePath: kratosUrl,
      baseOptions: {
        withCredentials: true
      }
    })
  )
1 Like
#8

Alternatively kratos.whoami() accepts a cookie as the first argument, but the cookie is not available in the JS context. I think the problem is that the SDK isn’t instructed to include credentials. The SDK uses https://github.com/axios/axios under the hood so you might have some luck looking through their documentation!

#9

Thank you a lot @hackerman, the withCredential was the missing point.

baseOptions: {
    withCredentials: true
}

I have seen the credentials options on some fetch request in your slack channel but didnt know that i’m able the set this option in the PublicApi Configuration.

I thought the sdk set this option by default.

1 Like