如何让Supabase Auth UI默认显示注册界面而非登录界面？

要让Supabase Auth UI直接默认展示注册界面，只需给<Auth>组件添加initialView属性并设置为'sign_up'即可。

修改后的代码示例 #

在你的Register组件中，为Auth组件新增initialView="sign_up"配置：

import React from "react";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { useNavigate } from "react-router-dom";
import IconLogo from "../../img/brand/icononly_nobuffer.png";
import { Link } from "react-router-dom";
import { supabase } from "../../utils/supabase";

export default function Register() {
  const navigate = useNavigate();

  supabase.auth.onAuthStateChange(async (event, session) => {
    console.log("Auth state changed:", event);
    if (event === "SIGNED_IN" || event === "USER_UPDATED") {
      const { data, error } = await supabase
        .from("user_profile")
        .select("*")
        .eq("user_uid", session.user.id);

      if (error) {
        console.error("Error fetching user profile:", error);
      } else if (data.length === 0) {
        await supabase
          .from("user_profile")
          .insert([{ user_uid: session.user.id, email: session.user.email }]);
      }

      navigate("/profile");
    }
  });

  return (
    <>
      <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="w-full max-w-md space-y-8">
          <div>
            <Link to="/">
              <img
                className="mx-auto h-12 w-auto"
                src={IconLogo}
                alt="Your Company"
              />
            </Link>
            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
              Join GolfLists.com
            </h2>
            <p className="text-xs sm:text-sm text-gray-500 text-center pt-4">
              It's free to register for GolfLists.com Club and it takes 30
              seconds to sign up.
            </p>
          </div>
          <Auth
            supabaseClient={supabase}
            initialView="sign_up" // 新增配置：默认显示注册页面
            appearance={{
              theme: ThemeSupa,
              variables: {
                default: {
                  colors: {
                    brand: "#4f46e5",
                    brandAccent: "#4f46e5",
                  },
                },
              },
            }}
            theme="auto"
            providers={[]}
          />
          <p className="text-xs sm:text-sm text-gray-500 text-center">
            Tempted...but not sure it's for you yet? Read our
            <Link to="/blog" className="text-indigo-600">
              {" "}{"blog"}{" "}
            </Link>
            to get a feel for the site.
          </p>
        </div>
      </div>
    </>
  );
}

补充说明 #

initialView属性支持以下可选值：

• 'sign_in'：默认值，显示登录界面
• 'sign_up'：显示注册界面
• 'forgot_password'：显示忘记密码界面

设置后，用户访问该页面时会直接看到注册表单，无需手动切换，完全匹配你的需求。

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