Auth.js works in Qwik in dev mode but fails when building

[hollow trench]

I want to use auth.js in my Qwik app. This is my [email protected] file:

import { serverAuth$ } from '@builder.io/qwik-auth';
import Keycloak from "@auth/core/providers/keycloak";

const {
    onRequest,
    useAuthSession,
    useAuthSignin,
    useAuthSignout,
} = serverAuth$(({ env }) => ({
    secret: env.get("AUTH_SECRET"),
    trustHost: true,
    providers: [
        Keycloak({
            clientId: 'Site',
            clientSecret: env.get('KEYCLOAK_CLIENT_SECRET'),
            issuer: env.get('KEYCLOAK_ISSUER')
        }),
    ],
}));

export { onRequest }
export { useAuthSession }
export { useAuthSignin }
export { useAuthSignout }

I have figured it out from combining docs of Qwick and auth.js.

It works great in the development mode. I have made a test page where I have a sign-in button, and when user logs in, I show him his email and the sign-out button.

However, when I run npm run build I get this error:

src/routes/[email protected](13,9): error TS2322: Type 'OAuthConfig<KeycloakProfile>' is not assignable to type 'Provider'.
  Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'Provider'.
    Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'OIDCConfig<Profile> & InternalProviderOptions'.
      Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'OIDCConfig<Profile>'.
        Type 'Profile' is missing the following properties from type 'KeycloakProfile': exp, iat, auth_time, jti, and 14 more.
src/routes/[email protected](15,13): error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

I searched that TS2322 error, and added as string to the end of env.get('KEYCLOAK_CLIENT_SECRET') and env.get('KEYCLOAK_ISSUER').

I don't understand why npm run build on the same dev machine fails. I don't know why Qwik or TypeScript behaves differently for dev and build under the same conditions.

However, when I add as string I get this error:

src/routes/[email protected](13,9): error TS2322: Type 'OAuthConfig<KeycloakProfile>' is not assignable to type 'Provider'.
  Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'Provider'.
    Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'OIDCConfig<Profile> & InternalProviderOptions'.
      Type 'OIDCConfig<KeycloakProfile>' is not assignable to type 'OIDCConfig<Profile>'.
        Type 'Profile' is missing the following properties from type 'KeycloakProfile': exp, iat, auth_time, jti, and 14 more.

If those 14 parameters are missing, then how it works in the npm run dev mode?

What can I do at this point?

[molten granite]

Interesting @tepid olive

https://github.com/nextauthjs/next-auth/issues/6174

It my be unrelated but worth to look it

[brave saffron]

Yeah, it's not typed correctly. Try adding as Provider[] to the end of your providers definition as show in the github example. https://qwik.builder.io/docs/integrations/authjs/#examples.

Also if you want to save some lines of code you can simply export the initial consts rather than defining them and then exporting them. export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } = serverAuth$

[tepid olive]

cc @north spire ^ cool social media picture haha

right @brave saffron ! but it's lame to ask developers to bypass the typechecking using as Provider[] it's shocking this is not getting fixed upstream

[ornate heron]

I used auth.js for 1.5 years in a nextjs project and to say it was stable would be an understatement

Just make sure you pin down versions to known working ones.