如何使用@supabase/auth-ui-react实现独立的登录与注册视图

核心方案：利用Auth组件的view属性 #

@supabase/auth-ui-react的Auth组件支持通过view属性直接指定要渲染的认证视图，你可以分别设置view="sign_in"和view="sign_up"来实现独立的登录和注册表单。

1. 创建独立的登录/注册组件 #

拆分出两个独立组件，分别对应登录和注册逻辑：

登录组件（SignInForm.tsx）

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

export default function SignInForm() {
  const supabase = createClientComponentClient<Database>()

  return (
    <Auth
      supabaseClient={supabase}
      view="sign_in" // 指定登录视图
      appearance={{ theme: ThemeSupa }}
      theme="dark"
      showLinks={true} // 显示跳转到注册的默认链接
      providers={[]}
      redirectTo="http://localhost:3000/auth/callback"
    />
  )
}

注册组件（SignUpForm.tsx）

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

export default function SignUpForm() {
  const supabase = createClientComponentClient<Database>()

  return (
    <Auth
      supabaseClient={supabase}
      view="sign_up" // 指定注册视图
      appearance={{ theme: ThemeSupa }}
      theme="dark"
      showLinks={true} // 显示跳转到登录的默认链接
      providers={[]}
      redirectTo="http://localhost:3000/auth/callback"
    />
  )
}

2. 在页面中分别引入对应组件 #

在Next.js中，你可以创建两个独立页面，分别挂载登录和注册组件：

登录页面（app/sign-in/page.tsx）

import SignInForm from '@/components/SignInForm'

export default function SignInPage() {
  return (
    <div className="row">
      <div className="col-6">
        <h1 className="text-black dark:text-white header">登录</h1>
        <p className="text-black dark:text-gray-300">
          输入账号信息登录系统
        </p>
      </div>
      <div className="col-6 auth-widget">
        <SignInForm />
      </div>
    </div>
  )
}

注册页面（app/sign-up/page.tsx）

import SignUpForm from '@/components/SignUpForm'

export default function SignUpPage() {
  return (
    <div className="row">
      <div className="col-6">
        <h1 className="text-black dark:text-white header">注册</h1>
        <p className="text-black dark:text-gray-300">
          创建新账号开始使用服务
        </p>
      </div>
      <div className="col-6 auth-widget">
        <SignUpForm />
      </div>
    </div>
  )
}

3. 同一组件内切换登录/注册视图 #

如果希望在同一个组件内实现视图切换，可通过React状态管理控制view属性：

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

export default function AuthForm() {
  const [currentView, setCurrentView] = useState<'sign_in' | 'sign_up'>('sign_in')
  const supabase = createClientComponentClient<Database>()

  return (
    <>
      <div className="flex gap-2 mb-4">
        <button 
          onClick={() => setCurrentView('sign_in')}
          disabled={currentView === 'sign_in'}
          className="px-4 py-2 rounded"
        >
          登录
        </button>
        <button 
          onClick={() => setCurrentView('sign_up')}
          disabled={currentView === 'sign_up'}
          className="px-4 py-2 rounded"
        >
          注册
        </button>
      </div>
      <Auth
        supabaseClient={supabase}
        view={currentView}
        appearance={{ theme: ThemeSupa }}
        theme="dark"
        showLinks={false} // 隐藏默认切换链接，使用自定义按钮
        providers={[]}
        redirectTo="http://localhost:3000/auth/callback"
      />
    </>
  )
}

补充说明 #

Auth组件的view属性支持的取值包括：sign_in、sign_up、magic_link、forgot_password、update_password等，这些选项可在官方文档的API参考部分找到详细定义。

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