如何在Supabase Auth UI中单独隐藏忘记密码链接？

如果不想用hideLinks属性隐藏所有链接，只单独移除“忘记密码”选项，有两种可靠方案：

方案一：CSS精准隐藏 #

利用浏览器开发者工具定位“忘记密码”链接的DOM元素类名，然后通过CSS设置display: none隐藏它。

比如针对Supabase官方的Auth UI组件，常见的选择器可以是：

/* 定位登录表单底部的忘记密码链接并隐藏 */
.auth-ui-footer .auth-ui-link:nth-of-type(2) {
  display: none;
}

如果类名有差异，直接右键点击页面上的“忘记密码”链接，选择“检查”查看元素的具体类名，调整选择器即可。

方案二：自定义组件渲染（以React为例） #

通过Auth组件的render回调，自定义登录表单的底部区域，完全控制显示的链接内容：

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

function YourAuthComponent() {
  return (
    <Auth
      supabaseClient={yourSupabaseClient}
      appearance={{ theme: ThemeSupa }}
      providers={['email']}
      render={({ providers, ...props }) => {
        // 自定义登录表单，替换底部区域
        return (
          <props.LoginForm
            {...props}
            providers={providers}
            renderFooter={() => {
              // 这里可以只保留需要的链接（比如注册链接），或者直接返回null隐藏所有底部链接
              return <a onClick={props.goToSignup}>注册账号</a>;
            }}
          />
        );
      }}
    />
  );
}

这种方式更灵活，能完全掌控UI内容，适合需要自定义底部区域的场景。

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