Kinde•5mo ago

Wildcards in callback URLs bug

I'm trying to use https://kinde.com/docs/connect-to-kinde/callback-urls/#wildcards-in-callback-urls With a wildcard callback URL configured, login fails with this message in my browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://auth.inrange.dev/oauth2/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Can you help me with this?

Kinde Docs

Set callback and redirect URLs - Connect to Kinde - Help center

Our developer tools provide everything you need to get started with Kinde.

19 Replies

onderay•4mo ago

Are you able to confirm that you have setup the callbacks in the allowed URLs section of your application in Kinde? If you are using Nextjs, you can try setting KINDE_COOKIE_DOMAIN

Martin•4mo ago

I'm using React and these are my callback URLs:

Martin•4mo ago

Do you need anything else from me to be able to help me get this working? @onderay - Are you able to help me with my issue? I'd love to get this new feature working.

onderay•4mo ago

Sorry @Martin for the delay, the team is still looking into what might be happening here.

Martin•4mo ago

Do you have any idea what the ETA is for fixing this issue? I'm guessing that I've ended up in a ticket queue behind other more important work? It would be great to know if I should expect a fix in days vs weeks vs months. I'm a bit disappointed that https://kinde.com/docs/connect-to-kinde/callback-urls/#wildcards-in-callback-urls got announced as a new feature and then it appears to be broken as soon as I tried to use it.

Kinde Docs

Set callback and redirect URLs - Connect to Kinde - Help center

Our developer tools provide everything you need to get started with Kinde.

onderay•4mo ago

Really sorry about the delay @Martin certainly no queue on our side. Just balancing between the right people who can solve this being away. I am pushing for an update for you in the next 24hrs to help you move forward. @Martin a fix has been rolled out for Wilcard URLs. Are you able to check that this has been able to resolve the issue for you?

Martin•4mo ago

This still isn't working for me. These are my configured callback URLs. The login redirect is accepted against the wildcard, but my use of the React SDK constantly detects that the user is not logged in and so redirects them back to the login page, which redirects them back to my website, which redirects back to the login page etc. Do I need to upgrade to a specific version of the Kinde packages for this to work?

Martin•4mo ago

I'm currently using: * @kinde-oss/kinde-auth-pkce-js@3.0.26 * @kinde-oss/kinde-auth-react@3.0.23

onderay•3mo ago

Sorry about the delay @Martin we are looking into this for you.

dave_kinde•3mo ago

Hey @Martin are you able to share the code that is doing the auto-redirecting, or provide a small reproducible example? The way I've done auto-forwarding before is

  import { useEffect } from "react";
  import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
  
  ...

  const { login, isAuthenticated, isLoading } = useKindeAuth();
  useEffect(() => {
    if (!isAuthenticated && !isLoading) {
      login();
    }
  }, [isAuthenticated, login, isLoading]);

  import { useEffect } from "react";
  import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
  
  ...

  const { login, isAuthenticated, isLoading } = useKindeAuth();
  useEffect(() => {
    if (!isAuthenticated && !isLoading) {
      login();
    }
  }, [isAuthenticated, login, isLoading]);

Martin•3mo ago

This is how I'm doing auto-forwarding:

  const {
    login,
    logout,
    isLoading: isAuthLoading,
    user: kindeUser,
    getOrganization,
  } = useKindeAuth();
  const [user, setUser] = useState(undefined);

  useEffect(() => {
    if (!isAuthLoading && kindeUser) {
      setUser({
        name: `${kindeUser.given_name} ${kindeUser.family_name}`,
        email: kindeUser.email,
        family_name: kindeUser.family_name,
        given_name: kindeUser.given_name,
        picture: kindeUser.picture,
      });
    }
  }, [isAuthLoading, kindeUser]);

  if (!isAuthLoading && !kindeUser) {
    login({
      org_code: KINDE_ENVIRONMENT.KINDE_INRANGE_ORG_CODE,
      app_state: {
        redirectTo: window.location.pathname + window.location.search,
      },
    });
  }

  const {
    login,
    logout,
    isLoading: isAuthLoading,
    user: kindeUser,
    getOrganization,
  } = useKindeAuth();
  const [user, setUser] = useState(undefined);

  useEffect(() => {
    if (!isAuthLoading && kindeUser) {
      setUser({
        name: `${kindeUser.given_name} ${kindeUser.family_name}`,
        email: kindeUser.email,
        family_name: kindeUser.family_name,
        given_name: kindeUser.given_name,
        picture: kindeUser.picture,
      });
    }
  }, [isAuthLoading, kindeUser]);

  if (!isAuthLoading && !kindeUser) {
    login({
      org_code: KINDE_ENVIRONMENT.KINDE_INRANGE_ORG_CODE,
      app_state: {
        redirectTo: window.location.pathname + window.location.search,
      },
    });
  }

The issue seems to be that somehow when I'm relying on a wildcard URL the Kinde SDK ends up in the state of isAuthLoading = false and kindeUser = undefined before the POST call to exchange the code for an auth token has completed. The issue appears to be the CORS headers returned to the OPTIONS request. These are the HTTP Response headers when I only have a wildcard domain configured:

HTTP/2 200 
access-control-allow-headers: *, Kinde-SDK
access-control-allow-methods: GET, POST
access-control-max-age: 1728000
alt-svc: h3=":443"; ma=2592000
content-type: text/plain; charset=utf-8
date: Wed, 20 Mar 2024 15:29:12 GMT
vary: Origin
content-length: 0
X-Firefox-Spdy: h2

HTTP/2 200 
access-control-allow-headers: *, Kinde-SDK
access-control-allow-methods: GET, POST
access-control-max-age: 1728000
alt-svc: h3=":443"; ma=2592000
content-type: text/plain; charset=utf-8
date: Wed, 20 Mar 2024 15:29:12 GMT
vary: Origin
content-length: 0
X-Firefox-Spdy: h2

These are the HTTP Response headers after I configure a non-wildcard domain:

HTTP/2 200 
access-control-allow-credentials: true
access-control-allow-headers: *, Kinde-SDK
access-control-allow-methods: GET, POST
access-control-allow-origin: https://admin-app-inrt-960-panel-change-fixes.inrange.dev
access-control-max-age: 1728000
alt-svc: h3=":443"; ma=2592000
content-type: text/plain; charset=utf-8
date: Wed, 20 Mar 2024 15:36:09 GMT
vary: Origin
content-length: 0
X-Firefox-Spdy: h2

HTTP/2 200 
access-control-allow-credentials: true
access-control-allow-headers: *, Kinde-SDK
access-control-allow-methods: GET, POST
access-control-allow-origin: https://admin-app-inrt-960-panel-change-fixes.inrange.dev
access-control-max-age: 1728000
alt-svc: h3=":443"; ma=2592000
content-type: text/plain; charset=utf-8
date: Wed, 20 Mar 2024 15:36:09 GMT
vary: Origin
content-length: 0
X-Firefox-Spdy: h2

The missing access-control-allow-origin header is what is blocking my request from succeeding in Firefox. This looks like a bug in your implementation setting CORS headers. @Dave - Kinde - do you have a timeline for when you'll be able to address this bug?

Oli - Kinde•3mo ago

Hey @Martin, Let me speak to my team and get back to you Hey Martin, We are still looking into your auto-directing issue. It's a public holiday here in Australia today, but we will continue to look into your issue tomorrow.

Martin•2mo ago

Thanks, I really appreciate the update @Oli - Kinde - has there been any progress on this issue? I'd love to eliminate the manual setup I'm having to do in the Kinde console every time I deploy a new QA env.

Oli - Kinde•2mo ago

Hi @Martin, I will get an update for you from my team tomorrow. Hey @Martin, I am discussing your issue with my teammate. I will get back to you once I have more information.

Martin•2w ago

@Oli - Kinde - has there been any progress with this issue? Actually, I can now see that this is fixed, so what I really mean is, thanks! ❤️ Nope, I was wrong, it's still broken, and now the form where I enter the redirect URLs is trying to restrict me to 255 characters of config, which means I can't enter all the redirect URLs I need to for all our various QA envs, so this is actually getting a bit worse.

Oli - Kinde•6d ago

Hi @Martin, My team is aware of an issue that is restricting callback URLs to 255 characters in the Kinde Admin, we are fixng this issue. This issue is only in the Kinde Admin UI. The callback API endpoint doesn't have this issue, there is a 1k callback limit in the API. In the meantime, are you able to configure callback URLs via the Kinde Management API? I will let you know when the issue is fixed in the Kinde Admin UI. Apologies for the inconvenience here.

Martin•5d ago

Thanks @Oli - Kinde. Do you have any updates on the timeline for fixing the original feature? I'd really love to use the wildcarding which was announced back at the start of February, but it seems to be entirely broken by the bug we've been discussing in this thread since then.

Oli - Kinde•3d ago

Hi @Martin, The callback issue restricting to 255 characters in the UI is now fixed. Regarding the callback issue originally mentioned in this thread. I will get an update for you on this issue from my team tomorrow. Hey @Martin, We have made a lot of changes over the past few months and my team want to resolve your issue, but we think it would be best to start from a clean slate. So can you please outline your current issue here and my team will look into it?

Martin•3d ago

@Oli - Kinde - I have sent you a long reply in a DM. I've done this in DM so that I can include full details of my Kinde application ID and an example full domain on which login isn't working. Can you please take a look and let me know if you have any questions?

Gaming

Programming

Wildcards in callback URLs bug