Kinde•2mo ago

Custom sign in page content applying inconsistently

New kinde user here. I've set up a local sveltekit app and installed the sveltekit sdk. The actual auth is working fine, however I just can't seem to get the custom page content labels to apply consistently across browsers. In the firefox screenshot you can see my custom labels ("custom heading", "custom description", Email lbl" and "Continue btn"). In the Edge screenshot they appear to be system assigned labels. The reason I'm using Edge? I downloaded and installed it purely to try a completely fresh browser, in case there was some weird caching going on in chrome. In addition the text in edge appears to be for the "Email + code " flow, whereas I'm using the "email + password" flow. In both browsers, entering a valid email correctly leads to a page prompting for the password. I've also included a screenshot from the admin dashboard shoing my custom labels. thanks!

5 Replies

Claire Mahoney•2mo ago

Hi there, Thanks for reaching out. I understand that in Firefox you see your custom labels (like "custom heading," "custom description," etc.), but in Edge you’re seeing system defaults and even labels that suggest an "Email + code" flow—even though your flow is set to "Email + password." Let’s try to narrow down the issue: 1. Even with a fresh install, sometimes browsers might retain certain cached data or stored state (like cookies or localStorage values) that could override your custom content. Have you tried completely clearing Edge’s cache and cookies or using an incognito/private window? 2. Could you double-check that the SDK version you’re using is the latest? Also, ensure that your SvelteKit app is correctly passing the custom content configuration on each load. Sometimes, a minor discrepancy in configuration might trigger a fallback to default labels. 3. It’s curious that Edge appears to trigger the "Email + code" labels. This might indicate that Edge is somehow receiving a different parameter or state. It could be useful to inspect the network requests (via DevTools) on Edge to verify that your app is fetching the correct configuration from your backend/dashboard. 4. Make sure there aren’t any differences in how the app is being loaded in Edge versus Firefox (e.g., query parameters or other environmental factors) that might influence the flow. If possible, logging the configuration right before rendering the sign-in page could help confirm that the custom labels are correctly loaded. If these steps don’t resolve the issue, please share any error logs or additional observations from Edge, and we can dive deeper.

ayenOP•2mo ago

Thanks. 1. I did not even have edge installed on my computer at all. I downloaded and installed it for the first time. 2. "@kinde-oss/kinde-auth-sveltekit": "^2.1.0". How do I check the passing of the config? Do you mean the env variables? 3. happy to do this. But unsure what to actually look for in the request?

Claire Mahoney•2mo ago

Hi Ayen,
When I mention “checking the passing of the config,” I mean verifying that your SvelteKit app is loading and using your custom configuration (including your custom labels) correctly. Here are a few steps you can take: 1. Ensure that your environment variables (or however you’re passing your config) are correctly set up. For example, if you’re using something like:

   const kindeAuth = createKindeAuth({
       clientId: import.meta.env.VITE_KINDE_CLIENT_ID,
       // ...other config,
       customLabels: {
           heading: "custom heading",
           description: "custom description",
           emailLabel: "Email lbl",
           continueBtn: "Continue btn"
       }
   });

   const kindeAuth = createKindeAuth({
       clientId: import.meta.env.VITE_KINDE_CLIENT_ID,
       // ...other config,
       customLabels: {
           heading: "custom heading",
           description: "custom description",
           emailLabel: "Email lbl",
           continueBtn: "Continue btn"
       }
   });

Double-check that these values are correctly defined and accessible in your code. 2. Before initializing the SDK, add a temporary console.log() to confirm that the custom labels are present in the configuration object. For example:

   console.log("Kinde config:", {
       clientId: import.meta.env.VITE_KINDE_CLIENT_ID,
       customLabels: {
           heading: "custom heading",
           description: "custom description",
           emailLabel: "Email lbl",
           continueBtn: "Continue btn"
       }
   });

   console.log("Kinde config:", {
       clientId: import.meta.env.VITE_KINDE_CLIENT_ID,
       customLabels: {
           heading: "custom heading",
           description: "custom description",
           emailLabel: "Email lbl",
           continueBtn: "Continue btn"
       }
   });

This log will help you verify that the right configuration is being passed in all environments. 3. Open Edge’s developer tools (F12) and check the network tab. Look for any requests related to fetching sign-in page configurations from Kinde. Verify that the responses include your custom label settings. This can help ensure that the backend isn’t returning default values. 4. Since Edge was a fresh install, it’s less likely a caching issue, but it’s still worth doing a hard refresh (Ctrl+F5) or checking in a private window to rule out any leftover data.
Let me know what you find or if you have any further questions

ayenOP•2mo ago

are you a AI? can a human look at this? The custom labels are coming from the dashboard, not my code

Claire Mahoney•2mo ago

Hi Ayen, I’m a support representative here to assist you. I understand your concern regarding the custom labels, especially since they are configured through the dashboard rather than directly in your code. To help troubleshoot this issue, here are a few steps we can check together: • Please ensure that your custom labels are correctly saved and published for the "Email + Password" flow in the dashboard. Occasionally, multiple enabled flows can cause discrepancies. • Using Edge's developer tools, inspect the network requests to verify whether the configuration response includes your custom labels. This will help determine if the correct settings are being fetched or if the system is defaulting to standard labels. • Even though Edge was a fresh install, I recommend performing a hard refresh or opening a private browsing window to eliminate any potential caching issues. If the issue persists, please share any logs or screenshots (particularly those showing the network response with the configuration data), and I will escalate this to our engineering team for further investigation. Let me know how it goes, and I’ll be happy to assist further. Hi Ayen, I’m a support representative here to assist you. I understand your concern regarding the custom labels, especially since they are configured through the dashboard rather than directly in your code. To help troubleshoot this issue, here are a few steps we can check together: • Please ensure that your custom labels are correctly saved and published for the "Email + Password" flow in the dashboard. Occasionally, multiple enabled flows can cause discrepancies. • Using Edge's developer tools, inspect the network requests to verify whether the configuration response includes your custom labels. This will help determine if the correct settings are being fetched or if the system is defaulting to standard labels. • I recommend performing a hard refresh or opening a private browsing window to eliminate any potential caching issues. If the issue persists, please share any logs or screenshots (particularly those showing the network response with the configuration data), and I will escalate this to our engineering team for further investigation. Let me know how it goes, and I’ll be happy to assist further.

Gaming

Programming

Custom sign in page content applying inconsistently

Did you find this page helpful?