Supabase Auth UI: show the sign up UI not the sign in UI?

Question

I am using Supabase Auth UI as the login / sign up auth provider for my website.

Currently the Auth UI always shows the login button. I can get onto the sign up UI by clicking "Don't have an account? Sign up" successfully. All the log in and sign up works technically, but I want to be able to show the sign up page (e.g. for my sign up button) so that a user doesn't think they are registering and have to re-do their details when they realise they are trying to sign in.

Seems a no brainer to allow me to control which bit of the UI shows, but I can't find a way to do it?

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}
            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>
    </>
  );
}

Answer 1

If you only want to show the sign up view you can pass that as a value to the component as a prop.

<Auth
  supabaseClient={supabase}
  view="sign_up"
/>