#Custom Login Form with Qwik-Auth Plugin

35 messages · Page 1 of 1 (latest)

nocturne willow
#

I don't think that is official, you would have to ask the author

worn crystal
#

I did but not getting any response

#

It does seem to be built in

nocturne willow
#

built in? how so

worn crystal
#

By that I mean I think it is official because if I recall correctly i didn’t need to install another package

#

I could be wrong about that

nocturne willow
#

How did you install it? Is it an npm package too?

worn crystal
#

That was the article I saw but I saw another article at some point that said it was an official thing

wraith wagon
#

Looks like @slender cosmos's repo.

slender cosmos
#

qwik-auth is an official package under the Qwik umbrella, but it's currently experimental and not officially released (you can find its code in the official Qwik repo). At the time being, there is an option to redirect to a custom login page using the pages configuration, but I couldn't figure out how to do the actual custom login with the current exposed actions. Maybe @olive laurel, who wrote the package, can share his thoughts on that.

slender cosmos
slender cosmos
worn crystal
rose minnow
#

This is a contrite example, but it works something like this.
in your authjs config

pages: {
  signIn: '/signin/',
  signOut: '/signout/',
}

and then your custom signin page

export default component$(() => {
  const signIn = useAuthSignin();
  return (
    <button
      class="flex items-center justify-center rounded bg-orange-500 px-4 py-2 text-white"
      disabled={signIn.isRunning}
      onClick$={() => signIn.run({ providerId: 'auth0', callbackUrl: '/' })}
    ></button>
  );
});
#

useAuthSignin is one of the new routeActions, so you could alternatively use it with <Form action={signIn}> instead.

#

you also have to keep in mind that @auth/core (AuthJS) is still under development itself. It's docs included. I've found that some of the configuration stuff isn't so defined on https://authjs.dev but you can find better documentation on https://next-auth.js.org

worn crystal
#

Thank you so much!

worn crystal
#

@rose minnow do you know how i would do it with the credentials provider?

worn crystal
#

More specifically how do I pass the users input (credentials) through the function?

rose minnow
#

adjusting for the nextiness of the example elsewhere probably too.

worn crystal
#

Thank you for your help and ideas - I’ll try this

worn crystal
#

This did not work... @olive laurel how can I implement this?

rose minnow
#

Do you have a repo? I can try to put something together. Your issue may be more authjs related than qwik.

worn crystal
#

I’ll dm the repo

worn crystal
worn crystal
#

Nothing helpful

slender cosmos
#

I gave it a try yesterday.
I used an example of how to create custom login page with Next (https://github.com/ndom91/next-auth-example-sign-in-page/blob/main/src/pages/auth/signin.js). As it seems in the custom page example, you need to trigger a request to /api/auth/callback/credentials with the csrf token and it should do the trick. Unfortunately, in all my tries it didn't work. I tried to put onPost in the custom login page route and use fetch api to call that endpoint, I tried to add that endpoint in QwikCity routing, but I don't know what to put in it (tried the onRequest the the authServer builder is providing and other things as well). There is probably something missing (an auth.js signin function that takes credentials and then redirects to the authorize function or something).

rose minnow
#

I don't think the current useAuthSignin will work, needs some changes. The plugin@auth file handles the /api/auth routes, you don't need to create anything. Doing a traditional html form post as described at https://next-auth.js.org/configuration/pages#credentials-sign-in will work. You can get a csrf token from /api/auth/csrf

Pages | NextAuth.js

NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.

thorny narwhal
#

@rose minnow I got this half-way working, get csrf tokens et al but when I POST to /api/auth/callback/credentials the request contains the signin page as text blob. The fetch is being redirected. Would you mind sharing the actual auth request your are making and your [email protected] so I can check if my configuration is wrong?

#

It looks like authorize() is never being called

rose minnow