Vite SPA gets stuck in redirect loop

[tarunaersys]

I followed the setup guide from the docs, and everything was working fine until recently. I don't think I've changed any code related to oidc-spa or auth in general, but for some reason my app now gets stuck in a redirect loop after signing in; I get redirected to my keycloak instance, which redirects me back to my app, ad infinitum. I honestly have no idea what I could be doing wrong, so I'm opening an issue here after searching the internet for answers. Could I get some help?

Error message I see in the console:

POST https://auth.aersys.io/realms/aersys/protocol/openid-connect/token 401 (Unauthorized)
auth.ts:4 OIDC initialization error of type "unknown": Invalid client or Invalid client credentials

My oidc setup code:

import { createReactOidc } from "oidc-spa/react";
import { z } from "zod";

export const { OidcProvider, useOidc, prOidc } = createReactOidc({
  issuerUri: import.meta.env.VITE_OIDC_ISSUER,
  clientId: import.meta.env.VITE_OIDC_CLIENT_ID,
  publicUrl: import.meta.env.BASE_URL,
  decodedIdTokenSchema: z.object({
    name: z.string(),
    preferred_username: z.string(),
    given_name: z.string(),
    family_name: z.string(),
    email: z.string(),
  })
});

Something I noticed as well is that in the local storage for my website, when this redirect loop happens, there are always a couple of items with oidc.<random id> key that keeps disappearing and getting recreated. I've uploaded a video here of what the local storage looks like during redirect loop, maybe that'll help in diagnosing the issue:

https://github.com/keycloakify/oidc-spa/assets/129893318/aac59a41-dcb8-489a-83fb-9f740bc016fd

Thanks in advance for looking at this.

[garronej]

Hello @tarunaersys,
Sure I can look at it but I haven't enough information here.
Is this an issue that appeared after updating oidc-spa? Are you using the last version of oidc-spa?
Can you produce a reproduction repo? If not, what client side routing library are you using (react-router, tanstack...)? Where and how do you call the login function ?

Sory for the inconveignence we're going to figure this out

[tarunaersys]

Hi @garronej

• Is this an issue that appeared after updating oidc-spa?
• Are you using the last version of oidc-spa?
  • No to both questions, I have been on version 4.6.2 since it was released
• Can you produce a reproduction repo?
  • I can try, but currently don't have one. I will link one if/once it's ready
• If not, what client side routing library are you using (react-router, tanstack...)? Where and how do you call the login function ?
  • I am using tanstack router, and I call the login function in the beforeLoad of my root route. This is because my entire application needs to be login protected. But now that I think about it, could this be causing the redirect loop?

my tanstack root route setup:

import { prOidc } from "@/auth";

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <Toaster />
    </>
  ),
  beforeLoad: async () => {
    const oidc = await prOidc;
    if (oidc.isUserLoggedIn) {
      return null;
    }
    await oidc.login({
      doesCurrentHrefRequiresAuth: true,
    });
  },
});

[garronej]

Ok thanks for the informations.

Can you try upgrading to oidc-spa 4.8.0 and see if the issue is still there?
Also the latest version provide much better error messages.

If it does not solve the issue we can have a quick screen sharing session on Discord or you can produce a repoduction repo and I can look at it on my end.

https://discord.gg/mJdYJSdcm4

[tarunaersys]

Sorry for the trouble. It seemed to be an issue with how I deployed my AWS lambda functions, not related to oidc-spa at all. Thank you for the help however 🙏 the error messages on the latest version are indeed more helpful.

[garronej]

Great!