[✨]Could add an example of Auth.js that uses username+password?

[zwl1619]

Could add an example of Auth.js that uses username+password?
Seems many people have trouble with it.
There is an example that uses GitHub auth in the docs here: https://qwik.builder.io/docs/integrations/authjs/
But it's different from username+password.

[VarPDev]

I would like to work on this

[gioboa]

Thanks @VarPDev

[zwl1619]

@VarPDev That's great! Could use jwt instead of session?

[VarPDev]

@zwl1619 I saw there is a property you can change inside serverAuth$ named "session"

Example

export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } =
  serverAuth$(({ env }) => ({
    ...
   // with this I think you can use jwt instead session
    session: { strategy: "jwt" },
    providers: [
      ...
    ] as Provider[],
   ...
  }));

[zwl1619]

@VarPDev Thanks! Could you please use jwt in the username+ password example? Session has already been used in the github auth example, showing different ways is always better.

[VarPDev]

Auth.js says jwt is the default choice.

Auth.js libraries can create sessions using JSON Web Tokens (JWT). This is the default session strategy for Auth.js libraries.

Need to figure out if it is overridden by qwik or remains default jwt as in auth.js.
This would be best to ask someone who has worked on it: @gioboa do you know anyone who knows if jwt is used by default? At first look it seems to me that the default one is used.

[gioboa]

I don't have clue for that. if JWT is the default option, go for it.

[VarPDev]

@zwl1619

I did a PR to update the documentation.
For now here the example to use Credentials:

file: plugin@auth.ts

import { serverAuth$ } from "@builder.io/qwik-auth";
import type { Provider } from "@auth/core/providers";
import Credentials from "@auth/core/providers/credentials";

export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } =
  serverAuth$(({ env }) => ({
    secret: env.get("AUTH_SECRET"),
    trustHost: true,
    providers: [
      Credentials({
        async authorize(credentials, req) {
          // Add logic here to look up the user from the credentials supplied
          const user = {
            id: "1",
            name: "J Smith",
            email: "jsmith@example.com",
          };

          return user;
        },
      }),
    ] as Provider[],
  }));

file: sign.ts

import { component$ } from "@builder.io/qwik";
import { Form } from "@builder.io/qwik-city";
import { useAuthSignin } from "./plugin@auth";

export default component$(() => {
  const signIn = useAuthSignin();

  return (
    <>
      <Form action={signIn}>
        <input type="hidden" name="providerId" value="credentials" />
        <input
          type="hidden"
          name="options.callbackUrl"
          value="http://qwik-auth-example.com/dashboard"
        />
        <input name="options.email" type="email" />
        <input name="options.password" type="password" />
        <button>Sign In</button>
      </Form>
    </>
  );
});

[zwl1619]

Thanks very much!

[gioboa]

@zwl1619 did you try it?

[zwl1619]

@gioboa Not yet! I'll try it later.