K
Kinde6mo ago
Martin

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.
21 Replies
onderay
onderay6mo 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
Martin6mo ago
I'm using React and these are my callback URLs:
No description
Martin
Martin6mo 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
onderay6mo ago
Sorry @Martin for the delay, the team is still looking into what might be happening here.
Martin
Martin6mo 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
onderay6mo 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
Martin5mo 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?
No description
Martin
Martin5mo ago
I'm currently using: * @kinde-oss/kinde-auth-pkce-js@3.0.26 * @kinde-oss/kinde-auth-react@3.0.23
onderay
onderay5mo ago
Sorry about the delay @Martin we are looking into this for you.
dave_kinde
dave_kinde5mo 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
Martin5mo 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
Oli - Kinde4mo 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
Martin4mo 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
Oli - Kinde4mo 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
Martin2mo 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
Oli - Kinde2mo 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
Martin2mo 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
Oli - Kinde2mo 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
Martin2mo 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? @Oli - Kinde - have you had a reply from your team about this bug? @Oli - Kinde - Has there been any update on this issue?
Oli - Kinde
Oli - Kinde2mo ago
Hey @Martin, Sorry for the delayed response here. I am going to be completely transparent here. This issue does not come up with any others customers and is extremely difficult for us to replicate. So we cannot prioritise this issue right now. When we can easily reproduce this issue, we will look into it again.
Martin
Martin2mo ago
Thanks for the response! I've sent you a couple of DMs with more details.