使用Supabase Auth UI社交登录时如何隐藏邮箱/密码输入框？

快速解决方案：使用onlyProviders参数 #

你可以直接通过添加onlyProviders参数，让Auth组件只渲染指定的社交登录选项，自动隐藏邮箱密码输入框。修改后的组件代码如下：

<Auth
    supabaseClient={data.supabase}
    view="sign_in"
    onlyProviders={['google']}
    redirectTo={`${data.url}/logging-in?redirect=/`}
    showLinks={false}
    appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
    theme="dark"
/>

这个参数会强制组件仅展示你指定的Google登录按钮，不再显示密码登录表单。

深度自定义：手动实现社交登录 #

如果需要更灵活的界面控制，可以跳过Auth组件的默认UI，直接调用Supabase的OAuth登录方法自定义登录按钮：

1. 编写登录触发函数：

const handleGoogleLogin = async () => {
    await data.supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: `${data.url}/logging-in?redirect=/`
        }
    })
}

2. 渲染自定义登录按钮：

<button onClick={handleGoogleLogin} style={{ /* 自定义样式 */ }}>
    用Google登录
</button>

这种方式完全由你控制界面样式与逻辑，不会出现任何默认的输入框。

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