使用Supabase Auth Helpers UI实现Google登录时，如何配置hd参数限制用户域名？

答案是肯定的，你可以通过在Supabase Auth的OAuth登录配置中传入Google的hd参数，结合后台二次校验，实现仅允许特定域名的Google账户登录。以下是具体实现方式：

一、在前端设置hd参数 #

不管你用Supabase Auth UI组件还是手动调用Auth Helpers的登录方法，都能传入hd参数来限制Google OAuth的域名范围：

1. 手动调用signInWithOAuth（Auth Helpers方式） #

初始化Supabase客户端后，在signInWithOAuth的选项中添加queryParams：

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

const supabase = createClientComponentClient();

const handleGoogleLogin = async () => {
  await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      queryParams: {
        hd: 'your-target-domain.com' // 替换为你要限制的域名
      }
    }
  });
};

2. 使用Auth UI组件 #

在Auth组件的options中传入queryParams，指定hd参数：

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';

const supabase = createClientComponentClient();

export default function LoginPage() {
  return (
    <Auth
      supabaseClient={supabase}
      appearance={{ theme: ThemeSupa }}
      providers={['google']}
      options={{
        queryParams: {
          hd: 'your-target-domain.com'
        }
      }}
    />
  );
}

设置后，用户点击Google登录按钮时，会直接跳转到限定域名的Google OAuth页面，非目标域名的账户无法登录。

二、后台二次校验（必做） #

前端参数存在被篡改的风险，因此必须在Supabase后台添加校验逻辑，确保只有目标域名的用户能完成登录：

1. 登录Supabase Dashboard，进入Auth > Policies > Hooks
2. 创建beforeSignIn钩子，添加以下SQL代码：

BEGIN
  -- 检查用户邮箱域名是否匹配目标域名
  IF split_part(new.email, '@', 2) != 'your-target-domain.com' THEN
    RETURN NULL; -- 拒绝不符合条件的登录请求
  END IF;
  RETURN new;
END;

这个钩子会在用户登录完成前触发，强制校验邮箱域名，彻底拦截非目标域名的用户。

总结 #

• 前端通过queryParams传入hd参数，引导Google OAuth限制登录范围
• 后台添加beforeSignIn钩子做二次校验，避免前端参数被篡改绕过限制

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