Kinde•7mo ago

Session Storage Cleared before Callback

Kinde SDK: TS, Version: ^2.3.0, Framework: Astro w/ React (shadcn ui) Hello, first of all, love the idea behind kinde and really want to get this working. A quick preface: I am mainly a backend developer trying to get a front-end up and going. I don't have a bunch of experience with js, ts, and the ever evolving front-end ecosystem. I added all the functions I needed to a src/kinde/client.ts + for different routes i use the methods defined in a <script> tag (I can eventually just setup api routes, but this is just easier for me now, maybe this the issue??). My login route /auth/login is basically just this (i really don't know if this is stupid, maybe it is lol)

<script>
  import { handleLogin } from "@/kinde/client"
  handleLogin()
</script>

<script>
  import { handleLogin } from "@/kinde/client"
  handleLogin()
</script>

and my callback route /auth/callback looks like this:

// src/pages/auth/callback.astro
<script>
  import { handleRedirect } from "@/kinde/client"
  handleRedirect()
</script>

// src/pages/auth/callback.astro
<script>
  import { handleRedirect } from "@/kinde/client"
  handleRedirect()
</script>

And my client looks like this:

// src/kinde/client.ts
export const kindeClient = createKindeBrowserClient({
  authDomain: "xxxx",
  clientId: "xxxxx",
  logoutRedirectURL: "xxxx",
  redirectURL: "http://localhost:4321/auth/callback",
})

// ... other funcs

export async function handleLogin() {
  const url = await kindeClient.login()
  // Redirect
  window.location.href = url.toString()
}

// src/kinde/client.ts
export const kindeClient = createKindeBrowserClient({
  authDomain: "xxxx",
  clientId: "xxxxx",
  logoutRedirectURL: "xxxx",
  redirectURL: "http://localhost:4321/auth/callback",
})

// ... other funcs

export async function handleLogin() {
  const url = await kindeClient.login()
  // Redirect
  window.location.href = url.toString()
}

Looking at the Session Storage a KV pair gets populated and disappears right during/after the /auth/callback redirect from a successful Kinde login. Further attempts to call kindeClient.isAuthenticated() return false (obviously nothing in storage, just confirming it didn't work) Anyone think they could help me figure this out? Really excited to get this just up so I can focus on the actual app/service itself... and so i can get out of front-end hell and back to back-end bliss 😉 Love the product, look forward to getting this working. Very excited to try M2M auth next. Best, Max

4 Replies

mnewcomer•7mo ago

For some further context. After the Session Storage get's cleared out, my Browser Cookies get populated with enduser_session_id and kbtc keys with domain set to .auth.xxxx.com. These cookies disappear on redirect/refresh but not navigation.... which might suggest some sort of state issue with how I have astro set up?? I don't have the expertise to say for sure.
Something that is a little odd is that when I handleLogin after already being authenticated, Kinde doesn't force me to log back in: implying that my tokens are stored successfully somewhere, but I can't find where. Still issue persits of once logged in. Expected isAuthenticated() -> true but it returns false...

Oli - Kinde•7mo ago

Hey @mnewcomer! Thanks for your love and support of Kinde. It seems like you're on the right track with setting up Kinde in your Astro project. However, there are a few things that might be causing the issue. Firstly, it's important to note that the Kinde client needs to be initialized and used in a way that it can maintain its internal state across different routes and components. This is typically done by wrapping your application in a provider component, as shown in the NextJS SDK documentation. However, since you're using Astro, which doesn't currently support React Context, you might need to find a different way to maintain state across your application. Secondly, the disappearing session storage and cookies might be due to the page refreshes that occur during the authentication process. When the page is refreshed, all JavaScript state is lost, including the state of the Kinde client. This is why it's important to initialize the Kinde client in a way that it can maintain its state across page refreshes. Lastly, the isAuthenticated() method checks if there's a valid session in the Kinde client's state, not if there are valid tokens stored somewhere. If the Kinde client's state is lost due to a page refresh, isAuthenticated() will return false, even if there are valid tokens stored in cookies or session storage. Unfortunately, without a way to maintain state across your application, it might be difficult to get the Kinde client working as expected in your Astro project. You might need to consider using a different framework that supports state management across components, like React or Vue, or wait until Astro adds support for React Context or a similar state management solution. I hope this helps! Let me know if you have any other questions.

mnewcomer•7mo ago

@Oli - Kinde Super super useful information. I'll check out those NextJS docs and try to get something similar working with Astro. Also pretty new to Astro so should be a great opportunity to learn about their state management. Thank you so much for putting in the time to get back to me. Hope you have a great rest of your day.

Oli - Kinde•7mo ago

No worries at all. Please let me know if you have any other questions.

Gaming

Programming

Session Storage Cleared before Callback