基于Qwik-auth插件实现Qwik自定义登录页面

1. 配置AuthJS指定自定义登录页路径 #

在项目的auth.ts（或对应Auth配置文件）中，修改AuthJS配置，添加pages字段指定自定义登录页的路由，系统会自动跳过默认的简陋表单，跳转到你的自定义页面：

export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } = createQwikAuth({
  providers: [
    Credentials({
      credentials: {
        email: { label: "邮箱", type: "email" },
        password: { label: "密码", type: "password" }
      },
      async authorize(credentials) {
        // 这里编写用户校验逻辑，比如查询数据库验证账号密码
        const user = await validateUser(credentials.email, credentials.password);
        return user ?? null;
      }
    })
  ],
  // 指定自定义登录页的路由路径
  pages: {
    signin: '/login'
  }
});

2. 创建自定义登录组件 #

在src/routes/login/index.tsx（对应上面配置的/login路由）中编写自定义登录表单，用Qwik的方式处理表单提交：

import { component$, useStore } from '@builder.io/qwik';
import { useNavigate } from '@builder.io/qwik-city';

export default component$(() => {
  const navigate = useNavigate();
  const formData = useStore({ email: '', password: '' });
  const error = useStore({ message: '' });

  const handleSubmit$ = async (e: Event) => {
    e.preventDefault();
    error.message = '';

    try {
      // 向AuthJS的credentials登录端点发送POST请求
      const response = await fetch('/api/auth/signin/credentials', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          email: formData.email,
          password: formData.password,
          // 必须携带该参数，指定登录成功后的跳转目标
          callbackUrl: '/'
        })
      });

      if (response.ok) {
        // 登录成功，跳转到目标页面
        navigate(await response.text());
      } else {
        // 处理登录失败场景
        const data = await response.json();
        error.message = data.error || '登录失败，请检查账号密码';
      }
    } catch (err) {
      error.message = '网络错误，请稍后重试';
    }
  };

  return (
    <div class="login-container">
      <h1>自定义登录页</h1>
      {error.message && <p class="error-text">{error.message}</p>}
      <form onSubmit$={handleSubmit$}>
        <div class="form-group">
          <label>邮箱</label>
          <input
            type="email"
            bind:value={formData.email}
            required
            class="form-input"
          />
        </div>
        <div class="form-group">
          <label>密码</label>
          <input
            type="password"
            bind:value={formData.password}
            required
            class="form-input"
          />
        </div>
        <button type="submit" class="submit-btn">登录</button>
      </form>
    </div>
  );
});

3. 其他身份提供商的适配 #

如果使用Google、GitHub等第三方登录，自定义登录页可通过useAuthSignin钩子生成对应提供商的登录链接：

const signin = useAuthSignin();
// 生成Google登录跳转链接
const googleSignInUrl = await signin('google', { callbackUrl: '/' });

内容的提问来源于stack exchange，提问作者PiWizard3852