https://www.ory.sh/ logo
Join Slack
Powered by
HI, I'm trying to implement SPA local (development...
# ory-selfhosting
a
HI, I'm trying to implement SPA local (development) email+password login flow but when I do the login call (after initializing with 
createBrowserLoginFlow
, filling the data and using the provided 
action
url) I get a CORS error response. Here is my kratos.yml:
Copy code
version: v0.13.0

dsn: memory

serve:
  public:
    base_url: <http://127.0.0.1:4433/>
    cors:
      enabled: true
      allowed_origins:
        - <http://127.0.0.1:3000> # ui
        - <http://127.0.0.1:4433>
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
        - OPTIONS
      allowed_headers:
        - Authorization
        - Content-Type
        - X-Session-Token
        - Cookie
        - Access-Control-Allow-Origin
      exposed_headers:
        - Content-Type
        - Set-Cookie
      allow_credentials: true
  admin:
    base_url: <http://kratos:4434/>

selfservice:
  default_browser_return_url: <http://127.0.0.1:3000>
  allowed_return_urls:
    - <http://127.0.0.1:3000>

  methods:
    password:
      enabled: true
    totp:
      config:
        issuer: Kratos
      enabled: true
    lookup_secret:
      enabled: true
    link:
      enabled: true
    code:
      enabled: true

  flows:
    error:
      ui_url: <http://127.0.0.1:3000/auth>

    settings:
      ui_url: <http://127.0.0.1:3000/auth>
      privileged_session_max_age: 15m
      required_aal: highest_available

    recovery:
      enabled: true
      ui_url: <http://127.0.0.1:3000/auth>
      use: code

    verification:
      enabled: true
      ui_url: <http://127.0.0.1:3000/auth>
      use: code
      after:
        default_browser_return_url: <http://127.0.0.1:3000/auth>

    logout:
      after:
        default_browser_return_url: <http://127.0.0.1:3000/auth>

    login:
      ui_url: <http://127.0.0.1:3000/auth>
      lifespan: 10m

    registration:
      lifespan: 10m
      ui_url: <http://127.0.0.1:3000/auth>
      after:
        password:
          hooks:
            - hook: session
            - hook: show_verification_ui

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:
  algorithm: bcrypt
  bcrypt:
    cost: 8

identity:
  default_schema_id: default
  schemas:
    - id: default
      url: file:///etc/config/kratos/identity.schema.json

courier:
  smtp:
    connection_uri: <smtps://test:test@mailslurper:1025/?skip_ssl_verify=true>
Can you help me?
b
could you please post the error response as well?
wait, cors. How are you hosting kratos & your app?
a
The Kratos is docker compose from the 
docker compose -f quickstart.yml -f quickstart-standalone.yml up --build --force-recreate
of your github repository And the React app is vite application runing on http://127.0.0.1:3000
Hi @bland-eye-99092, I tried also the 
ory proxy
and 
ory tunnel
without success. Without proxy or tunel at-least the 
GET <http://127.0.0.1:3344//self-service/login/browser?refresh=true>
returns result.
b
that double slash in the URL looks weird. how are you configuring the sdk?
a
Removed the slash steel no results:
Copy code
const basePath = "<http://localhost:4000>";

const baseOptions = {
	timeout: undefined,
	withCredentials: true,
};

const api = new KratosClient.FrontendApi(new KratosClient.Configuration({
	baseOptions,
	basePath,
}));
I'm configuring the SDK like tis ^^^^^
should I use the proxy/tunel or not?
b
no, that’s just for ory network AFAIK.
a
OK 🙇
b
What’s the cors response your getting exactly?
a
removing it
just a second to turn back to the setup without the proxy/tunel...
Here it is:
Copy code
Access to fetch at '<http://127.0.0.1:4433/self-service/login?flow=34fbf4b1-1291-4cc0-813e-5cb7ac684a27>' from origin '<http://127.0.0.1:3000>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
the request body is:
Copy code
{
		csrf_token: "ifW3msCSrHdTHiZ4gXoiP2JPZBwvNx+FuA38Kh5sifLKxKGX+7PFNSbxbBTgqG9CeSuxOQpCjXSxJLPBHTrQZA==",
		identifier: "<mailto:test@mail.com|test@mail.com>",
		method: "password",
		password: "p-O)i9U*y7",
	}
The request headers are:
Copy code
Accept:
application/json
Content-Type:
application/json

Csrf_token:
ifW3msCSrHdTHiZ4gXoiP2JPZBwvNx+FuA38Kh5sifLKxKGX+7PFNSbxbBTgqG9CeSuxOQpCjXSxJLPBHTrQZA==

Referer:
<http://127.0.0.1:3000/>

Sec-Ch-Ua:
"Google Chrome";v="113", "Chromium";v="113", "Not-A.Brand";v="24"

Sec-Ch-Ua-Mobile:
?0

Sec-Ch-Ua-Platform:
"Linux"

User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
@bland-eye-99092
b
what URL is showing in the URL bar when you create the request? I fixed the issue by going to 127.0.0.1:3000 instead of [::] (ipv6) or localhost.
a
The url in the browser bar is 
<http://127.0.0.1:3000/>
Should I set the request 
mode
to 
no-cors
? If I set it the result is:
Copy code
POST <http://127.0.0.1:4433/self-service/login?flow=aafaebe8-7162-4757-9995-7b5978671612> net::ERR_ABORTED 400 (Bad Request)
b
no, cors needs to be enabled. Otherwise you won’t be able to read the body
đź‘Ť 1
what’s the output of for you?
Copy code
curl -X OPTIONS -vvv -H 'Origin: <http://127.0.0.1:3000>' -H "Access-Control-Request-Method: GET" <http://127.0.0.1:4433/self-service/login/browser>
a
Copy code
» curl -X OPTIONS -vvv -H 'Origin: <http://127.0.0.1:3000>' -H "Access-Control-Request-Method: GET" <http://127.0.0.1:4433/self-service/login/browser>
*   Trying 127.0.0.1:4433...
* Connected to 127.0.0.1 (127.0.0.1) port 4433 (#0)
> OPTIONS /self-service/login/browser HTTP/1.1
> Host: 127.0.0.1:4433
> User-Agent: curl/7.81.0
> Accept: */*
> Origin: <http://127.0.0.1:3000>
> Access-Control-Request-Method: GET
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 204 No Content
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Origin: <http://127.0.0.1:3000>
< Vary: Origin
< Vary: Access-Control-Request-Method
< Vary: Access-Control-Request-Headers
< Date: Tue, 09 May 2023 12:10:32 GMT
< 
* Connection #0 to host 127.0.0.1 left intact
b
hm, with your config, the response contains
Copy code
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Origin: <http://127.0.0.1:3000>
for me. Could you try restarting kratos?
wait, nevermind. your response contains that too
a
OK, Should I remove the containers ? Or just Ctrl+C and 
docker compose -f quickstart.yml -f quickstart-standalone.yml up --build --force-recreate
?
b
ctrl-c plus restart should do it.
a
Restarted and the result is the same:
Copy code
Access to fetch at '<http://127.0.0.1:4433/self-service/login?flow=4535ac0e-f18d-42f6-96cb-47aa123f9508>' from origin '<http://127.0.0.1:3000>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Which version of the 
<https://github.com/ory/kratos.git>
are you using? I'm on 
v0.13.0
.
b
yup, latest.
a
I will try to remove the containers and start again
same...
b
Hm, not sure what’s going on then. Kratos is setting the headers correctly. What browser are you on?
a
Chrome
I willl test on FireFox
The same:
Copy code
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <http://127.0.0.1:4433/self-service/login?flow=4d22cd06-9384-4561-adf8-78ef3bdefbce>. (Reason: CORS request did not succeed). Status code: (null)
If I do the flow in the Postman the login succeeds. And there is no CORS error.
Can I ask somebody else? If you have any idea?
@bland-eye-99092 Thank you very much for the help!!! I do not know what to do. Mu company wants to use Ory but how I can implement the different flows for SPA if I can not develop localy?
What about the 
createNativeLoginFlow
is it possible to get it working in the browser?
b
Well, it should work like that. You could try adding 
"*"
to the allowed origins. And if that doesn’t work, the issue is probably not with kratos. Also, try calling the endpoint using 
fetch
instead of the SDK.
And don’t use native flows in the browser. That will disable all CSRF protections and Kratos will reject those requests once you go to production.
đź‘Ť 1
a
I'm calling with fetch, I did not see a method to do the login in the SDK available methods.
Do you know the name of the metod for login?
b
createBrowserLoginFlow and then updateLoginFlow.
a
You could try adding 
"*"
to the allowed origins.
You mean in the browser request?
b
no, kratos.yml
🙇 1
a
I will try now wiwth "*" and 
updateLoginFlow
f
@acoustic-father-92306 out of curiosity. What is the use case that leads you to fetch http://127.0.0.1:4433/self-service/login?flow=4d22cd06-9384-4561-adf8-78ef3bdefbce from javascript code in a browser page (that eventually leads to the cors issue) ?
Nevermind, I most likely did not understand yet how self-service work. Sorry for the noise
a
@fresh-carpet-18970 No problem. The use case is have Kratos running in front of our services. And we want to update the login UI. So I want to develop the UI locally before pushing it to production. So I run the example from the quickstart + a Vite dev application where the authentication UI is developed.
11 Views
Open in Slack
PreviousNext
Powered by