I’m using the ory kratos client (

ory/kratos-client

) when making a call to

initializeSelfServiceLoginFlowForBrowsers

and getting the error message below

Access to XMLHttpRequest at 'https://<insert_your_project_id>.<http://projects.oryapis.com/self-service/login/browser?refresh=false|projects.oryapis.com/self-service/login/browser?refresh=false>' from origin '<http://localhost:3000>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I’m instantiating the client like so, because I’m using a

create-react-app

.

import { Configuration, V0alpha2Api } from '@ory/kratos-client'

export default new V0alpha2Api(new Configuration({
  basePath: process.env.REACT_APP_ORY_KRATOS_URL,
}))

and setting my

REACT_APP_ORY_KRATOS_URL

in a

.env

file. Do I need to configure anything in ory cloud to get flow data and not get a CORS issue? Or should I be instantiating the kratos client differently? FWIW, when I use the nextjs github repo and export the

ORY_KRATOS_URL

env, it works correctly.

I assume it's not actually

<insert_your_project_id>

in the URL, right

Correct

Just making sure 😄

Thanks for the link, Forrest. Yes, I went down the proxy rabbit hole and still am running into the same issue. Attached a picture. Sorry, forgot to mention I’m trying to bring my own UI into the mix, so I’m not trying to use ory’s UI.

I'm stumped. Looking forward to seeing the answer though.

Me too. Would like to be able to test locally without using NextJs.

Hi @gray-motherboard-84683 You need the

@ory/client

since the Kratos client is specific to kratos and will also be deprecated in favour of the

@ory/client

. You also need to run the proxy in front of your application. If you are using NextJs, you can simply add the

ory/integrations

package https://github.com/ory/integrations Please ensure that your browser is now pointing towards the proxy instead of your application. The

@ory/client

should now have the same baseURL as the proxy url (you are making requests to the proxy directly).

I went ahead an updated all the

@ory/kratos-client

to

@ory/client

@proud-plumber-24205 • Running react app on

localhost:3001

• Running the go example on

localhost:3000

https://www.ory.sh/docs/guides/protect-page-login/go#run-your-go-app ◦ straight copy paste from your docs • Running

ory proxy <http://localhost:3000> --sdk-url https://<insert_your_project_id>.<http://projects.oryapis.com|projects.oryapis.com>

And still getting CORS error message. Does the go sample app account for setting CORS? Looks like the NextJS and NodeJS/Express examples both pull from

sdk.V0alpha2Api

which account for CORS. Am I missing anything here? This is a blocker for me

Are you running three servers at once? React, Go, and proxy?

Are you running three servers at once? React, Go, and proxy?

Yes, I thought that’s what the docs said to do.

Can you try just running CRA and the proxy, like you were doing before, but opening your browser to the proxy URL instead of the CRA URL

If you just run CRA on :3000 and the proxy on :3001 then you should be able to open your react app at localhost:3001

• CRA on :3000 ◦ REACT_APP_ORY_KRATOS_URL=http://localhost:4000 •

ory proxy <http://localhost:3001>

Still getting the same error.

What URL do you have open in the browser?

CRA is running on port 3000, you need to open the port that the proxy is running on

Also I don’t think you need to configure that ORY_KRATOS_URL at all

I’m pretty sure I do..?

Sorry, I was referring to the client configuration in your React code. you do indeed have to set the ORY_SDK_URL env var

proxy is running on 3000, CRA is on 3000 with no

REACT_APP_ORY_KRATOS_URL

, getting this error:

Do you have localhost:4000 open in the browser

Yup, this is localhost:4000 in the browser. Still getting error message

I think we're getting really close

Are you configuring that base URL anywhere?

Hm… let me double check. Also, thank you for all the help. Seriously. This is great.

It's great for me too, I'm learning just as much as you are haha

Kratos
      .initializeSelfServiceLoginFlowForBrowsers(
        Boolean(refresh),
        aal ? String(aal) : undefined,
        returnTo ? String(returnTo) : undefined
      )
      .then(({data}) => {
        setFlow(data)
      })
      // .catch(handleFlowError( 'login', setFlow))
      .catch(err => console.log('initial err:', err))

This is how I’m instantiating the front end, basically a copy paste from their Nextjs repo, so I don’t think I’m appending

/api

in the route on purpose anywhere.

In your first message you had this

export default new V0alpha2Api(new Configuration({
  basePath: process.env.REACT_APP_ORY_KRATOS_URL,
}))

does that still exist anywhere?

Changed it back to this:

export default new V0alpha2Api(new Configuration(edgeConfig))

It definitely seems to me, based on this page, that it should just be

localhost:xxxx/.ory/etc

Wondering if this is the

@ory/client

that’s doing this

Sorry for the delay, I had to get back to work, but I'll drop in again later. Gotta see this saga through 🍿

Hey @gray-motherboard-84683 @millions-van-11508 You need to set the sdk base URL inside the react app to the proxyURL + '/.ory'. I will setup a scenario. • React App on localhost:3000 • Ory Proxy on localhost:4000 • Your project url https://<your-slug>.projects.oryapis.com • Set the Ory Proxy ORY_SDK_URL to your project url e.g. https://<your-slug>.projects.oryapis.com You need to now set the SDK baseURL inside your React App to the proxURL + /.ory (https://localhost:4000/.ory) Then open the browser on the ProxyURL (https://localhost:4000) Your browser will now proxy any calls to your React App and your react app will make API calls to the Proxy which means they are on the same Origin. This will prevent CORS errors.

@proud-plumber-24205 Thank you. It works now. For production, I just need to set up a CNAME with my DNS provider and fill in the ory cloud

Add custom domain

section, correct?

yes 🙂

Awesome. Ty

@gray-motherboard-84683 @proud-plumber-24205 is this how you would configure the basePath with a custom domain in the

V0alpha2Api

options?

const basePath = import.meta.env.PROD
  ? "<https:yourcustomdomain.com/.ory>"
  : "<http://localhost:4000/.ory>"

the

.ory/

path is only added by the proxy. with a custom domain you do not need it 🙂

Nice, thank you. Another question that came to my mind: If one is using the auth on a subdomain like: https;<//sub.mydomain.com> should we rather use the subdomain as a `CNAME`or is the toplevel domain equally sufficient?

you would add your sub-domain

It does now work on localhost, but not when we deploy to prod.

import { Configuration, V0alpha2Api } from "@ory/client"

const basePath = import.meta.env.PROD
  ? "<https://sub.mydomain.com/api/kratos/public>"
  : "<http://localhost:4000/.ory>"

export const kratos = new V0alpha2Api(
  new Configuration({
    basePath,
    baseOptions: {
      withCredentials: false,
      timeout: 10000,
    },
  })
)

With this config we are able to receive the initial response for the login flow if we deactivate CORS in the browser. If we don't then we get a CORS error. We have added

<https://sub.mydomain.com/>

and

<https://app.mydomain.com/>

to the allowed domains in

Browser Redirects

already. It appears that no

access-control-allow-origin

header is sent back from the API - am I missing some setting here or do I think incorrectly about what to expect 😅 Any hints?